Apointments UI [WIP #3]

app/Http/Controllers/HomeController.php

@@ -234,6 +234,7 @@ class HomeController extends Controller
         foreach ($appointments as $appointment) {
             $date = explode(" ", $appointment->start_time)[0];
             $appointment->milliseconds = strtotime($date) . '000';
+            $appointment->newStatus = $appointment->status;
             $appointment->dateYMD = date('Y-m-d', strtotime($appointment->start_time));
             $appointment->clientName = $appointment->client->displayName();
             $appointment->clientInitials = substr($appointment->client->name_first, 0, 1).substr($appointment->client->name_last, 0, 1);
@@ -243,6 +244,19 @@ class HomeController extends Controller
                 $appointment->client->age_in_years . ' y.o' .
                 ($appointment->client->sex ? ' ' . $appointment->client->sex : '') .
                 ')';
+
+            $appointment->started = false;
+            $appointment->inHowManyHours = date_diff(date_create('now'), date_create($appointment->start_time),false)
+                ->format('%R%h h, %i m');
+            if($appointment->inHowManyHours[0] === '-') {
+                $appointment->inHowManyHours = substr($appointment->inHowManyHours, 1) . ' ago';
+                $appointment->started = true;
+            }
+            else {
+                $appointment->inHowManyHours = 'Appt. in ' . substr($appointment->inHowManyHours, 1);
+            }
+
+
         }
 
         $milliseconds = strtotime(date('Y-m-d')) . '000';

resources/views/app/dashboard.blade.php

@@ -73,11 +73,24 @@
                 </div>
             </div>
             <div class="col-md-9">
-                <div class="d-flex align-items-center mb-2">
+                <div class="d-flex align-items-end mb-3">
                     <b class="large">@{{ selectedDate }}</b>
-                    <div class="ml-auto">Tabs</div>
+                    <div class="ml-auto">
+                        <label class="text-secondary">Filter by status:</label>
+                        <select v-model="filterStatus"
+                                class="form-control form-control-sm"
+                                v-on:change="updateNumEventsForDate()">
+                            <option value="">ALL</option>
+                            <option value="CREATED">CREATED</option>
+                            <option value="CONFIRMED">CONFIRMED</option>
+                            <option value="CANCELLED">CANCELLED</option>
+                            <option value="COMPLETED">COMPLETED</option>
+                            <option value="ABANDONED">ABANDONED</option>
+                        </select>
+                    </div>
                 </div>
-                <div v-for="event in events" class="align-items-start p-3 border" :class="event.dateYMD === selectedDate ? 'd-flex' : 'd-none'">
+                <div v-for="event in events" class="align-items-end p-3 border rounded mb-3"
+                     :class="event.dateYMD === selectedDate && (filterStatus === '' || filterStatus === event.status) ? 'd-flex' : 'd-none'">
                     <div class="patient-avatar mr-3">@{{ event.clientInitials }}</div>
                     <div>
                         <div class="font-weight-bold pb-1">
@@ -93,6 +106,25 @@
                             Status: <b class="text-secondary">@{{ event.status }}</b>
                         </div>
                     </div>
+                    <div class="ml-auto">
+                        <select v-model="event.newStatus"
+                                class="form-control form-control-sm"
+                                v-on:change="updateStatus(event)">
+                            <option value="CREATED">CREATED</option>
+                            <option value="CONFIRMED">CONFIRMED</option>
+                            <option value="CANCELLED">CANCELLED</option>
+                            <option value="COMPLETED">COMPLETED</option>
+                            <option value="ABANDONED">ABANDONED</option>
+                        </select>
+                        <div v-if="selectedDate === '{{ date('Y-m-d') }}'"
+                             class="pt-1 text-right" :class="event.started ? 'text-danger': 'text-secondary'">
+                            @{{ event.inHowManyHours }}
+                        </div>
+                    </div>
+                </div>
+                <div v-if="numEventsForDate === 0" class="bg-light p-3 text-secondary border bounded">
+                    <span v-if="filterStatus === ''">You have no appointments on <b>@{{ selectedDate }}</b></span>
+                    <span v-if="filterStatus !== ''">You have no appointments on <b>@{{ selectedDate }}</b> with status <b>@{{ filterStatus }}</b></span>
                 </div>
             </div>
         </div>
@@ -108,12 +140,14 @@
                 selectedDate: '{{ date('Y-m-d') }}',
                 selectedStatus: 'CREATED',
                 events: {!! json_encode($appointments) !!},
+                numEventsForDate: 0,
+                filterStatus: '',
             },
             methods: {
                 onDateChange: function (_newDate) {
                     this.highlightDatesWithEvents();
                     this.selectedDate = _newDate;
-                    console.log('Showing events for ' + _newDate);
+                    this.updateNumEventsForDate();
                 },
                 selectToday: function () {
                     $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
@@ -127,6 +161,34 @@
                         $('.pro-dashboard-inline-calendar table td[data-date="' + this.events[i].milliseconds + '"]')
                             .attr('has-events', 1);
                     }
+                },
+                updateNumEventsForDate: function() {
+                    this.numEventsForDate = 0;
+                    for (let i = 0; i < this.events.length; i++) {
+                        if(this.events[i].dateYMD === this.selectedDate &&
+                            (this.filterStatus === '' || this.filterStatus === this.events[i].status)) {
+                            this.numEventsForDate++;
+                        }
+                    }
+                },
+                updateStatus: function(_event) {
+                    $.post('/api/appointment/updateStatus', {
+                        uid: _event.uid,
+                        status: _event.newStatus
+                    }, function(_data) {
+                        if(!_data) {
+                            toastr.error('Unable to update appointment status!');
+                        }
+                        else {
+                            if(!_data.success) {
+                                toastr.error(_data.message);
+                            }
+                            else {
+                                _event.status = _event.newStatus;
+                                toastr.success('The appointment has been updated');
+                            }
+                        }
+                    }, 'json')
                 }
             },
             mounted: function () {
@@ -138,6 +200,7 @@
                     self.onDateChange(calendarElem.datepicker('getFormattedDate'));
                 });
                 self.selectToday();
+                self.updateNumEventsForDate();
                 console.log(this.events)
             }
         });