Replaced custom toggle buttons with bootstrap switcher component.

This commit is contained in:
Alex Tselegidis 2020-09-07 11:36:36 +03:00
parent 02628a2cbd
commit 185686d194
7 changed files with 70 additions and 79 deletions

View file

@ -156,59 +156,53 @@
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="api-token"> <label for="api-token">API Token</label>
API Token</label> <input id="api-token" data-field="api_token" class="form-control">
<input id="api-token"
data-field="api_token" class="form-control">
<span class="help-block"> <span class="help-block">
<?= lang('api_token_hint') ?> <?= lang('api_token_hint') ?>
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><?= lang('customer_notifications') ?></label> <div class="custom-control custom-switch">
<br> <input type="checkbox" class="custom-control-input" id="customer-notifications">
<button type="button" id="customer-notifications" class="btn btn-light" data-toggle="button"> <label class="custom-control-label" for="customer-notifications">
<i class="far fa-envelope"></i> <?= lang('customer_notifications') ?>
<?= lang('receive_notifications') ?> </label>
</button> </div>
<span class="form-text text-muted"> <span class="form-text text-muted">
<?= lang('customer_notifications_hint') ?> <?= lang('customer_notifications_hint') ?>
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="require-captcha"> <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="require-captcha">
<label class="custom-control-label" for="require-captcha">
CAPTCHA CAPTCHA
</label> </label>
<br> </div>
<button type="button" id="require-captcha" class="btn btn-light" data-toggle="button">
<i class="fas fa-lock"></i>
<?= lang('require_captcha') ?>
</button>
<span class="form-text text-muted"> <span class="form-text text-muted">
<?= lang('require_captcha_hint') ?> <?= lang('require_captcha_hint') ?>
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="require-phone-number"> <div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="require-phone-number">
<label class="custom-control-label" for="require-phone-number">
<?= lang('phone_number') ?> <?= lang('phone_number') ?>
</label> </label>
<br> </div>
<button type="button" id="require-phone-number" class="btn btn-light" data-toggle="button">
<i class="fas fa-phone-alt"></i>
<?= lang('require_phone_number') ?>
</button>
<span class="help-block"> <span class="help-block">
<?= lang('require_phone_number_hint') ?> <?= lang('require_phone_number_hint') ?>
</span> </span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label><?= lang('any_provider') ?></label> <div class="custom-control custom-switch">
<br> <input type="checkbox" class="custom-control-input" id="display-any-provider">
<button type="button" id="display-any-provider" class="btn btn-light" data-toggle="button"> <label class="custom-control-label" for="display-any-provider">
<i class="fas fa-user"></i> <?= lang('any_provider') ?>
<?= lang('display_any_provider') ?> </label>
</button> </div>
<span class="help-block"> <span class="help-block">
<?= lang('display_any_provider_hint') ?> <?= lang('display_any_provider_hint') ?>
</span> </span>

View file

@ -209,12 +209,14 @@
<br> <br>
<button type="button" id="provider-notifications" class="btn btn-light" data-toggle="button"> <div class="custom-control custom-switch">
<i class="far fa-envelope"></i> <input type="checkbox" class="custom-control-input" id="provider-notifications">
<span><?= lang('receive_notifications') ?></span> <label class="custom-control-label" for="provider-notifications">
</button> <?= lang('receive_notifications') ?>
</label>
</div>
<br><br> <br>
<h4><?= lang('services') ?></h4> <h4><?= lang('services') ?></h4>
<div id="provider-services" class="card card-body bg-light border-light"></div> <div id="provider-services" class="card card-body bg-light border-light"></div>
@ -446,12 +448,14 @@
<br> <br>
<button type="button" id="secretary-notifications" class="btn btn-light" data-toggle="button"> <div class="custom-control custom-switch">
<i class="far fa-envelope"></i> <input type="checkbox" class="custom-control-input" id="secretary-notifications">
<span><?= lang('receive_notifications') ?></span> <label class="custom-control-label" for="secretary-notifications">
</button> <?= lang('receive_notifications') ?>
</label>
</div>
<br><br> <br>
<h4><?= lang('providers') ?></h4> <h4><?= lang('providers') ?></h4>
<div id="secretary-providers" class="card card-body bg-light border-light"></div> <div id="secretary-providers" class="card card-body bg-light border-light"></div>
@ -606,10 +610,12 @@
<br> <br>
<button type="button" id="admin-notifications" class="btn btn-light" data-toggle="button"> <div class="custom-control custom-switch">
<i class="far fa-envelope"></i> <input type="checkbox" class="custom-control-input" id="admin-notifications">
<span><?= lang('receive_notifications') ?></span> <label class="custom-control-label" for="admin-notifications">
</button> <?= lang('receive_notifications') ?>
</label>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -62,24 +62,24 @@ window.BackendSettings = window.BackendSettings || {};
workingPlan = $.parseJSON(setting.value); workingPlan = $.parseJSON(setting.value);
} }
if (setting.name === 'customer_notifications' && setting.value === '1') { if (setting.name === 'customer_notifications') {
$('#customer-notifications').addClass('active'); $('#customer-notifications').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'require_captcha' && setting.value === '1') { if (setting.name === 'require_captcha') {
$('#require-captcha').addClass('active'); $('#require-captcha').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'require_phone_number' && setting.value === '1') { if (setting.name === 'require_phone_number') {
$('#require-phone-number').addClass('active'); $('#require-phone-number').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'display_any_provider' && setting.value === '1') { if (setting.name === 'display_any_provider') {
$('#display-any-provider').addClass('active'); $('#display-any-provider').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'display_cookie_notice') { if (setting.name === 'display_cookie_notice') {
$('#display-cookie-notice').prop('checked', setting.value === '1'); $('#display-cookie-notice').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'cookie_notice_content') { if (setting.name === 'cookie_notice_content') {
@ -87,7 +87,7 @@ window.BackendSettings = window.BackendSettings || {};
} }
if (setting.name === 'display_terms_and_conditions') { if (setting.name === 'display_terms_and_conditions') {
$('#display-terms-and-conditions').prop('checked', setting.value === '1'); $('#display-terms-and-conditions').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'terms_and_conditions_content') { if (setting.name === 'terms_and_conditions_content') {
@ -95,7 +95,7 @@ window.BackendSettings = window.BackendSettings || {};
} }
if (setting.name === 'display_privacy_policy') { if (setting.name === 'display_privacy_policy') {
$('#display-privacy-policy').prop('checked', setting.value === '1'); $('#display-privacy-policy').prop('checked', Boolean(Number(setting.value)));
} }
if (setting.name === 'privacy_policy_content') { if (setting.name === 'privacy_policy_content') {

View file

@ -67,7 +67,8 @@
var settings = []; var settings = [];
// General Settings Tab // General Settings Tab
$('#general').find('input, select').each(function (index, field) {
$('#general').find('input, select').not('input:checkbox').each(function (index, field) {
settings.push({ settings.push({
name: $(field).attr('data-field'), name: $(field).attr('data-field'),
value: $(field).val() value: $(field).val()
@ -76,26 +77,27 @@
settings.push({ settings.push({
name: 'customer_notifications', name: 'customer_notifications',
value: $('#customer-notifications').hasClass('active') ? '1' : '0' value: $('#customer-notifications').prop('checked') ? '1' : '0'
}); });
settings.push({ settings.push({
name: 'require_captcha', name: 'require_captcha',
value: $('#require-captcha').hasClass('active') ? '1' : '0' value: $('#require-captcha').prop('checked') ? '1' : '0'
}); });
settings.push({ settings.push({
name: 'require_phone_number', name: 'require_phone_number',
value: $('#require-phone-number').hasClass('active') ? '1' : '0' value: $('#require-phone-number').prop('checked') ? '1' : '0'
}); });
settings.push({ settings.push({
name: 'display_any_provider', name: 'display_any_provider',
value: $('#display-any-provider').hasClass('active') ? '1' : '0' value: $('#display-any-provider').prop('checked') ? '1' : '0'
}); });
// Business Logic Tab // Business Logic Tab
settings.push({ settings.push({
name: 'company_working_plan', name: 'company_working_plan',
value: JSON.stringify(BackendSettings.wp.get()) value: JSON.stringify(BackendSettings.wp.get())
@ -107,6 +109,7 @@
}); });
// Legal Contents Tab // Legal Contents Tab
settings.push({ settings.push({
name: 'display_cookie_notice', name: 'display_cookie_notice',
value: $('#display-cookie-notice').prop('checked') ? '1' : '0' value: $('#display-cookie-notice').prop('checked') ? '1' : '0'

View file

@ -146,7 +146,7 @@
timezone: $('#admin-timezone').val(), timezone: $('#admin-timezone').val(),
settings: { settings: {
username: $('#admin-username').val(), username: $('#admin-username').val(),
notifications: $('#admin-notifications').hasClass('active'), notifications: $('#admin-notifications').prop('checked'),
calendar_view: $('#admin-calendar-view').val() calendar_view: $('#admin-calendar-view').val()
} }
}; };
@ -327,11 +327,7 @@
$('#admin-username').val(admin.settings.username); $('#admin-username').val(admin.settings.username);
$('#admin-calendar-view').val(admin.settings.calendar_view); $('#admin-calendar-view').val(admin.settings.calendar_view);
if (admin.settings.notifications === true) { $('#admin-notifications').prop('checked', Boolean(Number(admin.settings.notifications)));
$('#admin-notifications').addClass('active');
} else {
$('#admin-notifications').removeClass('active');
}
}; };
/** /**

View file

@ -159,7 +159,7 @@
username: $('#provider-username').val(), username: $('#provider-username').val(),
working_plan: JSON.stringify(BackendUsers.wp.get()), working_plan: JSON.stringify(BackendUsers.wp.get()),
extra_working_plan: JSON.stringify(BackendUsers.wp.getExtraWP()), extra_working_plan: JSON.stringify(BackendUsers.wp.getExtraWP()),
notifications: $('#provider-notifications').hasClass('active'), notifications: $('#provider-notifications').prop('checked'),
calendar_view: $('#provider-calendar-view').val() calendar_view: $('#provider-calendar-view').val()
} }
}; };
@ -391,11 +391,7 @@
$('#provider-username').val(provider.settings.username); $('#provider-username').val(provider.settings.username);
$('#provider-calendar-view').val(provider.settings.calendar_view); $('#provider-calendar-view').val(provider.settings.calendar_view);
if (provider.settings.notifications === '1') { $('#provider-notifications').prop('checked', Boolean(Number(provider.settings.notifications)));
$('#provider-notifications').addClass('active');
} else {
$('#provider-notifications').removeClass('active');
}
// Add dedicated provider link. // Add dedicated provider link.
var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id); var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id);

View file

@ -342,11 +342,7 @@
$('#secretary-username').val(secretary.settings.username); $('#secretary-username').val(secretary.settings.username);
$('#secretary-calendar-view').val(secretary.settings.calendar_view); $('#secretary-calendar-view').val(secretary.settings.calendar_view);
if (secretary.settings.notifications === '1') { $('#secretary-notifications').prop('checked', Boolean(Number(secretary.settings.notifications)));
$('#secretary-notifications').addClass('active');
} else {
$('#secretary-notifications').removeClass('active');
}
$('#secretary-providers input:checkbox').prop('checked', false); $('#secretary-providers input:checkbox').prop('checked', false);