0byt3m1n1
Path:
/
home
/
mgatv524
/
www
/
midiatech
/
views
/
[
Home
]
File: displayprofile-form-edit-javascript.twig
{# /* * Spring Signage Ltd - http://www.springsignage.com * Copyright (C) 2015 Spring Signage Ltd * (${FILE_NAME}) */ #} <script type="text/javascript"> /** * Setup Display Profile setting forms */ function displayProfileFormOpen() { // TIMERS setupFormFields( $('#timers-container'), Handlebars.compile($('#template-timers').html()), $('#timers-container').data('values'), $('#timers-container').data('options'), timersFormInit, timersFormInit ); // PICTURE OPTIONS setupFormFields( $('#picture-options-container'), Handlebars.compile($('#template-picture-options').html()), $('#picture-options-container').data('values'), $('#picture-options-container').data('options'), pictureOptionsFormInit, pictureOptionsFormUpdate ); } /** * Setup form dynamic fields * @param {jquery} container * @param {hbstemplate} template * @param {Object} values - Defined values * @param {Object} options - All the options */ function setupFormFields(container, template, values, options, callbackFuncInit, callbackFuncUpdate) { // Prevent forms to setup inexisting fields if(container.length === 0) { return; } if(Object.keys(values).length == 0) { // Add a template row var context = { options: options, index: 1, name: "", values: {}, buttonGlyph: "fa-plus" }; container.append(template(context)); } else { // For each of the existing codes, create form components var i = 0; $.each(values, function(index, values) { i++; var context = { options: options, index: i, name: index, values: values, buttonGlyph: ((i == 1) ? "fa-plus" : "fa-minus") }; container.append(template(context)); }); } // Button click handle container.on("click", "button", function(e) { e.preventDefault(); // find the gylph if($(this).find("i").hasClass("fa-plus")) { var context = { options: options, index: container.find('.multiSelect:last').data('index') + 1, name: "", values: {}, buttonGlyph: "fa-minus" }; // Append new object to container container.append(template(context)); // Initialize form fields callbackFuncUpdate(container, options, values); } else { // Remove this row $(this).closest(".form-group").remove(); } }); // Initialize form fields callbackFuncInit(container, options, values); } /** * Init/Update timePicker fields */ function timersFormInit(container) { container.find('.timePickerDisplayEditForm').each(function() { $(this).timepicker({ 'timeFormat': timeFormat, 'step': 15 }).change(function() { var value = moment($(this).val(), jsTimeFormat); $(this).closest("form").find("#" + $(this).data().linkField).val(value.format('HH:mm')); }); // Get the linked field and use it to set the time var preset = $(this).closest("form").find("#" + $(this).data().linkField).val(); if (preset != undefined && preset != "") { $(this).timepicker('setTime', preset); } }); } /** * Initialise all form fields */ function pictureOptionsFormInit(container, options, values) { container.find('.multiSelect').each(function() { pictureOptionsFormChangeInputs($(this).val(), $(this).closest('.row'), options[$(this).val()], values); }); container.on('change', '.multiSelect', function() { pictureOptionsFormChangeInputs($(this).val(), $(this).closest('.row'), options[$(this).val()], values); }); } /** * Update the last added field */ function pictureOptionsFormUpdate(container, options, values) { container.find('.multiSelect:last').each(function() { pictureOptionsFormChangeInputs($(this).val(), $(this).closest('.row'), options[$(this).val()], values); }); } /** * Populate and create the slider */ function pictureOptionsFormChangeInputs(selProperty, row, propertyOptions, values) { if(selProperty == undefined || selProperty == '') { row.find('.multiSelectInputs').html(Handlebars.compile($('#template-picture-options-none').html())()); return; } // Add empty template to the container const template = Handlebars.compile($('#template-picture-options-slider').html()); row.find('.multiSelectInputs').html(template({ index: row.find('.multiSelect').data('index') })); let propertyValue = values[selProperty]; let sliderOptions = propertyOptions.sliderOptions; // Find respective index if(typeof(propertyValue) == "string") { for (let index = 0; index < sliderOptions.ticks_labels.length; index++) { const label = sliderOptions.ticks_labels[index]; if(label == propertyValue) { propertyValue = index; } } } // Set value to the options sliderOptions.value = ((propertyValue != undefined) ? propertyValue : 0); // Init slider row.find('.pictureControlsSlider').slider(sliderOptions); // Refresh on tab switch to fix broken labels $('a[data-toggle="tab"]').on('shown.bs.tab', () => { row.find('.pictureControlsSlider').slider('refresh', { useCurrentValue: true }); }); } // Equals helper for the templates below Handlebars.registerHelper('eq', function(v1, v2, opts) { if (v1 === v2) { return opts.fn(this); } else { return opts.inverse(this); } }); </script> <style> /* * Slider width fix */ .slider:not(.scaled-slider) { width: 100% !important; } </style> {% raw %} <script type="text/x-handlebars-template" id="template-timers"> <div class="form-group col-sm-12 row form-group-timers"> <div class="col-sm-1"> <button type="button" class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button> </div> <div class="col-sm-5"> <select class="form-control multiSelect" name="timers[{{ index }}][day]" data-index="{{ index }}"> <option value=""></option> {{#each options}} <option value="{{ id }}" {{#eq id ../name}} selected{{/eq}}>{{ name }}</option> {{/each}} </select> </div> <div class="col-sm-3 multiSelectInputs"> <input type="hidden" class="timersOn" name="timers[{{ index }}][on]" id="timersOn{{ index }}" value="{{ values.on }}" /> <input class="form-control timePickerDisplayEditForm" type="text" id="timersOn{{ index }}Link" data-link-field="timersOn{{ index }}" data-link-format="H:i"/> </div> <div class="col-sm-3 multiSelectInputs"> <input type="hidden" class="timersOff" name="timers[{{ index }}][off]" id="timersOff{{ index }}" value="{{ values.off }}" /> <input class="form-control timePickerDisplayEditForm" type="text" id="timersOff{{ index }}Link" data-link-field="timersOff{{ index }}" data-link-format="H:i"/> </div> </div> </script> <script type="text/x-handlebars-template" id="template-picture-options"> <div class="form-group col-sm-12 row form-group-picture-options"> <div class="col-sm-1"> <button type="button" class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button> </div> <div class="col-sm-5"> <select class="form-control multiSelect" name="pictureControls[{{ index }}][property]" data-index="{{ index }}"> <option value=""></option> {{#each options}} <option value="{{@key}}" {{#eq @key ../name}} selected{{/eq}}>{{ name }}</option> {{/each}} </select> </div> <div class="col-sm-6 multiSelectInputs"> {% endraw %} <p class="btn btn-block btn-primary" disabled>{% trans "Select a property to display inputs" %}</p> {% raw %} </div> </div> </script> <script type="text/x-handlebars-template" id="template-picture-options-slider"> <input type="text" class="pictureControlsSlider" name="pictureControls[{{ index }}][value]"/> </script> <script type="text/x-handlebars-template" id="template-picture-options-none"> {% endraw %} <p class="btn btn-block btn-primary" disabled>{% trans "Select a property to display inputs" %}</p> {% raw %} </script> {% endraw %}