Integrated tab component to settings page.

This commit is contained in:
alext 2017-09-21 14:49:13 +02:00
parent 36e507adc0
commit 355ddaeda4
2 changed files with 325 additions and 324 deletions

View file

@ -28,157 +28,164 @@
</script>
<div id="settings-page" class="container-fluid">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs" role="tablist">
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE): ?>
<li role="representation" class="general-tab tab"><a><?= lang('general') ?></a></li>
<li role="presentation" class="active">
<a href="#general" aria-controls="general" role="tab" data-toggle="tab"><?= lang('general') ?></a>
</li>
<?php endif ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE): ?>
<li role="representation" class="business-logic-tab tab"><a><?= lang('business_logic') ?></a></li>
<li role="presentation">
<a href="#business-logic" aria-controls="business-logic" role="tab" data-toggle="tab"><?= lang('business_logic') ?></a>
</li>
<?php endif ?>
<?php if ($privileges[PRIV_USER_SETTINGS]['view'] == TRUE): ?>
<li role="representation" class="user-tab tab"><a><?= lang('current_user') ?></a></li>
<li role="presentation">
<a href="#current-user" aria-controls="current-user" role="tab" data-toggle="tab"><?= lang('current_user') ?></a>
</li>
<?php endif ?>
<li role="representation" class="about-tab tab"><a><?= lang('about_ea') ?></a></li>
<li role="presentation">
<a href="#about-ea" aria-controls="about-ea" role="tab" data-toggle="tab"><?= lang('about_ea') ?></a>
</li>
</ul>
<!-- GENERAL TAB -->
<div class="tab-content">
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div id="general" class="tab-content <?= $hidden ?>">
<form>
<fieldset>
<legend>
<?= lang('general_settings') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<!-- GENERAL TAB -->
<div class="wrapper row">
<div class="col-md-6">
<div class="form-group">
<label for="company-name"><?= lang('company_name') ?> *</label>
<input type="text" id="company-name" data-field="company_name" class="required form-control">
<span class="help-block">
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div role="tabpanel" class="tab-pane active <?= $hidden ?>" id="general">
<form>
<fieldset>
<legend>
<?= lang('general_settings') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<div class="wrapper row">
<div class="col-md-6">
<div class="form-group">
<label for="company-name"><?= lang('company_name') ?> *</label>
<input type="text" id="company-name" data-field="company_name" class="required form-control">
<span class="help-block">
<?= lang('company_name_hint') ?>
</span>
</div>
</div>
<div class="form-group">
<label for="company-email"><?= lang('company_email') ?> *</label>
<input type="text" id="company-email" data-field="company_email" class="required form-control">
<span class="help-block">
<div class="form-group">
<label for="company-email"><?= lang('company_email') ?> *</label>
<input type="text" id="company-email" data-field="company_email" class="required form-control">
<span class="help-block">
<?= lang('company_email_hint') ?>
</span>
</div>
</div>
<div class="form-group">
<label for="company-link"><?= lang('company_link') ?> *</label>
<input type="text" id="company-link" data-field="company_link" class="required form-control">
<span class="help-block">
<div class="form-group">
<label for="company-link"><?= lang('company_link') ?> *</label>
<input type="text" id="company-link" data-field="company_link" class="required form-control">
<span class="help-block">
<?= lang('company_link_hint') ?>
</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="google-analytics-code">
Google Analytics ID</label>
<input type="text" id="google-analytics-code" placeholder="UA-XXXXXXXX-X"
data-field="google_analytics_code" class="form-control">
<span class="help-block">
<div class="col-md-6">
<div class="form-group">
<label for="google-analytics-code">
Google Analytics ID</label>
<input type="text" id="google-analytics-code" placeholder="UA-XXXXXXXX-X"
data-field="google_analytics_code" class="form-control">
<span class="help-block">
<?= lang('google_analytics_code_hint') ?>
</span>
</div>
<div class="form-group">
<label for="date-format">
<?= lang('date_format') ?>
</label>
<select class="form-control" id="date-format" data-field="date_format">
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</select>
<span class="help-block">
</div>
<div class="form-group">
<label for="date-format">
<?= lang('date_format') ?>
</label>
<select class="form-control" id="date-format" data-field="date_format">
<option value="DMY">DMY</option>
<option value="MDY">MDY</option>
<option value="YMD">YMD</option>
</select>
<span class="help-block">
<?= lang('date_format_hint') ?>
</span>
</div>
<div class="form-group">
<label><?= lang('customer_notifications') ?></label>
<br>
<button type="button" id="customer-notifications" class="btn btn-default" data-toggle="button" aria-pressed="false">
<span class="glyphicon glyphicon-envelope"></span>
<?= lang('receive_notifications') ?>
</button>
<span class="help-block">
</div>
<div class="form-group">
<label><?= lang('customer_notifications') ?></label>
<br>
<button type="button" id="customer-notifications" class="btn btn-default" data-toggle="button" aria-pressed="false">
<span class="glyphicon glyphicon-envelope"></span>
<?= lang('receive_notifications') ?>
</button>
<span class="help-block">
<?= lang('customer_notifications_hint') ?>
</span>
</div>
<div class="form-group">
<label for="require-captcha">
CAPTCHA
</label>
<br>
<button type="button" id="require-captcha" class="btn btn-default" data-toggle="button" aria-pressed="false">
<span class="glyphicon glyphicon-lock"></span>
<?= lang('require_captcha') ?>
</button>
<span class="help-block">
</div>
<div class="form-group">
<label for="require-captcha">
CAPTCHA
</label>
<br>
<button type="button" id="require-captcha" class="btn btn-default" data-toggle="button" aria-pressed="false">
<span class="glyphicon glyphicon-lock"></span>
<?= lang('require_captcha') ?>
</button>
<span class="help-block">
<?= lang('require_captcha_hint') ?>
</span>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</fieldset>
</form>
</div>
<!-- BUSINESS LOGIC TAB -->
<!-- BUSINESS LOGIC TAB -->
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div id="business-logic" class="tab-content <?= $hidden ?>">
<form>
<fieldset>
<legend>
<?= lang('business_logic') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<?php $hidden = ($privileges[PRIV_SYSTEM_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div role="tabpanel" class="tab-pane <?= $hidden ?>" id="business-logic">
<form>
<fieldset>
<legend>
<?= lang('business_logic') ?>
<?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<div class="row">
<div class="col-md-7 working-plan-wrapper">
<h4><?= lang('working_plan') ?></h4>
<span class="help-block">
<div class="row">
<div class="col-md-7 working-plan-wrapper">
<h4><?= lang('working_plan') ?></h4>
<span class="help-block">
<?= lang('edit_working_plan_hint') ?>
</span>
<table class="working-plan table table-striped">
<thead>
<table class="working-plan table table-striped">
<thead>
<tr>
<th><?= lang('day') ?></th>
<th><?= lang('start') ?></th>
<th><?= lang('end') ?></th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox" id="monday" />
<?= lang('monday') ?>
<?= lang('monday') ?>
</label>
</div>
</td>
@ -190,7 +197,7 @@
<div class="checkbox">
<label>
<input type="checkbox" id="tuesday" />
<?= lang('tuesday') ?>
<?= lang('tuesday') ?>
</label>
</div>
</td>
@ -202,7 +209,7 @@
<div class="checkbox">
<label>
<input type="checkbox" id="wednesday" />
<?= lang('wednesday') ?>
<?= lang('wednesday') ?>
</label>
</div>
</td>
@ -214,7 +221,7 @@
<div class="checkbox">
<label>
<input type="checkbox" id="thursday" />
<?= lang('thursday') ?>
<?= lang('thursday') ?>
</label>
</div>
</td>
@ -226,7 +233,7 @@
<div class="checkbox">
<label>
<input type="checkbox" id="friday" />
<?= lang('friday') ?>
<?= lang('friday') ?>
</label>
</div>
</td>
@ -238,7 +245,7 @@
<div class="checkbox">
<label>
<input type="checkbox" id="saturday" />
<?= lang('saturday') ?>
<?= lang('saturday') ?>
</label>
</div>
</td>
@ -250,231 +257,234 @@
<div class="checkbox">
<label>
<input type="checkbox" id="sunday" />
<?= lang('sunday') ?>
<?= lang('sunday') ?>
</label>
</div>
</td>
<td><input type="text" id="sunday-start" class="work-start" /></td>
<td><input type="text" id="sunday-end" class="work-end" /></td>
</tr>
</tbody>
</table>
</tbody>
</table>
<br>
<br>
<h4><?= lang('book_advance_timeout') ?></h4>
<span class="help-block">
<h4><?= lang('book_advance_timeout') ?></h4>
<span class="help-block">
<?= lang('book_advance_timeout_hint') ?>
</span>
<div class="form-group">
<label for="book-advance-timeout"><?= lang('timeout_minutes') ?></label>
<input type="text" id="book-advance-timeout" data-field="book_advance_timeout" class="form-control" />
<div class="form-group">
<label for="book-advance-timeout"><?= lang('timeout_minutes') ?></label>
<input type="text" id="book-advance-timeout" data-field="book_advance_timeout" class="form-control" />
</div>
</div>
</div>
<div class="col-md-5 breaks-wrapper">
<h4><?= lang('breaks') ?></h4>
<div class="col-md-5 breaks-wrapper">
<h4><?= lang('breaks') ?></h4>
<span class="help-block">
<span class="help-block">
<?= lang('edit_breaks_hint') ?>
</span>
<div>
<button type="button" class="add-break btn btn-primary">
<span class="glyphicon glyphicon-white glyphicon glyphicon-plus"></span>
<?= lang('add_break');?>
</button>
</div>
<div>
<button type="button" class="add-break btn btn-primary">
<span class="glyphicon glyphicon-white glyphicon glyphicon-plus"></span>
<?= lang('add_break');?>
</button>
</div>
<br>
<br>
<table class="breaks table table-striped">
<thead>
<table class="breaks table table-striped">
<thead>
<tr>
<th><?= lang('day') ?></th>
<th><?= lang('start') ?></th>
<th><?= lang('end') ?></th>
<th><?= lang('actions') ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- USER TAB -->
<?php $hidden = ($privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div id="user" class="tab-content <?= $hidden ?>">
<form class="row">
<fieldset class="col-xs-12 col-sm-6 personal-info-wrapper">
<legend>
<?= lang('personal_information') ?>
<?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<input type="hidden" id="user-id" />
<div class="form-group">
<label for="first-name"><?= lang('first_name') ?> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group">
<label for="last-name"><?= lang('last_name') ?> *</label>
<input type="text" id="last-name" class="form-control required" />
</div>
<div class="form-group">
<label for="email"><?= lang('email') ?> *</label>
<input type="text" id="email" class="form-control required" />
</div>
<div class="form-group">
<label for="phone-number"><?= lang('phone_number') ?> *</label>
<input type="text" id="phone-number" class="form-control required" />
</div>
<div class="form-group">
<label for="mobile-number"><?= lang('mobile_number') ?></label>
<input type="text" id="mobile-number" class="form-control" />
</div>
<div class="form-group">
<label for="address"><?= lang('address') ?></label>
<input type="text" id="address" class="form-control" />
</div>
<div class="form-group">
<label for="city"><?= lang('city') ?></label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group">
<label for="state"><?= lang('state') ?></label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group">
<label for="zip-code"><?= lang('zip_code') ?></label>
<input type="text" id="zip-code" class="form-control" />
</div>
<div class="form-group">
<label for="notes"><?= lang('notes') ?></label>
<textarea id="notes" class="form-control" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="col-xs-12 col-sm-6 miscellaneous-wrapper">
<legend><?= lang('system_login') ?></legend>
<div class="form-group">
<label for="username"><?= lang('username') ?> *</label>
<input type="text" id="username" class="form-control required" />
</div>
<div class="form-group">
<label for="password"><?= lang('password') ?></label>
<input type="password" id="password" class="form-control" />
</div>
<div class="form-group">
<label for="retype-password"><?= lang('retype_password') ?></label>
<input type="password" id="retype-password" class="form-control" />
</div>
<div class="form-group">
<label for="calendar-view"><?= lang('calendar') ?> *</label>
<select id="calendar-view" class="form-control required">
<option value="default">Default</option>
<option value="table">Table</option>
</select>
</div>
<button type="button" id="user-notifications" class="btn btn-default" data-toggle="button">
<span class="glyphicon glyphicon-envelope"></span>
<?= lang('receive_notifications') ?>
</button>
</fieldset>
</form>
</div>
<!-- ABOUT TAB -->
<div id="about" class="tab-content">
<h3>Easy!Appointments</h3>
<p>
<?= lang('about_ea_info') ?>
</p>
<br>
<div class="current-version">
<?php
echo lang('current_version') . ' ';
echo $this->config->item('version');
$release_title = $this->config->item('release_label');
if ($release_title != '') {
echo ' - ' . $release_title;
}
?>
</fieldset>
</form>
</div>
<br>
<!-- CURRENT USER TAB -->
<h3><?= lang('support') ?></h3>
<p>
<?= lang('about_ea_support') ?>
<br><br>
<a href="http://easyappointments.org">
<?= lang('official_website') ?>
</a>
|
<a href="https://groups.google.com/forum/#!forum/easy-appointments">
<?= lang('support_group') ?>
</a>
|
<a href="https://github.com/alextselegidis/easyappointments/issues">
<?= lang('project_issues') ?>
</a>
|
<a href="http://easyappointments.wordpress.com">
E!A Blog
</a>
|
<a href="https://www.facebook.com/easyappointments.org">
Facebook
</a>
|
<a href="https://plus.google.com/+EasyappointmentsOrg">
Google+
</a>
|
<a href="https://twitter.com/EasyAppts">
Twitter
</a>
|
<a href="https://plus.google.com/communities/105333709485142846840">
<?= lang('google_plus_community') ?>
</a>
</p>
<?php $hidden = ($privileges[PRIV_USER_SETTINGS]['view'] == TRUE) ? '' : 'hidden' ?>
<div role="tabpanel" class="tab-pane <?= $hidden ?>" id="current-user">
<form>
<div class="row">
<fieldset class="col-xs-12 col-sm-6 personal-info-wrapper">
<legend>
<?= lang('personal_information') ?>
<?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
<button type="button" class="save-settings btn btn-primary btn-xs"
title="<?= lang('save') ?>">
<span class="glyphicon glyphicon-floppy-disk"></span>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<br>
<input type="hidden" id="user-id" />
<div class="form-group">
<label for="first-name"><?= lang('first_name') ?> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group">
<label for="last-name"><?= lang('last_name') ?> *</label>
<input type="text" id="last-name" class="form-control required" />
</div>
<div class="form-group">
<label for="email"><?= lang('email') ?> *</label>
<input type="text" id="email" class="form-control required" />
</div>
<div class="form-group">
<label for="phone-number"><?= lang('phone_number') ?> *</label>
<input type="text" id="phone-number" class="form-control required" />
</div>
<div class="form-group">
<label for="mobile-number"><?= lang('mobile_number') ?></label>
<input type="text" id="mobile-number" class="form-control" />
</div>
<div class="form-group">
<label for="address"><?= lang('address') ?></label>
<input type="text" id="address" class="form-control" />
</div>
<div class="form-group">
<label for="city"><?= lang('city') ?></label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group">
<label for="state"><?= lang('state') ?></label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group">
<label for="zip-code"><?= lang('zip_code') ?></label>
<input type="text" id="zip-code" class="form-control" />
</div>
<div class="form-group">
<label for="notes"><?= lang('notes') ?></label>
<textarea id="notes" class="form-control" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="col-xs-12 col-sm-6 miscellaneous-wrapper">
<legend><?= lang('system_login') ?></legend>
<div class="form-group">
<label for="username"><?= lang('username') ?> *</label>
<input type="text" id="username" class="form-control required" />
</div>
<div class="form-group">
<label for="password"><?= lang('password') ?></label>
<input type="password" id="password" class="form-control" />
</div>
<div class="form-group">
<label for="retype-password"><?= lang('retype_password') ?></label>
<input type="password" id="retype-password" class="form-control" />
</div>
<div class="form-group">
<label for="calendar-view"><?= lang('calendar') ?> *</label>
<select id="calendar-view" class="form-control required">
<option value="default">Default</option>
<option value="table">Table</option>
</select>
</div>
<button type="button" id="user-notifications" class="btn btn-default" data-toggle="button">
<span class="glyphicon glyphicon-envelope"></span>
<?= lang('receive_notifications') ?>
</button>
</fieldset>
</div>
</form>
</div>
<!-- ABOUT E!A TAB -->
<div role="tabpanel" class="tab-pane" id="about-ea">
<h3>Easy!Appointments</h3>
<p>
<?= lang('about_ea_info') ?>
</p>
<br>
<div class="current-version">
<?= lang('current_version') ?>
<?= $this->config->item('version') ?>
<?php if ($this->config->item('release_label')): ?>
- <?= $this->config->item('release_label') ?>
<?php endif ?>
</div>
<br>
<h3><?= lang('support') ?></h3>
<p>
<?= lang('about_ea_support') ?>
<br><br>
<a href="http://easyappointments.org">
<?= lang('official_website') ?>
</a>
|
<a href="https://groups.google.com/forum/#!forum/easy-appointments">
<?= lang('support_group') ?>
</a>
|
<a href="https://github.com/alextselegidis/easyappointments/issues">
<?= lang('project_issues') ?>
</a>
|
<a href="http://easyappointments.wordpress.com">
E!A Blog
</a>
|
<a href="https://www.facebook.com/easyappointments.org">
Facebook
</a>
|
<a href="https://plus.google.com/+EasyappointmentsOrg">
Google+
</a>
|
<a href="https://twitter.com/EasyAppts">
Twitter
</a>
|
<a href="https://plus.google.com/communities/105333709485142846840">
<?= lang('google_plus_community') ?>
</a>
</p>
<br>
<h3><?= lang('license') ?></h3>
<p>
<?= lang('about_ea_license') ?>
<a href="http://www.gnu.org/copyleft/gpl.html">http://www.gnu.org/copyleft/gpl.html</a>
</p>
</div>
<h3><?= lang('license') ?></h3>
<p>
<?= lang('about_ea_license') ?>
<a href="http://www.gnu.org/copyleft/gpl.html">http://www.gnu.org/copyleft/gpl.html</a>
</p>
</div>
</div>

View file

@ -138,25 +138,18 @@ window.BackendSettings = window.BackendSettings || {};
*
* Change the visible tab contents.
*/
$('.tab').click(function() {
// Bootstrap has a bug with toggle buttons. Their toggle state is lost when the
// button is hidden or shown. Show before anything else we need to store the toggle
// and apply it whenever the user tab is clicked..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
// Bootstrap has a bug with toggle buttons. Their toggle state is lost when the button is hidden or shown.
// Show before anything else we need to store the toggle and apply it whenever the user tab is clicked.
var areNotificationsActive = $('#user-notifications').hasClass('active');
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
var href = $(this).attr('href');
if ($(this).hasClass('general-tab')) {
$('#general').show();
if (href === '#general') {
settings = new SystemSettings();
} else if ($(this).hasClass('business-logic-tab')) {
$('#business-logic').show();
} else if (href === '#business-logic') {
settings = new SystemSettings();
} else if ($(this).hasClass('user-tab')) {
$('#user').show();
} else if (href === '#current-user') {
settings = new UserSettings();
// Apply toggle state to user notifications button.
@ -165,8 +158,6 @@ window.BackendSettings = window.BackendSettings || {};
} else {
$('#user-notifications').removeClass('active');
}
} else if ($(this).hasClass('about-tab')) {
$('#about').show();
}
Backend.placeFooterToBottom();