special-dispatch-app/app/components/services-entry-page.js

const app = require('../app')
const moment = require('moment-immutable')
const { editIcon } = require('../assets')
const _ = require('lodash')

app.component('appServicesEntryPage', {
  template: html`
  <app-user-area title-text="{{ctrl.terminalKey}} Service Entry">
    <app-breadcrumb links="[
      { text: 'Home', link: '/dashboard' },
      { text: ctrl.terminalKey + ' Services', link: '/services/' + ctrl.terminalKey },
      { text: ctrl.startDate.format('L') + ' - ' + ctrl.endDate.format('L'), link: '/services/' + ctrl.terminalKey + '/' + ctrl.startDate.format('YYYY-MM-DD') }
    ]"></app-breadcrumb>
    <p>For week of {{::ctrl.startDate.format('LL')}} to {{::ctrl.endDate.format('LL')}}</p>
    <form name="form" ng-submit="ctrl.submit()">
      <table md-table md-progress="ctrl.promise">
        <colgroup>
          <col style="width: 15%" />
          <col ng-repeat="weekday in ::ctrl.weekdays" style="width: 12%" />
        </colgroup>
        <thead md-head>
          <tr md-row>
            <th md-column>Client</th>
            <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.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" ng-init="$dayIndex = $index">
              <input
                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>
        </tbody>
      </table>
      <div>
        <md-button type="submit" class="md-raised md-primary">Submit</md-button>
      </div>
    </form>
  </app-user-area>
  `,
  controllerAs: 'ctrl',
  controller: function(api, $routeParams, weekdays, $mdToast) {
    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
    })
    this.promise = api.get(`/api/services/${$routeParams.terminal}/${$routeParams.week}`).then(({workdays}) => {
      this.model = workdays
      const clientIds = workdays[0].services.map(x => x.clientId)
      this.clientServices = clientIds.map((id, i) => ({
        id,
        days: this.model.map(wd => wd.services[i])
      }))
      this.saved = _.cloneDeep(this.clientServices)
    })

    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,
            inbound: service.inbound || null
          }))
        }))
      }
      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)
      }
    }
  }
})