473 lines
24 KiB
PHP
Executable file
473 lines
24 KiB
PHP
Executable file
<link rel="stylesheet" type="text/css" href="<?= asset_url('/assets/ext/jquery-fullcalendar/fullcalendar.min.css') ?>">
|
|
|
|
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/ext/jquery-fullcalendar/fullcalendar.min.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui-timepicker-addon.min.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_default_view.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_table_view.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_google_sync.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_appointments_modal.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_unavailabilities_modal.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_extra_periods_modal.js') ?>"></script>
|
|
<script src="<?= asset_url('assets/js/backend_calendar_api.js') ?>"></script>
|
|
<script>
|
|
var GlobalVariables = {
|
|
'csrfToken' : <?= json_encode($this->security->get_csrf_hash()) ?>,
|
|
'availableProviders' : <?= json_encode($available_providers) ?>,
|
|
'availableServices' : <?= json_encode($available_services) ?>,
|
|
'baseUrl' : <?= json_encode($base_url) ?>,
|
|
'bookAdvanceTimeout' : <?= $book_advance_timeout ?>,
|
|
'dateFormat' : <?= json_encode($date_format) ?>,
|
|
'timeFormat' : <?= json_encode($time_format) ?>,
|
|
'firstWeekday' : <?= json_encode($first_weekday) ?>,
|
|
'editAppointment' : <?= json_encode($edit_appointment) ?>,
|
|
'customers' : <?= json_encode($customers) ?>,
|
|
'secretaryProviders' : <?= json_encode($secretary_providers) ?>,
|
|
'calendarView' : <?= json_encode($calendar_view) ?>,
|
|
'timezones' : <?= json_encode($timezones) ?>,
|
|
'user' : {
|
|
'id' : <?= $user_id ?>,
|
|
'email' : <?= json_encode($user_email) ?>,
|
|
'timezone' : <?= json_encode($timezone) ?>,
|
|
'role_slug' : <?= json_encode($role_slug) ?>,
|
|
'privileges': <?= json_encode($privileges) ?>,
|
|
}
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
BackendCalendar.initialize(GlobalVariables.calendarView);
|
|
});
|
|
</script>
|
|
|
|
<div id="calendar-page" class="container-fluid">
|
|
<div id="calendar-toolbar" class="d-md-flex">
|
|
<div id="calendar-filter" class="col-12 col-md-5 d-flex">
|
|
<div class="form-group calendar-filter-items">
|
|
<label for="select-filter-item" class="mr-3"><?= lang('display_calendar') ?></label>
|
|
<select id="select-filter-item" class="form-control col" title="<?= lang('select_filter_item_hint') ?>">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="calendar-actions" class="col-12 col-md-7">
|
|
<?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER)
|
|
&& config('google_sync_feature') == TRUE): ?>
|
|
<button id="google-sync" class="btn btn-info"
|
|
title="<?= lang('trigger_google_sync_hint') ?>">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span><?= lang('synchronize') ?></span>
|
|
</button>
|
|
|
|
<button id="enable-sync" class="btn btn-light" data-toggle="button"
|
|
title="<?= lang('enable_appointment_sync_hint') ?>">
|
|
<i class="far fa-calendar-alt"></i>
|
|
<span><?= lang('enable_sync') ?></span>
|
|
</button>
|
|
<?php endif ?>
|
|
|
|
<?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
|
|
<div class="btn-group">
|
|
<button class="btn btn-light" type="button" id="insert-appointment">
|
|
<span class="glyphicon glyphicon-plus"></span>
|
|
<?= lang('appointment') ?>
|
|
</button>
|
|
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a href="#" id="insert-unavailable">
|
|
<?= lang('unavailable') ?>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" id="insert-extra-period">
|
|
<?= lang('extra_period') ?>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<?php endif ?>
|
|
|
|
<button id="reload-appointments" class="btn btn-light" title="<?= lang('reload_appointments_hint') ?>">
|
|
<span class="glyphicon glyphicon-repeat"></span>
|
|
</button>
|
|
|
|
<?php if($calendar_view === 'default'): ?>
|
|
<a class="btn btn-light" href="<?= site_url('backend?view=table') ?>"
|
|
title="<?= lang('table') ?>">
|
|
<span class="glyphicon glyphicon-list-alt"></span>
|
|
</a>
|
|
<?php endif ?>
|
|
|
|
<?php if($calendar_view === 'table'): ?>
|
|
<a class="btn btn-light" href="<?= site_url('backend?view=default') ?>"
|
|
title="<?= lang('default') ?>">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
</a>
|
|
<?php endif ?>
|
|
|
|
<button id="toggle-fullscreen" class="btn btn-light">
|
|
<span class="glyphicon glyphicon-fullscreen"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="calendar"><!-- Dynamically Generated Content --></div>
|
|
</div>
|
|
|
|
<!-- MANAGE APPOINTMENT MODAL -->
|
|
|
|
<div id="manage-appointment" class="modal fade" data-keyboard="true" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title"><?= lang('edit_appointment_title') ?></h3>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="modal-message alert d-none"></div>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<legend><?= lang('appointment_details_title') ?></legend>
|
|
|
|
<input id="appointment-id" type="hidden">
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="select-service" class="control-label"><?= lang('service') ?> *</label>
|
|
<select id="select-service" class="required form-control">
|
|
<?php
|
|
// Group services by category, only if there is at least one service
|
|
// with a parent category.
|
|
$has_category = FALSE;
|
|
foreach($available_services as $service) {
|
|
if ($service['category_id'] != NULL) {
|
|
$has_category = TRUE;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ($has_category) {
|
|
$grouped_services = array();
|
|
|
|
foreach($available_services as $service) {
|
|
if ($service['category_id'] != NULL) {
|
|
if (!isset($grouped_services[$service['category_name']])) {
|
|
$grouped_services[$service['category_name']] = array();
|
|
}
|
|
|
|
$grouped_services[$service['category_name']][] = $service;
|
|
}
|
|
}
|
|
|
|
// We need the uncategorized services at the end of the list so
|
|
// we will use another iteration only for the uncategorized services.
|
|
$grouped_services['uncategorized'] = array();
|
|
foreach($available_services as $service) {
|
|
if ($service['category_id'] == NULL) {
|
|
$grouped_services['uncategorized'][] = $service;
|
|
}
|
|
}
|
|
|
|
foreach($grouped_services as $key => $group) {
|
|
$group_label = ($key != 'uncategorized')
|
|
? $group[0]['category_name'] : 'Uncategorized';
|
|
|
|
if (count($group) > 0) {
|
|
echo '<optgroup label="' . $group_label . '">';
|
|
foreach($group as $service) {
|
|
echo '<option value="' . $service['id'] . '">'
|
|
. $service['name'] . '</option>';
|
|
}
|
|
echo '</optgroup>';
|
|
}
|
|
}
|
|
} else {
|
|
foreach($available_services as $service) {
|
|
echo '<option value="' . $service['id'] . '">'
|
|
. $service['name'] . '</option>';
|
|
}
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="select-provider" class="control-label"><?= lang('provider') ?> *</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>
|
|
<input id="appointment-location" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="appointment-notes" class="control-label"><?= lang('notes') ?></label>
|
|
<textarea id="appointment-notes" class="form-control" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="start-datetime" class="control-label"><?= lang('start_date_time') ?></label>
|
|
<input id="start-datetime" class="required form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="end-datetime" class="control-label"><?= lang('end_date_time') ?></label>
|
|
<input id="end-datetime" class="required form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label"><?= lang('timezone') ?></label>
|
|
|
|
<ul>
|
|
<li>
|
|
<?= lang('provider') ?>:
|
|
<span class="provider-timezone">
|
|
-
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<?= lang('current_user') ?>:
|
|
<span>
|
|
<?= $timezones[$timezone] ?>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<br>
|
|
|
|
<fieldset>
|
|
<legend>
|
|
<?= lang('customer_details_title') ?>
|
|
<button id="new-customer" class="btn btn-light btn-xs"
|
|
title="<?= lang('clear_fields_add_existing_customer_hint') ?>"
|
|
type="button"><?= lang('new') ?>
|
|
</button>
|
|
<button id="select-customer" class="btn btn-info btn-xs"
|
|
title="<?= lang('pick_existing_customer_hint') ?>"
|
|
type="button"><?= lang('select') ?>
|
|
</button>
|
|
<input id="filter-existing-customers"
|
|
placeholder="<?= lang('type_to_filter_customers') ?>"
|
|
style="display: none;" class="input-sm form-control">
|
|
<div id="existing-customers-list" style="display: none;"></div>
|
|
</legend>
|
|
|
|
<input id="customer-id" type="hidden">
|
|
|
|
<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>
|
|
<input id="first-name" class="required form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
|
|
<input id="last-name" class="required form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" class="control-label"><?= lang('email') ?> *</label>
|
|
<input id="email" class="required form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone-number" class="control-label"><?= lang('phone_number') ?> *</label>
|
|
<input id="phone-number" class="required form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<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>
|
|
<input id="city" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<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>
|
|
<textarea id="customer-notes" rows="2" class="form-control"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="save-appointment" class="btn btn-info"><?= lang('save') ?></button>
|
|
<button id="cancel-appointment" class="btn btn-light" data-dismiss="modal"><?= lang('cancel') ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MANAGE UNAVAILABLE MODAL -->
|
|
|
|
<div id="manage-unavailable" class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title"><?= lang('new_unavailable_title') ?></h3>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-message alert hidden"></div>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<input id="unavailable-id" type="hidden">
|
|
|
|
<div class="form-group">
|
|
<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>
|
|
<input id="unavailable-start" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="unavailable-end" class="control-label"><?= lang('end') ?></label>
|
|
<input id="unavailable-end" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label"><?= lang('timezone') ?></label>
|
|
|
|
<ul>
|
|
<li>
|
|
<?= lang('provider') ?>:
|
|
<span class="provider-timezone">
|
|
-
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<?= lang('current_user') ?>:
|
|
<span>
|
|
<?= $timezones[$timezone] ?>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<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="save-unavailable" class="btn btn-info"><?= lang('save') ?></button>
|
|
<button id="cancel-unavailable" class="btn btn-light" data-dismiss="modal"><?= lang('cancel') ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MANAGE EXTRA PERIOD MODAL -->
|
|
|
|
<div id="manage-extra" class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title"><?= lang('new_extra_period_title') ?></h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-message alert hidden"></div>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<input id="extra-id" type="hidden">
|
|
|
|
<div class="form-group">
|
|
<label for="extra-provider" class="control-label"><?= lang('provider') ?></label>
|
|
<select id="extra-provider" class="form-control"></select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="extra-start" class="control-label"><?= lang('start') ?></label>
|
|
<input id="extra-start" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="extra-end" class="control-label"><?= lang('end') ?></label>
|
|
<input id="extra-end" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label"><?= lang('timezone') ?></label>
|
|
|
|
<ul>
|
|
<li>
|
|
<?= lang('provider') ?>:
|
|
<span class="provider-timezone">
|
|
-
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<?= lang('current_user') ?>:
|
|
<span>
|
|
<?= $timezones[$timezone] ?>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="save-extra" class="btn btn-primary"><?= lang('save') ?></button>
|
|
<button id="cancel-extra" class="btn btn-default" data-dismiss="modal"><?= lang('cancel') ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SELECT GOOGLE CALENDAR MODAL -->
|
|
|
|
<div id="select-google-calendar" class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title"><?= lang('select_google_calendar') ?></h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<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="select-calendar" class="btn btn-info"><?= lang('select') ?></button>
|
|
<button id="close-calendar" class="btn btn-light" data-dismiss="modal"><?= lang('close') ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|