Update ONVIF Scanner result layout

fix-non-showing-inputs
Moe Alam 2020-10-29 18:35:21 -07:00
parent c21ec0d1b9
commit 915be87187
6 changed files with 82 additions and 12 deletions

View File

@ -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",

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>`)
}

View File

@ -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>

View File

@ -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%>">
<% }) %>