<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="decorazioneSimply12.css" rel="stylesheet" type"text/css" />
<link rel="icon" type="image/x-icon" href="/appatk/sviluppo/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- intestazioni per app json , css,ajax-->
<link rel="manifest" href="/appatk/sviluppo/manifest.json">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body onload="load()">
<p id="immagine"><img src="logo.png" width="70%"> </p>
<div id="compilazione"> <!-- il div "compilazione contiene tutto cio' che ce nel "form" grigio --> </br>
<input type="text " id="postazione" name="postazione" placeholder=" inserisci numero postazione"> <br> <br>
<input type="text " id="postazione2" name="ordine"placeholder=" inserisci numero ordine"><br> <br>
<select id="selectOptoperazione" > <br> <br>
<option id="operator">seleziona il numero dell'operazione</option> <br> <br>
</select> <br> <br>
<input type="text" id="postazione3" name="operazione" min="0" > <!-- qui creo un campo nascosto , grazie all'ajax qui verrà inserito il numerino identificativo dei ogni operatore , è da qui che viene mandato il valore al database , non da selectOpt -->
<select id="selectOpt">    
<option id="operator" >seleziona il nome dell'operatore</option>
</select>
<input type="text" id="postazione4" name="operatore" min="0" > <!-- altro campo hidden dove verrà preso il valore numerico-->
</div>
</div>
</div>
<p id="bottoni">
<input class="button" type="submit" id="btn_play" name="btn_play" value="play ✅" onclick="play()" >      
<input class="button" type="submit" id="btn_pause" value="pause ⏸" name="btn_pause" onclick="pause()">       <!-- creazione dei bottoni , assegno a loro la funzione onclick="cambiacolore()" che servirà a cambiare colore , ma anche per effettuare operazioni e nascondere bottoni al momento giusto -->
<input class="button" type="submit" id="btn_stop" name="btn_stop" value="stop 🔴" onclick="stop()">
</p>
<script>
document.getElementById('btn_pause').disabled=true;
document.getElementById('btn_stop').disabled=true;
function trasmissione(){
var a=postazione.value;
var o=postazione2.value;
var op= postazione3.value;
var oz= postazione4.value;
var hs=hstart.value;
var tp=totp.value;
const verificare=0;
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "zan.php?a="+a+"&o="+o+"&op="+op+"&oz="+oz+"&st="+st+"&qta="+qta+"&hs="+hs+"&tp="+tp);
xhttp.send();
}
function play(){
window.st="play";
window.qta=0;
if(postazione.value!="" && postazione2.value!="" && postazione3.value!="" && postazione4.value!=""){
var element = document.getElementById("compilazione");
element.style.borderColor = "#00ff00";
document.getElementById("btn_play").disabled = true; // prima funzione , btn play ... verifico che non ci siano campi vuoti , se essi non ci sono allora procede con tutte le varie procedure, altrimenti viene aperta una pagina bianca che indicherà all'utente di reinserire il valore nei campi
document.getElementById("btn_pause").disabled = false;
document.getElementById('postazione').readOnly = true;
document.getElementById('postazione2').readOnly = true;
document.getElementById('selectOpt').disabled = true;
document.getElementById('selectOptoperazione').disabled = true;
document.getElementById("btn_stop").disabled = false;
var ip=tip.value;
var operatore=postazione4.value;
if(ip==0){
var m = new Date();
var hstart =
("0" + (m.getUTCHours()+2)).slice(-2) + ":" +
("0" + m.getUTCMinutes()).slice(-2) + ":" +
("0" + m.getUTCSeconds()).slice(-2);
document.getElementById('hstart').value=hstart;
}
else if(ip!==0){
var tpausa=parseFloat(document.getElementById('totp').value);
var fpausa=parseFloat((Math.round((Date.now()-tip.value)/6000)/10));
tpausa=tpausa+fpausa;
totp.value=tpausa;
}
ip.value=document.getElementById('tip').value="play";
}
trasmissione();
}
function pause(){
window.st="pause";
window.qta=0;
var element = document.getElementById("compilazione");
element.style.borderColor ="#ffc426";
document.getElementById("btn_play").disabled = false;
document.getElementById("btn_pause").disabled = true;
document.getElementById("btn_stop").disabled = false;
document.getElementById('postazione').readOnly = true;
document.getElementById('postazione2').readOnly = true;
document.getElementById('selectOpt').disabled = true;
document.getElementById('selectOptoperazione').disabled = true;
//calcolo l'ora d'inizio di pausa
var now=new Date();
var seconds = now.getSeconds();
var minutes = now.getMinutes();
var hour = now.getHours();
var tip=document.getElementById('tip').value =Date.now();
trasmissione();
}
function stop(){
window.st="stop";
window.qta=prompt("inserisci la quantita",0);
if (qta === null) {
return;
}
while(qta==0){
alert('campi non validi');
qta = prompt('inserisci la quantità');
}
var element = document.getElementById("compilazione");
element.style.borderColor ="#fe0000";
document.getElementById('selectOpt').disabled = true;
document.getElementById('selectOptoperazione').disabled = true;
document.getElementById("btn_play").disabled = false;
document.getElementById("btn_pause").disabled = true;
document.getElementById("btn_stop").disabled = true;
if(tip.value!="play") {var tpausa=parseFloat(document.getElementById('totp').value);
var fpausa=parseFloat((Math.round((Date.now()-tip.value)/6000)/10));
tpausa=tpausa+fpausa;
totp.value=tpausa;
}
trasmissione();
tip.value=0;
postazione.value="";
postazione2.value="";
selectOpt.value="";
selectOptoperazione.value="";
}
function load() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("selectOptoperazione").innerHTML = this.responseText;
}
xmlhttp.open("GET", "loadselect.php");
xmlhttp.send();
load2();
}
function load2(){
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("selectOpt").innerHTML = this.responseText;
}
xmlhttp.open("GET", "loadselect2.php");
xmlhttp.send();
}
$(document).ready(function() { //eseguo scambio value tra select e form , cosi' riesco a prelevarlo e assegnare valore alle variabili
$("#selectOpt").change(function() {
$("#postazione4").val($('#selectOpt option:selected').val());
});
});
$(document).ready(function() {
$("#selectOptoperazione").change(function() {
$("#postazione3").val($('#selectOptoperazione option:selected').val());
});
});
$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
$("select").select2();
});
</script>
<input type ="text" id="hstart" value="0" hidden="hidden">
<input type ="text" id="tip" value="0" hidden="hidden">
<input type ="text"id="totp" name="totp" value="0" hidden="hidden">
</body>
</html>