first commit

app/abilities/study-room-presence copy.js

@@ -0,0 +1,15 @@
+import { Ability } from 'ember-can';
+
+export default class StudyRoomPresence extends Ability {
+  get canShow() {
+    return this.session.hasPermission('study-room-presence.read');
+  }
+
+  get canCreate() {
+    return this.session.hasPermission('study-room-presence.create');
+  }
+
+  get canDestroy() {
+    return this.session.hasPermission('study-room-presence.destroy');
+  }
+}

app/components/index/authenticated.hbs

@@ -1,6 +1,7 @@
 <EmberWormhole @to='navbar-wormhole'>
   <PageActionsButtons @pageActions={{pageActions}}>
     <Tools::BoardRoomPresence />
+    <Tools::StudyRoomPresence />
   </PageActionsButtons>
 </EmberWormhole>
 

app/components/tools/board-room-presence.hbs

@@ -1,4 +1,4 @@
-<div class='board-room-presence-dropdown page-action'>
+<div class='room-presence-dropdown page-action'>
   <BsButton @type='primary'>
     <FaIcon @icon='mug-saucer' />
     <span class='d-none d-md-inline'>Bestuurskamer</span>

app/components/tools/study-room-presence.hbs

@@ -0,0 +1,135 @@
+<div class='room-presence-dropdown page-action'>
+  <BsButton @type='primary'>
+    <FaIcon @icon='book-open' />
+    <span class='d-none d-md-inline'>2de kamer</span>
+    <span class='status-dot label-{{overallStatus}}'></span>
+
+    <BsPopover
+      {{!-- @triggerEvents='focus' --}}
+      @placement='bottom'
+      @title='Aanwezig in de 2de Kamer'
+      @renderInPlace="{{true}}"
+    >
+      {{#each sortedPresences as |presence|}}
+        <div class='py-1'>
+          <div class='d-block'>
+            <LinkTo @route='users.user' @model={{presence.user.id}}>
+              <small><b>{{presence.user.fullNameWithNickname}}</b></small>
+            </LinkTo>
+          </div>
+          <span class='presence-label label-{{presence.status}}'>
+            {{t (concat 'component.tools.studyRoomPresence.' presence.status)}}
+            van
+            {{moment-format presence.startTime 'HH:mm'}}
+            tot
+            {{moment-format presence.endTime 'HH:mm'}}
+          </span>
+        </div>
+      {{else}}
+        <div>Er is niemand aanwezig</div>
+      {{/each}}
+
+      {{#if (can 'create study-room-presences')}}
+        <span class='d-flex'>
+          <button
+            class='btn btn-secondary mb-2 mt-3 update-presence-button'
+            {{action 'setPresenceModalState' 'open'}}
+            type='button'
+          >
+            Aanwezigheid updaten
+          </button>
+        </span>
+      {{/if}}
+    </BsPopover>
+  </BsButton>
+</div>
+
+{{#if presenceModalIsOpen}}
+  <EmberWormhole @to='ember-wormhole-destination'>
+    <BasicModal
+      @title='2de kamer beschikbaarheid opgeven'
+      @closeModal={{action 'setPresenceModalState' 'closed'}}
+      @onSubmit={{action 'save'}}
+      @submitText='Beschikbaarheid opslaan'
+      @submitDisabled={{saveButtonDisabled}}
+    >
+      {{#if sortedPresences}}
+        <table class='table edit-presence'>
+          <thead>
+            <tr>
+              <th>Persoon</th>
+              <th>Status</th>
+              <th>Tot</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each sortedPresences as |presence|}}
+              <tr class="edit-presence-row">
+                <td>{{presence.user.fullNameWithNickname}}</td>
+                <td>
+                  {{t
+                    (concat 'component.tools.studyRoomPresence.' presence.status)
+                  }}
+                </td>
+                <td> {{moment-format presence.endTime 'HH:mm'}} </td>
+                <td>
+                  {{#if (can 'destroy study-room-presences')}}
+                    <button
+                      class='btn btn-danger delete-presence-button float-end'
+                      aria-hidden='true'
+                      {{action 'deletePresence'}}
+                      type='button'
+                    >
+                      <FaIcon @icon='trash' @size="xs" />
+                    </button>
+                  {{/if}}
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      {{else}}
+        <div class='alert alert-info'>Er zijn geen alphanen aanwezig</div>
+      {{/if}}
+
+      {{#if currentUserPresence}}
+        <label for="new-user-presence-status">Status</label>
+        <Input::SelectInput
+          @class='form-control col-xs-12 presence-select'
+          @required={{true}}
+          @options={{statusOptions}}
+          @placeholder={{Status}}
+          @value={{currentUserPresence.status}}
+          @id="new-user-presence-status"
+        />
+        <label for="new-user-presence-starttime" class="mt-2">Van</label>
+        <Input::TimeInput
+          @dateValue={{currentUserPresence.startTime}}
+          @class='col-xs-12 presence-time-input'
+          @inputClass='form-control'
+          @placeholder={{currentUserPresence.startTime}}
+          @required={{true}}
+          @id="new-user-presence-starttime"
+        />
+        <label for="new-user-presence-endtime" class="mt-2">Tot</label>
+        <Input::TimeInput
+          @dateValue={{currentUserPresence.endTime}}
+          @class='col-xs-12 presence-time-input'
+          @inputClass='form-control'
+          @placeholder={{currentUserPresence.endTime}}
+          @required={{true}}
+          @id="new-user-presence-endtime"
+        />
+      {{else}}
+        <button
+          class='btn btn-secondary'
+          {{action 'newPresence'}}
+          type='button'
+        >
+          Nieuw
+        </button>
+      {{/if}}
+    </BasicModal>
+  </EmberWormhole>
+{{/if}}

app/components/tools/study-room-presence.js

@@ -0,0 +1,122 @@
+import { task, timeout } from 'ember-concurrency';
+import Component from '@ember/component';
+import Ember from 'ember';
+import { computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+import moment from 'moment';
+import { inject as service } from '@ember/service';
+
+const StudyRoomPresence = Component.extend({
+  session: service(),
+  store: service(),
+  abilities: service(),
+  presenceModalIsOpen: false,
+  model: [],
+
+  statusOptions: [
+    {
+      value: 'present',
+      label: 'Aanwezig',
+    },
+    {
+      value: 'busy',
+      label: 'Bezig',
+    },
+    {
+      value: 'absent',
+      label: 'Afwezig',
+    },
+  ],
+
+  // Periodically poll for new studyroom data
+  poll: task(function* () {
+    while (!Ember.testing) {
+      this.fetchData.perform();
+      yield timeout(1000 * 30); // Wait 30 seconds
+    }
+  })
+    .drop()
+    .on('didInsertElement'),
+
+  // Fetch task is separate from polling task, so we can call it individually.
+  fetchData: task(function* () {
+    /* eslint-disable camelcase */
+    const model = yield this.store.query('study-room-presence', {
+      filter: { current_and_future: true },
+    });
+    /* eslint-enable camelcase */
+
+    this.set('model', model);
+  }).restartable(),
+
+  currentUserPresence: computed('model.[]', function () {
+    return (
+      this.model.filter((presence) => presence.get('user.isCurrentUser'))[0] ||
+      null
+    );
+  }),
+
+  sortedPresences: computed('model.[]', function () {
+    return this.model.sortBy('endTime');
+  }),
+
+  overallStatus: computed('model.[]', function () {
+    const currentStatusses = this.model
+      .filter((presence) => {
+        return moment().isBetween(
+          moment(presence.get('startTime')),
+          moment(presence.get('endTime')),
+          'minute',
+          '[)'
+        );
+      })
+      .mapBy('status');
+
+    if (currentStatusses.includes('present')) {
+      return 'present';
+    } else if (currentStatusses.includes('busy')) {
+      return 'busy';
+    }
+
+    return 'absent';
+  }),
+
+  saveButtonDisabled: equal('currentUserPresence', null),
+
+  actions: {
+    setPresenceModalState(state) {
+      this.set('presenceModalIsOpen', state === 'open');
+    },
+
+    deletePresence() {
+      this.currentUserPresence.destroyRecord().then(() => {
+        this.set('currentUserPresence', null);
+      });
+    },
+
+    newPresence() {
+      if (this.abilities.can('create study-room-presences')) {
+        const newPresenceObject = this.store.createRecord(
+          'study-room-presence',
+          {
+            startTime: moment().startOf('minute').toDate(),
+            endTime: moment().startOf('minute').add(1, 'hours').toDate(),
+            status: 'present',
+            user: this.session.currentUser,
+          }
+        );
+        this.set('currentUserPresence', newPresenceObject);
+      }
+    },
+
+    save() {
+      const presence = this.currentUserPresence;
+      const fetch = this.fetchData;
+
+      presence.save().then(() => fetch.perform());
+      this.set('presenceModalIsOpen', false);
+    },
+  },
+});
+
+export default studyRoomPresence;

app/models/study-room-presence.js

@@ -0,0 +1,11 @@
+import Model, { belongsTo, attr } from '@ember-data/model';
+
+export default class StudyRoomPresence extends Model {
+  // Properties
+  @attr startTime;
+  @attr endTime;
+  @attr status;
+
+  // Relations
+  @belongsTo user;
+}

app/styles/app.scss

@@ -33,7 +33,7 @@
 @import 'components/quickpost';
 @import 'components/sidebar';
 @import 'components/social-media-buttons';
-@import 'components/tools/board-room-presence';
+@import 'components/tools/room-presence';
 @import 'components/tools/upcoming-birthdays';
 @import 'components/tools/upcoming-activities';
 @import 'components/tools/forum-tool';

app/styles/components/tools/board-room-presence.scss → app/styles/components/tools/room-presence.scss

@@ -10,7 +10,7 @@
   font-weight: bold;
 }
 
-.board-room-presence-dropdown {
+.room-presence-dropdown {
   color: $white;
 }
 

mirage/config.js

@@ -32,6 +32,7 @@ export default function () {
   this.resource('groups');
   this.resource('quickpost_messages');
   this.resource('board_room_presences');
+  this.resource('study_room_presences');
   this.resource('photo_albums');
   this.resource('photo_comments');
   this.resource('photo_tags');

mirage/scenarios/default.js

@@ -8,6 +8,7 @@ export default function (server) {
     'article',
     'article_comment',
     'board_room_presence',
+    'study_room_presence',
     'group',
     'membership',
     'photo_album',