From 2b038dee6ce3399349bbc7912d8bc086b8a7eb9b Mon Sep 17 00:00:00 2001 From: Moe Alam Date: Sat, 5 Dec 2020 11:54:40 -0800 Subject: [PATCH] onvifDeviceManager and Form Builder UI cleanup --- definitions/en_CA.js | 62 ++-- languages/en_CA.json | 4 +- libs/onvifDeviceManager/utils.js | 2 +- web/libs/css/dash2.forms.css | 19 + web/libs/css/dash2.monitoredit.css | 17 - web/libs/js/dash2.elements.js | 15 +- web/libs/js/dash2.monitoredit.js | 32 +- web/pages/blocks/onvifDeviceManager.ejs | 438 ++++++++++++------------ web/pages/blocks/settings.ejs | 110 +++--- 9 files changed, 341 insertions(+), 358 deletions(-) diff --git a/definitions/en_CA.js b/definitions/en_CA.js index 34e96cb8..c2471c4d 100644 --- a/definitions/en_CA.js +++ b/definitions/en_CA.js @@ -4654,6 +4654,14 @@ module.exports = function(s,config,lang){ "ONVIF Device Manager": { "section": "ONVIF Device Manager", "blocks": { + "Notice": { + "name": lang["Notice"], + "color": "warning", + "blockquoteClass": "global_tip", + "blockquote": lang.onvifdeviceManagerGlobalTip, + "info": [ + ] + }, "Network": { "name": lang["Network"], "color": "purple", @@ -4809,6 +4817,33 @@ module.exports = function(s,config,lang){ "name": lang["Imaging"], "color": "purple", "info": [ + { + "field": lang['IrCutFilter'], + "name": "IrCutFilter", + "placeholder": "", + "description": "", + "default": "", + "example": "", + "form-group-class": "imaging-field", + "fieldType": "select", + "possible": [ + { + "name": lang.On, + "value": "ON", + "info": "Enable Ir cut fiter. Typically Day mode." + }, + { + "name": lang.Off, + "value": "OFF", + "info": "Disable Ir cut fiter. Typically Night mode." + }, + { + "name": lang.Auto, + "value": "AUTO", + "info": "Ir cut filter is automatically activated by the device." + }, + ] + }, { "field": lang['Brightness'], "name": "Brightness", @@ -4899,33 +4934,6 @@ module.exports = function(s,config,lang){ "form-group-class": "imaging-field", "possible": "" }, - { - "field": lang['IrCutFilter'], - "name": "IrCutFilter", - "placeholder": "", - "description": "", - "default": "", - "example": "", - "form-group-class": "imaging-field", - "fieldType": "select", - "possible": [ - { - "name": lang.On, - "value": "ON", - "info": "Enable Ir cut fiter. Typically Day mode." - }, - { - "name": lang.Off, - "value": "OFF", - "info": "Disable Ir cut fiter. Typically Night mode." - }, - { - "name": lang.Auto, - "value": "AUTO", - "info": "Ir cut filter is automatically activated by the device." - }, - ] - }, { "field": lang['Sharpness'], "name": "Sharpness", diff --git a/languages/en_CA.json b/languages/en_CA.json index c9e1279e..7bade3fc 100644 --- a/languages/en_CA.json +++ b/languages/en_CA.json @@ -1088,7 +1088,7 @@ "WhiteBalance": "White Balance", "Sharpness": "Sharpness", "BacklightCompensation": "Backlight Compensation", - "IrCutFilter": "IR Cut Filter", + "IrCutFilter": "Night Vision", "UTCDateTime": "Date", "Exposure": "Exposure", "Contrast": "Contrast", @@ -1105,10 +1105,12 @@ "Imaging": "Imaging", "Hostname": "Hostname", "Network": "Network", + "Notice": "Notice", "No Sound": "No Sound", "Notification Sound":"Notification Sound", "Alert Sound":"Alert Sound", "Alert Sound Delay":"Alert Sound Delay", + "onvifdeviceManagerGlobalTip":"ONVIF allows modifying the camera's internal settings. ONVIF is somewhat of an umbrella term, it can mean many things unfortunately. With that being the case you may see an option in this tool but it may not be editable. This is usually because the camera vendor has not added this method or has deviated from its intended usage. In those cases you will need to enter the camera's configuration through the prescribed method of the camera vendor, this is generally opening the IP Address of the camera in your web browser.", "powerVideoEventLimit":"You have set a high event limit. Are you sure you want to make this request?", "There are no monitors that you can view with this account.":"There are no monitors that you can view with this account.", "Delete Monitors and Files": "Delete Monitors and Files", diff --git a/libs/onvifDeviceManager/utils.js b/libs/onvifDeviceManager/utils.js index 035ebf2d..2ba4396a 100644 --- a/libs/onvifDeviceManager/utils.js +++ b/libs/onvifDeviceManager/utils.js @@ -340,7 +340,7 @@ const setDateAndTime = async (onvifDevice,options) => { try{ // const dateInfo = await onvifDevice.services.device.getSystemDateAndTime().GetSystemDateAndTimeResponse.SystemDateAndTime const onvifResponse = await onvifDevice.services.device.setSystemDateAndTime ({ - DateTimeType: options.dateTimeType ? "NTP" : "Manual", + DateTimeType: options.dateTimeType, DaylightSavings: !options.daylightSavings ? false : true, // TimeZone: options.timezone, UTCDateTime: new Date(options.utcDateTime), diff --git a/web/libs/css/dash2.forms.css b/web/libs/css/dash2.forms.css index 5f01fc49..c89e5ee6 100644 --- a/web/libs/css/dash2.forms.css +++ b/web/libs/css/dash2.forms.css @@ -59,3 +59,22 @@ form.modal-body{margin:0} .btn-group-justified {display: flex} .btn-group-justified .btn {flex: 1} + +.form-group-group > h4{ + cursor: pointer; +} +.form-group-group > h4 small{ + cursor: pointer; + font-size: 8pt; +} + +.hide-box-wrapper.form-group-group > h4{ + margin: 0; +} +.hide-box-wrapper.form-group-group{ + padding: 0; +} +.hide-box-wrapper .box-wrapper{ + height: 0; + overflow: hidden; +} diff --git a/web/libs/css/dash2.monitoredit.css b/web/libs/css/dash2.monitoredit.css index c713661a..e69de29b 100644 --- a/web/libs/css/dash2.monitoredit.css +++ b/web/libs/css/dash2.monitoredit.css @@ -1,17 +0,0 @@ -#add_monitor .form-group-group > h4{ - cursor: pointer; -} -#add_monitor .form-group-group > h4 small{ - cursor: pointer; - font-size: 8pt; -} -#add_monitor .hide-box-wrapper.form-group-group > h4{ - margin: 0; -} -#add_monitor .hide-box-wrapper.form-group-group{ - padding: 0; -} -#add_monitor .hide-box-wrapper .box-wrapper{ - height: 0; - overflow: hidden; -} diff --git a/web/libs/js/dash2.elements.js b/web/libs/js/dash2.elements.js index b4492aa4..d8dacb6f 100644 --- a/web/libs/js/dash2.elements.js +++ b/web/libs/js/dash2.elements.js @@ -818,7 +818,20 @@ $(document).ready(function(e){ e.e.resize() } }); - + $('body').find('.monitor-section-header').click(function(e){ + var parent = $(this).parent('.form-group-group') + var boxWrapper = parent.attr('id') + parent.toggleClass('hide-box-wrapper') + var hideBoxWrapper = parent.hasClass('hide-box-wrapper') + boxWrappersHidden[boxWrapper] = hideBoxWrapper + $.ccio.op('boxWrappersHidden',boxWrappersHidden) + }); + var boxWrappersHidden = $.ccio.op().boxWrappersHidden || {} + $.each(boxWrappersHidden,function(boxId,hide){ + if(hide){ + $(`#${boxId}`).addClass('hide-box-wrapper') + } + }) $('body') .on('click','.scrollTo',function(ee){ ee.preventDefault() diff --git a/web/libs/js/dash2.monitoredit.js b/web/libs/js/dash2.monitoredit.js index 4676e099..055bd144 100644 --- a/web/libs/js/dash2.monitoredit.js +++ b/web/libs/js/dash2.monitoredit.js @@ -402,7 +402,7 @@ var drawList = function(){ list.html(html) } monitorEditorWindow.on('shown.bs.modal', function () { - triggerSecondaryChangeOnAll() + triggerSecondaryHideCheckOnAll() drawList() }) $.aM.import = function(options){ @@ -547,7 +547,7 @@ $.aM.import = function(options){ } }) monitorsForCopy.find('optgroup').html(tmp) - triggerSecondaryChangeOnAll() + triggerSecondaryHideCheckOnAll() drawList() } //parse "Automatic" field in "Input" Section @@ -757,10 +757,10 @@ var showInputMappingFields = function(showMaps){ }else{ el.hide() } - triggerSecondaryChangeOnAll() + triggerSecondaryHideCheckOnAll() drawList() } -var triggerSecondaryChange = function(el){ +var triggerSecondaryHideCheck = function(el){ var key = el.attr('selector') var value = el.val(); var triggerChange = el.attr('triggerchange') @@ -773,10 +773,10 @@ var triggerSecondaryChange = function(el){ $(triggerChange).trigger('change') } } -var triggerSecondaryChangeOnAll = function(){ +var triggerSecondaryHideCheckOnAll = function(){ monitorEditorWindow.find('[selector]').each(function(){ var el = $(this); - triggerSecondaryChange(el) + triggerSecondaryHideCheck(el) }) } monitorStreamChannels.on('click','.delete',function(){ @@ -898,7 +898,7 @@ editorForm.find('[name="type"]').change(function(e){ editorForm.find('[detail]').change($.ccio.form.details) editorForm.on('change','[selector]',function(){ var el = $(this); - triggerSecondaryChange(el) + triggerSecondaryHideCheck(el) drawList() }); editorForm.find('[name="type"]').change(function(e){ @@ -913,20 +913,6 @@ editorForm.find('[name="type"]').change(function(e){ pathField.attr('placeholder','/videostream.cgi?1') break; } -}); -var boxWrappersHidden = $.ccio.op().boxWrappersHidden || {} -$.each(boxWrappersHidden,function(boxId,hide){ - if(hide){ - $(`#${boxId}`).addClass('hide-box-wrapper') - } -}) -monitorEditorWindow.find('.monitor-section-header').click(function(e){ - var parent = $(this).parent('.form-group-group') - var boxWrapper = parent.attr('id') - parent.toggleClass('hide-box-wrapper') - var hideBoxWrapper = parent.hasClass('hide-box-wrapper') - boxWrappersHidden[boxWrapper] = hideBoxWrapper - $.ccio.op('boxWrappersHidden',boxWrappersHidden) }); $.aM.connectedDetectorPlugins = {} $.aM.addDetectorPlugin = function(name,d){ @@ -950,7 +936,7 @@ monitorEditorWindow.find('.monitor-section-header').click(function(e){ $('.shinobi-detector_name').empty() $('.shinobi-detector_plug').hide() $('.shinobi-detector-invert').show() - triggerSecondaryChangeOnAll() + triggerSecondaryHideCheckOnAll() drawList() }else{ var pluginTitle = [] @@ -966,7 +952,7 @@ monitorEditorWindow.find('.monitor-section-header').click(function(e){ $('.shinobi-detector-invert').hide() $('.shinobi-detector_name').text(pluginTitle.join(', ')) if(pluginNotice.length > 0)$('.shinobi-detector-msg').text(pluginNotice.join('
')) - triggerSecondaryChangeOnAll() + triggerSecondaryHideCheckOnAll() drawList() } } diff --git a/web/pages/blocks/onvifDeviceManager.ejs b/web/pages/blocks/onvifDeviceManager.ejs index 8a4d552a..c41a1f4d 100644 --- a/web/pages/blocks/onvifDeviceManager.ejs +++ b/web/pages/blocks/onvifDeviceManager.ejs @@ -13,238 +13,224 @@
- <% - var buildOptions = function(field,possiblities){ - if(!field)console.error('field',field) - var fieldElement = '' - possiblities.forEach(function(option){ - if(option.optgroup){ - fieldElement += '' - fieldElement += buildOptions(field,option.optgroup) - fieldElement += '' - }else{ - var selected = '' - if(option.value === field.default){ - selected = 'selected' - } - fieldElement += '' + <% + var buildOptions = function(field,possiblities){ + if(!field)console.error('field',field) + var fieldElement = '' + possiblities.forEach(function(option){ + if(option.optgroup){ + fieldElement += '' + fieldElement += buildOptions(field,option.optgroup) + fieldElement += '' + }else{ + var selected = '' + if(option.value === field.default){ + selected = 'selected' + } + fieldElement += '' + } + }) + return fieldElement } - }) - return fieldElement - } - var drawBlock = function(userSettings){ - if(userSettings.evaluation && !eval(userSettings.evaluation)){ - return - } - var attributes = [] - var styles = [] - var sectionClass = [] - var headerTitle = userSettings.headerTitle || lang[userSettings.name] || userSettings.name - if(userSettings.hidden === true){ - styles.push('display:none') - } - if(userSettings.style){ - styles.push(userSettings.style) - } - if(userSettings.isSection === true){ - attributes.push('section') - } - if(userSettings.attribute){ - attributes.push(userSettings.attribute) - } - if(userSettings.id){ - attributes.push(`id="${userSettings.id}"`) - }else{ - var userSettingsId - if(userSettings.name){ - userSettingsId = userSettings.name.replace(/[^a-zA-Z ]/g, '').replace(/[^a-zA-Z ]/g, '').replace(/ /g, '') - }else{ - userSettingsId = "NO NAME" - } - userSettings.id = userSettingsId - attributes.push(`id="${userSettingsId}"`) - } - if(userSettings.color){ - sectionClass.push(userSettings.color) - } - if(userSettings['section-class']){ - sectionClass.push(userSettings['section-class']) - } - if(userSettings.isAdvanced){ %> -
- <% } - if(userSettings['section-pre-pre-class']){ %> -
- <% } - if(userSettings['section-pre-class']){ %> -
- <% } - %> -
style="<%- styles.join(';') %>" class="form-group-group <%- sectionClass.join(' ') %>"> -

<%- headerTitle %> - <% if(userSettings.headerButtons){ %> -
- <% userSettings.headerButtons.forEach(function(button){ %> - - <% if(button.icon){ %><% } %> - <% if(button.text){ %><%- button.text %><% } %> - - <% }) %> + var drawBlock = function(monitorSettings){ + if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){ + return + } + var attributes = [] + var styles = [] + var sectionClass = [] + var headerTitle = monitorSettings.headerTitle || lang[monitorSettings.name] || monitorSettings.name + if(monitorSettings.hidden === true){ + styles.push('display:none') + } + if(monitorSettings.style){ + styles.push(monitorSettings.style) + } + if(monitorSettings.isSection === true){ + attributes.push('section') + } + if(monitorSettings.attribute){ + attributes.push(monitorSettings.attribute) + } + if(monitorSettings.id){ + attributes.push(`id="${monitorSettings.id}"`) + } + if(monitorSettings.color){ + sectionClass.push(monitorSettings.color) + } + if(monitorSettings['section-class']){ + sectionClass.push(monitorSettings['section-class']) + } + if(monitorSettings.isAdvanced){ %> +

- <% if(userSettings['input-mapping']){ %> - - <% } %> - <% if(userSettings.blockquote){ %> -
- <%- userSettings.blockquote %> -
- <% } %> + <% if(monitorSettings.blockquote){ %> +
+ <%- monitorSettings.blockquote %> +
+ <% } %> + <% if(monitorSettings.blocks){ + monitorSettings.blocks.forEach(function(settingsBlock){ + drawBlock(settingsBlock) + }) + } + if(monitorSettings.info){ + monitorSettings.info.forEach(function(field){ + if(field.isFormGroupGroup === true){ + drawBlock(field) + }else{ + if(field.notForSubAccount === true){ + var notForSubAccount = '!details.sub' + if(!field.evaluation){ + field.evaluation = notForSubAccount + }else{ + field.evaluation += ' && ' + notForSubAccount + } + } + if(field.evaluation && !eval(field.evaluation)){ + return + } + var hidden = '' + if(field.hidden === true){ + hidden = 'style="display:none"' + } + var fieldClass = [] + var attributes = [] + if(field.name && field.name.indexOf('detail=') > -1){ + attributes.push(field.name) + }else if(field.name){ + attributes.push("name=" + field.name) + } + if(field.placeholder || field.default){ + attributes.push(`placeholder="${field.placeholder || field.default}"`) + }else if(field.example){ + attributes.push(`placeholder="Example : ${field.example}"`) + } + if(field.attribute){ + attributes.push(field.attribute) + } + if(field.selector){ + attributes.push(`selector="${field.selector}"`) + } + if(field.id){ + attributes.push(`id="${field.id}"`) + } + if(field.class){ + fieldClass.push(`${field.class}`) + } + var possiblities = field.possible || [] + var fieldType = field.fieldType || 'text' + var fieldElement = '' + var preFill = field.preFill || '' + switch(fieldType){ + case'btn': - <% - if(userSettings.blocks){ - userSettings.blocks.forEach(function(settingsBlock){ - drawBlock(settingsBlock) - }) - } - if(userSettings.info){ - userSettings.info.forEach(function(field){ - if(field.isFormGroupGroup === true){ - drawBlock(field) - }else{ - if(field.notForSubAccount === true){ - var notForSubAccount = '!details.sub' - if(!field.evaluation){ - field.evaluation = notForSubAccount - }else{ - field.evaluation += ' && ' + notForSubAccount - } - } - if(field.evaluation && !eval(field.evaluation)){ - return - } - var hidden = '' - if(field.hidden === true){ - hidden = 'style="display:none"' - } - var fieldClass = [] - var attributes = [] - if(field.name && field.name.indexOf('detail=') > -1){ - attributes.push(field.name) - }else if(field.name){ - attributes.push("name=" + field.name) - } - if(field.placeholder || field.default){ - attributes.push(`placeholder="${field.placeholder || field.default}"`) - }else if(field.example){ - attributes.push(`placeholder="Example : ${field.example}"`) - } - if(field.attribute){ - attributes.push(field.attribute) - } - if(field.selector){ - attributes.push(`selector="${field.selector}"`) - } - if(field.id){ - attributes.push(`id="${field.id}"`) - } - if(field.class){ - fieldClass.push(`${field.class}`) - } - var possiblities = field.possible || [] - var fieldType = field.fieldType || 'text' - var fieldElement = '' - var preFill = field.preFill || '' - switch(fieldType){ - case'btn': - fieldElement = `${field.btnContent}` - break; - case'ul': - fieldElement = `
    ` - break; - case'div': - fieldElement = `
    ` - break; - case'number': - if(field.numberMin){ - attributes.push(`min="${field.numberMin}"`) + fieldElement = `${field.btnContent}` + break; + case'ul': + fieldElement = `
      ` + break; + case'div': + fieldElement = `
      ` + break; + case'number': + if(field.numberMin){ + attributes.push(`min="${field.numberMin}"`) + } + if(field.numberMax){ + attributes.push(`max="${field.numberMax}"`) + } + fieldElement = '
      ' + break; + case'password': + fieldElement = '
      ' + break; + case'text': + fieldElement = `
      ` + break; + case'textarea': + fieldElement = '
      ' + break; + case'select': + fieldElement = '
      ' + break; + } + if(field['form-group-class-pre-pre-layer']){ %> +
      + <% } + if(field['form-group-class-pre-layer']){ %> +
      + <% } + if(fieldType === 'ul' || fieldType === 'div' || fieldType === 'btn'){ %> + <%- fieldElement %> + <% }else{ %> + + <% } } - if(field.numberMax){ - attributes.push(`max="${field.numberMax}"`) - } - fieldElement = '
      ' - break; - case'password': - fieldElement = '
      ' - break; - case'text': - fieldElement = `
      ` - break; - case'textarea': - fieldElement = '
      ' - break; - case'select': - fieldElement = '
      ' - break; - } - if(field.isAdvanced){ %> -
      - <% } - if(field['form-group-class-pre-pre-layer']){ %> -
      - <% } - if(field['form-group-class-pre-layer']){ %> -
      - <% } - if(fieldType === 'ul' || fieldType === 'div' || fieldType === 'btn'){ %> - <%- fieldElement %> - <% }else{ %> - - <% } + if(field['form-group-class-pre-layer']){ %> +
      + <% } + if(field['form-group-class-pre-pre-layer']){ %> +
      + <% } + }) } - if(field['form-group-class-pre-layer']){ %> -
      - <% } - if(field['form-group-class-pre-pre-layer']){ %> -
      - <% } - if(field.isAdvanced){ %> -
      - <% } - }) - } - %> -
      - <% - if(userSettings['section-pre-class']){ %> -
      - <% } - if(userSettings['section-pre-pre-class']){ %> -
      - <% } - if(userSettings.isAdvanced){ %> -
      - <% } - } - %> + %> +
      +
      + <% + if(monitorSettings['section-pre-class']){ %> +
      + <% } + if(monitorSettings['section-pre-pre-class']){ %> + + <% } + if(monitorSettings.isAdvanced){ %> + + <% } + } + %> <% Object.keys(define['ONVIF Device Manager'].blocks).forEach(function(blockKey){ var accountSettings = define['ONVIF Device Manager'].blocks[blockKey] drawBlock(accountSettings) diff --git a/web/pages/blocks/settings.ejs b/web/pages/blocks/settings.ejs index 92204aae..7cb51a63 100644 --- a/web/pages/blocks/settings.ejs +++ b/web/pages/blocks/settings.ejs @@ -48,59 +48,50 @@ }) return fieldElement } - var drawBlock = function(userSettings){ - if(userSettings.evaluation && !eval(userSettings.evaluation)){ + var drawBlock = function(monitorSettings){ + if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){ return } var attributes = [] var styles = [] var sectionClass = [] - var headerTitle = userSettings.headerTitle || lang[userSettings.name] || userSettings.name - if(userSettings.hidden === true){ + var headerTitle = monitorSettings.headerTitle || lang[monitorSettings.name] || monitorSettings.name + if(monitorSettings.hidden === true){ styles.push('display:none') } - if(userSettings.style){ - styles.push(userSettings.style) + if(monitorSettings.style){ + styles.push(monitorSettings.style) } - if(userSettings.isSection === true){ + if(monitorSettings.isSection === true){ attributes.push('section') } - if(userSettings.attribute){ - attributes.push(userSettings.attribute) + if(monitorSettings.attribute){ + attributes.push(monitorSettings.attribute) } - if(userSettings.id){ - attributes.push(`id="${userSettings.id}"`) - }else{ - var userSettingsId - if(userSettings.name){ - userSettingsId = userSettings.name.replace(/[^a-zA-Z ]/g, '').replace(/[^a-zA-Z ]/g, '').replace(/ /g, '') - }else{ - userSettingsId = "NO NAME" - } - userSettings.id = userSettingsId - attributes.push(`id="${userSettingsId}"`) + if(monitorSettings.id){ + attributes.push(`id="${monitorSettings.id}"`) } - if(userSettings.color){ - sectionClass.push(userSettings.color) + if(monitorSettings.color){ + sectionClass.push(monitorSettings.color) } - if(userSettings['section-class']){ - sectionClass.push(userSettings['section-class']) + if(monitorSettings['section-class']){ + sectionClass.push(monitorSettings['section-class']) } - if(userSettings.isAdvanced){ %> -
      + if(monitorSettings.isAdvanced){ %> +