Calendar based new-appt. [WIP 4]

public/css/style.css

@@ -764,6 +764,10 @@ body .node input[type="number"] {
 .appt-calendar-col {
     flex-grow: 1;
 }
+.appt-form td.fc-day.stag-selected {
+    outline: 2px solid #007bff;
+    background: #e5f2fd;
+}
 
 /* call panel */
 #proCallComponent {

resources/views/app/patient/manage-appointment.blade.php

@@ -10,7 +10,8 @@
     </div>
     <hr class="mt-2 mb-3">
     <div class="d-flex align-items-start appt-form">
-        <div class="appt-form-col pr-2">
+        <form action="/api/appointment/create" method="post" class="appt-form-col pr-2">
+            <input name="clientUid" type="hidden" value="{{ $patient->uid }}">
             <div class="mb-3">
                 <label class="text-secondary mb-1">Patient</label>
                 <div class="font-weight-bold">{{ $patient->displayName() }}</div>
@@ -44,7 +45,26 @@
                             value="PUERTO_RICO">Puerto Rico</option>
                 </select>
             </div>
-        </div>
+            <div class="mb-3">
+                <label class="text-secondary mb-1">Date *</label>
+                <input name="date" class="form-control form-control-sm" type="date" value="{{ date('Y-m-d') }}" required>
+            </div>
+            <div class="mb-3">
+                <label class="text-secondary mb-1">Start Time *</label>
+                <input name="startTime" class="form-control form-control-sm" type="time" required>
+            </div>
+            <div class="mb-3">
+                <label class="text-secondary mb-1">End Time *</label>
+                <input name="endTime" class="form-control form-control-sm" type="time" required>
+            </div>
+            <div class="mb-3">
+                <label class="text-secondary mb-1">Title</label>
+                <input name="title" class="form-control form-control-sm" type="text" placeholder="(optional)">
+            </div>
+            <div class="mb-3">
+                <button class="btn btn-sm btn-primary d-block w-100 font-weight-bold">Set Appointment</button>
+            </div>
+        </form>
         <div class="appt-calendar-col pl-2 border-left border-light">
             <div class="stag-fc-container">
 
@@ -67,9 +87,15 @@
                     dayMaxEvents: true,
                     events: function(info, successCallback, failureCallback) {
                         let proUid = $('.appt-form [name="proUid"]').val();
-                        if(!proUid) successCallback([]); // no events if no pro selected
+                        if(!proUid) {
+                            successCallback([]); // no events if no pro selected
+                            return;
+                        }
                         let timeZone = $('.appt-form [name="timeZone"]').val();
-                        if(!timeZone) successCallback([]); // no events if no tz selected
+                        if(!timeZone) {
+                            successCallback([]); // no events if no tz selected
+                            return;
+                        }
                         $.get('/api/appointment/getAllAppointmentsForPro' +
                             '?proUid=' + proUid +
                             '&start=' + info.startStr.substr(0, 10) +
@@ -85,8 +111,15 @@
                         }, 'json');
                     },
                     loading: function(bool) {
-                        // document.getElementById('loading').style.display =
-                        //     bool ? 'block' : 'none';
+
+                    },
+                    dateClick: function(info) {
+                        $('.appt-form td.stag-selected').removeClass('stag-selected');
+                        $(info.dayEl).addClass('stag-selected');
+                        $('.appt-form [name="date"]').val(info.dateStr.substr(0, 10));
+                    },
+                    eventClassNames: function(arg) {
+                        console.log(arg.event.extendedProps.appointmentUid);
                     }
                 });
                 calendarObject.render();
@@ -94,6 +127,38 @@
                 $(document).on('change', '.appt-form [name="proUid"], .appt-form [name="timeZone"]', function() {
                     calendarObject.refetchEvents();
                 });
+
+                $(document).on('change', '.appt-form [name="date"]', function() {
+                    $('.appt-form td.stag-selected').removeClass('stag-selected');
+                    if(!$(this).val()) return;
+                    calendarObject.gotoDate($(this).val());
+                    $('.fc-day[data-date="' + $(this).val() + '"]').addClass('stag-selected');
+                });
+
+                $('.appt-form [name="date"]').trigger('change');
+
+                $('form.appt-form-col').on('submit', function() {
+                    let form = $(this);
+                    if(!form[0].checkValidity()) {
+                        form[0].reportValidity();
+                        return false;
+                    }
+                    $.post(form.attr('action'), form.serialize(), function(_data) {
+                        if(_data && _data.success) {
+                            toastr.success('Appointment booked successfully');
+                            calendarObject.refetchEvents();
+                        }
+                        else {
+                            if(_data && _data.message) {
+                                toastr.error(_data.message);
+                            }
+                            else {
+                                toastr.error('Unable to book appointment!');
+                            }
+                        }
+                    }, 'json');
+                    return false;
+                });
             }
             addMCInitializer('patient-manage-appointment', init);
         })();