From 91de37aaf47e041a7a2220c39f7abc9ad60dd268 Mon Sep 17 00:00:00 2001 From: Christian Hofmaier Date: Thu, 26 Sep 2019 19:43:47 +0200 Subject: [locationinfo] Rework from HTML blocks to Jquery Clone - generalize code for easier adding of new functions --- .../templates/page-config-panel-default.html | 191 +++++++++++---------- 1 file changed, 102 insertions(+), 89 deletions(-) (limited to 'modules-available/locationinfo') diff --git a/modules-available/locationinfo/templates/page-config-panel-default.html b/modules-available/locationinfo/templates/page-config-panel-default.html index 5e13190e..eee01875 100644 --- a/modules-available/locationinfo/templates/page-config-panel-default.html +++ b/modules-available/locationinfo/templates/page-config-panel-default.html @@ -133,8 +133,7 @@
{{lang_mode}}
-
- +
@@ -181,7 +180,7 @@
- +

@@ -222,7 +221,7 @@

- +

@@ -387,6 +386,7 @@ document.addEventListener("DOMContentLoaded", function () { // Initialize fancy tooltips $('p.helptext').tooltip(); + // Add listener to range sliders so their label can be updated var $range = $('input[type="range"]'); $range.change(function () { @@ -394,13 +394,12 @@ document.addEventListener("DOMContentLoaded", function () { }); // Set state of input controls that aren't statically initialized server side $('.modify-inputs input[type="checkbox"]') - .bootstrapSwitch({size: 'small'}) - .on('switchChange.bootstrapSwitch', function () { - if (this.name === 'scaledaysauto') { - $('#daystoshow').prop('disabled', this.checked); - } - }); - + .bootstrapSwitch({size: 'small'}) + .on('switchChange.bootstrapSwitch', function () { + if (this.name === 'scaledaysauto') { + $('#daystoshow').prop('disabled', this.checked); + } + }); var lids = $locInput.val().split(','); $selLocs.empty(); @@ -481,92 +480,106 @@ document.addEventListener("DOMContentLoaded", function () { } } - function loadOverrideContent(id) { - // 1. Build Content - // $content.append($('

')); - var $content = $('
'); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
' + - '

' + - '
')); - $content.append($('
' + - '
' + - '
%
' + - '

' + - '
')); - - // 2. Load Content into Panel - var $panelBody = $('#overrideRoom' + id).find('div.panel-body'); - $panelBody.append($content); + function loadOverrideContent(locId) { + // Do we have override values (edit menu)? + var overVal = false; + if (overrides !== null && overrides[locId] !== undefined) overVal = true; + + // Make Bootstrap switches to normal checkboxes to be able to clone them correctly + var btstrpCheckboxes = $('.modify-inputs input[class="btstrpCheckbox"]'); + btstrpCheckboxes.bootstrapSwitch('destroy'); + + // Clone needed content + var $contentCopy = $('#overridableConfigs').clone(true); + $contentCopy.closest('#overridableConfigs').prop('id', ''); + + // Change mode show/hide classes + $contentCopy.find('.m1-s, .m1-h, .m2-s, .m2-h, .m3-s, .m3-h, .m4-s, .m4-h').each(function() { + if ($( this ).hasClass('m1-s')) $( this ).removeClass('m1-s').addClass('om1-s'); + else if ($( this ).hasClass('m1-h')) $( this ).removeClass('m1-h').addClass('om1-h'); + if ($( this ).hasClass('m2-s')) $( this ).removeClass('m2-s').addClass('om2-s'); + else if ($( this ).hasClass('m2-h')) $( this ).removeClass('m2-h').addClass('om2-h'); + if ($( this ).hasClass('m3-s')) $( this ).removeClass('m3-s').addClass('om3-s'); + else if ($( this ).hasClass('m3-h')) $( this ).removeClass('m3-h').addClass('om3-h'); + if ($( this ).hasClass('m4-s')) $( this ).removeClass('m4-s').addClass('om4-s'); + else if ($( this ).hasClass('m4-h')) $( this ).removeClass('m4-h').addClass('om4-h'); + }); - $('.modify-inputs #overrideRoom' + id + ' input[type="checkbox"]') + // Change labels + $contentCopy.find('label').each(function() { + var oldFor = $( this ).attr('for'); + $( this ).attr('for', 'override' + locId + oldFor); + }); + + // Change selects + $contentCopy.find('select').each(function() { + var oldId = $( this ).attr('id'); + var oldName = $( this ).attr('name'); + if (oldId === 'mode') $( this ).attr('onchange', 'modeChangeOverride(id)'); + $( this ).attr('id', 'override' + locId + oldId); + $( this ).attr('name', 'override' + locId + oldName); + $( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val()); + // TODO: Save 'roomplanner' mode (0, 1, ...) instead of true/false to get rid of special case + if (oldId === 'input-roomplanner' && overVal) $( this ).val(overrides[locId].roomplanner ? 1 : 0); + }); + + // Change options of selects + $contentCopy.find('option').each(function() { + var oldId = $( this ).attr('id'); + $( this ).attr('id', 'override' + locId + oldId); + }); + + // Change inputs + $contentCopy.find('input').each(function() { + var oldId = $( this ).attr('id'); + var oldName = $( this ).attr('name'); + $( this ).attr('id', 'override' + locId + oldId); + $( this ).attr('name', 'override' + locId + oldName); + $( this ).removeClass('btstrpCheckbox'); + if ($( this ).attr('type') === 'range') $( this ).val(overVal ? overrides[locId][oldName] : $('#' + oldId).val()); + else if ($( this ).attr('type') === 'checkbox') { + $( this ) + .bootstrapSwitch({size: 'small'}) + .on('switchChange.bootstrapSwitch', function () { + var regex = RegExp('[a-b0-9]*scaledaysauto'); + var substr = this.name.substring(0, this.name.length - 13); + if (regex.test(this.name)) { + $('#' + substr + 'daystoshow').prop('disabled', this.checked); + } + }); + $( this ).bootstrapSwitch('state', overVal ? overrides[locId][oldName] : $('#' + oldId).val()); + } + }); + + // Append copied content to location specific
+ var $panelBody = $('#overrideRoom' + locId).find('div.panel-body'); + $panelBody.append($contentCopy); + + // Specific extra stuff needed + + // De-/activate daystoshow based on scaledaysauto on/off + $('#override' + locId + 'daystoshow').prop('disabled', document.getElementById('override' + locId + 'scaledaysauto').checked); + + // Call modeChange once to correctly show/hide fields + modeChangeOverride('override'+ locId + 'mode'); + + // Recreate Bootstrap switches from checkboxes + btstrpCheckboxes .bootstrapSwitch({size: 'small'}) .on('switchChange.bootstrapSwitch', function () { - if (this.id === 'override' + id + 'scaledaysauto') { - $('#override' + id + 'daystoshow').prop('disabled', this.checked); + var regex = RegExp('[a-b0-9]*scaledaysauto'); + var substr = this.name.substring(0, this.name.length - 13); + if (regex.test(this.name)) { + $('#' + substr + 'daystoshow').prop('disabled', this.checked); } }); - // 3. Init parameters: Given parameters or global parameters if none given - var scale = $('#override' + id + 'scale'); - if (overrides !== null && overrides[id] !== undefined) { - $('#override' + id + 'mode').val(overrides[id].mode); - $('#override' + id + 'roomplanner').val(overrides[id].roomplanner ? 1 : 0); - if (overrides[id].vertical) $('#override' + id + 'vertical').bootstrapSwitch('state', true); - if (overrides[id].scaledaysauto) $('#override' + id + 'scaledaysauto').bootstrapSwitch('state', true); - $('#override' + id + 'startday').val(overrides[id].startday); - $('#override' + id + 'daystoshow').val(overrides[id].daystoshow); - $('#override' + id + 'rotation').val(overrides[id].rotation); - scale.val(overrides[id].scale); - } else { - $('#override' + id + 'mode').val($('#mode').val()); - $('#override' + id + 'roomplanner').val($('#input-roomplanner').val()); - if ($('#input-vertical').bootstrapSwitch('state')) $('#override' + id + 'vertical').bootstrapSwitch('state', true); - if ($('#scaledaysauto').bootstrapSwitch('state')) $('#override' + id + 'scaledaysauto').bootstrapSwitch('state', true); - console.log($('#startday').val()) - $('#override' + id + 'startday').val($('#startday').val()); - $('#override' + id + 'daystoshow').val($('#daystoshow').val()); - $('#override' + id + 'rotation').val($('#rotation').val()); - scale.val($('#input-scale').val()); - } - - scale.change(function () { + // Add listener to range inputs for updating value text + var range = $('input[type="range"]'); + range.change(function () { $(this).siblings().find('.range-display').text($(this).val()); }); - - scale.change(); - modeChangeOverride('override' + id + 'mode'); + range.change(); } function unloadOverrideContent(id) { -- cgit v1.2.3-55-g7522