Add driver slot interface (#61)

MVP?

app/adapters/application.js

@@ -15,5 +15,14 @@ export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
       default:
         return this._super(...arguments);
     }
+  },
+
+  urlForQueryRecord(query) {
+    if (query.me) {
+      delete query.me;
+      return `${this._super(...arguments)}/me`;
+    }
+
+    return this._super(...arguments);
   }
 });

app/adapters/commitment.js

@@ -0,0 +1,11 @@
+import ApplicationAdapter from './application';
+import { computed } from '@ember/object';
+
+export default ApplicationAdapter.extend({
+  headers: computed(function() {
+    const personToken = localStorage.getItem('person-token');
+    return {
+      'Authorization': `Person Bearer ${personToken}`
+    };
+  }).volatile()
+});

app/components/calendar-day.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  daySlots: computed('day.id', '[email protected]', function() {
+    const dayDateString = this.get('day.date').toDateString();
+    const slots = this.get('slots');
+
+    return slots.filter(slot => dayDateString === slot.get('start').toDateString()).sortBy('start');
+  })
+});

app/components/calendar-days.js

@@ -0,0 +1,3 @@
+import Days from 'ember-power-calendar/components/power-calendar/days';
+
+export default Days;

app/components/calendar-slot.js

@@ -0,0 +1,44 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { reads } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import config from 'prison-rideshare-ui/config/environment';
+
+export default Component.extend({
+  paperToaster: service(),
+  store: service(),
+
+  isCommittedTo: reads('commitment'),
+
+  commitment: computed('[email protected]', 'person', function() {
+    const personId = this.get('person.id');
+
+    return this.get('slot.commitments').find(slot => slot.belongsTo('person').id() == personId);
+  }),
+
+  actions: {
+    toggle() {
+      if (this.get('isCommittedTo')) {
+        this.get('commitment').destroyRecord().catch(() => {
+          this.get('paperToaster').show('Couldn’t save your change', {
+            duration: config.toastDuration,
+            position: 'top right'
+          });
+        });
+      } else if (this.get('slot.isNotFull')) {
+        const newRecord = this.get('store').createRecord('commitment', {
+          slot: this.get('slot'),
+          person: this.get('person')
+        });
+
+        newRecord.save().catch(() => {
+          this.get('paperToaster').show('Couldn’t save your change', {
+            duration: config.toastDuration,
+            position: 'top right'
+          });
+          newRecord.destroyRecord();
+        });
+      }
+    }
+  }
+});

app/components/person-badge.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['person-badge'],
+
+  showContact: false,
+
+  actions: {
+    toggleContact() {
+      this.toggleProperty('showContact');
+    }
+  }
+});

app/components/ride-person.js

@@ -27,10 +27,6 @@ export default Component.extend({
       const ride = this.get('ride');
       ride.set(this.get('property'), null);
       return ride.save();
-    },
-
-    toggleContact() {
-      this.toggleProperty('showContact');
     }
   }
 });

app/controllers/admin-calendar.js

@@ -0,0 +1,3 @@
+import CalendarController from './calendar';
+
+export default CalendarController.extend();

app/controllers/calendar.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+
+import { alias } from '@ember/object/computed';
+
+export default Controller.extend({
+  month: alias('model.month'),
+  slots: alias('model.slots'),
+  person: alias('model.person')
+});

app/models/commitment.js

@@ -0,0 +1,6 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  slot: DS.belongsTo({ async: false }),
+  person: DS.belongsTo()
+});

app/models/slot.js

@@ -0,0 +1,17 @@
+import DS from 'ember-data';
+import { computed } from '@ember/object';
+
+export default DS.Model.extend({
+  start: DS.attr('date'),
+  end: DS.attr('date'),
+  count: DS.attr('number'),
+
+  commitments: DS.hasMany({ async: false }),
+
+  isNotFull: computed('commitments.length', 'count', function() {
+    const count = this.get('count');
+    const commitmentCount = this.get('commitments.length');
+
+    return count === 0 || commitmentCount < count;
+  })
+});

app/router.js

@@ -27,6 +27,9 @@ Router.map(function() {
 
   this.route('login');
   this.route('register');
+
+  this.route('admin-calendar', { path: '/admin-calendar/:month' });
+  this.route('calendar', { path: '/calendar/:month' });
 });
 
 export default Router;

app/routes/admin-calendar.js

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  model({ month }) {
+    return RSVP.hash({
+      slots: this.store.findAll('slot'),
+      month
+    });
+  }
+});

app/routes/application.js

@@ -1,5 +1,6 @@
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
+import Ember from 'ember';
 
 import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
 
@@ -8,11 +9,22 @@ export default Route.extend(ApplicationRouteMixin, {
   account: service(),
   userSocket: service(),
   flashMessages: service(),
+  poll: service(),
 
   beforeModel() {
     return this._loadCurrentUser();
   },
 
+  afterModel() {
+    this._super(...arguments);
+    if (!Ember.testing) {
+      this.get('poll').start({
+        idle_timeout: 10000,
+        interval: 10000
+      });
+    }
+  },
+
   title(tokens) {
     return `${tokens.join(' · ')} · Prison Rideshare`;
   },

app/routes/calendar.js

@@ -0,0 +1,65 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+import { inject as service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
+import Ember from 'ember';
+import fetch from 'fetch';
+import config from '../config/environment';
+
+export default Route.extend({
+  poll: service(),
+
+  // FIXME is it possible to get the token from elsewhere than the transition object?
+  model({ month }, { queryParams }) {
+    const token = queryParams.token;
+    const personTokenEndpoint = `${(Ember.testing ? '' : config.DS.host)}/${config.DS.namespace}/people/token`;
+
+    if (isEmpty(token)) {
+      throw new Error('We were unable to log you in without a token.');
+    }
+
+    return fetch(personTokenEndpoint, {
+      method: 'POST',
+      body: `grant_type=magic&token=${encodeURIComponent(token)}`,
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    }).then(response => {
+      if (response.ok) {
+        return response.json();
+      }
+
+      throw new Error('We were unable to log you in with that token.');
+    }).then(({ access_token }) => {
+      localStorage.setItem('person-token', access_token);
+      return this.store.queryRecord('person', { me: true, token: access_token })
+    }).catch(() => {
+      throw new Error('We were unable to log you in with that token.');
+    }).then(person => {
+      return RSVP.hash({
+        slots: this.store.findAll('slot'),
+        person,
+        month
+      });
+    });
+  },
+
+  afterModel() {
+    const url = this.store.adapterFor('application').buildURL('slot');
+
+    if (!Ember.testing) {
+      this.get('poll').setup({
+        name: 'slotsPoll',
+        resource_name: 'slots',
+        url
+      });
+    }
+  },
+
+  actions: {
+    willTransition(transition) {
+      this._super(transition);
+      this.get('poll').removePoll('slotsPoll');
+    }
+  }
+});

app/services/account.js

@@ -18,7 +18,7 @@ export default Service.extend({
 
       if (!isEmpty(token)) {
         fetch(`${(Ember.testing ? '' : config.DS.host)}/${config.DS.namespace.length > 0 ? `${config.DS.namespace}/` : ''}users/current`, {
-          type: 'GET',
+          method: 'GET',
           headers: {
             'Authorization': `Bearer ${token}`
           }

app/styles/app.scss

@@ -4,9 +4,12 @@ $primary: 'indigo';
 
 @import 'ember-paper';
 @import 'paper-data-table';
+@import 'ember-power-calendar';
 
 @import 'loading';
 
+@import 'calendar';
+
 body {
   max-width: 100%;
   max-height: 100%;
@@ -220,7 +223,7 @@ md-table-container.debts .person .name {
   }
 }
 
-.ride-person {
+.person-badge {
   display: inline-block;
   background-color: #e0e0e0;
   color: #424242;

app/styles/calendar.scss

@@ -0,0 +1,22 @@
+.ember-power-calendar {
+  @include ember-power-calendar(100px);
+
+  .count {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+
+    font-size: 75%;
+    text-align: center;
+
+    border-radius: 5rem;
+    background-color: $dark-contrast-color;
+    color: white;
+
+    cursor: pointer;
+  }
+}
+
+.admin-calendar {
+  display: flex;
+}

app/templates/admin-calendar.hbs

@@ -0,0 +1,24 @@
+<div class='admin-calendar'>
+  {{#power-calendar center=month daysComponent='calendar-days' onCenterChange=(action (mut month) value="date") as |calendar|}}
+    <nav class="ember-power-calendar-nav">
+      <button type="button" class="ember-power-calendar-nav-control previous-month" onclick={{action calendar.actions.moveCenter -1 'month'}}>‹</button>
+      <div class="ember-power-calendar-nav-title">
+        {{moment-format calendar.center 'MMMM YYYY'}}
+      </div>
+      <button class="ember-power-calendar-nav-control next-month" onclick={{action calendar.actions.moveCenter 1 'month'}}>›</button>
+    </nav>
+
+    {{#calendar.days showDaysAround=false as |day|}}
+      {{calendar-day day=day slots=slots count=true setViewingSlot=(action (mut viewingSlot))}}
+    {{/calendar.days}}
+  {{/power-calendar}}
+
+  {{#if viewingSlot.commitments}}
+  <div class='viewing-slot'>
+    <h3 class='hours'>{{moment-format viewingSlot.start 'dddd, MMMM D, hA'}}–{{moment-format viewingSlot.end 'hA'}}</h3>
+    {{#each viewingSlot.commitments as |commitment|}}
+      {{person-badge person=commitment.person}}
+    {{/each}}
+  </div>
+  {{/if}}
+</div>

app/templates/application.hbs

@@ -29,6 +29,9 @@
           {{#paper-item}}
             {{#link-to 'institutions'}}<span>Institutions</span>{{/link-to}}
           {{/paper-item}}
+          {{#paper-item}}
+            {{#link-to 'admin-calendar' (moment-format (now) 'YYYY-MM')}}<span>Calendar</span>{{/link-to}}
+          {{/paper-item}}
         {{/if}}
         {{#paper-item}}
           {{#link-to 'reports.new'}}<span>Report</span>{{/link-to}}

app/templates/calendar-error.hbs

@@ -0,0 +1 @@
+<div class='error'>{{model.message}}</div>

app/templates/calendar.hbs

@@ -0,0 +1,13 @@
+{{#power-calendar center=month daysComponent='calendar-days' as |calendar|}}
+  {{#paper-card as |card|}}
+    {{#card.content}}
+      <div class='person-session'>You are logged in as {{person.email}}</div>
+    {{/card.content}}
+  {{/paper-card}}
+
+  {{calendar.nav}}
+
+  {{#calendar.days showDaysAround=false as |day|}}
+    {{calendar-day day=day slots=slots person=person}}
+  {{/calendar.days}}
+{{/power-calendar}}

app/templates/components/calendar-day.hbs

@@ -0,0 +1,5 @@
+{{day.number}}
+
+{{#each daySlots as |slot|}}
+  {{calendar-slot slot=slot person=person count=count setViewingSlot=setViewingSlot}}
+{{/each}}