From cab9aed12f2533bb2be1c14fbf2f64f0eee41009 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 28 Sep 2020 15:17:47 +0300
Subject: [PATCH] Styling upgrades for the backend calendar page

---
 application/controllers/Backend.php           |   1 +
 application/views/backend/calendar.php        | 112 ++++++++++++------
 assets/css/backend.css                        |   2 +-
 assets/js/backend_calendar_default_view.js    |  30 ++---
 assets/js/backend_calendar_google_sync.js     |   4 +-
 ...backend_calendar_unavailabilities_modal.js |  13 ++
 6 files changed, 110 insertions(+), 52 deletions(-)

diff --git a/application/controllers/Backend.php b/application/controllers/Backend.php
index 35932d78..5227d3d9 100755
--- a/application/controllers/Backend.php
+++ b/application/controllers/Backend.php
@@ -103,6 +103,7 @@ class Backend extends CI_Controller {
         $view['time_format'] = $this->settings_model->get_setting('time_format');
         $view['first_weekday'] = $this->settings_model->get_setting('first_weekday');
         $view['company_name'] = $this->settings_model->get_setting('company_name');
+        $view['require_phone_number'] = $this->settings_model->get_setting('require_phone_number');
         $view['available_providers'] = $this->providers_model->get_available_providers();
         $view['available_services'] = $this->services_model->get_available_services();
         $view['customers'] = $this->customers_model->get_batch();
diff --git a/application/views/backend/calendar.php b/application/views/backend/calendar.php
index a0c384a8..e9b1bc2e 100755
--- a/application/views/backend/calendar.php
+++ b/application/views/backend/calendar.php
@@ -136,7 +136,10 @@
                         <div class="row">
                             <div class="col-12 col-sm-6">
                                 <div class="form-group">
-                                    <label for="select-service" class="control-label"><?= lang('service') ?> *</label>
+                                    <label for="select-service" class="control-label">
+                                        <?= lang('service') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
                                     <select id="select-service" class="required form-control">
                                         <?php
                                         // Group services by category, only if there is at least one service
@@ -209,13 +212,17 @@
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="select-provider" class="control-label"><?= lang('provider') ?> *</label>
+                                    <label for="select-provider" class="control-label">
+                                        <?= lang('provider') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
                                     <select id="select-provider" class="required form-control"></select>
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="appointment-location"
-                                           class="control-label"><?= lang('location') ?></label>
+                                    <label for="appointment-location" class="control-label">
+                                        <?= lang('location') ?>
+                                    </label>
                                     <input id="appointment-location" class="form-control">
                                 </div>
 
@@ -264,12 +271,12 @@
                     <fieldset>
                         <legend>
                             <?= lang('customer_details_title') ?>
-                            <button id="new-customer" class="btn btn-light btn-sm" type="button"
+                            <button id="new-customer" class="btn btn-secondary btn-sm" type="button"
                                     title="<?= lang('clear_fields_add_existing_customer_hint') ?>">
                                 <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('new') ?>
                             </button>
-                            <button id="select-customer" class="btn btn-primary btn-sm" type="button"
+                            <button id="select-customer" class="btn btn-secondary btn-sm" type="button"
                                     title="<?= lang('pick_existing_customer_hint') ?>">
                                 <i class="far fa-hand-pointer mr-2"></i>
                                 <span>
@@ -287,49 +294,65 @@
                         <div class="row">
                             <div class="col-12 col-sm-6">
                                 <div class="form-group">
-                                    <label for="first-name" class="control-label"><?= lang('first_name') ?> *</label>
+                                    <label for="first-name" class="control-label">
+                                        <?= lang('first_name') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
                                     <input id="first-name" class="required form-control">
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
+                                    <label for="last-name" class="control-label">
+                                        <?= lang('last_name') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
                                     <input id="last-name" class="required form-control">
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="email" class="control-label"><?= lang('email') ?> *</label>
+                                    <label for="email" class="control-label">
+                                        <?= lang('email') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
                                     <input id="email" class="required form-control">
                                 </div>
 
                                 <div class="form-group">
                                     <label for="phone-number" class="control-label">
-                                        <?= lang('phone_number') ?> *
+                                        <?= lang('phone_number') ?>
+                                        <?php if ($require_phone_number === '1'): ?>
+                                            <span class="text-danger">*</span>
+                                        <?php endif ?>
                                     </label>
-                                    <input id="phone-number" class="required form-control">
+                                    <input id="phone-number" class="form-control <?= $require_phone_number === '1' ? 'required' : '' ?>">
                                 </div>
-
-                                <p class="text-danger">
-                                    <small><?= lang('fields_are_required') ?></small>
-                                </p>
                             </div>
                             <div class="col-12 col-sm-6">
                                 <div class="form-group">
-                                    <label for="address" class="control-label"><?= lang('address') ?></label>
+                                    <label for="address" class="control-label">
+                                        <?= lang('address') ?>
+                                    </label>
                                     <input id="address" class="form-control">
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="city" class="control-label"><?= lang('city') ?></label>
+                                    <label for="city" class="control-label">
+                                        <?= lang('city') ?>
+                                    </label>
                                     <input id="city" class="form-control">
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="zip-code" class="control-label"><?= lang('zip_code') ?></label>
+                                    <label for="zip-code" class="control-label">
+                                        <?= lang('zip_code') ?>
+                                    </label>
                                     <input id="zip-code" class="form-control">
                                 </div>
 
                                 <div class="form-group">
-                                    <label for="customer-notes" class="control-label"><?= lang('notes') ?></label>
+                                    <label for="customer-notes" class="control-label">
+                                        <?= lang('notes') ?>
+                                    </label>
                                     <textarea id="customer-notes" rows="2" class="form-control"></textarea>
                                 </div>
                             </div>
@@ -339,7 +362,7 @@
             </div>
 
             <div class="modal-footer">
-                <button id="cancel-appointment" class="btn btn-light" data-dismiss="modal">
+                <button id="cancel-appointment" class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban"></i>
                     <?= lang('cancel') ?>
                 </button>
@@ -369,17 +392,25 @@
                         <input id="unavailable-id" type="hidden">
 
                         <div class="form-group">
-                            <label for="unavailable-provider" class="control-label"><?= lang('provider') ?></label>
+                            <label for="unavailable-provider" class="control-label">
+                                <?= lang('provider') ?>
+                            </label>
                             <select id="unavailable-provider" class="form-control"></select>
                         </div>
 
                         <div class="form-group">
-                            <label for="unavailable-start" class="control-label"><?= lang('start') ?></label>
+                            <label for="unavailable-start" class="control-label">
+                                <?= lang('start') ?>
+                                <span class="text-danger">*</span>
+                            </label>
                             <input id="unavailable-start" class="form-control">
                         </div>
 
                         <div class="form-group">
-                            <label for="unavailable-end" class="control-label"><?= lang('end') ?></label>
+                            <label for="unavailable-end" class="control-label">
+                                <?= lang('end') ?>
+                                <span class="text-danger">*</span>
+                            </label>
                             <input id="unavailable-end" class="form-control">
                         </div>
 
@@ -403,14 +434,16 @@
                         </div>
 
                         <div class="form-group">
-                            <label for="unavailable-notes" class="control-label"><?= lang('notes') ?></label>
+                            <label for="unavailable-notes" class="control-label">
+                                <?= lang('notes') ?>
+                            </label>
                             <textarea id="unavailable-notes" rows="3" class="form-control"></textarea>
                         </div>
                     </fieldset>
                 </form>
             </div>
             <div class="modal-footer">
-                <button id="cancel-unavailable" class="btn btn-light" data-dismiss="modal">
+                <button id="cancel-unavailable" class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban"></i>
                     <?= lang('cancel') ?>
                 </button>
@@ -440,22 +473,32 @@
                         <input id="custom-availability-period-id" type="hidden">
 
                         <div class="form-group">
-                            <label for="custom-availability-period-provider" class="control-label"><?= lang('provider') ?></label>
+                            <label for="custom-availability-period-provider" class="control-label">
+                                <?= lang('provider') ?>
+                            </label>
                             <select id="custom-availability-period-provider" class="form-control"></select>
                         </div>
 
                         <div class="form-group">
-                            <label for="custom-availability-period-start" class="control-label"><?= lang('start') ?></label>
+                            <label for="custom-availability-period-start" class="control-label">
+                                <?= lang('start') ?>
+                                <span class="text-danger">*</span>
+                            </label>
                             <input id="custom-availability-period-start" class="form-control">
                         </div>
 
                         <div class="form-group">
-                            <label for="custom-availability-period-end" class="control-label"><?= lang('end') ?></label>
+                            <label for="custom-availability-period-end" class="control-label">
+                                <?= lang('end') ?>
+                                <span class="text-danger">*</span>
+                            </label>
                             <input id="custom-availability-period-end" class="form-control">
                         </div>
 
                         <div class="form-group">
-                            <label class="control-label"><?= lang('timezone') ?></label>
+                            <label class="control-label">
+                                <?= lang('timezone') ?>
+                            </label>
 
                             <ul>
                                 <li>
@@ -477,7 +520,7 @@
             </div>
             <div class="modal-footer">
                 <button id="cancel-custom-availability-period" class="btn btn-light" data-dismiss="modal">
-                    <i class="fas fa-ban"></i>
+                    <i class="fas fa-ban mr-2"></i>
                     <?= lang('cancel') ?>
                 </button>
                 <button id="save-custom-availability-period" class="btn btn-primary">
@@ -500,18 +543,19 @@
             </div>
             <div class="modal-body">
                 <div class="form-group">
-                    <label for="google-calendar"
-                           class="control-label"><?= lang('select_google_calendar_prompt') ?></label>
+                    <label for="google-calendar" class="control-label">
+                        <?= lang('select_google_calendar_prompt') ?>
+                    </label>
                     <select id="google-calendar" class="form-control"></select>
                 </div>
             </div>
             <div class="modal-footer">
                 <button id="close-calendar" class="btn btn-light" data-dismiss="modal">
-                    <i class="fas fa-ban"></i>
+                    <i class="fas fa-ban mr-2"></i>
                     <?= lang('cancel') ?>
                 </button>
                 <button id="select-calendar" class="btn btn-primary">
-                    <i class="far fa-check-square"></i>
+                    <i class="far fa-check-square mr-2"></i>
                     <?= lang('select') ?>
                 </button>
             </div>
diff --git a/assets/css/backend.css b/assets/css/backend.css
index 79ce7fa2..f75b2898 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -147,7 +147,7 @@ body .modal .modal-title {
 }
 
 body .modal-header {
-    padding: 12px 15px;
+    padding: 20px 15px;
     background: #429a82;
 }
 
diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js
index b4cfbe97..8e3b3d75 100755
--- a/assets/js/backend_calendar_default_view.js
+++ b/assets/js/backend_calendar_default_view.js
@@ -250,11 +250,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
 
                 // If the user has already the sync enabled then apply the proper style changes.
                 if ($('#select-filter-item option:selected').attr('google-sync') === 'true') {
-                    $('#enable-sync').removeClass('btn-light').addClass('btn-danger enabled');
+                    $('#enable-sync').removeClass('btn-light').addClass('btn-secondary enabled');
                     $('#enable-sync span').text(EALang.disable_sync);
                     $('#google-sync').prop('disabled', false);
                 } else {
-                    $('#enable-sync').removeClass('btn-danger enabled').addClass('btn-light');
+                    $('#enable-sync').removeClass('btn-secondary enabled').addClass('btn-light');
                     $('#enable-sync span').text(EALang.enable_sync);
                     $('#google-sync').prop('disabled', true);
                 }
@@ -351,13 +351,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                         'class': 'd-flex justify-content-center',
                         'html': [
                             $('<button/>', {
-                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'class': 'close-popover btn btn-outline-secondary mr-2',
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'far fa-edit mr-2'
+                                        'class': 'fas fa-ban mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.edit
+                                        'text': EALang.close
                                     })
                                 ]
                             }),
@@ -373,13 +373,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'close-popover btn btn-light',
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'fas fa-ban mr-2'
+                                        'class': 'far fa-edit'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.close
+                                        'text': EALang.edit
                                     })
                                 ]
                             })
@@ -440,7 +440,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                                 'text': EALang.delete
                             }),
                             $('<button/>', {
-                                'class': 'close-popover btn btn-light',
+                                'class': 'close-popover btn btn-outline-secondary',
                                 'html': [
                                     $('<i/>', {
                                         'class': 'fas fa-ban mr-2'
@@ -555,13 +555,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                         'class': 'd-flex justify-content-center',
                         'html': [
                             $('<button/>', {
-                                'class': 'edit-popover btn btn-primary ' + displayEdit,
+                                'class': 'close-popover btn btn-outline-secondary mr-2',
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'far fa-edit mr-2'
+                                        'class': 'fas fa-ban mr-2'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.edit
+                                        'text': EALang.close
                                     })
                                 ]
                             }),
@@ -577,13 +577,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                                 ]
                             }),
                             $('<button/>', {
-                                'class': 'close-popover btn btn-light',
+                                'class': 'edit-popover btn btn-primary ' + displayEdit,
                                 'html': [
                                     $('<i/>', {
-                                        'class': 'fas fa-ban mr-2'
+                                        'class': 'far fa-edit'
                                     }),
                                     $('<span/>', {
-                                        'text': EALang.close
+                                        'text': EALang.edit
                                     })
                                 ]
                             })
diff --git a/assets/js/backend_calendar_google_sync.js b/assets/js/backend_calendar_google_sync.js
index 19268859..4e221712 100644
--- a/assets/js/backend_calendar_google_sync.js
+++ b/assets/js/backend_calendar_google_sync.js
@@ -53,7 +53,7 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
                                 // The user has granted access to his data.
                                 windowHandle.close();
                                 window.clearInterval(authInterval);
-                                $('#enable-sync').addClass('btn-danger enabled').removeClass('btn-light');
+                                $('#enable-sync').addClass('btn-secondary enabled').removeClass('btn-light');
                                 $('#enable-sync span').text(EALang.disable_sync);
                                 $('#google-sync').prop('disabled', false);
                                 $('#select-filter-item option:selected').attr('google-sync', 'true');
@@ -103,7 +103,7 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
 
                 disableProviderSync(provider.id);
 
-                $('#enable-sync').removeClass('btn-danger enabled').addClass('btn-light');
+                $('#enable-sync').removeClass('btn-secondary enabled').addClass('btn-light');
                 $('#enable-sync span').text(EALang.enable_sync);
                 $('#google-sync').prop('disabled', true);
                 $('#select-filter-item option:selected').attr('google-sync', 'false');
diff --git a/assets/js/backend_calendar_unavailabilities_modal.js b/assets/js/backend_calendar_unavailabilities_modal.js
index a75345de..ca16efa2 100755
--- a/assets/js/backend_calendar_unavailabilities_modal.js
+++ b/assets/js/backend_calendar_unavailabilities_modal.js
@@ -30,10 +30,23 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
          */
         $('#manage-unavailable #save-unavailable').on('click', function () {
             var $dialog = $('#manage-unavailable');
+            $dialog.find('.modal-message').addClass('d-none');
             $dialog.find('.has-error').removeClass('has-error');
+
             var start = $dialog.find('#unavailable-start').datetimepicker('getDate');
+
+            if (!start) {
+                $dialog.find('#unavailable-start').closest('.form-group').addClass('has-error');
+                return;
+            }
+
             var end = Date.parse($dialog.find('#unavailable-end').datetimepicker('getDate'));
 
+            if (!end) {
+                $dialog.find('#unavailable-end').closest('.form-group').addClass('has-error');
+                return;
+            }
+
             if (start > end) {
                 // Start time is after end time - display message to user.
                 $dialog.find('.modal-message')