mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-12-22 22:52:35 +03:00
Styling improvements in backend calendar form.
This commit is contained in:
alext
parent
861f49c259
commit
71c1bf38ff
2 changed files with 171 additions and 240 deletions
|
|
@ -39,16 +39,13 @@
|
|||
<div id="calendar-toolbar">
|
||||
<div id="calendar-filter" class="form-inline col-xs-12 col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="select-filter-item">
|
||||
<?= lang('display_calendar') ?>
|
||||
</label>
|
||||
<select id="select-filter-item" class="form-control"
|
||||
title="<?= lang('select_filter_item_hint') ?>">
|
||||
<label for="select-filter-item"><?= lang('display_calendar') ?></label>
|
||||
<select id="select-filter-item" class="form-control" title="<?= lang('select_filter_item_hint') ?>">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="calendar-actions" class="col-xs-12 col-md-7">
|
||||
<div id="calendar-actions" class="col-xs-12 col-sm-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-primary"
|
||||
|
|
@ -65,21 +62,18 @@
|
|||
<?php endif ?>
|
||||
|
||||
<?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
|
||||
<button id="insert-appointment" class="btn btn-default"
|
||||
title="<?= lang('new_appointment_hint') ?>">
|
||||
<button id="insert-appointment" class="btn btn-default" title="<?= lang('new_appointment_hint') ?>">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<?= lang('appointment') ?>
|
||||
</button>
|
||||
|
||||
<button id="insert-unavailable" class="btn btn-default"
|
||||
title="<?= lang('unavailable_periods_hint') ?>">
|
||||
<button id="insert-unavailable" class="btn btn-default" title="<?= lang('unavailable_periods_hint') ?>">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
<?= lang('unavailable') ?>
|
||||
</button>
|
||||
<?php endif ?>
|
||||
|
||||
<button id="reload-appointments" class="btn btn-default"
|
||||
title="<?= lang('reload_appointments_hint') ?>">
|
||||
<button id="reload-appointments" class="btn btn-default" title="<?= lang('reload_appointments_hint') ?>">
|
||||
<span class="glyphicon glyphicon-repeat"></span>
|
||||
<?= lang('reload') ?>
|
||||
</button>
|
||||
|
|
@ -90,222 +84,190 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="calendar"></div> <?php // Main calendar container ?>
|
||||
<div id="calendar"><!-- Dynamically Generated Content --></div>
|
||||
</div>
|
||||
|
||||
<!-- MANAGE APPOINTMENT MODAL -->
|
||||
|
||||
<div id="manage-appointment" class="modal fade full-screen" data-keyboard="true" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div id="manage-appointment" class="modal fade" data-keyboard="true" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="wrapper">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 class="modal-title"><?= lang('edit_appointment_title') ?></h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"
|
||||
aria-hidden="true">×</button>
|
||||
<h3 class="modal-title"><?= lang('edit_appointment_title') ?></h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-message alert hidden"></div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-message alert hidden"></div>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend><?= lang('appointment_details_title') ?></legend>
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset class="container">
|
||||
<legend><?= lang('appointment_details_title') ?></legend>
|
||||
<input id="appointment-id" type="hidden">
|
||||
|
||||
<input id="appointment-id" type="hidden" />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-service" class="col-sm-3 control-label"><?= lang('service') ?> *</label>
|
||||
<div class="col-sm-7">
|
||||
<div class="row">
|
||||
<div class="col-xs-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;
|
||||
// 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) {
|
||||
$has_category = TRUE;
|
||||
break;
|
||||
if (!isset($grouped_services[$service['category_name']])) {
|
||||
$grouped_services[$service['category_name']] = array();
|
||||
}
|
||||
|
||||
$grouped_services[$service['category_name']][] = $service;
|
||||
}
|
||||
}
|
||||
|
||||
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>';
|
||||
// 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>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="select-provider" class="col-sm-3 control-label"><?= lang('provider') ?> *</label>
|
||||
<div class="col-sm-7">
|
||||
<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>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="start-datetime" class="col-sm-3 control-label" ><?= lang('start_date_time') ?></label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="start-datetime" class="form-control" />
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="start-datetime" class="control-label"><?= lang('start_date_time') ?></label>
|
||||
<input type="text" id="start-datetime" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="end-datetime" class="control-label"><?= lang('end_date_time') ?></label>
|
||||
<input type="text" id="end-datetime" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="end-datetime" class="control-label col-sm-3" ><?= lang('end_date_time') ?></label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" id="end-datetime" class="form-control" />
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="appointment-notes" class="control-label"><?= lang('notes') ?></label>
|
||||
<textarea id="appointment-notes" class="form-control" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="appointment-notes" class="control-label col-sm-3" ><?= lang('notes') ?></label>
|
||||
<div class="col-sm-7">
|
||||
<textarea id="appointment-notes" class="form-control" rows="3"></textarea>
|
||||
<br>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
<?= lang('customer_details_title') ?>
|
||||
<button id="new-customer" class="btn btn-default btn-xs"
|
||||
title="<?= lang('clear_fields_add_existing_customer_hint') ?>"
|
||||
type="button"><?= lang('new') ?>
|
||||
</button>
|
||||
<button id="select-customer" class="btn btn-primary btn-xs"
|
||||
title="<?= lang('pick_existing_customer_hint') ?>"
|
||||
type="button"><?= lang('select') ?>
|
||||
</button>
|
||||
<input type="text" id="filter-existing-customers"
|
||||
placeholder="<?= lang('type_to_filter_customers') ?>"
|
||||
style="display: none;" class="input-sm">
|
||||
<div id="existing-customers-list" style="display: none;"></div>
|
||||
</legend>
|
||||
|
||||
<input id="customer-id" type="hidden">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="first-name" class="control-label"><?= lang('first_name') ?> *</label>
|
||||
<input type="text" id="first-name" class="required form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
|
||||
<input type="text" id="last-name" class="required form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="control-label"><?= lang('email') ?> *</label>
|
||||
<input type="text" id="email" class="required form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone-number" class="control-label"><?= lang('phone_number') ?> *</label>
|
||||
<input type="text" id="phone-number" class="required form-control">
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="container">
|
||||
<legend>
|
||||
<?= lang('customer_details_title') ?>
|
||||
<button id="new-customer" class="btn btn-default btn-xs"
|
||||
title="<?= lang('clear_fields_add_existing_customer_hint') ?>"
|
||||
type="button"><?= lang('new') ?>
|
||||
</button>
|
||||
<button id="select-customer" class="btn btn-primary btn-xs"
|
||||
title="<?= lang('pick_existing_customer_hint') ?>"
|
||||
type="button"><?= lang('select') ?>
|
||||
</button>
|
||||
<input type="text" id="filter-existing-customers"
|
||||
placeholder="<?= lang('type_to_filter_customers') ?>"
|
||||
style="display: none;" class="input-sm"/>
|
||||
<div id="existing-customers-list" style="display: none;"></div>
|
||||
</legend>
|
||||
|
||||
<input id="customer-id" type="hidden" />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="first-name" class="control-label col-sm-2">
|
||||
<?= lang('first_name') ?> *</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="first-name" class="required form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="last-name" class="control-label col-sm-2">
|
||||
<?= lang('last_name') ?>*</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="last-name" class="required form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="control-label col-sm-2">
|
||||
<?= lang('email') ?>*</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="email" class="required form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone-number" class="control-label col-sm-3">
|
||||
<?= lang('phone_number') ?>*</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="phone-number" class="required form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="address" class="control-label"><?= lang('address') ?></label>
|
||||
<input type="text" id="address" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="address" class="control-label col-sm-3">
|
||||
<?= lang('address') ?></label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="address" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="city" class="control-label col-sm-3">
|
||||
<?= lang('city') ?></label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="city" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city" class="control-label"><?= lang('city') ?></label>
|
||||
<input type="text" id="city" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="zip-code" class="control-label col-sm-3">
|
||||
<?= lang('zip_code') ?></label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="zip-code" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="zip-code" class="control-label"><?= lang('zip_code') ?></label>
|
||||
<input type="text" id="zip-code" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer-notes" class="control-label col-sm-3">
|
||||
<?= lang('notes') ?></label>
|
||||
<div class="col-sm-8">
|
||||
<textarea id="customer-notes" rows="3" class="form-control"></textarea>
|
||||
</div>
|
||||
</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>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-push"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer footer">
|
||||
<button id="save-appointment" class="btn btn-primary">
|
||||
<?= lang('save') ?>
|
||||
</button>
|
||||
<button id="cancel-appointment" class="btn btn-default" data-dismiss="modal">
|
||||
<?= lang('cancel') ?>
|
||||
</button>
|
||||
<div class="modal-footer">
|
||||
<button id="save-appointment" class="btn btn-primary"><?= lang('save') ?></button>
|
||||
<button id="cancel-appointment" class="btn btn-default" data-dismiss="modal"><?= lang('cancel') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -316,68 +278,43 @@
|
|||
<div id="manage-unavailable" 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>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 class="modal-title"><?= lang('new_unavailable_title') ?></h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-message alert hidden"></div>
|
||||
|
||||
<form class="form-horizontal">
|
||||
<form>
|
||||
<fieldset>
|
||||
<input id="unavailable-id" type="hidden" />
|
||||
<input id="unavailable-id" type="hidden">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="unavailable-provider" class="control-label col-sm-3">
|
||||
<?= lang('provider') ?>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<select type="text" id="unavailable-provider" class="form-control"></select>
|
||||
</div>
|
||||
<label for="unavailable-provider" class="control-label"><?= lang('provider') ?></label>
|
||||
<select type="text" id="unavailable-provider" class="form-control"></select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="unavailable-start" class="control-label col-sm-3">
|
||||
<?= lang('start') ?>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="unavailable-start" class="form-control" />
|
||||
</div>
|
||||
<label for="unavailable-start" class="control-label"><?= lang('start') ?></label>
|
||||
<input type="text" id="unavailable-start" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="unavailable-end" class="control-label col-sm-3">
|
||||
<?= lang('end') ?>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="unavailable-end" class="form-control" />
|
||||
</div>
|
||||
<label for="unavailable-end" class="control-label"><?= lang('end') ?></label>
|
||||
<input type="text" id="unavailable-end" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="unavailable-notes" class="control-label col-sm-3">
|
||||
<?= lang('notes') ?>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<textarea id="unavailable-notes" rows="3" class="form-control"></textarea>
|
||||
</div>
|
||||
<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-primary">
|
||||
<?= lang('save') ?>
|
||||
</button>
|
||||
<button id="cancel-unavailable" class="btn btn-default" data-dismiss="modal">
|
||||
<?= lang('cancel') ?>
|
||||
</button>
|
||||
<button id="save-unavailable" class="btn btn-primary"><?= lang('save') ?></button>
|
||||
<button id="cancel-unavailable" class="btn btn-default" data-dismiss="modal"><?= lang('cancel') ?></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -387,29 +324,20 @@
|
|||
<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>
|
||||
<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">
|
||||
<p>
|
||||
<?= lang('select_google_calendar_prompt') ?>
|
||||
</p>
|
||||
<select id="google-calendar"></select>
|
||||
<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-primary">
|
||||
<?= lang('select') ?>
|
||||
</button>
|
||||
<button id="close-calendar" class="btn btn-default" data-dismiss="modal">
|
||||
<?= lang('close') ?>
|
||||
</button>
|
||||
<button id="select-calendar" class="btn btn-primary"><?= lang('select') ?></button>
|
||||
<button id="close-calendar" class="btn btn-default" data-dismiss="modal"><?= lang('close') ?></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,9 @@ body .modal-header .close {
|
|||
color: #12482a;
|
||||
}
|
||||
|
||||
body .modal-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Full screen modal */
|
||||
body .modal.full-screen .modal-dialog {
|
||||
|
|
|
|||
Loading…
Reference in a new issue