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>
</div>
<div class="form-group">
<label for="api-token">
API Token</label>
<input id="api-token"
data-field="api_token" class="form-control">
<label for="api-token">API Token</label>
<input id="api-token" data-field="api_token" class="form-control">
<span class="help-block">
<?= lang('api_token_hint') ?>
</span>
</div>
<div class="form-group">
<label><?= lang('customer_notifications') ?></label>
<br>
<button type="button" id="customer-notifications" class="btn btn-light" data-toggle="button">
<i class="far fa-envelope"></i>
<?= lang('receive_notifications') ?>
</button>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customer-notifications">
<label class="custom-control-label" for="customer-notifications">
<?= lang('customer_notifications') ?>
</label>
</div>
<span class="form-text text-muted">
<?= lang('customer_notifications_hint') ?>
</span>
</div>
<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
</label>
<br>
<button type="button" id="require-captcha" class="btn btn-light" data-toggle="button">
<i class="fas fa-lock"></i>
<?= lang('require_captcha') ?>
</button>
</div>
<span class="form-text text-muted">
<?= lang('require_captcha_hint') ?>
</span>
</div>
<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') ?>
</label>
<br>
<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>
</div>
<span class="help-block">
<?= lang('require_phone_number_hint') ?>
</span>
</div>
<div class="form-group">
<label><?= lang('any_provider') ?></label>
<br>
<button type="button" id="display-any-provider" class="btn btn-light" data-toggle="button">
<i class="fas fa-user"></i>
<?= lang('display_any_provider') ?>
</button>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="display-any-provider">
<label class="custom-control-label" for="display-any-provider">
<?= lang('any_provider') ?>
</label>
</div>
<span class="help-block">
<?= lang('display_any_provider_hint') ?>
</span>

View file

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

View file

@ -62,24 +62,24 @@ window.BackendSettings = window.BackendSettings || {};
workingPlan = $.parseJSON(setting.value);
}
if (setting.name === 'customer_notifications' && setting.value === '1') {
$('#customer-notifications').addClass('active');
if (setting.name === 'customer_notifications') {
$('#customer-notifications').prop('checked', Boolean(Number(setting.value)));
}
if (setting.name === 'require_captcha' && setting.value === '1') {
$('#require-captcha').addClass('active');
if (setting.name === 'require_captcha') {
$('#require-captcha').prop('checked', Boolean(Number(setting.value)));
}
if (setting.name === 'require_phone_number' && setting.value === '1') {
$('#require-phone-number').addClass('active');
if (setting.name === 'require_phone_number') {
$('#require-phone-number').prop('checked', Boolean(Number(setting.value)));
}
if (setting.name === 'display_any_provider' && setting.value === '1') {
$('#display-any-provider').addClass('active');
if (setting.name === 'display_any_provider') {
$('#display-any-provider').prop('checked', Boolean(Number(setting.value)));
}
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') {
@ -87,7 +87,7 @@ window.BackendSettings = window.BackendSettings || {};
}
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') {
@ -95,7 +95,7 @@ window.BackendSettings = window.BackendSettings || {};
}
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') {

View file

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

View file

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

View file

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

View file

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