Decorated dashboard timeline

app/app.js

@@ -1,8 +1,10 @@
 const angular = require('angular')
+require('angular-material-badge/angular-material-badge.min.js')
+require('angular-material-badge/angular-material-badge.min.css')
 require('@alancnet/material-framework/app')
 const routes = require('./routes')
 
-const app = angular.module('app', ['material-framework'])
+const app = angular.module('app', ['material-framework', 'ngMdBadge'])
 // TODO: Register app specific services
 app.config(($routeProvider, $mdThemingProvider, $mdColorsProvider) => {
   // TODO: App Title

app/components/dashboard-page.js

@@ -18,18 +18,39 @@ app.component('appDashboardPage', {
           ng-click="$ctrl.setOffset($ctrl.offset - 1)">
           <md-icon md-svg-src="${previousDayIcon}"></md-icon>
         </md-button>
-        <md-button
-          style="min-width: auto; width: 3em;"
-          class="md-raised md-mini"
+        <span
           ng-repeat="workday in $ctrl.workdays track by workday.formatted"
-          ng-class="{
-            'md-primary': workday.date.valueOf() == $ctrl.date.valueOf()
-          }"
-          ng-disabled="!workday.hasData"
-          ng-click="$ctrl.setDate(workday.date)"
-          >
-          {{workday.short}}
-        </md-button>
+          ng-init="
+            invalid = workday.hasData && (!workday.hasLabor || !workday.hasService);
+            valid = workday.hasData && workday.hasLabor && workday.hasService;
+            tooltip = workday.hasData
+            ? (
+              workday.hasLabor && workday.hasService
+              ? ''
+              : workday.hasLabor
+              ? workday.formatted + ' has Labor data, but no Service data.'
+              : workday.hasService
+              ? workday.formatted + ' has Service data, but no Service data.'
+              : workday.formatted + ' is missing Labor and Service data.'
+            ): 'No data exists for ' + workday.formatted + '.';"
+          title="{{tooltip}}"
+          ng-click="tooltip && $ctrl.$mdToast.showSimple(tooltip)">
+          <md-button
+            style="min-width: auto; width: 3em;"
+            class="md-raised md-mini"
+            ng-class="{
+              'md-primary': workday.date.valueOf() == $ctrl.date.valueOf()
+            }"
+            ng-disabled="!valid"
+            ng-click="$ctrl.setDate(workday.date)"
+            md-badge="{{
+              invalid
+              ? '!'
+              : ''
+            }}">
+            {{workday.short}}
+          </md-button>
+        </span>
         <md-button
           class="md-fab"
           ng-click="$ctrl.setOffset($ctrl.offset + 1)">
@@ -45,14 +66,14 @@ app.component('appDashboardPage', {
       <div flex layout="row" ng-show="$ctrl.statistics">
         <md-card flex ng-repeat="serviceCategory in $ctrl.statistics.serviceCategories">
           <md-card-content>
-            <h2>{{::$ctrl.serviceCategories[serviceCategory.serviceCategory].name}}</h2>
+            <h2>{{::$ctrl.serviceCategories[serviceCategory.key].name}}</h2>
             <div flex layout="row">
               <md-card flex="30" md-whiteframe="15">
                 <md-card-title><md-card-title-text style="text-align: center">
                   Cartons
                 </md-card-title-text></md-card-title>
                 <md-card-content>
-                  <h1 style="text-align: center">{{serviceCategory.lastMetrics[serviceCategory.serviceColumn]}}</h1>
+                  <h1 style="text-align: center">{{serviceCategory.lastMetrics[serviceCategory.serviceColumn] || 0}}</h1>
                 </md-card-content>
               </md-card>
               <md-card flex="30" md-whiteframe="15">
@@ -61,6 +82,7 @@ app.component('appDashboardPage', {
                 </md-card-title-text></md-card-title>
                 <md-card-content>
                   <h1 ng-if="serviceCategory.lastMetrics.laborCost" style="text-align: center">$\{{Math.floor(serviceCategory.lastMetrics.laborCost) || null}}</h1>
+                  <h1 ng-if="!serviceCategory.lastMetrics.laborCost" style="text-align: center">N/A</h1>
                 </md-card-content>
               </md-card>
               <md-card flex="30" md-whiteframe="15">
@@ -68,7 +90,8 @@ app.component('appDashboardPage', {
                   Cost per Carton
                 </md-card-title-text></md-card-title>
                 <md-card-content>
-                  <h1 style="text-align: center">{{serviceCategory.lastMetrics.costPer | currency}}</h1>
+                  <h1 ng-if="serviceCategory.lastMetrics.costPer" style="text-align: center">{{serviceCategory.lastMetrics.costPer | currency}}</h1>
+                  <h1 ng-if="!serviceCategory.lastMetrics.costPer" style="text-align: center">N/A</h1>
                 </md-card-content>
               </md-card>
             </div>            
@@ -160,7 +183,8 @@ app.component('appDashboardPage', {
       </div>
     </app-user-area>
   `,
-  controller: function(api, statistics, $scope) {
+  controller: function(api, statistics, $scope, $mdToast) {
+    this.$mdToast = $mdToast
     $scope.Math = Math
     const load = (date) => {
       api.statistics(date).then(stats => {
@@ -178,18 +202,21 @@ app.component('appDashboardPage', {
     api.serviceCategories().then(serviceCategories => {
       this.serviceCategories = serviceCategories
     })
-    api.get(`/api/workdays`).then(workdays => {
+    api.get(`/api/workdays`).then(results => {
       const wds = {}
-      workdays.dates.forEach(x => (wds[x] = true))
+      results.workdays.forEach(wd => (wds[moment(wd.date).format('YYYY-MM-DD')] = wd))
       const getWorkdays = (offset) => {
         const dates = _.range(offset - 6, offset + 1)
           .map(x => {
             const date = moment().startOf('day').add(x, 'days')
+            const workday = wds[date.format('YYYY-MM-DD')]
             return {
               date,
               formatted: date.format('L'),
               short: date.format('M/DD'),
-              hasData: wds[date.format('YYYY-MM-DD')]
+              hasData: !!workday,
+              hasLabor: workday && workday.hasLabor,
+              hasService: workday && workday.hasService
             }
           })
         return dates
@@ -206,14 +233,19 @@ app.component('appDashboardPage', {
         load(date)
       }
 
-
-      this.setOffset(0)
-      this.setDate(moment(
-        workdays.dates
-          .map(x => moment(x).valueOf())
-          .sort()
-          .pop() || moment.now()
-      ))
+      const defaultWorkday = results.workdays.slice(0).reverse().find(x => x.hasLabor && x.hasService)
+      if (defaultWorkday) {
+        this.setDate(moment(defaultWorkday.date))
+        this.setOffset(3 - (moment().diff(moment(defaultWorkday.date), 'days')))
+      } else {
+        this.setOffset(0)
+      }
+      // this.setDate(moment(
+      //   results.workdays
+      //     .map(wd => moment(wd.date).valueOf())
+      //     .sort()
+      //     .pop() || moment.now()
+      // ))
     })
 
   //   statistics.costPerCarton().then(statistics => {

lib/controllers/workdays.js

@@ -11,15 +11,30 @@ const list = async (req, res) => {
   const endDate = date.add(365, 'days')
 
   const [results, metadata] = await sequelize.query(`
-    select distinct date from workdays where laborCost > 0
-  `)
+    select distinct date,
+    (select count(*) from labors where workdays.id = workdayId) as hasLabor,
+    (select count(*) from services where workdays.id = workdayId) as hasService
+    from workdays
+    where laborCost > 0
+    and date >= :startDate
+    and date <= :endDate
+  `, {
+    replacements: {
+      startDate: startDate.format('YYYY-MM-DD'),
+      endDate: endDate.format('YYYY-MM-DD')
+    }
+  })
 
-  const dates = results.map(x => x.date)
+  const workdays = results.map(x => ({
+    date: x.date,
+    hasLabor: !!x.hasLabor,
+    hasService: !!x.hasService
+  }))
 
   res.status(200).send({
     startDate: startDate.format('YYYY-MM-DD'),
     endDate: endDate.format('YYYY-MM-DD'),
-    dates
+    workdays
   })
 }
 

lib/database/seeds/dev.js

@@ -296,7 +296,7 @@ const users = async (db) => {
 }
 
 const seed = async (db) => {
-  await users(db)
+//  await users(db)
 }
 
 module.exports = Object.assign(seed, {

package.json

@@ -14,13 +14,14 @@
   "dependencies": {
     "@alancnet/icomoon-svg": "^2.0.0",
     "@alancnet/material-design-icons": "^1.0.0",
-    "@alancnet/material-framework": "^1.0.12",
+    "@alancnet/material-framework": "^1.0.13",
     "aguid": "^2.0.0",
     "angular": "^1.6.10",
     "angular-animate": "^1.7.0",
     "angular-aria": "^1.7.0",
     "angular-chart.js": "^1.1.1",
     "angular-material": "^1.1.9",
+    "angular-material-badge": "^1.2.9",
     "angular-material-data-table": "^0.10.10",
     "angular-messages": "^1.7.0",
     "angular-route": "^1.6.10",