ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Styling upgrades for the backend calendar page

Browse source
This commit is contained in:
Alex Tselegidis 2020-09-28 15:17:47 +03:00
parent 454c135f0b
commit cab9aed12f
6 changed files with 110 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
application/controllers/Backend.php
View file

@ -103,6 +103,7 @@ class Backend extends CI_Controller {
$view['time_format'] = $this->settings_model->get_setting('time_format'); $view['time_format'] = $this->settings_model->get_setting('time_format');
$view['first_weekday'] = $this->settings_model->get_setting('first_weekday'); $view['first_weekday'] = $this->settings_model->get_setting('first_weekday');
$view['company_name'] = $this->settings_model->get_setting('company_name'); $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_providers'] = $this->providers_model->get_available_providers();
$view['available_services'] = $this->services_model->get_available_services(); $view['available_services'] = $this->services_model->get_available_services();
$view['customers'] = $this->customers_model->get_batch(); $view['customers'] = $this->customers_model->get_batch();

112
application/views/backend/calendar.php
View file

@ -136,7 +136,10 @@
<div class="row"> <div class="row">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<div class="form-group"> <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"> <select id="select-service" class="required form-control">
<?php <?php
// Group services by category, only if there is at least one service // Group services by category, only if there is at least one service
@ -209,13 +212,17 @@
</div> </div>
<div class="form-group"> <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> <select id="select-provider" class="required form-control"></select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="appointment-location" <label for="appointment-location" class="control-label">
class="control-label"><?= lang('location') ?></label> <?= lang('location') ?>
</label>
<input id="appointment-location" class="form-control"> <input id="appointment-location" class="form-control">
</div> </div>
@ -264,12 +271,12 @@
<fieldset> <fieldset>
<legend> <legend>
<?= lang('customer_details_title') ?> <?= 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') ?>"> title="<?= lang('clear_fields_add_existing_customer_hint') ?>">
<i class="far fa-plus-square mr-2"></i> <i class="far fa-plus-square mr-2"></i>
<?= lang('new') ?> <?= lang('new') ?>
</button> </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') ?>"> title="<?= lang('pick_existing_customer_hint') ?>">
<i class="far fa-hand-pointer mr-2"></i> <i class="far fa-hand-pointer mr-2"></i>
<span> <span>
@ -287,49 +294,65 @@
<div class="row"> <div class="row">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<div class="form-group"> <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"> <input id="first-name" class="required form-control">
</div> </div>
<div class="form-group"> <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"> <input id="last-name" class="required form-control">
</div> </div>
<div class="form-group"> <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"> <input id="email" class="required form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone-number" class="control-label"> <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> </label>
<input id="phone-number" class="required form-control"> <input id="phone-number" class="form-control <?= $require_phone_number === '1' ? 'required' : '' ?>">
</div> </div>
<p class="text-danger">
<small><?= lang('fields_are_required') ?></small>
</p>
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<div class="form-group"> <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"> <input id="address" class="form-control">
</div> </div>
<div class="form-group"> <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"> <input id="city" class="form-control">
</div> </div>
<div class="form-group"> <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"> <input id="zip-code" class="form-control">
</div> </div>
<div class="form-group"> <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> <textarea id="customer-notes" rows="2" class="form-control"></textarea>
</div> </div>
</div> </div>
@ -339,7 +362,7 @@
</div> </div>
<div class="modal-footer"> <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> <i class="fas fa-ban"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
@ -369,17 +392,25 @@
<input id="unavailable-id" type="hidden"> <input id="unavailable-id" type="hidden">
<div class="form-group"> <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> <select id="unavailable-provider" class="form-control"></select>
</div> </div>
<div class="form-group"> <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"> <input id="unavailable-start" class="form-control">
</div> </div>
<div class="form-group"> <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"> <input id="unavailable-end" class="form-control">
</div> </div>
@ -403,14 +434,16 @@
</div> </div>
<div class="form-group"> <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> <textarea id="unavailable-notes" rows="3" class="form-control"></textarea>
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class="modal-footer"> <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> <i class="fas fa-ban"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
@ -440,22 +473,32 @@
<input id="custom-availability-period-id" type="hidden"> <input id="custom-availability-period-id" type="hidden">
<div class="form-group"> <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> <select id="custom-availability-period-provider" class="form-control"></select>
</div> </div>
<div class="form-group"> <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"> <input id="custom-availability-period-start" class="form-control">
</div> </div>
<div class="form-group"> <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"> <input id="custom-availability-period-end" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label"><?= lang('timezone') ?></label> <label class="control-label">
<?= lang('timezone') ?>
</label>
<ul> <ul>
<li> <li>
@ -477,7 +520,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="cancel-custom-availability-period" class="btn btn-light" data-dismiss="modal"> <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') ?> <?= lang('cancel') ?>
</button> </button>
<button id="save-custom-availability-period" class="btn btn-primary"> <button id="save-custom-availability-period" class="btn btn-primary">
@ -500,18 +543,19 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label for="google-calendar" <label for="google-calendar" class="control-label">
class="control-label"><?= lang('select_google_calendar_prompt') ?></label> <?= lang('select_google_calendar_prompt') ?>
</label>
<select id="google-calendar" class="form-control"></select> <select id="google-calendar" class="form-control"></select>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="close-calendar" class="btn btn-light" data-dismiss="modal"> <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') ?> <?= lang('cancel') ?>
</button> </button>
<button id="select-calendar" class="btn btn-primary"> <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') ?> <?= lang('select') ?>
</button> </button>
</div> </div>

2
assets/css/backend.css
View file

@ -147,7 +147,7 @@ body .modal .modal-title {
} }
body .modal-header { body .modal-header {
padding: 12px 15px; padding: 20px 15px;
background: #429a82; background: #429a82;
} }

30
assets/js/backend_calendar_default_view.js
View file

@ -250,11 +250,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// If the user has already the sync enabled then apply the proper style changes. // If the user has already the sync enabled then apply the proper style changes.
if ($('#select-filter-item option:selected').attr('google-sync') === 'true') { 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); $('#enable-sync span').text(EALang.disable_sync);
$('#google-sync').prop('disabled', false); $('#google-sync').prop('disabled', false);
} else { } 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); $('#enable-sync span').text(EALang.enable_sync);
$('#google-sync').prop('disabled', true); $('#google-sync').prop('disabled', true);
} }
@ -351,13 +351,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
'class': 'd-flex justify-content-center', 'class': 'd-flex justify-content-center',
'html': [ 'html': [
$('<button/>', { $('<button/>', {
'class': 'edit-popover btn btn-primary ' + displayEdit, 'class': 'close-popover btn btn-outline-secondary mr-2',
'html': [ 'html': [
$('<i/>', { $('<i/>', {
'class': 'far fa-edit mr-2' 'class': 'fas fa-ban mr-2'
}), }),
$('<span/>', { $('<span/>', {
'text': EALang.edit 'text': EALang.close
}) })
] ]
}), }),
@ -373,13 +373,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
] ]
}), }),
$('<button/>', { $('<button/>', {
'class': 'close-popover btn btn-light', 'class': 'edit-popover btn btn-primary ' + displayEdit,
'html': [ 'html': [
$('<i/>', { $('<i/>', {
'class': 'fas fa-ban mr-2' 'class': 'far fa-edit'
}), }),
$('<span/>', { $('<span/>', {
'text': EALang.close 'text': EALang.edit
}) })
] ]
}) })
@ -440,7 +440,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
'text': EALang.delete 'text': EALang.delete
}), }),
$('<button/>', { $('<button/>', {
'class': 'close-popover btn btn-light', 'class': 'close-popover btn btn-outline-secondary',
'html': [ 'html': [
$('<i/>', { $('<i/>', {
'class': 'fas fa-ban mr-2' 'class': 'fas fa-ban mr-2'
@ -555,13 +555,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
'class': 'd-flex justify-content-center', 'class': 'd-flex justify-content-center',
'html': [ 'html': [
$('<button/>', { $('<button/>', {
'class': 'edit-popover btn btn-primary ' + displayEdit, 'class': 'close-popover btn btn-outline-secondary mr-2',
'html': [ 'html': [
$('<i/>', { $('<i/>', {
'class': 'far fa-edit mr-2' 'class': 'fas fa-ban mr-2'
}), }),
$('<span/>', { $('<span/>', {
'text': EALang.edit 'text': EALang.close
}) })
] ]
}), }),
@ -577,13 +577,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
] ]
}), }),
$('<button/>', { $('<button/>', {
'class': 'close-popover btn btn-light', 'class': 'edit-popover btn btn-primary ' + displayEdit,
'html': [ 'html': [
$('<i/>', { $('<i/>', {
'class': 'fas fa-ban mr-2' 'class': 'far fa-edit'
}), }),
$('<span/>', { $('<span/>', {
'text': EALang.close 'text': EALang.edit
}) })
] ]
}) })

4
assets/js/backend_calendar_google_sync.js
View file

@ -53,7 +53,7 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
// The user has granted access to his data. // The user has granted access to his data.
windowHandle.close(); windowHandle.close();
window.clearInterval(authInterval); 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); $('#enable-sync span').text(EALang.disable_sync);
$('#google-sync').prop('disabled', false); $('#google-sync').prop('disabled', false);
$('#select-filter-item option:selected').attr('google-sync', 'true'); $('#select-filter-item option:selected').attr('google-sync', 'true');
@ -103,7 +103,7 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
disableProviderSync(provider.id); 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); $('#enable-sync span').text(EALang.enable_sync);
$('#google-sync').prop('disabled', true); $('#google-sync').prop('disabled', true);
$('#select-filter-item option:selected').attr('google-sync', 'false'); $('#select-filter-item option:selected').attr('google-sync', 'false');

13
assets/js/backend_calendar_unavailabilities_modal.js
View file

@ -30,10 +30,23 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
*/ */
$('#manage-unavailable #save-unavailable').on('click', function () { $('#manage-unavailable #save-unavailable').on('click', function () {
var $dialog = $('#manage-unavailable'); var $dialog = $('#manage-unavailable');
$dialog.find('.modal-message').addClass('d-none');
$dialog.find('.has-error').removeClass('has-error'); $dialog.find('.has-error').removeClass('has-error');
var start = $dialog.find('#unavailable-start').datetimepicker('getDate'); 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')); 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) { if (start > end) {
// Start time is after end time - display message to user. // Start time is after end time - display message to user.
$dialog.find('.modal-message') $dialog.find('.modal-message')