Update ONVIF Scanner result layout

languages/en_CA.json

@@ -282,7 +282,7 @@
    "ONVIF Scanner": "ONVIF Scanner",
    "ONVIFEventsNotAvailable": "ONVIF Events not Available",
    "ONVIFnotCompliantProfileT": "Camera is not ONVIF Profile T Compliant",
-   "ONVIFErr400": "Found ONVIF port but authorization failed when retrieving the Stream URL. Check username and password used for scan.",
+   "ONVIFErr400": "Found ONVIF port but authorization failed when retrieving the Stream URL. Check username and password used for scan. Make sure your camera time and server time are synced.",
    "ONVIFErr405": "Method Not Allowed. Check username and password used for scan.",
    "ONVIFErr404": "Not Found. This may just be the web panel for a network device.",
    "Scan Settings": "Scan Settings",

web/libs/css/dash2.card.css

@@ -0,0 +1,48 @@
+.card {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, .125);
+    border-radius: .25rem;
+}
+.card {
+    border: 0;
+    border-radius: 0.1875rem;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    margin-bottom: 20px;
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+}
+.card-header:first-child {
+    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
+}
+.card-header {
+    padding: .75rem 1.25rem;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, .03);
+    border-bottom: 1px solid rgba(0, 0, 0, .125);
+}
+.card-footer:last-child {
+    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
+}
+.card-footer {
+    padding: .75rem 1.25rem;
+    background-color: rgba(0, 0, 0, .03);
+    border-top: 1px solid rgba(0, 0, 0, .125);
+}
+.card .card-body {
+    min-height: 190px;
+}
+.card-body {
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1.25rem;
+}

web/libs/css/dash2.onvifscanner.css

@@ -0,0 +1,15 @@
+#onvif_probe .preview-image {
+    width: 100%;
+    background-size: cover;
+    height: 100px;
+}
+#onvif_probe .card {
+    cursor: pointer;
+    color: #333;
+}
+#onvif_probe .card-body {
+    min-height: auto;
+}
+#onvif_probe .onvif_result {
+    padding-top:2rem;
+}

web/libs/js/dash2.onvifscanner.js

@@ -2,7 +2,7 @@ $(document).ready(function(e){
     //onvif probe
     var onvifScannerWindow = $('#onvif_probe')
     var scanForm = onvifScannerWindow.find('form');
-    var outputBlock = onvifScannerWindow.find('.output_data');
+    var outputBlock = onvifScannerWindow.find('.onvif_result');
     var checkTimeout
     var setAsLoading = function(appearance){
         if(appearance){
@@ -20,17 +20,22 @@ $(document).ready(function(e){
         setAsLoading(false)
         var info = options.error ? options.error : options.info ? $.ccio.init('jsontoblock',options.info) : ''
         var streamUrl = options.error ? '' : 'No Stream URL Found'
+        var launchWebPage = `target="_blank" href="http${options.port == 443 ? 's' : ''}://${options.ip}:${options.port}"`
         if(options.uri){
             streamUrl = options.uri
         }
-        $('#onvif_probe .output_data').append(`<tr onvif_row="${tempID}">
-            <td><img style="max-width:100px" src="${options.snapShot ? 'data:image/png;base64,' + options.snapShot : placeholder.getData(placeholder.plcimg({text: ' ', fsize: 25, bgcolor:'#1462a5'}))}"></td>
-            <td><a ${options.error ? `target="_blank" href="http${options.port == 443 ? 's' : ''}://${options.ip}:${options.port}"` : ''} class="btn btn-sm btn-primary ${options.error ? '' : 'copy'}">&nbsp;<i class="fa fa-${options.error ? 'link' : 'copy'}"></i>&nbsp;</a></td>
-            <td class="ip">${options.ip}</td>
-            <td class="port">${options.port}</td>
-            <td>${info}</td>
-            <td class="url">${streamUrl}</td>
-        </tr>`)
+        $('#onvif_probe .onvif_result')[options.error ? 'append' : 'prepend'](`
+            <div class="col-md-4" onvif_row="${tempID}">
+                <div style="display:block" ${options.error ? launchWebPage : ''} class="card bg-default ${options.error ? '' : 'copy'}">
+                    <div class="preview-image card-header" style="background-image:url(${options.snapShot ? 'data:image/png;base64,' + options.snapShot : placeholder.getData(placeholder.plcimg({text: ' ', fsize: 25, bgcolor:'#1f80f9'}))})"></div>
+                    <div class="card-body" ${options.error ? '' : 'style="min-height:190px"'}>
+                        <div>${info}</div>
+                        <div class="url">${streamUrl}</div>
+                    </div>
+                    <div class="card-footer">${options.ip}:${options.port}</div>
+                </div>
+            </div>
+        `)
     }
     scanForm.submit(function(e){
         e.preventDefault();
@@ -48,7 +53,7 @@ $(document).ready(function(e){
         });
         clearTimeout(checkTimeout)
         checkTimeout = setTimeout(function(){
-            if(outputBlock.find('tr').length === 0){
+            if(outputBlock.find('.card').length === 0){
                 setAsLoading(false)
                 outputBlock.append(`<td style="padding: 10px;" class="text-center _notfound text-white epic-text">${lang.sorryNothingWasFound}</td>`)
             }

web/pages/blocks/probe.ejs

@@ -30,6 +30,7 @@
   </div>
 </div>
 <!--onvif PROBE Window-->
+<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.onvifscanner.css">
 <div class="modal full dark fade" id="onvif_probe" role="dialog" aria-labelledby="onvif_probeLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <form class="modal-content">
@@ -71,7 +72,7 @@
           <div class="col-md-6">
               <div class="form-group-group blue" style="padding:0">
                   <h4 style="margin-bottom:0;padding: 15px 25px;"><%-lang['Found Devices']%></h4>
-                  <table class="output_data table table-striped" style="margin:0"></table>
+                  <div class="onvif_result"></div>
               </div>
           </div>
         </div>

web/pages/home.ejs

@@ -29,6 +29,7 @@
 <link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.righttoleft.css">
 <link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.sidemenu.css">
 <link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.darktheme.css">
+<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.card.css">
 <% customAutoLoad.LibsCss.forEach(function(lib){ %>
     <link rel="stylesheet" href="<%-window.libURL%>libs/css/<%-lib%>">
 <% }) %>