Fixed navbar and fab button, tab order for services, spreadsheet functionality, etc..

app/assets/app.scss

@@ -6,3 +6,6 @@
     max-width: 230px
   }
 }
+md-sidenav h3 {
+  margin-left: 10px;
+}

app/components/labor-entry-page.js

@@ -1,6 +1,7 @@
 const app = require('../app')
 const moment = require('moment-immutable')
 const { editIcon, calculatedIcon, dollarIcon } = require('../assets')
+const _ = require('lodash')
 
 app.component('appLaborEntryPage', {
   template: html`
@@ -49,24 +50,26 @@ app.component('appLaborEntryPage', {
         <thead md-head>
           <tr md-row>
             <th md-column>Staff Member</th>
-            <th md-column ng-repeat="weekday in ctrl.weekdays">
-              <span hide show-xs>{{weekday.min}}</span>
-              <span hide show-sm>{{weekday.short}}</span>
-              <span hide show-gt-sm>{{weekday.name}}</span>
+            <th md-column ng-repeat="weekday in ::ctrl.weekdays">
+              <span hide show-xs>{{::weekday.min}} {{::weekday.date.format('M/DD')}}</span>
+              <span hide show-sm>{{::weekday.short}} {{::weekday.date.format('M/DD')}}</span>
+              <span hide show-gt-sm>{{::weekday.name}}<br />{{::weekday.date.format('L')}}</span>
             </th>
           </tr>
         </thead>
         <tbody md-body>
-          <tr md-row ng-repeat="sfl in ctrl.staffMemberLabor track by sfl.id">
+          <tr md-row ng-repeat="sfl in ctrl.staffMemberLabor track by sfl.id" ng-init="$sflIndex = $index">
             <td md-cell>
               {{ctrl.staffMembers[sfl.id].name}}
             </td>
-            <td md-cell ng-repeat="day in sfl.days track by $index">
+            <td md-cell ng-repeat="day in sfl.days track by $index" ng-init="$dayIndex = $index">
               <input
-                class="hour-input md-button md-raised"
+                class="hour-input md-button "
                 tabindex="{{$index * ctrl.staffMemberLabor.length + ($parent.$index) + 1}}"
                 ng-model="day.hours"
-                type="number" min="0" step="0.01">
+                type="number" min="0" step="0.01"
+                ng-keypress="ctrl.keypress($event)"
+                md-whiteframe="{{(day.hours == ctrl.saved[$sflIndex].days[$dayIndex].hours) ? 1 : 8}}">
             </td>
           </tr>
         </tbody>
@@ -79,12 +82,12 @@ app.component('appLaborEntryPage', {
   `,
   controllerAs: 'ctrl',
   controller: function(api, $routeParams, weekdays, $mdToast) {
-    this.weekdays = weekdays
     this.terminalKey = $routeParams.terminal
     const week = moment($routeParams.week)
     if (!week.isSame(week.startOf('week'))) throw new Error('Date is not start of week')
     this.startDate = week
     this.endDate = week.endOf('week')
+    this.weekdays = weekdays.map(d => Object.assign({}, d, {date: week.add(d.value, 'days')}))
     api.staffMemberDictionary().then(staffMembers => {
       this.staffMembers = staffMembers
     })
@@ -96,10 +99,17 @@ app.component('appLaborEntryPage', {
           id,
           days: this.model.workdays.map(wd => wd.labor[i])
         }))
+        this.saved = _.cloneDeep(this.staffMemberLabor)
+
       })
     }
     load()
-    this.submit = async () => {
+    let saveTimer = null
+    this.save = async (delay, then) => {
+      if (saveTimer) {
+        clearTimeout(saveTimer)
+      }
+
       const model = {
         workweek: this.model.workweek,
         workdays: this.model.workdays.map(workday => ({
@@ -109,14 +119,36 @@ app.component('appLaborEntryPage', {
           }))
         }))
       }
-      try {
-        await api.patch(`/api/labor/${$routeParams.terminal}/${$routeParams.week}`, model)
-        $mdToast.showSimple('Labor saved.')
-        load()
-      } catch (err) {
-        window.err = err
-        console.error(err)
-        $mdToast.showSimple(`Could not save Labor: ${err.message || err.statusText || err}`)
+      const saved = _.cloneDeep(this.staffMemberLabor)
+      saveTimer = setTimeout(async () => {
+        saveTimer = null
+        try {
+          await api.patch(`/api/labor/${$routeParams.terminal}/${$routeParams.week}`, model)
+          $mdToast.showSimple('Labor saved.')
+          this.saved = saved
+          if (then) {
+            then()
+          }
+        } catch (err) {
+          window.err = err
+          console.error(err)
+          $mdToast.showSimple(`Could not save Labor: ${err.message || err.statusText || err}`)
+        }
+      }, delay || 0)
+    }
+    this.submit = () => this.save(0, load)
+
+    this.keypress = async ($event) => {
+      if ($event.key === 'Enter') {
+
+        const tabIndex = +$event.srcElement.getAttribute('tabindex') + 1
+        const nextElement = document.querySelector(`[tabindex="${tabIndex}"]`)
+        if (nextElement) {
+          $event.returnValue = false
+          nextElement.focus()
+          nextElement.select && nextElement.select()
+        }
+        await this.save(2000)
       }
     }
   }

app/components/services-entry-page.js

@@ -1,6 +1,7 @@
 const app = require('../app')
 const moment = require('moment-immutable')
 const { editIcon } = require('../assets')
+const _ = require('lodash')
 
 app.component('appServicesEntryPage', {
   template: html`
@@ -21,23 +22,25 @@ app.component('appServicesEntryPage', {
           <tr md-row>
             <th md-column>Client</th>
             <th md-column ng-repeat="weekday in ::ctrl.weekdays">
-              <span hide show-xs>{{::weekday.min}}</span>
-              <span hide show-sm>{{::weekday.short}}</span>
-              <span hide show-gt-sm>{{::weekday.name}}</span>
+              <span hide show-xs>{{::weekday.min}} {{::weekday.date.format('M/DD')}}</span>
+              <span hide show-sm>{{::weekday.short}} {{::weekday.date.format('M/DD')}}</span>
+              <span hide show-gt-sm>{{::weekday.name}}<br />{{::weekday.date.format('L')}}</span>
             </th>
           </tr>
         </thead>
         <tbody md-body>
-          <tr md-row ng-repeat="sfl in ::ctrl.clientServices track by sfl.id">
+          <tr md-row ng-repeat="sfl in ::ctrl.clientServices track by sfl.id" ng-init="$sflIndex = $index">
             <td md-cell>
               {{::ctrl.clients[sfl.id].name}}
             </td>
-            <td md-cell ng-repeat="day in ::sfl.days track by $index">
+            <td md-cell ng-repeat="day in ::sfl.days track by $index" ng-init="$dayIndex = $index">
               <input
-                class="hour-input md-button md-raised"
-                ng-model="day.cartons"
-                tabindex="{{$index * ctrl.staffMemberLabor.length + ($parent.$index) + 1}}"
-                type="number" min="0" step="1">
+                class="hour-input md-button"
+                ng-model="day.inbound"
+                tabindex="{{$index * ctrl.clientServices.length + ($parent.$index) + 1}}"
+                type="number" min="0" step="1"
+                ng-keypress="ctrl.keypress($event)"
+                md-whiteframe="{{(day.inbound == ctrl.saved[$sflIndex].days[$dayIndex].inbound) ? 1 : 8}}">
               
             </td>
           </tr>
@@ -51,12 +54,12 @@ app.component('appServicesEntryPage', {
   `,
   controllerAs: 'ctrl',
   controller: function(api, $routeParams, weekdays, $mdToast) {
-    this.weekdays = weekdays
     this.terminalKey = $routeParams.terminal
     const week = moment($routeParams.week)
     if (!week.isSame(week.startOf('week'))) throw new Error('Date is not start of week')
     this.startDate = week
     this.endDate = week.endOf('week')
+    this.weekdays = weekdays.map(d => Object.assign({}, d, {date: week.add(d.value, 'days')}))
     api.clientDictionary().then(clients => {
       this.clients = clients
     })
@@ -67,24 +70,51 @@ app.component('appServicesEntryPage', {
         id,
         days: this.model.map(wd => wd.services[i])
       }))
+      this.saved = _.cloneDeep(this.clientServices)
     })
 
-    this.submit = async () => {
+    let saveTimer = null
+
+    this.save = async (delay) => {
+      if (saveTimer) {
+        clearTimeout(saveTimer)
+      }
       const model = {
         workdays: this.model.map(workday => ({
           services: workday.services.map(service => ({
             clientId: service.clientId,
-            cartons: service.cartons || null
+            inbound: service.inbound || null
           }))
         }))
       }
-      try {
-        await api.patch(`/api/services/${$routeParams.terminal}/${$routeParams.week}`, model)
-        $mdToast.showSimple('Services saved.')
-      } catch (err) {
-        window.err = err
-        console.error(err)
-        $mdToast.showSimple(`Could not save Services: ${err.message || err.statusText || err}`)
+      const saved = _.cloneDeep(this.clientServices)
+      saveTimer = setTimeout(async () => {
+        saveTimer = null
+        try {
+          await api.patch(`/api/services/${$routeParams.terminal}/${$routeParams.week}`, model)
+          $mdToast.showSimple('Services saved.')
+          this.saved = saved
+        } catch (err) {
+          window.err = err
+          console.error(err)
+          $mdToast.showSimple(`Could not save Services: ${err.message || err.statusText || err}`)
+        }
+      }, delay || 0)
+    }
+
+    this.submit = () => this.save(0)
+
+    this.keypress = async ($event) => {
+      if ($event.key === 'Enter') {
+
+        const tabIndex = +$event.srcElement.getAttribute('tabindex') + 1
+        const nextElement = document.querySelector(`[tabindex="${tabIndex}"]`)
+        if (nextElement) {
+          $event.returnValue = false
+          nextElement.focus()
+          nextElement.select && nextElement.select()
+        }
+        await this.save(2000)
       }
     }
   }

app/components/services-page.js

@@ -28,7 +28,7 @@ app.component('appServicesPage', {
             <td md-cell ng-repeat="workday in ::week.workdays track by $index">
               <div>
                 <span ng-if="::workday" style="white-space: nowrap;">
-                  {{::workday.cartons || 0}}
+                  {{::workday.inbound || 0}}
                   <span hide show-xs>c</span>
                   <span hide show-sm>ctn</span>
                   <span hide show-gt-sm>cartons</span>

app/index.html

@@ -6,5 +6,5 @@
   <script type="text/javascript" src="index.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-  <body flex layout="row"><ng-view></ng-view></body>  
+  <body flex layout="row"><app-area><ng-view></ng-view></app-area></body>  
 </html>

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@alancnet/icomoon-svg": "^2.0.0",
     "@alancnet/material-design-icons": "^1.0.0",
-    "@alancnet/material-framework": "^1.0.11",
+    "@alancnet/material-framework": "^1.0.12",
     "aguid": "^2.0.0",
     "angular": "^1.6.10",
     "angular-animate": "^1.7.0",