Pro availability - timezone related updates

app/Http/Controllers/PracticeManagementController.php

@@ -497,7 +497,7 @@ class PracticeManagementController extends Controller
 
         $selectedPro = Pro::where('uid', $proUid)->first();
 
-        return $selectedPro->getAvailabilityEvents($startDate, $endDate);
+        return $selectedPro->getAvailabilityEvents($startDate, $endDate, $request->input('tz') ? $request->input('tz') : 'EASTERN');
     }
 
     public function proAvailabilityFilter(Request $request)

resources/views/app/practice-management/pro-availability.blade.php

@@ -31,13 +31,12 @@
                         General Availability
                     </span>
                     <span class="mx-2 text-secondary">|</span>
-                    <div moe wide>
+                    <div moe>
                         <a start show>
                             Add (for whole week)
                         </a>
                         <form url="/api/proGeneralAvailability/createForWholeWeek">
                             <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
-                            <input type="hidden" name="timezone" value="EASTERN">
                             <div class="form-group">
                                 <label for="" class="control-label font-weight-bold mb-1">Days </label>
                                 @foreach($daysOfWeek as $dayOfWeek)
@@ -47,6 +46,19 @@
                                 </div>
                                 @endforeach
                             </div>
+                            <div class="form-group">
+                                <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                <select name="timezone" class="form-control form-control-sm" required>
+                                    <option value="">-- select --</option>
+                                    <option value="EASTERN">Eastern</option>
+                                    <option value="CENTRAL">Central</option>
+                                    <option value="MOUNTAIN">Mountain</option>
+                                    <option value="PACIFIC">Pacific</option>
+                                    <option value="ALASKA">Alaska</option>
+                                    <option value="HAWAII">Hawaii</option>
+                                    <option value="PUERTO_RICO">Puerto Rico</option>
+                                </select>
+                            </div>
                             <div class="form-group">
                                 <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                 <input class="form-control" type="time" name="startTime" value="08:00">
@@ -96,12 +108,13 @@
                     <thead>
                         <tr>
                             <th class="pl-3 w-25">Day</th>
-                            <th class="w-75" col-span="3">
+                            <th class="w-75">
                                 <table class="table table-sm m-0">
                                     <thead>
                                     <tr>
                                         <th class="w-25 pb-0 border-0">Start</th>
                                         <th class="w-25 pb-0 border-0">End</th>
+                                        <th class="w-25 pb-0 border-0">Timezone</th>
                                         <th class="pb-0 border-0"></th>
                                     </tr>
                                     </thead>
@@ -120,6 +133,7 @@
                                             <tr class="bg-transparent">
                                                 <td class="w-25 border-0">{{friendly_time($ga->start_time)}}</td>
                                                 <td class="w-25 border-0">{{friendly_time($ga->end_time)}}</td>
+                                                <td class="w-25 border-0">{{$ga->timezone}}</td>
                                                 <td class="border-0">
                                                     <div class="d-flex align-items-center justify-content-end pl-2">
                                                         <div moe wide class="mr-3">
@@ -127,9 +141,21 @@
                                                                 Add
                                                             </a>
                                                             <form url="/api/proGeneralAvailability/createForSingleDay">
-                                                                <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
-                                                                <input type="hidden" name="timezone" value="EASTERN">
                                                                 <input type="hidden" name="dayOfWeek" value="{{$dow}}">
+                                                                <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
+                                                                <div class="form-group">
+                                                                    <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                                                    <select name="timezone" class="form-control form-control-sm" required>
+                                                                        <option value="">-- select --</option>
+                                                                        <option value="EASTERN">Eastern</option>
+                                                                        <option value="CENTRAL">Central</option>
+                                                                        <option value="MOUNTAIN">Mountain</option>
+                                                                        <option value="PACIFIC">Pacific</option>
+                                                                        <option value="ALASKA">Alaska</option>
+                                                                        <option value="HAWAII">Hawaii</option>
+                                                                        <option value="PUERTO_RICO">Puerto Rico</option>
+                                                                    </select>
+                                                                </div>
                                                                 <div class="form-group">
                                                                     <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                                                     <input class="form-control" type="time" name="startTime" value="08:00">
@@ -151,10 +177,22 @@
                                                                 </a>
                                                                 <form url="/api/proGeneralAvailability/update" right>
                                                                     <input type="hidden" name="uid" value="{{$ga->uid}}">
-                                                                    <input type="hidden" name="timezone" value="EASTERN">
                                                                     <div class="form-group">
                                                                         {{$ga->day_of_week}}
                                                                     </div>
+                                                                    <div class="form-group">
+                                                                        <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                                                        <select name="timezone" class="form-control form-control-sm" required>
+                                                                            <option value="">-- select --</option>
+                                                                            <option value="EASTERN" {{$ga->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
+                                                                            <option value="CENTRAL" {{$ga->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
+                                                                            <option value="MOUNTAIN" {{$ga->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
+                                                                            <option value="PACIFIC" {{$ga->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
+                                                                            <option value="ALASKA" {{$ga->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
+                                                                            <option value="HAWAII" {{$ga->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
+                                                                            <option value="PUERTO_RICO" {{$ga->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
+                                                                        </select>
+                                                                    </div>
                                                                     <div class="form-group">
                                                                         <label for="" class="control-label">Start Time </label>
                                                                         <input class="form-control" type="time" name="startTime" value="{{military_time($ga->start_time)}}">
@@ -203,8 +241,20 @@
                                                         </a>
                                                         <form url="/api/proGeneralAvailability/createForSingleDay">
                                                             <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
-                                                            <input type="hidden" name="timezone" value="EASTERN">
                                                             <input type="hidden" name="dayOfWeek" value="{{$dow}}">
+                                                            <div class="form-group">
+                                                                <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                                                <select name="timezone" class="form-control form-control-sm" required>
+                                                                    <option value="">-- select --</option>
+                                                                    <option value="EASTERN">Eastern</option>
+                                                                    <option value="CENTRAL">Central</option>
+                                                                    <option value="MOUNTAIN">Mountain</option>
+                                                                    <option value="PACIFIC">Pacific</option>
+                                                                    <option value="ALASKA">Alaska</option>
+                                                                    <option value="HAWAII">Hawaii</option>
+                                                                    <option value="PUERTO_RICO">Puerto Rico</option>
+                                                                </select>
+                                                            </div>
                                                             <div class="form-group">
                                                                 <label for="" class="control-label font-weight-bold mb-1">Start Time </label>
                                                                 <input class="form-control" type="time" name="startTime" value="08:00">
@@ -244,11 +294,23 @@
                         </a>
                         <form url="/api/proSpecificAvailability/create">
                             <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
-                            <input type="hidden" name="timezone" value="EASTERN">
                             <div class="mb-2">
                                 <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                 <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                             </div>
+                            <div class="mb-2">
+                                <label for="" class="control-label mb-1">Timezone </label>
+                                <select name="timezone" class="form-control form-control-sm" required>
+                                    <option value="">-- select --</option>
+                                    <option value="EASTERN">Eastern</option>
+                                    <option value="CENTRAL">Central</option>
+                                    <option value="MOUNTAIN">Mountain</option>
+                                    <option value="PACIFIC">Pacific</option>
+                                    <option value="ALASKA">Alaska</option>
+                                    <option value="HAWAII">Hawaii</option>
+                                    <option value="PUERTO_RICO">Puerto Rico</option>
+                                </select>
+                            </div>
                             <div class="mb-2">
                                 <label for="" class="control-label">Start Date </label>
                                 <input class="form-control stag-dp" type="text" name="startDate" value="{{date('m/d/Y')}}"
@@ -279,6 +341,7 @@
                         <tr>
                             <th class="w-25 pl-3">Start Time</th>
                             <th class="w-25">End Time</th>
+                            <th class="w-25">Timezone</th>
                             <th class="w-50"></th>
                         </tr>
                         </thead>
@@ -287,6 +350,7 @@
                             <tr>
                                 <td class="pl-3">{{friendly_date_time_short_with_tz($sa->start_time, true, $sa->timezone?$sa->timezone:'EASTERN')}}</td>
                                 <td>{{friendly_date_time_short_with_tz($sa->end_time, true, $sa->timezone?$sa->timezone:'EASTERN')}}</td>
+                                <td>{{$sa->timezone}}</td>
                                 <td>
                                     <div class="d-flex align-items-center justify-content-end px-2">
                                         <div moe wide class="mr-2">
@@ -295,11 +359,23 @@
                                             </a>
                                             <form right url="/api/proSpecificAvailability/update">
                                                 <input type="hidden" name="uid" value="{{$sa->uid}}">
-                                                <input type="hidden" name="timezone" value="EASTERN">
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                                     <input type="text" class="form-control form-control-sm" name="title" value="{{$sa->title}}">
                                                 </div>
+                                                <div class="form-group">
+                                                    <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                                    <select name="timezone" class="form-control form-control-sm" required>
+                                                        <option value="">-- select --</option>
+                                                        <option value="EASTERN" {{$sa->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
+                                                        <option value="CENTRAL" {{$sa->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
+                                                        <option value="MOUNTAIN" {{$sa->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
+                                                        <option value="PACIFIC" {{$sa->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
+                                                        <option value="ALASKA" {{$sa->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
+                                                        <option value="HAWAII" {{$sa->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
+                                                        <option value="PUERTO_RICO" {{$sa->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
+                                                    </select>
+                                                </div>
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">Start Date </label>
                                                     <input class="form-control stag-dp" type="text" name="startDate" value="{{unfriendly_date($sa->start_time)}}">
@@ -362,15 +438,27 @@
                     <span class="mx-2 text-secondary">|</span>
                     <div moe wide>
                         <a start show>
-                            Add Specific Unvailability
+                            Add Specific Unavailability
                         </a>
                         <form url="/api/proSpecificUnavailability/create">
                             <input type="hidden" name="proUid" value="{{$selectedProUid ? $selectedProUid : $pro->uid}}">
-                            <input type="hidden" name="timezone" value="EASTERN">
                             <div class="mb-2">
                                 <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                 <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
                             </div>
+                            <div class="mb-2">
+                                <label for="" class="control-label mb-1">Timezone </label>
+                                <select name="timezone" class="form-control form-control-sm" required>
+                                    <option value="">-- select --</option>
+                                    <option value="EASTERN">Eastern</option>
+                                    <option value="CENTRAL">Central</option>
+                                    <option value="MOUNTAIN">Mountain</option>
+                                    <option value="PACIFIC">Pacific</option>
+                                    <option value="ALASKA">Alaska</option>
+                                    <option value="HAWAII">Hawaii</option>
+                                    <option value="PUERTO_RICO">Puerto Rico</option>
+                                </select>
+                            </div>
                             <div class="mb-2">
                                 <label for="" class="control-label">Start Date </label>
                                 <input class="form-control stag-dp" type="text" name="startDate" value="{{date('m/d/Y')}}"
@@ -402,6 +490,7 @@
                             <th class="w-25 pl-3">Start Time</th>
                             <th class="w-25">End Time</th>
                             <th class="w-25">Title</th>
+                            <th class="w-25">Timezone</th>
                             <th class="w-25"></th>
                         </tr>
                         </thead>
@@ -411,6 +500,7 @@
                                 <td class="pl-3">{{friendly_date_time_short_with_tz($su->start_time, true, $su->timezone)}}</td>
                                 <td>{{friendly_date_time_short_with_tz($su->end_time, true, $su->timezone)}}</td>
                                 <td>{{$su->title}}</td>
+                                <td>{{$su->timezone}}</td>
                                 <td>
                                     <div class="d-flex align-items-center justify-content-end px-2">
                                         <div moe wide class="mr-2">
@@ -419,14 +509,26 @@
                                             </a>
                                             <form right url="/api/proSpecificUnavailability/update">
                                                 <input type="hidden" name="uid" value="{{$su->uid}}">
-                                                <input type="hidden" name="timezone" value="EASTERN">
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">Title <span class="text-secondary text-sm">(optional)</span></label>
                                                     <input type="text" class="form-control form-control-sm" name="title" value="{{$su->title}}">
                                                 </div>
+                                                <div class="form-group">
+                                                    <label for="" class="control-label font-weight-bold mb-1">Timezone </label>
+                                                    <select name="timezone" class="form-control form-control-sm" required>
+                                                        <option value="">-- select --</option>
+                                                        <option value="EASTERN" {{$su->timezone === 'EASTERN' ? 'selected' : ''}}>Eastern</option>
+                                                        <option value="CENTRAL" {{$su->timezone === 'CENTRAL' ? 'selected' : ''}}>Central</option>
+                                                        <option value="MOUNTAIN" {{$su->timezone === 'MOUNTAIN' ? 'selected' : ''}}>Mountain</option>
+                                                        <option value="PACIFIC" {{$su->timezone === 'PACIFIC' ? 'selected' : ''}}>Pacific</option>
+                                                        <option value="ALASKA" {{$su->timezone === 'ALASKA' ? 'selected' : ''}}>Alaska</option>
+                                                        <option value="HAWAII" {{$su->timezone === 'HAWAII' ? 'selected' : ''}}>Hawaii</option>
+                                                        <option value="PUERTO_RICO" {{$su->timezone === 'PUERTO_RICO' ? 'selected' : ''}}>Puerto Rico</option>
+                                                    </select>
+                                                </div>
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">Start Date </label>
-                                                    <input class="form-control" type="date" name="startDate" value="{{unfriendly_date($su->start_time)}}">
+                                                    <input class="form-control  stag-dp" type="text" name="startDate" value="{{friendly_date_time($su->start_time, false, '', true)}}">
                                                 </div>
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">Start Time </label>
@@ -434,7 +536,7 @@
                                                 </div>
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">End Date </label>
-                                                    <input class="form-control" type="date" name="endDate" value="{{unfriendly_date($su->end_time)}}">
+                                                    <input class="form-control  stag-dp" type="text" name="endDate" value="{{friendly_date_time($su->end_time, false, '', true)}}">
                                                 </div>
                                                 <div class="mb-2">
                                                     <label for="" class="control-label">End Time </label>
@@ -485,6 +587,18 @@
                         <i class="fas fa-user-injured"></i>
                         Pro Availability
                     </strong>
+                    <div class="ml-auto d-inline-flex align-items-center">
+                        <span class="font-weight-bold text-secondary mr-2">Timezone:</span>
+                        <select id="calendar-timezone" class="form-control form-control-sm ml-auto width-200px">
+                            <option value="EASTERN" selected>Eastern</option>
+                            <option value="CENTRAL">Central</option>
+                            <option value="MOUNTAIN">Mountain</option>
+                            <option value="PACIFIC">Pacific</option>
+                            <option value="ALASKA">Alaska</option>
+                            <option value="HAWAII">Hawaii</option>
+                            <option value="PUERTO_RICO">Puerto Rico</option>
+                        </select>
+                    </div>
                 </div>
                 <div class="card-body p-0">
                     <div id="pro-availability-calendar" class="mx-2 my-2"></div>
@@ -498,9 +612,11 @@
     var events = JSON.parse({!! json_encode($events) !!});
     (function() {
 
+        let calendar = null;
+
         function initAvailabilityCalendar() {
             var calendarEl = document.getElementById('pro-availability-calendar');
-            var calendar = new FullCalendar.Calendar(calendarEl, {
+            calendar = new FullCalendar.Calendar(calendarEl, {
                 timeZone: 'US/Eastern',
                 headerToolbar: {
                     left: 'prev,next today',
@@ -517,7 +633,7 @@
                 events: function(info, successCallback, failureCallbackk) {
                     console.log("loading envents:", info.startStr.substr(0, 10), info.endStr.substr(0, 10))
                     jQuery.ajax({
-                        url: '/availability/load/{{ $selectedProUid }}',
+                        url: '/availability/load/{{ $selectedProUid }}?tz=' + $('#calendar-timezone').val(),
                         type: 'POST',
                         dataType: 'json',
                         data: {
@@ -540,6 +656,13 @@
                 .datepicker({
                     minDate: 0,
                     maxDate: '{{date('m') . '/01/' . (date('Y') + 1)}}'
+                })
+            .trigger('change');
+
+            $('#calendar-timezone')
+                .off('change')
+                .on('change', function() {
+                    calendar.refetchEvents();
                 });
         }
         addMCInitializer('pro-availability', initAvailabilityCalendar, '#pro-availability-container');