painel / static /a-operation.html
Atualli's picture
Upload 85 files
490b2ec
raw
history blame
56 kB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<title>ATUALLI MOSAICO WEB</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="a-operation.css" />
</head>
<body onload="iniciaPagina();">
<!-- <title>Hello</title> -->
<!--Add buttons to initiate auth sequence and sign out
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
-->
<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = '346985849712-4diehepugvj39n4e3ednr25qieekkmen.apps.googleusercontent.com'; //'392646183283-5f9h5jgsll9hfcb46mlfplu57vtmhaa0.apps.googleusercontent.com';
var API_KEY = 'AIzaSyDGpegS1TV-7moMp5dKz-BEtt6bA864h_4';//'AIzaSyASaqrMk2sPLTnXsW8fjCcTvAsagc28DhA';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";
// var authorizeButton = document.getElementById('authorize_button');
//var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function storeLogin(name)
{
setCookieh("LOGIN",name,10);
}
function loadLogin() {
var name = getCookieh("LOGIN");
return name;
}
function setCookieh(name,value,days) {
window.localStorage.setItem(name, value);
}
function getCookieh(name) {
return window.localStorage.getItem(name);
}
function sleeph(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
function handleClientLoad() {
sleeph(100).then(() => {
document.getElementById("conteudo").style.display = "flex";
var name=loadLogin();
if((!name) || (name=="LOGIN"))
{
waitLogin();
}
else
{
waitLogout(name);
}
});
}
function SignOUT()
{
var name = gapi.auth2.getAuthInstance().currentUser.get();
if(name.getBasicProfile())
{
var logname = name.getBasicProfile().getName() + " ( " + name.getBasicProfile().getEmail() + " )";
logout(logname);
}
else
{
var logname = loadLogin();
logout(logname);
}
gapi.auth2.getAuthInstance().signOut();
gapi.auth2.getAuthInstance().disconnect();
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
}, function(error) {
waitLogin();
alert(error.message);
});
}
function initClientSigIn() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
gapi.auth2.getAuthInstance().signIn();
}, function(error) {
waitLogin();
alert(error.message);
});
}
function initClientSigOut() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
// updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
SignOUT();
waitLogin();
}, function(error) {
waitLogin();
alert(error.message);
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
//authorizeButton.style.display = 'none';
//signoutButton.style.display = 'block';
listMajors();
} else {
//authorizeButton.style.display = 'block';
//signoutButton.style.display = 'none';
waitLogin();
}
}
/**
* Sign in the user upon button click.
*/
var init=0;
function handleAuthClick(event) {
document.getElementById("myLogin").innerHTML = "AGUARDE...";
if(init==0)
{
gapi.load('client:auth2', initClientSigIn);
init=1;
}
else
gapi.auth2.getAuthInstance().signIn();
}
function waitLogin()
{
document.getElementById("conteudo").style.display = "none";
document.getElementById("listaclientes").style.display = "none";
// document.getElementById("ferramentas").style.display = "none";
document.getElementById("Fila").style.display = "none";
document.getElementById("operacao").style.display = "none";
document.getElementById("viewList").style.display = "none";
document.getElementById("portal").style.display = "flex";
document.getElementById("myLogin").innerHTML = "LOGIN";
document.getElementById("myLoginS").innerHTML = "LOGIN";
var obj = document.getElementById("myLoginS");
obj.setAttribute('href', "javascript:handleAuthClick(0);");
document.getElementById("Fila").setAttribute('onclick', "document.getElementById('ocoModal').style.display = 'none'; javascript:void(0);");
storeLogin("LOGIN");
}
function waitLogout(logname) {
document.getElementById("conteudo").style.display = "flex";
document.getElementById("listaclientes").style.display = "inline";
// document.getElementById("ferramentas").style.display = "inline";
document.getElementById("Fila").style.display = "flex";
document.getElementById("operacao").style.display = "flex";
document.getElementById("viewList").style.display = "inline";
document.getElementById("portal").style.display = "none";
document.getElementById("myLogin").innerHTML = "LOGOFF";
var obj = document.getElementById("myLoginS");
obj.setAttribute('href', "javascript:handleSignoutClick(0);");
document.getElementById("Fila").setAttribute('onclick', "getVideoOcorrencia();");
// var name = gapi.auth2.getAuthInstance().currentUser.get();
// var logname = name.getBasicProfile().getName() + " ( " + name.getBasicProfile().getEmail() + " )";
//login(logname);
document.getElementById("myLogin").innerHTML = logname; // Qt.Au = email , Qt.Bd= fullname, Qt.zU=lastname, Qt.zW=firstname.
var clip=logname.indexOf("(");
document.getElementById("myLoginS").innerHTML = logname.substring(0,clip);
storeLogin(logname);
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
var x;
var r = confirm("Deseja finalizar a sessao ?");
if (r == true) {
document.getElementById("myLogin").innerHTML = "AGUARDE...";
gapi.load('client:auth2', initClientSigOut);
init=1;
}
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* @param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
//var pre = document.getElementById('content');
// var textContent = document.createTextNode(message + '\n');
document.body.innerHTML = message.trim();
//pre.appendChild(message);
}
/**
* Print the names and majors of students in a sample spreadsheet:
* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
*/
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1edERX6z500r_PzovDi0zuRxU_wKrBGxZlTAPDWKZKEY', // '1PIAQ9qDorLJ99SjXmtx_OsT_aSI2_oumHw4ukgqwQos',
range: 'PESSOAS!A1:N23',
}).then(function(response) {
var name = gapi.auth2.getAuthInstance().currentUser.get();
var logname = name.getBasicProfile().getName() + " ( " + name.getBasicProfile().getEmail() + " )";
waitLogout(logname);
}, function(response) {
// appendPre('Error: ' + response.result.error.message);
// nao tem acesso desconecta
waitLogin();
gapi.auth2.getAuthInstance().signOut();
gapi.auth2.getAuthInstance().disconnect();
alert("ACESSO NEGADO!")
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
<div class="tudo">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="javascript:setMosaico();" id="mosaico">Mosaico1</a>
<!--a href="javascript:popupwindow('https://datastudio.google.com/reporting/9aefeac4-1d0d-47c4-b5cf-66f49d41c4f2/page/p_2yjwggbisc', 'RESUMO', screen.width/1.5, screen.height/1.5);" id="dash">Dashboard</a-->
<a href="javascript:setDash();" id="dash">Operacao</a>
<!--a href="javascript:window.open('https://datastudio.google.com/reporting/9aefeac4-1d0d-47c4-b5cf-66f49d41c4f2/page/p_2yjwggbisc', '_blank').focus();" id="dash">Operacao</a-->
<a href="javascript:popupwindow('/visualizacao','VISUALIZACAO', screen.width/1, screen.height/1);"> Visualizacao</a>
<!--a href="javascript:popupwindow('/programacao?id=1','PROGRAMACAO', screen.width/2, screen.height/2);"> Programacao</a-->
<!--a href="javascript:setCercaVirtual()" id="conf">Cerca Virtual</a-->
<!--a href="javascript:popupwindow('https://www.appsheet.com/start/8ec6ba07-1f60-4525-87a4-bd3208dfb0b7', 'CONFIGURACAO', screen.width/1.5, screen.height/1.5);" id="conf">Configuracao</a-->
<a href="javascript:setConfig()" id="conf">Configuracao</a>
<a href="javascript:setConfigCheckList()" id="conf">Check-List</a>
<a href="javascript:setTelegram()" id="conf">Telegram</a>
<a href="javascript:setSimulador()" id="conf">Simulador</a>
<a href="" id="conf">Bloqueios</a>
<!--a href="javascript:popupwindow('http://painel.atualli.com/recogimg', 'SIMULADOR', screen.width/1.5, screen.height/1.5);" id="conf">Simulador</a-->
<a href="javascript:setResetMosaico();" id="reset">Reset Mosaico</a>
</div>
<div class="topnav" id="myTopnav">
<span style="background-color: #000000;color: blue;float:left;font-size:40px;cursor:pointer" onclick="openNav()">&#9776; </span>
<img title = "logo" src="getresource?r=alogo.png" align="left">
<!--a href="#news" onclick="javascript:void(0);" id="Fila">Fila</a-->
<div class="buttondiv">
<button class="buttonfila" id="Fila">Fila</button>
</div>
<div class="dropdown" id="listaclientes">
<button class="dropbtn" id="clientelabel">
<?CLIENTE?>
</button>
<div class="dropdown-content">
<?LISTA?>
</div>
</div>
<!--a href="javascript:void(0);" id="clientelabel">(MULTILASER-MANAUS-DVR-1)</a-->
<!--div class="dropdown" id="ferramentas">
<button class="dropbtn">
Ferramentas
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="javascript:resetMosaico(0);" id="reset">RESET MOSAICO</a>
<a href="javascript:popupwindow('https://datastudio.google.com/reporting/9aefeac4-1d0d-47c4-b5cf-66f49d41c4f2', 'RESUMO', screen.width/1.5, screen.height/1.5);" id="dash">Dashboard</a>
<a href="javascript:popupwindow('/visualizacao','VISUALIZACAO', screen.width/1, screen.height/1);"> Visualizacao</a>
<a href="javascript:popupwindow('/programacao?id=1','PROGRAMACAO', screen.width/2, screen.height/2);"> Programacao</a>
<a href="javascript:popupwindow('https://www.appsheet.com/start/8ec6ba07-1f60-4525-87a4-bd3208dfb0b7', 'CONFIGURACAO', screen.width/1.5, screen.height/1.5);" id="conf">Configuracao</a>
<a href="javascript:popupwindow('http://painel.atualli.com/recogimg', 'SIMULADOR', screen.width/1.5, screen.height/1.5);" id="conf">Simulador</a>
</div>
</div-->
<!--a href="javascript:handleAuthClick(0);" id="myLogin"></a-->
<!--div class="dropdown" id="loginlist">
<button class="dropbtn" id="myLogin">
LOGIN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="javascript:selecionaOperador('LOGOFF');">LOGIN</a>
<a href="javascript:selecionaOperador('PAUSAR');">PAUSAR</a>
<a href="javascript:selecionaOperador('LOGIN');">LOGOFF</a>
</div>
</div-->
<!--a href="javascript:setoperacao(0);" id="operacao">AGUARDE...</a-->
<div class="buttondiv">
<button onclick="javascript:setoperacao(0);" class="buttonwork" id="operacao">>AGUARDE...</button>
</div>
<!--a href="javascript:void(0);" class="icon" onclick="myFunctionNav()">
<i class="fa fa-bars"></i>
</a-->
<div class="dropdown" id="viewList">
<button class="dropbtn">
VIEW
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="javascript:changeGrade('column7x');">7x</a>
<a href="javascript:changeGrade('column6x');">6x</a>
<a href="javascript:changeGrade('column5x');">5x</a>
<a href="javascript:changeGrade('column');">4x</a>
<a href="javascript:changeGrade('column3x');">3x</a>
<a href="javascript:changeGrade('Auto');">Auto</a>
</div>
</div>
<img title = "avatar" id="myavatar" style="width:3%" src="getresource?r=anonymus.jpg" align="left">
<a href="" style="display:none" id="myLogin"></a>
<a href="javascript:handleAuthClick(0);" id="myLoginS"></a>
<a href="javascript:void(0);" class="icon" onclick="NavResponsive()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="rowblock" id="portal">
<tr></tr>
</div>
<div style="display:none" id="listocorrencias">
<tr>
<iframe id="iframelistocorrencias" src="" frameborder="0" style="position:absolute; top:7%; left:0; width:100%; height:100%; border:0" allowfullscreen></iframe>
</tr>
</div>
<div style="display:none" id="configuracao">
<tr>
<iframe id="iframeconfiguracao" src="" frameborder="0" style="position:absolute; top:7%; left:0; width:80%; height:100%; border:0" allowfullscreen></iframe>
</tr>
</div>
<div style="display:none" id="configuracaochecklist">
<tr>
<iframe id="iframeconfiguracaochecklist" src="" frameborder="0" style="position:absolute; top:7%; left:0; width:100%; height:100%; border:0" allowfullscreen></iframe>
</tr>
</div>
<div style="display:none" id="cercavirtual">
<tr>
<iframe id="iframecercavirtual" src="" frameborder="0" style="position:absolute; top:7%; left:80%; width:20%; height:100%; border:0" allowfullscreen></iframe>
</tr>
</div>
<div style="display:none" id="simulador">
<tr>
<iframe id="iframesimulador" src="" frameborder="0" style="position:absolute; top:7%; left:0; width:100%; height:100%; border:0" allowfullscreen></iframe>
</tr>
</div>
<div class="row" id="conteudo">
<tr>
<div id="ocoModal" class="modal">
<form class="modal-content animate" id="formOcorrencia" action="javascript:gravaOcorrencia()" method="get">
<div class="imgcontainer">
<div style="width:100%">
<p><b>TRATAMENTO DE OCORRENCIA</b></p> <span onclick="document.getElementById('ocoModal').style.display = 'none'" class="close" title="Close Modal">&times;</span>
</div>
<div class="imgchild">
<p><b>Gravacao</b></p>
<video id="videoocorrencia" preload="metadata" autoplay loop muted playsinline width=100% height=77% controls src="getresource?r=atualli.png&" type="video/mp4"> </video>
</div>
<div class="imgchild">
<p><b>Ao Vivo</b></p>
<img src="" id="aovivo" class="refrx" alt="" style="width:100%;display:none;">
<canvas title="Ao vivo" id="cvcx" alt="" style="width:100%"></canvas>
</div>
</div>
<div class="container" style="background-color:#f1f1f1">
<label for="rot"><b>.</b></label></br>
<label id="IdOcoView" for="rot"><b>ID: </b></label></br>
<label id="IdCliente" for="rot"><b>Cliente: </b></label></br>
<label id="Operador" for="rot"><b>Operador: </b></label></br>
<label id="DataOcorrencia" for="rot"><b>Data: </b></label></br>
<label id="NomeRoteiro" for="rot"><b>Roteiro: </b></label></br>
<label id="Prioridade" for="rot"><b>Prioridade: </b></label></br>
<!--label id="videoOco" for="rot"><b>Video: </b></label></br-->
</div>
<div class="container">
<label id="pergunta1" for="uname"><b>Procedimento</b></label>
<input type="text" id="procedimento" placeholder="Texto livre" name="procedimento" readonly style="background-color:#f1f1f1">
<label id="pergunta2" for="psw"><b>Motivo</b></label>
<input type="text" id="template" placeholder="Texto livre" name="template" required onkeydown="return (event.keyCode!=13);">
<!--textarea placeholder="Texto livre" rows="5" cols="10" id="template" style = "font-size: 12pt; width:100%; margin:5px 0;padding:3px" ></textarea-->
<label id="pergunta3" for="psw"><b>Audio</b></label>
<input type="file" id="audio" name="audio" accept="audio/*" multiple>
<button type="button" id="loadLastAudio" onclick="javascript:getUltimoAudio()">Carrega Ultimos Audios</button>
<select id="listaAudios" class="select_audio" style="background-color:#f1f1f1" name="formal" onchange="javascript:selAudio(this)"></select>
</br></br>
<a href="" id="lastaudio"></a>
<input type="hidden" name="cmd" id="GravaOcorrencia" value="">
<input type="hidden" name="idOco" id="idOco" value="">
<input type="hidden" name="idCamera" id="idCamera" value="">
<input type="hidden" name="nomeOperador" id="nomeOperador" value="">
<input type="hidden" name="idChat" id="idChat" value="">
<input type="hidden" name="cliente" id="cliente" value="">
<input type="hidden" name="roteiro" id="roteiro" value="">
<button type="submit" style="display:none" id="gravar" class="button">Grava</button>
<button type="button" style="display:none" id="descartar" onclick="javascript:descartaOcorrencia(0)" class="cancelbtn">Descartar</button>
<button type="button" style="display:none" id="desbloqueio" onclick="" class="cancelbtn">Desbloqueio</button>
<select class="select" id="listaContatos" style="background-color:#f1f1f1" name="formal" onchange="javascript:handleSelect(this)"></select>
<script type="text/javascript">
function handleSelect(elm)
{
if(elm.value.length>1)
window.location = elm.value;
}
</script>
</div>
</form>
</div>
<?BODY?>
</tr>
</div>
</div>
<script async">
// setInterval("gogo();", 1500);
var to = 1; // 2; //3;
var first = 0;
var idx = 0;
var tamFila = 0;
var myFila = 0;
var onlyView = 0;
// Get the modal
//var modalOcorrencia = document.getElementById('ocoModal');
// When the user clicks anywhere outside of the modal, close it
//window.onclick = function (event) {
// if (event.target == modalOcorrencia) {
// modalOcorrencia.style.display = "none";
// }
//}
function NavResponsive() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function setTelegram() {
popupwindow('https://web.telegram.org/z','TELEGRAM', screen.width/4, screen.height)
closeNav();
}
function resetAllView() {
document.getElementById("configuracao").style.display = "none";
document.getElementById("configuracaochecklist").style.display = "none";
document.getElementById("conteudo").style.display = "none";
document.getElementById("listocorrencias").style.display = "none";
document.getElementById("simulador").style.display = "none";
document.getElementById("cercavirtual").style.display = "none";
}
function setCercaVirtual()
{
// resetAllView();
var objAovivo = document.getElementById("iframecercavirtual");
var osrc= objAovivo.getAttribute('src');
if ( osrc=="")
{
objAovivo.setAttribute('src', "/programacao?id=1");
}
document.getElementById("cercavirtual").style.display = "flex";
closeNav();
}
function setDash() {
/* resetAllView();
var objAovivo = document.getElementById("iframelistocorrencias");
var osrc= objAovivo.getAttribute('src');
if ( osrc=="")
{
objAovivo.setAttribute('src', "https://datastudio.google.com/embed/reporting/9aefeac4-1d0d-47c4-b5cf-66f49d41c4f2/page/p_2yjwggbisc");
}
document.getElementById("listocorrencias").style.display = "flex"; */
popupwindow('https://datastudio.google.com/reporting/9aefeac4-1d0d-47c4-b5cf-66f49d41c4f2/page/p_2yjwggbisc', 'RESUMO', screen.width/1, screen.height/1);
closeNav();
}
function setMosaico() {
resetAllView();
document.getElementById("conteudo").style.display = "flex";
closeNav();
}
function setResetMosaico()
{
setMosaico();
resetMosaico(0);
}
function setSimulador()
{
resetAllView();
var objAovivo = document.getElementById("iframesimulador");
var osrc= objAovivo.getAttribute('src');
if ( osrc=="")
{
objAovivo.setAttribute('src', "http://painel.atualli.com/recogimg");
}
document.getElementById("simulador").style.display = "flex";
closeNav();
}
function setConfig() {
resetAllView();
var objAovivo = document.getElementById("iframeconfiguracao");
var osrc= objAovivo.getAttribute('src');
if ( osrc=="")
{
// objAovivo.setAttribute('src', "https://www.appsheet.com/start/8ec6ba07-1f60-4525-87a4-bd3208dfb0b7#view=PROGRAMACAO");
objAovivo.setAttribute('src', "https://www.appsheet.com/start/99e79f6b-62fe-44c8-bab4-b4b9de10cd7d#view=PROGRAMACAO");
}
document.getElementById("configuracao").style.display = "flex";
setCercaVirtual();
closeNav();
}
function setConfigCheckList() {
resetAllView();
var objAovivo = document.getElementById("iframeconfiguracaochecklist");
var osrc= objAovivo.getAttribute('src');
if ( osrc=="")
{
// objAovivo.setAttribute('src', "https://www.appsheet.com/start/8ec6ba07-1f60-4525-87a4-bd3208dfb0b7#view=PROGRAMACAO");
objAovivo.setAttribute('src', "https://www.appsheet.com/start/54218ac3-e0db-414a-b3e5-1fb46540b5c4#view=PROGRAMACAO_CHECKLIST");
}
document.getElementById("configuracaochecklist").style.display = "flex";
closeNav();
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
var atualColumn="column";
function changeGrade(novo)
{
var lista = document.getElementsByClassName(atualColumn);
var len=lista.length;
var newClass=novo;
if(novo=="Auto")
{ newClass="column3x";
if (len>=8) newClass="column";
if (len>=16) newClass="column5x";
if (len>=24) newClass="column6x";
if (len>=31) newClass="column7x";
}
for (var i = 0; i < len; i ++)
{
lista[0].className = newClass;
}
atualColumn=newClass;
let cliente=document.getElementById("clientelabel").innerHTML;
cliente=cliente.trim();
setCookie("GRADE-"+cliente,novo,10);
}
function drawOperador(name) {
document.getElementById("myLogin").innerHTML = name;
}
function selecionaOperador(name) {
var atual= getCookie("LOGIN");
if (name!=atual)
{
if((name.length>0) && (name!="LOGOFF")&& (name!="LOGIN"))
login(name);
if(atual.length>0)
logout(atual);
}
if(!name) name="LOGIN";
setCookie("LOGIN",name,10);
drawOperador(name);
}
function setCookie(name,value,days) {
/* var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/"; */
window.localStorage.setItem(name,value);
}
function getCookie(name) {
/* var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null; */
return window.localStorage.getItem(name);
}
function eraseCookie(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
function resetFormOcorrencia()
{
var obj = document.getElementById("videoocorrencia");
obj.setAttribute('src', "");
var objproc = document.getElementById("procedimento");
objproc.setAttribute('value', "");
var objtmp = document.getElementById("template");
objtmp.setAttribute('value', "");
// document.getElementById("videoOco").innerHTML = "<b> Video: Aguarde...</b>";
document.getElementById("IdCliente").innerHTML = "<b> Cliente: Aguarde...</b>";
document.getElementById("IdOcoView").innerHTML = "<b> ID: Aguarde...</b>";
document.getElementById("NomeRoteiro").innerHTML = "<b> Roteiro: Aguarde...</b>";
document.getElementById("DataOcorrencia").innerHTML = "<b> Data: Aguarde... </b>";
document.getElementById("Operador").innerHTML = "<b> Operador: Aguarde... </b>";
document.getElementById("Prioridade").innerHTML = "<b> Prioridade: Aguarde...</b>";
var objidOco = document.getElementById("idOco");
objidOco.setAttribute('value', "");
var objnOp = document.getElementById("nomeOperador");
objnOp.setAttribute('value', "");
var objnidChat = document.getElementById("idChat");
objnidChat.setAttribute('value', "");
document.getElementById("desbloqueio").style.display = 'none'
document.getElementById("gravar").style.display = 'none'
document.getElementById("descartar").style.display = 'none'
document.getElementById("gravar").innerHTML = "Gravar";
document.getElementById("gravar").disabled = false;
document.getElementById("descartar").innerHTML = "Descartar";
document.getElementById("descartar").disabled = false;
var objAovivo = document.getElementById("aovivo");
objAovivo.setAttribute('src', '');
objAovivo.setAttribute('class', 'refrx');
document.getElementById("audio").value = "";
document.getElementById("lastaudio").innerHTML = "";
document.getElementById("listaAudios").innerHTML = "";
}
function popupwindow(url, title, w, h) {
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
function openurl(url)
{
var urls = url;
if (onlyView==1)
urls = urls + "?view=true";
window.location.replace(urls);
// return window.open(urls,'_self');
}
function execDesbloqueio(url)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var desbloqueio = document.getElementById("desbloqueio");
desbloqueio.innerHTML = this.responseText;
}
};
var desbloqueio = document.getElementById("desbloqueio").innerHTML = "AGUARDE...";
xhttp.open("GET", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
function getVideoOcorrencia() {
if (myFila <= 0) return;
resetFormOcorrencia();
// Usage!
sleep(100).then(() => {
// Do something after the sleep!
if (myFila <= 0) return;
// document.getElementById('ocoModal').style.display = 'block';
// resetFormOcorrencia();
/* var audio = new Audio('http://atualli.ddns.net/getresource?r=alarm.ogg');
audio.addEventListener('canplaythrough', function () {
audio.play();
}); */
document.getElementById("desbloqueio").innerHTML="Desbloqueio";
document.getElementById("gravar").innerHTML = "Grava";
//document.getElementById('ocoModal').style.display = 'block'
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if(this.responseText.indexOf("VAZIO") !== -1) return;
var json = JSON.parse(this.responseText);
if (json.status == "Manual") {
document.getElementById('ocoModal').style.display = 'block';
resetFormOcorrencia();
//document.getElementById('ocoModal').style.display = 'block';
document.getElementById("descartar").style.display = 'block'
document.getElementById("gravar").style.display = 'block'
document.getElementById("desbloqueio").style.display = 'none'
var obj = document.getElementById("videoocorrencia");
obj.setAttribute('src', json.video);
//document.getElementById("procedimento").innerHTML = "<b>" + json.procedimento + "</b>";
document.getElementById("template").innerHTML = json.templat ;
var objproc = document.getElementById("procedimento");
objproc.setAttribute('value', json.procedimento);
var objtmp = document.getElementById("template");
objtmp.setAttribute('value', json.templat);
var objidChat = document.getElementById("idChat");
objidChat.setAttribute('value', json.idchat);
var objCliente = document.getElementById("cliente");
objCliente.setAttribute('value', json.cliente);
var objRoteiro = document.getElementById("roteiro");
objRoteiro.setAttribute('value', json.roteiro);
var objAovivo = document.getElementById("aovivo");
objAovivo.setAttribute('src', json.urlcamera);
// document.getElementById("videoOco").innerHTML = "<b> Video: " + json.video + "</b>";
document.getElementById("IdCliente").innerHTML = "<b> Cliente: " + json.cliente + "</b>";
document.getElementById("IdOcoView").innerHTML = "<b> ID: " + json.id + "</b>";
document.getElementById("NomeRoteiro").innerHTML = "<b> Roteiro: " + json.roteiro + "</b>";
document.getElementById("DataOcorrencia").innerHTML = "<b> Data: " + json.data + "</b>";
document.getElementById("Prioridade").innerHTML = "<b> Prioridade: " + json.prioridade + "</b>";
if (json.desbloqueio) {
var desbloqueio = document.getElementById("desbloqueio");
desbloqueio.style.display = 'block'
var url = json.desbloqueio;
desbloqueio.setAttribute('onclick', "execDesbloqueio('" + url + "')");
}
var lista = json.contatos.split(/,| |-/);
var options = "<option value=\"\">REALIZAR CONTATO</option>";
for (var i = 0; i < lista.length; i += 2) {
nome = lista[i];
telefone = lista[i + 1];
options += "<option value=\"tel:80" + telefone + "\">Ligar para " + nome + " " + telefone + "</option>";
}
document.getElementById("listaContatos").innerHTML = options;
document.getElementById("Operador").innerHTML = "<b> Operador: " + document.getElementById("myLogin").innerHTML + "</b>";
var objidOco = document.getElementById("idOco");
objidOco.setAttribute('value', json.id);
var objnOp = document.getElementById("nomeOperador");
objnOp.setAttribute('value', document.getElementById("myLogin").innerHTML);
//document.getElementById('ocoModal').style.display = 'block';
}
else {
document.getElementById('ocoModal').style.display = 'none';
}
}
};
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=Ocorrencia&operador=" + document.getElementById("myLogin").innerHTML, true);
xhttp.open("GET", "getdatalocal?comando=Ocorrencia&operador=" + document.getElementById("myLogin").innerHTML, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
});
}
const fileInput = document.getElementById('audio');
fileInput.onchange = () => {
const selectedFile = fileInput.files[0];
if ((selectedFile) && (selectedFile.name.length > 0))
{
var dt = new Date();
var path = "ftp://192.168.0.10/" + dt.getFullYear() + "/" + String(dt.getMonth() + 1).padStart(2, '0') + "/" + String(dt.getDate()).padStart(2, '0') + "/";
var saudio = path+selectedFile.name;
var saudio = saudio.replace("[1]", "");
var objAudio = document.getElementById("lastaudio");
objAudio.setAttribute('href', saudio);
document.getElementById("lastaudio").innerHTML = saudio;
}
else {
document.getElementById("lastaudio").innerHTML = "";
}
}
function getUltimoAudio()
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
if (this.readyState == 4 && this.status == 200)
{
var json = JSON.parse(this.responseText);
var file = json.voips[0].file;
var sfile = file.replace("/var/spool/asterisk/monitor", "ftp://192.168.0.10");
var objAudio = document.getElementById("lastaudio");
//objAudio.setAttribute('href', "javascript:testAudio(\"" + sfile + "\")");
objAudio.setAttribute('href', sfile);
document.getElementById("lastaudio").innerHTML = sfile;
document.getElementById("loadLastAudio").innerHTML = "Carrega Ultimos Audios";
var options = "<option value=\"\">Lista Ultimos Audios</option>";
for (var i = 0; i < json.voips.length; i ++) {
var nome = json.voips[i].file;
var snome = nome.replace("/var/spool/asterisk/monitor", "ftp://192.168.0.10");
options += "<option value=\"" + snome + "\">" + snome + "</option>";
}
document.getElementById("listaAudios").innerHTML = options;
}
}
var videoobj = document.getElementById("videoocorrencia");
var video = videoobj.getAttribute('src');
var dvideo = video; // video.replace("http://atualli.ddns.net", "http://localhost:8088"); // video; // apenas para debug local
document.getElementById("loadLastAudio").innerHTML = "AGUARDE...";
xhttp.open("GET", dvideo + "&ramal=2002&phone=0", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function testAudio(elm)
{
window.open(elm.value);
}
function selAudio(elm) {
if (elm.value.length > 1) {
var objAudio = document.getElementById("lastaudio");
objAudio.setAttribute('href', elm.value);
document.getElementById("lastaudio").innerHTML = elm.value;
}
}
function sendMsgFinal(status)
{
var xhttp = new XMLHttpRequest();
var videoobj = document.getElementById("videoocorrencia");
var video = videoobj.getAttribute('src');
var objnOp = document.getElementById("nomeOperador");
var operador = objnOp.getAttribute('value');
var idResp2 = document.getElementById("template").value;
var idChat = document.getElementById("idChat").value;
var cliente = document.getElementById("cliente").value;
var roteiro = document.getElementById("roteiro").value;
var idOco = document.getElementById("idOco").value;
// var audio = document.getElementById("audio").value;
//var dt = new Date();
//var path = "ftp://192.168.0.10/" + dt.getFullYear() + "/" + String (dt.getMonth() + 1).padStart(2, '0') + "/" + String (dt.getDate()).padStart(2, '0') + "/";
// var saudio = audio.replace("fakepath", "SIP\\Recordings");
//var saudio = audio.replace("C:\\fakepath\\", path);
//var saudio = saudio.replace("[1]", "");
var saudio = document.getElementById("lastaudio").innerHTML;
if (saudio.length > 0)
idResp2 = idResp2 + " (AUDIO ANEXADO)";
var dvideo = video.replace("http://atualli.ddns.net", "http://localhost:8088"); // video; // apenas para debug local
// var url = dvideo + "&idchat=" + idChat + "&status=" + status + "&idoco=" + idOco + "&motivo=" + cliente + " - " + roteiro + " - " + idResp2 + "&audio=" + saudio;
var url = dvideo + "&idchat=" + idChat + "&status=" + status + "&idoco=" + idOco + "&cliente=" + cliente + "&roteiro=" + roteiro + "&motivo=" + idResp2 + "&audio=" + saudio;
xhttp.open("GET", url, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function gravaOcorrencia()
{
var template = document.getElementById("template").value;
if (template.length > 0) {
var r = confirm("Deseja realmente salvar a ocorrencia ?");
if (r == true) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
sendMsgFinal("grava");
resetFormOcorrencia();
document.getElementById('ocoModal').style.display = 'none';
alert("OCORRENCIA GRAVADA COM SUCESSO !");
document.getElementById("gravar").innerHTML = "Gravar";
document.getElementById("gravar").disabled = false;
}
};
document.getElementById("gravar").innerHTML = "Aguarde..";
document.getElementById("gravar").disabled = true;
var objidOco = document.getElementById("idOco");
var idOco = objidOco.getAttribute('value');
var objnOp = document.getElementById("nomeOperador");
var operador = objnOp.getAttribute('value');
var idResp1 = document.getElementById("procedimento").value;
var idResp2 = document.getElementById("template").value;
var idChat = document.getElementById("idChat").value;
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=GravaOcorrencia&idOco=" + idOco + "&resposta1=" + idResp1 + "&resposta2=" + idResp2 + "&operador=" + operador, true);
xhttp.open("GET", "getdatalocal?comando=GravaOcorrencia&idOco=" + idOco + "&resposta1=" + idResp1 + "&resposta2=" + idResp2 + "&operador=" + operador, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xhttp.timeout = 8000; // Set timeout to 4 seconds (4000 milliseconds)
// xhttp.ontimeout = function () { alert("Timed out!!!"); }
xhttp.send("");
}
}
else
alert("Preencha o campo motivo e justifique a ocorrencia !");
}
function resetMosaico() {
var r = confirm("Deseja realmente reiniciar o Mosaico ?. Use apenas em quando as imagens estiverem congeladas a mais de 1 hora");
if (r == true) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert("MOSAICO REINICIADO COM SUCESSO !");
document.getElementById("reset").innerHTML = "RESET";
document.getElementById("reset").disabled = false;
}
};
document.getElementById("reset").innerHTML = "AGUARDE..";
document.getElementById("reset").disabled = true;
var login = document.getElementById("myLogin").innerHTML;
var cliente = document.getElementById("clientelabel").innerHTML;
var texto = "AT" + cliente + "_reiniciado_pelo_operador_" + login;
xhttp.open("GET", "<?URLBASE?>/resetmosaico?msg=" + texto, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
}
function descartaOcorrencia() {
var template = document.getElementById("template").value;
if (template.length > 0) {
var r = confirm("Deseja realmente descartar ocorrencia ?");
if (r == true) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
sendMsgFinal("descarta");
resetFormOcorrencia();
document.getElementById('ocoModal').style.display = 'none';
alert("OCORRENCIA DESCARTADA COM SUCESSO !");
document.getElementById("descartar").innerHTML = "Descartar";
document.getElementById("descartar").disabled = false;
}
};
document.getElementById("descartar").innerHTML = "Aguarde..";
document.getElementById("descartar").disabled = true;
var objidOco = document.getElementById("idOco");
var idOco = objidOco.getAttribute('value');
var objnOp = document.getElementById("nomeOperador");
var operador = objnOp.getAttribute('value');
var idResp1 = document.getElementById("procedimento").value;
var idResp2 = document.getElementById("template").value;
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=GravaOcorrencia&descarta=true&idOco=" + idOco + "&resposta1=" + idResp1 + "&resposta2=" + idResp2 + "&operador=" + operador, true);
xhttp.open("GET", "getdatalocal?comando=GravaOcorrencia&descarta=true&idOco=" + idOco + "&resposta1=" + idResp1 + "&resposta2=" + idResp2 + "&operador=" + operador, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
}
else
alert("Preencha o campo motivo e justifique o Descarte!");
}
function myFunctionNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var solicitaLog = 0;
function login(login) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
solicitaLog = 0;
}
};
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=Login&login="+login+"&ip=0", true);
xhttp.open("GET", "getdatalocal?comando=Login&login="+login+"&ip=0", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function logout(login) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
solicitaLog = 0;
}
};
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=Logout&login=" + login + "&ip=0", true);
xhttp.open("GET", "getdatalocal?comando=Logout&login=" + login + "&ip=0", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function setoperacao() {
var status = document.getElementById("operacao").innerHTML;
var usuario = document.getElementById("myLogin").innerHTML;
if ((usuario != "LOGIN") && (usuario != "")) {
if (status == "QUERO TRABALHAR") {
solicitaLog = 1;
document.getElementById("operacao").innerHTML = "AGUARDE...";
login(usuario);
}
if (status == "TRABALHANDO") {
solicitaLog = 1;
document.getElementById("operacao").innerHTML = "AGUARDE...";
logout(usuario);
}
}
}
function getFila()
{
if (onlyView==1) {
document.getElementById("operacao").innerHTML = "VISUALIZANDO";
tamFila = 0;
myFila = 0;
return;
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.responseText);
document.getElementById("Fila").innerHTML = "FILA OCORRENCIAS " + "(" + json.myFila +"/"+json.numFila + ") ";
if (solicitaLog == 0) {
document.getElementById("operacao").innerHTML = json.status;
}
var status = document.getElementById("operacao").innerHTML;
if (status == "TRABALHANDO") {
if (json.numFila != "0") {
tamFila = parseInt(json.numFila);
myFila = parseInt(json.myFila);
if (document.getElementById('ocoModal').style.display != 'block') {
getVideoOcorrencia();
}
}
else {
tamFila = 0;
myFila = 0;
}
}
else {
tamFila = 0;
myFila = 0;
}
}
};
var usuario = document.getElementById("myLogin").innerHTML;
// xhttp.open("GET", "https://script.google.com/macros/s/AKfycbziTdRkV1r6WFdUMoaBAugEkywspV6TqhPE8fTQnl2FOZ6Qn2E/exec?cmd=F2ila&login="+usuario, true);
xhttp.open("GET", "getdatalocal?comando=F2ila&login="+usuario, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("");
}
function gogo2()
{
getFila()
setTimeout(gogo2, to * 1000);
}
function refreshimg(img)
{
}
function imgRedirect(img)
{
}
function errorloadimg(img) {
var d = new Date(),
dummy = d.getTime();
var newurl = 'getresource?r=atualli.png&';
var obj = img,
s_rc = obj.getAttribute('src'),
pure_src = s_rc.substring(s_rc.indexOf('c='), s_rc.indexOf('c=') + 4);
obj.setAttribute('src',newurl+pure_src + '&' + dummy);
//obj.nextSibling.innerHTML = obj.getAttribute('src');
}
var resx = 1000;
var resy = 1000;
function binaryToDataURL(inputArray){
let TYPED_ARRAY = new Uint8Array(inputArray);
const STRING_CHAR = String.fromCharCode.apply(null, TYPED_ARRAY);
let base64String = btoa(STRING_CHAR);
var uri = 'data:image/jpeg;base64,' + base64String;
return uri;
}
var canvasx=480;
var canvasy=320;
var urlBase = '<?URL?>'
async function playframe(img,blob)
{
/* const ArrayBuffer = await blob.arrayBuffer();
const src = binaryToDataURL(ArrayBuffer);
img.src = src;
img.onload = function () {
var ids = this.id;
var cam = "cvc" + ids.substring(3, 5);
var c = document.getElementById(cam);
var ctx = c.getContext("2d");
var resx = 720; //this.width
var resy = 480; //this.height;
c.setAttribute('width', resx);
c.setAttribute('height', resy);
ctx.drawImage(this, 0, 0, resx, resy);
}; */
// const ArrayBuffer = await blob.arrayBuffer();
// let TYPED_ARRAY = new Uint8Array(ArrayBuffer);
var fileReader = new FileReader();
fileReader.onload = function(event) {
ArrayBuffer = event.target.result;
let TYPED_ARRAY = new Uint8Array(ArrayBuffer);
// let TYPED_ARRAY = new Uint16Array(ArrayBuffer);
var ids = img.id;
var cam = "cvc" + ids.substring(3, 5);
var c = document.getElementById(cam);
var ctx = c.getContext("2d");
var resx = canvasx;
var resy = canvasy;
c.setAttribute('width', resx);
c.setAttribute('height', resy);
const imageData = ctx.createImageData(resx, resy);
// Iterate through every pixel
let j=0;
/*
const m = new Uint16Array(3);
let p = new Uint16Array(3);
m[0] = 0xF800;
m[1] = 0x07E0;
m[2] = 0x001F;
for (let i = 0; i < imageData.data.length; i += 4) {
// Modify pixel data
const pixel = TYPED_ARRAY[j];
p[0] = (pixel & m[0]) >> 11;
p[1] = (pixel & m[1]) >> 5;
p[2] = (pixel & m[2]);
imageData.data[i + 0] = p[0]; // R value
imageData.data[i + 1] = p[1]; // G value
imageData.data[i + 2] = p[2]; // B value
imageData.data[i + 3] = 255; // A value
j++;
}
*/
for (let i = 0; i < imageData.data.length; i += 4) {
// Modify pixel data
imageData.data[i + 0] = TYPED_ARRAY[j + 2]; // R value
imageData.data[i + 1] = TYPED_ARRAY[j + 1]; // G value
imageData.data[i + 2] = TYPED_ARRAY[j + 0]; // B value
imageData.data[i + 3] = 255; // A value
j+=3;
}
ctx.putImageData(imageData, 0, 0);
}
fileReader.readAsArrayBuffer(blob);
}
async function playstream(img)
{
img.setAttribute("data-completed", 0);
var cam = img.id.substring(3, 5);
var newurl = urlBase + "c=" + cam + "&resx=" + canvasx + "&resy=" + canvasy ;
let wnewurl = newurl.replace("http","ws");
wnewurl = wnewurl.replace("getcamera","getstream");
// wnewurl = wnewurl.replace("getcamera","stream");
var ws = new WebSocket(wnewurl);
ws.onopen = function () {
console.log("Message to send");
img.setAttribute("data-completed", 0);
};
ws.onmessage = function (evt) {
playframe(img,evt.data);
};
ws.onclose = function () {
// websocket is closed.
console.log("Connection is closed...");
img.setAttribute("data-completed", -1);
};
}
async function preload(img)
{
var imp = function(img) {
var cam = img.id.substring(3, 5);
var newurl = urlBase + "c=" + cam;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
if (this.readyState == 4 && this.status == 200)
{
var json = this.response;
var reader = new FileReader();
reader.onloadend = function ()
{
if (reader.result.length > 0)
{
img.src = reader.result;
img.onload = function ()
{
var ids = this.id;
var cam = "cvc" + ids.substring(3, 5);
var c = document.getElementById(cam);
var ctx = c.getContext("2d");
c.setAttribute('width', canvasx);
c.setAttribute('height', canvasy);
ctx.drawImage(this, 0, 0, canvasx, canvasy);
}
}
}
reader.readAsDataURL(json);
}
};
xhttp.open("GET", newurl, true);
xhttp.responseType = 'blob';
xhttp.send(null);
}
imp(img);
}
async function playget(img)
{
var imp = function(img) {
img.src = img.src;
img.setAttribute("data-completed", -1);
img.onload = function () {
var ids = this.id;
var cam = "cvc" + ids.substring(3, 5);
var c = document.getElementById(cam);
var ctx = c.getContext("2d");
c.setAttribute('width', canvasx);
c.setAttribute('height', canvasy);
ctx.drawImage(this, 0, 0, canvasx, canvasy);
}
}
imp(img);
}
function gogo() {
var pix = document.getElementsByClassName('refr');
for (var i = 0; i < pix.length; i++) {
var img = pix[i];
if (!img.hasAttribute("data-completed") || img.getAttribute("data-completed")<0)
{
if(first==0)
{
playget(img);
}
if(first==1)
{
preload(img);
}
if(first>1)
{
playstream(img);
}
}
}
if(first<=1) {
setTimeout(gogo, 1);
} else {
setTimeout(gogo, 500);
}
first++;
}
function iniciaPagina()
{
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('view');
if (myParam)
onlyView = 1;
gogo2();
// document.getElementById("Fila").setAttribute('onclick', "document.getElementById('ocoModal').style.display = 'block'; getVideoOcorrencia();");
gogo();
let cliente=document.getElementById("clientelabel").innerHTML;
cliente=cliente.trim();
var novaGrade=getCookie("GRADE-"+cliente);
if(novaGrade)
changeGrade(novaGrade);
else
changeGrade("Auto");
setCookie("CLIENTE",cliente,10);
// selecionaOperador(getCookie("LOGIN"));
// document.getElementById("Fila").setAttribute('onclick', "getVideoOcorrencia();");
}
//Make the DIV element draggagle:
dragElement(document.getElementById("ocoModal"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
//e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
var elementId = e.srcElement.id;
if (elementId != "template") {
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
}
function elementDrag(e) {
e = e || window.event;
//e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>