painel

Sleeping

App Files Files

painel / static /programacao.html

Atualli

Upload 85 files

490b2ec almost 3 years ago

raw

history blame

45.2 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>PROGRAMACAO</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">
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	font-family: Arial;
	}

	#logo {
	width: 100%;
	top: 10px;
	z-index: 1;
	}

	.foo {
	position:relative;
	display: inline-block;
	width: auto;
	left:100px;
	/* here text's center will be at 100px; */
	/* left:$tick-location px; */
	transform:translateX(-50%);
	}

	.title_print, .reporting_period {
	text-align: center;
	}

	.header {
	text-align: center;
	padding: 0.05%;
	background: #053067;
	color: white;
	}



	.row {
	display: none;
	flex-wrap: wrap;
	padding: 6.8vh 0;
	}

	.rowblock {
	display: none;
	flex-wrap: wrap;
	padding: 100% 0;
	background-image: url('getresource?r=accessdenied.png');
	height: 100%;
	}

	/* Create four equal columns that sits next to each other */

	.column {
	flex: 25%;
	max-width: 25%;
	padding: 0 2px;
	}

	.column img {
	margin-top: 2px;
	vertical-align: middle;
	}

	.column:active img {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: zoom-out;
	}


	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
	.column {
	flex: 50%;
	max-width: 50%;
	}
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	.column {
	flex: 100%;
	max-width: 100%;
	}
	}

	#popupbox {
	margin: 0;
	margin-left: 40%;
	margin-right: 40%;
	margin-top: 50px;
	padding-top: 10px;
	width: 20%;
	height: 150px;
	position: fixed;
	background: #FBFBF0;
	border: solid #000000 2px;
	z-index: 9;
	font-family: arial;
	visibility: hidden;
	}


	#ocorrencia {
	margin: 0;
	margin-left: 25%;
	margin-right: 25%;
	margin-top: 12%;
	padding-top: 10px;
	width: 50%;
	height: 50%;
	position: fixed;
	background: white;
	border: solid black 2px;
	z-index: 9;
	font-family: arial;
	visibility: hidden;
	}

	.topnav {
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	background-color: #2287E6;
	height:6.8%;
	text-align: center;
	}


	.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	text-align: center;
	}

	.active {
	background-color: #4CAF50;
	color: white;
	}

	textarea {
	overflow: hidden;
	}

	.topnav .icon {
	display: none;
	text-align: center;
	}

	.dropdown {
	float: left;
	overflow: hidden;
	}

	.dropdown .dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	}

	.dropdown-content {
	display: none;
	position: fixed;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	}

	.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: center;
	}

	.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555;
	color: white;
	}

	.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
	}

	.dropdown:hover .dropdown-content {
	display: block;
	}

	@media screen and (max-width: 600px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
	}

	.topnav a.icon {
	float: right;
	display: block;
	}
	}

	@media screen and (max-width: 600px) {
	.topnav.responsive {
	position: relative;
	}

	.topnav.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
	}

	.topnav.responsive a {
	float: none;
	display: block;
	text-align: center;
	}

	.topnav.responsive .dropdown {
	float: none;
	}

	.topnav.responsive .dropdown-content {
	position: relative;
	}

	.topnav.responsive .dropdown .dropbtn {
	display: block;
	width: 100%;
	text-align: center;
	}
	}
	/*
	novo popup
	*/

	/* Button used to open the contact form - fixed at the bottom of the page */
	.open-button {
	background-color: #555;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	position: fixed;
	bottom: 23px;
	right: 28px;
	width: 280px;
	}

	/* The popup form - hidden by default */
	.form-popup {
	display: none;
	position: fixed;
	bottom: 0;
	right: 15px;
	border: 3px solid #f1f1f1;
	z-index: 9;
	}

	/* Add styles to the form container */
	.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: white;
	}

	/* Full-width input fields */
	.form-container input[type=text], .form-container input[type=password] {
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background: #f1f1f1;
	}

	/* When the inputs get focus, do something */
	.form-container input[type=text]:focus, .form-container input[type=password]:focus {
	background-color: #ddd;
	outline: none;
	}

	/* Set a style for the submit/login button */
	.form-container .btn {
	background-color: #4CAF50;
	color: white;
	padding: 16px 20px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom: 10px;
	opacity: 0.8;
	}

	/* Add a red background color to the cancel button */
	.form-container .cancel {
	background-color: red;
	}

	/* Add some hover effects to buttons */
	.form-container .btn:hover, .open-button:hover {
	opacity: 1;
	}
	/* POPUP central */
	/* Full-width input fields */
	input[type=text], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
	}


	/* Set a style for all buttons */
	button {
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	text-align: center;
	}

	button:hover {
	opacity: 0.8;
	}

	/* Extra styles for the cancel button */
	.cancelbtn {
	width: 100%;
	padding: 10px 18px;
	background-color: #f44336;
	text-align: center;
	}

	/* Center the image and position the close button */
	.imgcontainer {
	text-align: center;
	margin: 24px 0 12px 0;
	position: relative;
	}

	img.avatar {
	width: 40%;
	border-radius: 50%;
	}

	.container {
	padding: 16px;
	}

	select {
	padding: 16px;
	width: 40%;
	}

	options {
	padding: 16px;
	width: 40%;
	}

	span.psw {
	float: right;
	padding-top: 16px;
	}

	/* The Modal (background) */
	.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	padding-top: 60px;
	}

	/* Modal Content/Box */
	.modal-content {
	background-color: #fefefe;
	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888;
	width: 60%; /* Could be more or less, depending on screen size */
	}

	/* The Close Button (x) */
	.close {
	position: absolute;
	right: 25px;
	top: 0;
	color: #000;
	font-size: 35px;
	font-weight: bold;
	}

	.close:hover,
	.close:focus {
	color: red;
	cursor: pointer;
	}

	/* Add Zoom Animation */
	.animate {
	-webkit-animation: animatezoom 0.6s;
	animation: animatezoom 0.6s
	}

	@-webkit-keyframes animatezoom {
	from {
	-webkit-transform: scale(0)
	}

	to {
	-webkit-transform: scale(1)
	}
	}

	@keyframes animatezoom {
	from {
	transform: scale(0)
	}

	to {
	transform: scale(1)
	}
	}

	/* Change styles for span and cancel button on extra small screens */
	@media screen and (max-width: 300px) {
	span.psw {
	display: block;
	float: none;
	}

	.cancelbtn {
	width: 100%;
	}
	}
	</style>
	</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 = '392646183283-5f9h5jgsll9hfcb46mlfplu57vtmhaa0.apps.googleusercontent.com';
	var API_KEY = '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) {
	/* var expires = "";
	if (days) {
	var date = new Date();
	date.setTime(date.getTime() + (days2460601000));
	expires = "; expires=" + date.toUTCString();
	}
	document.cookie = name + "=" + (value \|\| "") + expires + "; path=/";*/
	window.localStorage.setItem(name, value);
	}

	function getCookieh(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 sleeph(time) {
	return new Promise((resolve) => setTimeout(resolve, time));
	}


	function handleClientLoad() {
	// document.getElementById("myLogin").innerHTML = "AGUARDE...";
	//sleeph(1).then(() => {
	//gapi.load('client:auth2', initClient);
	//});
	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();
	var logname = name.getBasicProfile().getName() + " ( " + name.getBasicProfile().getEmail() + " )";
	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());
	//authorizeButton.onclick = handleAuthClick;
	// signoutButton.onclick = handleSignoutClick;
	}, 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();
	}, 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("portal").style.display = "flex";
	document.getElementById("myLogin").innerHTML = "LOGIN";
	var obj = document.getElementById("myLogin");
	obj.setAttribute('href', "javascript:handleAuthClick(0);");
	document.getElementById("Fila").setAttribute('onclick', "document.getElementById('ocoModal').style.display = 'none'; javascript:void(0);");
	}

	function waitLogout(logname) {
	document.getElementById("conteudo").style.display = "flex";
	document.getElementById("portal").style.display = "none";
	document.getElementById("myLogin").innerHTML = "LOGOFF";
	var obj = document.getElementById("myLogin");
	// 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.
	}

	/**
	* 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: '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="topnav" id="myTopnav">


	<div class="foo">
	<!--button class="dropbtn">
	Clientes
	<i class="fa fa-caret-down"></i>
	</button>
	<div class="dropdown-content">
	<a href="javascript:openurl('/operacao-MOEMA.html')">MOEMA</a>
	<a href="javascript:openurl('/operacao-CLIENTE-TESTE.html')">CLIENTE-TESTE</a>
	<a href="javascript:openurl('/operacao-MAGMA.html')">MAGMA</a>
	<a href="javascript:openurl('/operacao-ATUALLI.html')">ATUALLI</a>
	<a href="javascript:openurl('/operacao-PEDRA.html')">PEDRA</a>
	<a href="javascript:openurl('/operacao-MULTILASER-EXTREMA-DVR-PRINCIPAL.html')">MULTILASER-EXTREMA-DVR-PRINCIPAL</a>
	<a href="javascript:openurl('/operacao-MULTILASER-EXTREMA-DVR-GALPAO5.html')">MULTILASER-EXTREMA-DVR-GALPAO5</a>
	<a href="javascript:openurl('/operacao-MULTILASER-EXTREMA-DVR-GALPAOHINODE.html')">MULTILASER-EXTREMA-DVR-GALPAOHINODE</a>
	<a href="javascript:openurl('/operacao-MULTILASER-MANAUS-DVR-1.html')">MULTILASER-MANAUS-DVR-1</a>
	<a href="javascript:openurl('/operacao-MULTILASER-ESCRITORIO-DVR-1.html')">MULTILASER-ESCRITORIO-DVR-1</a>
	<a href="javascript:openurl('/operacao-MULTILASER-ESCRITORIO-DVR-2.html')">MULTILASER-ESCRITORIO-DVR-2</a>
	<a href="javascript:openurl('/operacao-BEACON-LEOPOLDINA-DVR.html')">BEACON-LEOPOLDINA-DVR</a>
	<a href="javascript:openurl('/operacao-BEACON-PINHEIROS-DVR.html')">BEACON-PINHEIROS-DVR</a>
	<a href="javascript:openurl('/operacao-CASA-GUILHERME-ALMEIDA.html')">CASA-GUILHERME-ALMEIDA</a>

	</div-->

	<a href="javascript:selProgramacao(0);" id="programacao">Selecione Programacao</a>
	</div>
	<a href="javascript:void(0);" id="myLogin"></a>
	<a href="javascript:void(0);" id="clientelabel"></a>

	<!--a href="javascript:void(0);" class="icon" onclick="myFunctionNav()">
	<i class="fa fa-bars"></i>
	</a-->

	</div>

	<div class="rowblock" id="portal">
	<tr></tr>
	</div>

	<div class="row" id="conteudo">
	AGUARDE...
	</div>
	<script async">

	// setInterval("gogo();", 1500);
	var to = 1; // 2; //3;
	var first = 0;
	var idx = 0;
	var tamFila = 0;
	var myFila = 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 selProgramacao()
	{
	let text;
	let id = prompt("Entre com o id da programacao", "1");
	if (id == null \|\| id == "") {
	text="1";
	} else {
	text = id;
	}
	openurl('/programacao?id='+text);
	}

	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>";
	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');

	}

	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)
	{
	return window.open(url,'_self');

	// var frame = document.getElementById('iframecercavirtual') //Id do seu iframe aqui
	// frame.src = url; // Considerando que BARRASTATUS
	}

	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) {

	var json = JSON.parse(this.responseText);

	if (json.status > 0) {
	//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);

	obj.addEventListener('loadeddata', function () {
	alert("Video Carregado");
	}, obj.load());

	//document.getElementById("procedimento").innerHTML = "<b>" + json.procedimento + "</b>";
	// document.getElementById("resposta").innerHTML = "<b>" + json.template + "</b>";

	var objproc = document.getElementById("procedimento");
	objproc.setAttribute('value', json.procedimento);

	var objtmp = document.getElementById("template");
	objtmp.setAttribute('value', json.template);

	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.idOcorrencia + "</b>";
	document.getElementById("NomeRoteiro").innerHTML = "<b> Roteiro: " + json.roteiro + "</b>";
	document.getElementById("DataOcorrencia").innerHTML = "<b> Data: " + json.data + "</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=\"\">REALIALIZAR 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.idOcorrencia);
	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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=Ocorrencia&operador=" + document.getElementById("myLogin").innerHTML, true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");
	});
	}

	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 url = video + "&idchat=" + idChat + "&status=" + status + "&idoco=" + idOco + "&motivo=" + cliente + " - " + roteiro + " - " + idResp2;

	xhttp.open("GET", url, true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");
	}

	function gravaOcorrencia()
	{
	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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=GravaOcorrencia&idOco=" + idOco + "&resposta1=" + idResp1 + "&resposta2=" + idResp2 + "&operador=" + operador, true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");

	}

	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", "http://atualli.ddns.net:8090/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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=Logout&login=" + login + "&ip=0", true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");
	}

	function autentica() {

	var xhttp = new XMLHttpRequest();

	var usuario = document.getElementById("myFormUsuario").value;
	var senha = document.getElementById("myFormSenha").value;

	xhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {

	if (this.responseText.indexOf("ERRO") > -1) {
	document.getElementById("myLogin").innerHTML = this.responseText;

	localStorage.setItem("sessao", this.responseText);
	}
	else {
	localStorage.setItem("sessao", this.responseText);
	}

	}

	closeForm();
	};

	document.getElementById("myLogin").innerHTML = "Aguarde Login";
	xhttp.open("GET", "https://script.google.com/macros/s/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=Login&user="+usuario+"&psw="+senha, 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()
	{
	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" + "(" + 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/AKfycbxNBYm7cgPj_TdVbsaU-LWdGT4Vdg0QBmkUXRoNmJlcrSVLRtE/exec?cmd=F2ila&login="+usuario, true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");
	}

	function gogo2()
	{
	getFila()
	setTimeout(gogo2, to * 2000);
	}


	function refreshimg(img)
	{

	}

	function imgRedirect(img)
	{

	}


	function errorloadimg(img) {



	}

	function gogo()
	{
	try {

	if (first == 0) {
	first += 1;
	setTimeout(gogo, to * 10000);

	}
	var d=new Date(),
	dummy=d.getTime(),
	i=idx,
	pix=document.images;
	for (; i < pix.length; i++)
	{
	if (pix[i].className !== 'refr')
	{ continue; }
	else
	{
	var obj = pix[i];

	if ((obj.complete)) {
	first -= 5;
	if (first < 1) first = 1;
	}
	else {
	first += 20;
	if (first > 5000)
	{
	first = 5000;
	//obj.removeChild(obj.lastElementChild);
	//location.reload();
	}
	}
	{

	var s_rc = obj.getAttribute('src');


	var pure_src = s_rc.substring(0, s_rc.indexOf('c=') + 4);
	obj.setAttribute('src', pure_src + '&' + dummy);


	// obj.nextSibling.innerHTML = obj.getAttribute('src');

	idx += 1;
	if (idx >= pix.length) idx = 0;
	break;
	}

	}
	}

	setTimeout(gogo, first);

	}
	catch (e) {

	setTimeout(gogo, to * 100);
	}

	}

	function drawLine(ctx,can,x, y, stopX, stopY,color) {
	//ctx.clearRect(0, 0, can.width, can.height);
	ctx.strokeStyle = color;
	ctx.beginPath();
	ctx.moveTo(x, y);
	ctx.lineTo(stopX, stopY);
	ctx.closePath();
	ctx.stroke();

	}

	function getMousePos(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
	return {
	x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
	y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
	};
	}

	var cercanova = new Array(32);
	var tam = 0;
	var tama = -1;

	function mouseDown(e) {
	e = e \|\| window.event;
	e.preventDefault();
	// get the mouse cursor position at startup:


	var c = document.getElementById("myCanvas" + 0);
	var ctx = c.getContext("2d");
	var pos = getMousePos(c, e);

	cercanova[tam] = pos;
	var p1 = cercanova[0];
	tam++;
	if (tam >= 32) {
	tam = 0;
	tama = -1;
	}

	for (var i = tam; i < 32; i++)
	{
	cercanova[i] = p1;
	}

	}

	function loadById(id,cliente) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
	// var desbloqueio = document.getElementById("desbloqueio");
	var json = JSON.parse(this.responseText);

	var lista = json.progamacaobyid;
	document.getElementById("clientelabel").innerHTML = "(" + lista[0].nomecliente + ")";

	var html = "<td>";

	for (var i = 0; i < lista.length; i++) {

	html +=
	"<td><div class=\"column\"><img src=\"getresource?r=atualli.png&c=00&123\" id=\"camera" + i + "\" class=\"refr\" style=\"width:100%;display:none;\"><canvas id=\"myCanvas" + i + "\" style=\"width:100%\" onmousedown=\"mouseDown(event)\"></canvas></div><div class=\"column\"><textarea id=\"prog" + i + "\" name=\"w3review\" rows=8% cols=49% style=\"font-size: 12pt\"></textarea><textarea id=\"novo" + i + "\" name=\"w3review\" rows=8% cols=49% style=\"font-size: 12pt\"></textarea></div></td>";
	}
	html += "</td>";
	document.getElementById("conteudo").innerHTML = html;
	for (var i = 0; i < lista.length; i++) {

	document.getElementById("prog" + i).innerHTML = JSON.stringify(lista[i]);

	var camera = document.getElementById("camera"+i);
	camera.setAttribute('src', lista[0].urlcamera);


	var img = document.getElementById("camera"+i);
	var c = document.getElementById("myCanvas"+i);
	var ctx = c.getContext("2d");

	img.onload = function start() {
	c.setAttribute('width', img.width);
	c.setAttribute('height', img.height);
	ctx.drawImage(img, 0, 0, img.width, img.height);

	var scerca = lista[0].cercavirtual;
	var cerca = scerca.split(",");
	var xa = 0;
	var ya = 0;
	for (var j = 0; j < cerca.length; j += 2) {

	var x = cerca[j] * img.width;
	var y = cerca[j + 1] * img.height;
	if (j > 0) {
	drawLine(ctx, c, xa, ya, x, y,'#ff0000');
	}
	xa = x;
	ya = y;
	}
	var pa = cercanova[0];
	var snova = "";

	for (var i = 0; i < cercanova.length; i++) {
	var p = cercanova[i];
	if(p) {
	if (i > 0)
	drawLine(ctx, c, pa.x, pa.y, p.x, p.y, '#ffff00');
	pa = p;

	if(tama != tam) {
	var fx = p.x / img.width;
	var fy = p.y / img.height;
	var x = parseFloat((fx).toFixed(2));
	var y = parseFloat((fy).toFixed(2));
	if (x == "0") x = "0.00";
	if (y == "0") y = "0.00";
	if (i > 0) snova += ",";

	snova += x + "," + y;
	document.getElementById("novo0").innerHTML = snova;
	}
	}
	}
	tama = tam;

	}
	}
	}

	};
	//document.getElementById("prog").innerHTML = "AGUARDE...";
	if(id)
	xhttp.open("GET", "getdatalocal?comando=GetProgById&id=" + id, true);
	else
	if(cliente)
	xhttp.open("GET", "getdatalocal?comando=GetProgById&cliente=" + cliente, true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("");

	}


	function iniciaPagina()
	{
	//dragElement(document.getElementById("myCanvas"));

	const urlParams = new URLSearchParams(window.location.search);
	const id = urlParams.get('id');
	const cliente = urlParams.get('cliente');
	if( (id) \|\| (cliente) )
	loadById(id,cliente);

	gogo2();

	gogo();

	}

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