Edit maintenance schedule, handle timezone properly (#11889)

Was not properly formatting to user's timezone
Also handle the case where the browser and server timezone don't match
don't show incorrect values in dialog then pop to the correct ones.
Update title on modal to be appropriate

app/Http/Controllers/Table/AlertScheduleController.php

@@ -79,23 +79,4 @@ class AlertScheduleController extends TableController
             'status' => $schedule->status,
         ];
     }
-
-//    /**
-//     * @param Request $request
-//     * @param Builder $query
-//     * @return Builder
-//     */
-//    protected function sort($request, $query)
-//    {
-//        $columns = $this->sortFields($request);
-//        $sort = $request->get('sort', $this->default_sort);
-//
-//        foreach ($sort as $column => $direction) {
-//            if (isset($columns[$column])) {
-//                $query->orderBy($columns[$column], $direction == 'desc' ? 'desc' : 'asc');
-//            }
-//        }
-//
-//        return $query;
-//    }
 }

includes/html/forms/schedule-maintenance.inc.php

@@ -183,10 +183,10 @@ if ($sub_type == 'new-maintenance') {
         'message' => $message,
     );
 } elseif ($sub_type == 'parse-maintenance') {
-    $schedule_id = mres($_POST['schedule_id']);
-    $alert_schedule    = \App\Models\AlertSchedule::findOrFail($schedule_id);
-    $items       = [];
-    foreach (dbFetchRows('SELECT `alert_schedulable_type`, `alert_schedulable_id` FROM `alert_schedulables` WHERE `schedule_id`=?', [$schedule_id]) as $target) {
+    $alert_schedule = \App\Models\AlertSchedule::findOrFail($_POST['schedule_id']);
+    $items = [];
+
+    foreach (dbFetchRows('SELECT `alert_schedulable_type`, `alert_schedulable_id` FROM `alert_schedulables` WHERE `schedule_id`=?', [$alert_schedule->schedule_id]) as $target) {
         $id = $target['alert_schedulable_id'];
         if ($target['alert_schedulable_type'] == 'location') {
             $text = dbFetchCell('SELECT location FROM locations WHERE id = ?', [$id]);

includes/html/modal/alert_schedule.inc.php

@@ -20,9 +20,14 @@ if (\Auth::user()->hasGlobalAdmin()) {
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h5 class="modal-title" id="Create">Create maintenance</h5>
+                <h5 class="modal-title" id="sched-title">Create maintenance</h5>
             </div>
             <div class="modal-body">
+                <div id="sched-spinner" style="display: none; width: 100%; height: 200px">
+                    <div style="display: flex; justify-content: center; width: 100%; height: 100%">
+                        <i class="fa fa-lg fa-spinner fa-spin" style="align-self: center"></i>
+                    </div>
+                </div>
                 <form method="post" role="form" id="sched-form" class="form-horizontal schedule-maintenance-form">
                     <?php echo csrf_field() ?>
                     <input type="hidden" name="schedule_id" id="schedule_id">
@@ -148,6 +153,9 @@ $('#schedule-maintenance').on('hide.bs.modal', function (event) {
 $('#schedule-maintenance').on('show.bs.modal', function (event) {
     var schedule_id = $('#schedule_id').val();
     if (schedule_id > 0) {
+        $('#sched-title').text('<?php echo __('Edit Schedule'); ?>');
+        $('#sched-form').hide();
+        $('#sched-spinner').show();
         $.ajax({
             type: "POST",
             url: "ajax_form.php",
@@ -171,10 +179,10 @@ $('#schedule-maintenance').on('show.bs.modal', function (event) {
                 if (output['recurring'] == 0){
                     var start = $('#start').data("DateTimePicker");
                     if (output['start']) {
-                        start.minDate(output['start']);
+                        start.minDate(moment(output['start']));
                     }
-                    start.date(output['start']);
-                    $('#end').data("DateTimePicker").date(output['end']);
+                    start.date(moment(output['start']));
+                    $('#end').data("DateTimePicker").date(moment(output['end']));
 
                     $('#norecurringgroup').show();
                     $('#recurringgroup').hide();
@@ -187,6 +195,7 @@ $('#schedule-maintenance').on('show.bs.modal', function (event) {
                     $("#recurring").bootstrapSwitch('state', false);
                     $('#recurring').val(0);
                 }else{
+                    $('#sched-title').text('<?php echo __('Create Schedule'); ?>');
                     var start_recurring_dt = $('#start_recurring_dt').data("DateTimePicker");
                     if (output['start_recurring_dt']) {
                         start_recurring_dt.minDate(output['start_recurring_dt']);
@@ -220,8 +229,19 @@ $('#schedule-maintenance').on('show.bs.modal', function (event) {
                     $('#end').val('');
                 }
 
+                // show
+                $('#sched-spinner').hide();
+                $('#sched-form').show();
+            },
+            error: function(){
+                $("#schedule-maintenance").modal('hide');
+                toastr.error('<?php echo __('Failed to load schedule'); ?>');
             }
         });
+    } else {
+        $('#sched-title').text('<?php echo __('Create Schedule'); ?>');
+        $('#sched-spinner').hide();
+        $('#sched-form').show();
     }
 });
 
@@ -235,14 +255,18 @@ function recurring_switch() {
         $('#recurringgroup').hide();
         $('#recurring').val(0);
     }
-};
+}
 
 $('#sched-submit').click('', function(e) {
     e.preventDefault();
+    // parse start/end to ISO8601
+    var formData = $('form.schedule-maintenance-form').serializeArray();
+    formData.find(input => input.name === 'start').value = $('#start').data("DateTimePicker").date().format();
+    formData.find(input => input.name === 'end').value = $('#end').data("DateTimePicker").date().format();
     $.ajax({
         type: "POST",
         url: "ajax_form.php",
-        data: $('form.schedule-maintenance-form').serialize(),
+        data: formData,
         dataType: "json",
         success: function(data){
             if(data.status == 'ok') {

includes/html/pages/alert-schedule.inc.php

@@ -71,10 +71,10 @@ var grid = $("#alert-schedule").bootgrid({
     },
     templates: {
         header: "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\">"+
-                "<div class=\"col-sm-8 actionBar\"><span class=\"pull-left\">"+
+                "<div class=\"col-sm-4 actionBar\"><span class=\"pull-left\">"+
                 "<button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#schedule-maintenance\">Schedule maintenance</button>"+
                 "</span></div>"+
-                "<div class=\"col-sm-4 actionBar\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div></div></div>"
+                "<div class=\"col-sm-8 actionBar\"><p class=\"{{css.search}}\"></p><p class=\"{{css.actions}}\"></p></div></div></div>"
     },
     rowCount: [50, 100, 250, -1],
     url: "ajax/table/alert-schedule"