From 7750eef533569bfc18323bb788eb40ad288cba75 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Wed, 9 Aug 2023 16:00:08 -0400 Subject: [PATCH] Handle non-existing elements when monitor type is Website or Local. --- web/skins/classic/views/js/monitor.js | 142 ++++++++++++++------------ 1 file changed, 78 insertions(+), 64 deletions(-) diff --git a/web/skins/classic/views/js/monitor.js b/web/skins/classic/views/js/monitor.js index 674f79f04..26cf1b76f 100644 --- a/web/skins/classic/views/js/monitor.js +++ b/web/skins/classic/views/js/monitor.js @@ -270,10 +270,13 @@ function initPage() { window.location.assign('?view=console'); }); + const form = document.getElementById('contentForm'); + //manage the Janus settings div - if (document.getElementsByName("newMonitor[JanusEnabled]")) { - if (document.getElementsByName("newMonitor[JanusEnabled]")[0].checked) { + const janusEnabled = form.elements['newMonitor[JanusEnabled]']; + if (janusEnabled) { + if (janusEnabled.checked) { document.getElementById("FunctionJanusAudioEnabled").hidden = false; document.getElementById("FunctionJanusProfileOverride").hidden = false; document.getElementById("FunctionJanusUseRTSPRestream").hidden = false; @@ -285,7 +288,7 @@ function initPage() { document.getElementById("FunctionJanusRTSPSessionTimeout").hidden = true; } - document.getElementsByName("newMonitor[JanusEnabled]")[0].addEventListener('change', function() { + janusEnabled.addEventListener('change', function() { if (this.checked) { document.getElementById("FunctionJanusAudioEnabled").hidden = false; document.getElementById("FunctionJanusProfileOverride").hidden = false; @@ -299,7 +302,7 @@ function initPage() { } }); - const Janus_Use_RTSP_Restream = document.getElementsByName('newMonitor[Janus_Use_RTSP_Restream]'); + const Janus_Use_RTSP_Restream = form.elements['newMonitor[Janus_Use_RTSP_Restream]']; if (Janus_Use_RTSP_Restream.length) { Janus_Use_RTSP_Restream[0].onclick = Janus_Use_RTSP_Restream_onclick; console.log("Setup Janus_RTSP_Restream.onclick"); @@ -309,69 +312,77 @@ function initPage() { } // Amcrest API controller - if (document.getElementsByName("newMonitor[ONVIF_Event_Listener]")[0].checked) { - document.getElementById("function_use_Amcrest_API").hidden = false; - } else { - document.getElementById("function_use_Amcrest_API").hidden = true; - } - document.getElementsByName("newMonitor[ONVIF_Event_Listener]")[0].addEventListener('change', function() { - if (this.checked) { + const ONVIF_Event_Listener = form.elements['newMonitor[ONVIF_Event_Listener]']; + if (ONVIF_Event_Listener) { + if (ONVIF_Event_Listener[0].checked) { document.getElementById("function_use_Amcrest_API").hidden = false; - } - }); - document.getElementsByName("newMonitor[ONVIF_Event_Listener]")[1].addEventListener('change', function() { - if (this.checked) { + } else { document.getElementById("function_use_Amcrest_API").hidden = true; } - }); + ONVIF_Event_Listener[0].addEventListener('change', function() { + if (this.checked) { + document.getElementById("function_use_Amcrest_API").hidden = false; + } + }); + ONVIF_Event_Listener[1].addEventListener('change', function() { + if (this.checked) { + document.getElementById("function_use_Amcrest_API").hidden = true; + } + }); + } const monitorPath = document.getElementsByName("newMonitor[Path]")[0]; - monitorPath.addEventListener('keyup', change_Path); // on edit sync path -> user & pass - monitorPath.addEventListener('blur', change_Path); // remove fields from path if user & pass equal on end of edit + if (monitorPath) { + monitorPath.addEventListener('keyup', change_Path); // on edit sync path -> user & pass + monitorPath.addEventListener('blur', change_Path); // remove fields from path if user & pass equal on end of edit - const monitorUser = document.getElementsByName("newMonitor[User]"); - if ( monitorUser.length > 0 ) { - monitorUser[0].addEventListener('blur', change_Path); // remove fields from path if user & pass equal + const monitorUser = document.getElementsByName("newMonitor[User]"); + if ( monitorUser.length > 0 ) { + monitorUser[0].addEventListener('blur', change_Path); // remove fields from path if user & pass equal + } + + const monitorPass = document.getElementsByName("newMonitor[Pass]"); + if ( monitorPass.length > 0 ) { + monitorPass[0].addEventListener('blur', change_Path); // remove fields from path if user & pass equal + } } - const monitorPass = document.getElementsByName("newMonitor[Pass]"); - if ( monitorPass.length > 0 ) { - monitorPass[0].addEventListener('blur', change_Path); // remove fields from path if user & pass equal - } + if (form.elements['newMonitor[Type]'].value == 'WebSite') return; - if ( parseInt(ZM_OPT_USE_GEOLOCATION) ) { - if ( window.L ) { - const form = document.getElementById('contentForm'); - const latitude = form.elements['newMonitor[Latitude]'].value; - const longitude = form.elements['newMonitor[Longitude]'].value; - map = L.map('LocationMap', { - center: L.latLng(latitude, longitude), - zoom: 8, - onclick: function() { - alert('click'); - } - }); - L.tileLayer(ZM_OPT_GEOLOCATION_TILE_PROVIDER, { - attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', - maxZoom: 18, - id: 'mapbox/streets-v11', - tileSize: 512, - zoomOffset: -1, - accessToken: ZM_OPT_GEOLOCATION_ACCESS_TOKEN, - }).addTo(map); - marker = L.marker([latitude, longitude], {draggable: 'true'}); - marker.addTo(map); - marker.on('dragend', function(event) { - const marker = event.target; - const position = marker.getLatLng(); - const form = document.getElementById('contentForm'); - form.elements['newMonitor[Latitude]'].value = position.lat; - form.elements['newMonitor[Longitude]'].value = position.lng; - }); - map.invalidateSize(); - $j("a[href='#pills-location']").on('shown.bs.tab', function(e) { + if (parseInt(ZM_OPT_USE_GEOLOCATION)) { + if (window.L) { + if (form.elements['newMonitor[Type]'].value != 'WebSite') { + const latitude = form.elements['newMonitor[Latitude]'].value; + const longitude = form.elements['newMonitor[Longitude]'].value; + map = L.map('LocationMap', { + center: L.latLng(latitude, longitude), + zoom: 8, + onclick: function() { + alert('click'); + } + }); + L.tileLayer(ZM_OPT_GEOLOCATION_TILE_PROVIDER, { + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', + maxZoom: 18, + id: 'mapbox/streets-v11', + tileSize: 512, + zoomOffset: -1, + accessToken: ZM_OPT_GEOLOCATION_ACCESS_TOKEN, + }).addTo(map); + marker = L.marker([latitude, longitude], {draggable: 'true'}); + marker.addTo(map); + marker.on('dragend', function(event) { + const marker = event.target; + const position = marker.getLatLng(); + const form = document.getElementById('contentForm'); + form.elements['newMonitor[Latitude]'].value = position.lat; + form.elements['newMonitor[Longitude]'].value = position.lng; + }); map.invalidateSize(); - }); + $j("a[href='#pills-location']").on('shown.bs.tab', function(e) { + map.invalidateSize(); + }); + } // end if not website } else { console.log('Location turned on but leaflet not installed.'); } @@ -456,18 +467,21 @@ function random_WebColour() { } function update_estimated_ram_use() { - var width = document.querySelectorAll('input[name="newMonitor[Width]"]')[0].value; - var height = document.querySelectorAll('input[name="newMonitor[Height]"]')[0].value; - var colours = document.querySelectorAll('select[name="newMonitor[Colours]"]')[0].value; + const form = document.getElementById('contentForm'); + if (form.elements['newMonitor[Type]'].value == 'WebSite') return; - var min_buffer_count = parseInt(document.querySelectorAll('input[name="newMonitor[ImageBufferCount]"]')[0].value); + const width = document.querySelectorAll('input[name="newMonitor[Width]"]')[0].value; + const height = document.querySelectorAll('input[name="newMonitor[Height]"]')[0].value; + const colours = document.querySelectorAll('select[name="newMonitor[Colours]"]')[0].value; + + let min_buffer_count = parseInt(document.querySelectorAll('input[name="newMonitor[ImageBufferCount]"]')[0].value); min_buffer_count += parseInt(document.querySelectorAll('input[name="newMonitor[PreEventCount]"]')[0].value); - var min_buffer_size = min_buffer_count * width * height * colours; + const min_buffer_size = min_buffer_count * width * height * colours; document.getElementById('estimated_ram_use').innerHTML = 'Min: ' + human_filesize(min_buffer_size); - var max_buffer_count = parseInt(document.querySelectorAll('input[name="newMonitor[MaxImageBufferCount]"]')[0].value); + const max_buffer_count = parseInt(document.querySelectorAll('input[name="newMonitor[MaxImageBufferCount]"]')[0].value); if (max_buffer_count) { - var max_buffer_size = (min_buffer_count + max_buffer_count) * width * height * colours; + const max_buffer_size = (min_buffer_count + max_buffer_count) * width * height * colours; document.getElementById('estimated_ram_use').innerHTML += ' Max: ' + human_filesize(max_buffer_size); } else { document.getElementById('estimated_ram_use').innerHTML += ' Max: Unlimited';