Appointment calendar updates

public/css/style.css

@@ -704,10 +704,12 @@ body .node input[type="number"] {
 }
 .slot-picker {
     padding: 4px;
+    padding-right: 0;
     padding-bottom: 0;
 }
 .slot-picker.disabled {
     opacity: 0.5;
+    pointer-events: none;
     cursor: not-allowed;
 }
 .slot-picker td {
@@ -728,8 +730,14 @@ body .node input[type="number"] {
     background-repeat: repeat-x;
     color: #fff;
 }
+.pro-appointment-calendar.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
 .pro-appointment-calendar .datepicker-inline {
-    width: 200px;
+    width: 195px;
+    padding-left: 0;
 }
 .pro-appointment-calendar .datepicker td {
     height: 25px;

resources/views/app/patient/partials/appointments.blade.php

@@ -32,9 +32,12 @@
                         </select>
                     </div>
                 </div>
+                <input type="hidden" name="date" min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
+                <input type="hidden" name="startTime" class="form-control form-control-sm">
+                <input type="hidden" name="endTime" class="form-control form-control-sm">
                 <div class="mb-2 d-flex align-items-start">
-                    <div class="pro-appointment-calendar flex-grow-0 d-inline-flex justify-content-center"></div>
-                    <div class="pro-appointment-time-selector pl-1 flex-grow-1 border-left">
+                    <div class="pro-appointment-calendar disabled flex-grow-0 d-inline-flex justify-content-center"></div>
+                    <div class="pro-appointment-time-selector pl-2 flex-grow-1 border-left">
                         <div class="slot-picker start-time disabled mb-2">
                             <table class="table-condensed w-100">
                                 <thead>
@@ -110,19 +113,6 @@
                         </div>
                     </div>
                 </div>
-                {{--<div class="mb-2">
-                    <label class="text-secondary text-sm mb-1">Date *</label>
-                    <input type="date" name="date" min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}"
-                           class="form-control form-control-sm" required>
-                </div>
-                <div class="mb-2">
-                    <label class="text-secondary text-sm mb-1">Start Time *</label>
-                    <input type="time" name="startTime" class="form-control form-control-sm" required>
-                </div>
-                <div class="mb-2">
-                    <label class="text-secondary text-sm mb-1">End Time *</label>
-                    <input type="time" name="endTime" class="form-control form-control-sm" required>
-                </div>--}}
                 <div class="mb-2">
                     <label class="text-secondary text-sm mb-1">Title</label>
                     <input type="text" name="title" class="form-control form-control-sm">
@@ -282,15 +272,15 @@
             }
         }
         function initAppointmentCalendar() {
-            let parentForm = $('.add-appt-form');
-            var calendarElem = parentForm.find('.pro-appointment-calendar')
+            var calendarElem = $('.pro-appointment-calendar');
             calendarElem.datepicker({
                 format: 'yyyy-mm-dd'
             });
             calendarElem.on('changeDate', function () {
                 console.log(calendarElem.datepicker('getFormattedDate'));
-
-                // parentForm.find('.selected-date').text(calendarElem.datepicker('getFormattedDate'));
+                let parentForm = $(this).closest('form');
+                parentForm.find('[name="date"]').val(calendarElem.datepicker('getFormattedDate'));
+                parentForm.find('[name="startTime"], [name="endTime"]').val('');
                 parentForm.find('.slot-picker.start-time').removeClass('disabled');
                 let params = 'proUid={{ $pro->uid }}&' +
                     'timeZone=' + parentForm.find('[name="timeZone"]').val() + '&' +
@@ -313,15 +303,28 @@
             });
 
             $(document).on('click', '.slot-picker td:not(.blocked)', function() {
+                let parentForm = $(this).closest('form');
                 $(this).closest('.slot-picker').find('td.selected').removeClass('selected');
                 $(this).addClass('selected');
                 selectedStart = +$(this).attr('data-start');
-                let parentForm = $('.add-appt-form');
                 if($(this).closest('.slot-picker').is('.start-time')) {
                     parentForm.find('.slot-picker.end-time td.selected').removeClass('selected');
                     parentForm.find('.slot-picker.end-time').removeClass('disabled');
+                    parentForm.find('[name="startTime"]').val($(this).text());
                     markBookedSlots($('.slot-picker.end-time'), booked);
                 }
+                else {
+                    parentForm.find('[name="endTime"]').val($(this).text());
+                }
+            });
+
+            $(document).on('change', '[name="timeZone"]', function() {
+                if(this.value) {
+                    $(this).closest('form').find('.pro-appointment-calendar').removeClass('disabled');
+                }
+                else {
+                    $(this).closest('form').find('.pro-appointment-calendar').addClass('disabled');
+                }
             });
         }
         addMCInitializer('patient-single-appointment-calendar', initAppointmentCalendar);