Get dashboard with rudimentary info for activity. Make user create page - still non-functional but fields are there

Author: mastacontrola

api/controllers/pages/create/users.js

@@ -0,0 +1,100 @@
+const fs = require('fs-extra'),
+  path = require('path'),
+  partialPath = path.join(__dirname, '..', '..', '..','views','pages','partials','create');
+module.exports = {
+  friendlyName: 'View users create',
+  description: 'Display "users create" page.',
+  exits: {
+    success: {
+      viewTemplatePath: 'pages/create'
+    }
+  },
+  fn: async function () {
+    let req = this.req,
+      res = this.res,
+      data = {
+        model: 'user',
+        header: 'Create New User',
+        formItems: {
+          displayname: {
+            textarea: false,
+            text: 'Display Name',
+            type: 'text',
+            id: 'displayname',
+            classes: ['displayname'],
+            placeholder: 'Supercool Dude'
+          },
+          username: {
+            textarea: false,
+            text: 'Username',
+            type: 'text',
+            id: 'username',
+            classes: ['username'],
+            placeholder: 'sdude'
+          },
+          emailaddress: {
+            textarea: false,
+            text: 'Email Address',
+            type: 'text',
+            validations: {
+              minLength: 5,
+              regex: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+            },
+            id: 'emailaddress',
+            classes: [],
+            placeholder: '[email protected]'
+          },
+          password: {
+            textarea: false,
+            text: 'Password',
+            type: 'password',
+            id: 'password',
+            classes: [],
+            validations: {
+              minLength: 8,
+              regex: /(?=.*){8,}/
+            },
+            placeholder: '********'
+          },
+          passwordconf: {
+            textarea: false,
+            text: 'Password (confirm)',
+            type: 'password',
+            id: 'passwordconf',
+            classes: [],
+            validations: {
+              minLength: 8,
+              regex: /(?=.*){8,}/
+            },
+            placeholder: '********'
+          }
+        },
+        formButtons: {
+          Cancel: {
+            classes: ['btn-warning','float-left'],
+            type: 'submit'
+          },
+          Create: {
+            classes: ['btn-success','float-right'],
+            type: 'submit'
+          }
+        },
+        partialname: false
+      },
+      partial = path.join(partialPath, `${data.model}.js`);
+    data.title = `Create New ${data.model.charAt(0).toUpperCase() + data.model.slice(1)}`,
+    data.form = await sails.helpers.formGenerator.with({
+      model: data.model,
+      method: 'post',
+      action: `/${data.model}s/create`,
+      id: `${data.model}-create`,
+      classes: [`${data.model}-create-form`],
+      formItems: data.formItems,
+      formButtons: data.formButtons
+    });
+    if (fs.existsSync(partial)) {
+      data.partialname = partial;
+    }
+    return data;
+  }
+};

api/controllers/pages/dashboard.js

@@ -24,7 +24,10 @@ module.exports = {
       webserver = false,
       uptime = await si.time().uptime * 1000,
       loadaverage = await si.currentLoad(),
-      legend = [];
+      legend = [],
+      staged=3,
+      active=6,
+      avail=(10 - (staged + active));
 
     loadaverage = loadaverage.avgload;
     uptime = moment.duration(uptime);
@@ -66,7 +69,10 @@ module.exports = {
         legend,
         webserver,
         loadaverage,
-        uptime
+        uptime,
+        avail: avail,
+        staged: staged,
+        active: active
       });
     });
     // Respond with view.

api/helpers/form-generator.js

@@ -110,7 +110,7 @@ module.exports = {
       if (input.placeholder) {
         iPlaceholder = ` placeholder="${input.placeholder}"`;
       }
-      if (input.validations || obj.validations) {
+      if (input.validations || (typeof obj !== 'undefined' && obj.validations)) {
         if (input.validations) {
           if (input.validations.maxLength) {
             iMaxlength = ` maxlength="${input.validations.maxLength}"`;
@@ -122,7 +122,7 @@ module.exports = {
             iRegex = ` regex="${input.validations.regex}"`;
           }
         }
-        if (obj.validations) {
+        if (typeof obj !== 'undefined' && obj.validations) {
           if (obj.validations.maxLength) {
             iMaxlength = ` maxlength="${obj.validations.maxLength}"`;
           }

config/routes.js

@@ -95,6 +95,8 @@ module.exports.routes = {
 
   // User Views
   'GET /users':                              {action: 'pages/list/users'},
+  'GET /users/create':                       {action: 'pages/create/users'},
+  'POST /users/create':                      {action: 'general/create'},
   'GET /user/me':                            {action: 'user/listme'},
 
   // Workflow Views

views/pages/dashboard.ejs

@@ -57,6 +57,12 @@
                   <h3 class="card-title">Activity</h3>
                 </div>
                 <div class="card-body">
+                  <div class="chart-responsive">
+                    <input type="hidden" id="avail" value="<%= avail %>">
+                    <input type="hidden" id="staged" value="<%= staged %>">
+                    <input type="hidden" id="active" value="<%= active %>">
+                    <canvas id="activityUsage" class="chartjs-render-monitor"></canvas>
+                  </div>
                 </div>
               </div>
             </div>

views/pages/partials/dashboard.js

@@ -2,7 +2,65 @@
   let free = $('#free').val(),
     used = $('#used').val(),
     hFree = $.readableBytes(free),
-    hUsed = $.readableBytes(used);
+    hUsed = $.readableBytes(used),
+    qavail = $('#avail').val(),
+    qstaged = $('#staged').val(),
+    qactive = $('#active').val();
+  // Activity Usage
+  let activeUsageCanvas = $('#activityUsage').get(0).getContext('2d'),
+    activeUsageData = {
+      labels: [
+        `Available: ${qavail}`,
+        `Active: ${qactive}`,
+        `Staged: ${qstaged}`
+      ],
+      datasets: [
+        {
+          data: [
+            qavail,
+            qactive,
+            qstaged
+          ],
+          backgroundColor: [
+            '#28a745',
+            '#dc3545',
+            '#007bff'
+          ]
+        }
+      ]
+    },
+    activeUsageOpts = {
+      responsive: true,
+      plugins: {
+        labels: {
+          reder: 'percentage',
+          precision: 0,
+          fontColor: '#ffffff',
+          fontSize: 12
+        }
+      },
+      legend: {
+        position: 'bottom'
+      },
+      tooltips: {
+        callbacks: {
+          label: function(tooltipItem, data) {
+            var dataset = data.datasets[tooltipItem.datasetIndex];
+            var meta = dataset._meta[Object.keys(dataset._meta)[0]];
+            var total = meta.total;
+            var currentValue = dataset.data[tooltipItem.index];
+            var percentage = parseFloat((currentValue/total*100).toFixed(1));
+            var hText = $.readableBytes(currentValue);
+            return `${hText} (${percentage}%)`;
+          },
+        }
+      }
+    },
+    activeUsageChart = new Chart(activeUsageCanvas, {
+      type: 'doughnut',
+      data: activeUsageData,
+      options: activeUsageOpts
+    });
   // Disk Usage
   let diskUsageCanvas = $('#diskUsage').get(0).getContext('2d'),
     diskUsageData = {