329 lines
11 KiB
HTML
329 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title> TechREC </title>
|
|
|
|
<script src="jquery-1.9.1.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
|
|
<script>
|
|
var txt_start = "Inizia";
|
|
var txt_stop = "Ferma";
|
|
var txt_download = "Scarica";
|
|
|
|
var srvaddr = "http://127.0.1.1:8000/";
|
|
|
|
var almostone = false;
|
|
var noplusbotton = true;
|
|
var maxrec = 0 ;
|
|
|
|
var rec_name_default = "";
|
|
|
|
/** Perform Ajax async loading **/
|
|
function async_load( destdiv, uri, postdata) {
|
|
postdata = postdata || '';
|
|
|
|
console.log("[ASYNC] " + destdiv + " <- " + uri)
|
|
console.log( postdata );
|
|
|
|
$(destdiv).html("\<div class=\"imageloader\"\> \<img src=\"img/ajax-loader.gif\" /\> \</div\>");
|
|
console.log("Tolta uri" + uri + "NOW -> http://127.0.1.1:8000/sampleJSON");
|
|
var request = $.ajax( { url: "http://127.0.1.1:8000/sampleJSON",
|
|
type:"POST",
|
|
data: postdata,
|
|
dataType: 'json',
|
|
success : function( msg ) {
|
|
$(".imageloader").remove();
|
|
resmsg = "["+jqXHR.status+"]";
|
|
alert("Ma ci sei ?");
|
|
$(destdiv).append( resmsg );
|
|
},
|
|
error: function(xhr) {
|
|
var errmsg = "";
|
|
console.log("Errore async ajax: " + xhr.status );
|
|
switch( xhr.status )
|
|
{
|
|
case 0: errmsg="[0] Network Problem."; break;
|
|
case 404: errmsg="[404] Requested page not found."; break;
|
|
case 500: errmsg="[500] Internal Server Error."; break;
|
|
default: errmsg="[ErrCode: "+xhr.status+"] Error uncatched!"; break;
|
|
}
|
|
console.log("ErrMSG" + errmsg);
|
|
$(".imageloader").remove();
|
|
//$(destdiv).html("Err: "+ errmsg);
|
|
alert("Err: "+ errmsg);
|
|
}
|
|
}
|
|
).always(function( jqXHR ) {
|
|
$(".imageloader").remove();
|
|
resmsg = "ALSWAST["+jqXHR.status+"]";
|
|
$(destdiv).append( resmsg );
|
|
}
|
|
).complete(
|
|
function (jqXHR, msgstatus) {
|
|
alert("Comlpete " +jqXHR + " - " + msgstatus);
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
function rs_button( code ) { return code; }
|
|
function rs_trxarea( code ) { return "recarea-"+code; }
|
|
function rs_trxname( code ) { return code+"_name"; }
|
|
function rs_buttonarea( code ) { return code+"_buttonarea"; }
|
|
function rs_inputstart( code ) { return code+"_startime"; }
|
|
function rs_inputend( code ) { return code+"_endtime"; }
|
|
function rs_formid(code) { return "form-"+code; }
|
|
|
|
function rs_id(code) { return code; }
|
|
function rs_log(code) { return code + "_log"; }
|
|
|
|
/** New record **/
|
|
function rec_new( ) {
|
|
|
|
console.log("Nuova");
|
|
|
|
var recid = "rec-"+maxrec;
|
|
maxrec += 1; // increment number of active record
|
|
|
|
console.log("AGGIUNTO AL MAIN CONTAINER");
|
|
$("#buttonscontainer").append( "<div id=\""+rs_trxarea(recid)+"\" class=\"recarea\"> </div>" );
|
|
|
|
$("#"+rs_trxarea(recid)).append( "<div id=\""+rs_buttonarea(recid)+"\" class=\"buttonarea\"> </div>" );
|
|
|
|
// POPULATE BUTTON AREA
|
|
// var str = "\<input type=\"image\" src=\"img/button.jpg\"id=\""+rs_button(recid)+ "\" name=\""+rs_button(recid)+"\" ";
|
|
var formid = rs_formid( recid );
|
|
|
|
var str = "<form id=\""+formid+"\">";
|
|
str = str + "\<input type=\"submit\" name=\""+rs_button(recid)+"\" id=\""+rs_button(recid)+"\" ";
|
|
str = str + " class=\"recbutton\" value=\"Inizia\" /\>";
|
|
str = str + "</form>";
|
|
$("#"+formid).attr("action","#") .attr("method","post") //set the form attributes
|
|
|
|
$("#"+rs_buttonarea(recid)).html( str );
|
|
// DELETE BUTTON (NO FIRST ELEMENT)
|
|
if ( recid > 0 ){
|
|
$("#"+rs_buttonarea(recid)).append( "\<div class=\"dellink\" \> <a href=\"#\"> cancella</a> \</div\>" );
|
|
}
|
|
|
|
// INSERT AND POPULATE BUTTON AREA
|
|
$("#"+rs_trxarea(recid)).append( "<div id=\""+rs_log(recid)+"\" class=\"logarea\">Nuova trasmissione </div>" );
|
|
|
|
// BINDING CLICK TO FUNCTION
|
|
// $("#"+rs_button(recid) ).click(function(){
|
|
$("#"+rs_button(recid) ).submit(function(){
|
|
|
|
rec_changestate( rs_button(recid) );
|
|
});
|
|
}
|
|
|
|
function download( eid ){
|
|
alert("DEntro download");
|
|
var trxnameobj = document.getElementById( rs_trxname(eid) );
|
|
var trxname = trxnameobj.value;
|
|
var starttime = $("#"+rs_inputstart(eid)).val();
|
|
var endtime = $("#"+rs_inputstart(eid)).val();
|
|
var jsondata = {"name":'"'+trxname+'"', "starttime":'"'+ starttime +'"', "endtime":'"'+ endtime +'"'};
|
|
async_load( destdiv, srvaddr, jsondata);
|
|
alert("FINE download");
|
|
}
|
|
|
|
function rec_changestate( eid ) {
|
|
|
|
console.log("[CS] change state for "+eid+"");
|
|
|
|
var recbutton = document.getElementById( eid );
|
|
var trxnameobj = document.getElementById( rs_trxname(eid) );
|
|
|
|
if (recbutton == null) {
|
|
alert("Impossibile trovare ID");
|
|
return;
|
|
}
|
|
console.log("[CS] "+eid+" == " +recbutton.value);
|
|
|
|
/***
|
|
|
|
Simple FSM - Finite State Machine
|
|
|
|
***/
|
|
|
|
console.log("RECBUTTON value :"+recbutton.value);
|
|
//console.log("TXT " + txt_star.toUpperCase() );
|
|
|
|
if ( recbutton.value.toUpperCase() == txt_start.toUpperCase() ) {
|
|
/*
|
|
In this case, user presses START
|
|
*/
|
|
|
|
var myDate = new Date();
|
|
var displayDate = (myDate.getFullYear()+1) + '/' + (myDate.getMonth()+1) + '/' + myDate.getDate();
|
|
displayDate = displayDate +' '+ myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds();
|
|
|
|
var str = "\<input type=\"text\" id=\""+rs_trxname(eid)+"\" placeholder=\"Nome trasmissione\" /\>";
|
|
str = str + "\<input type=\"hidden\" id=\""+rs_inputstart(eid)+"\" value=\""+displayDate+"\" /\>";
|
|
|
|
//$("#"+rs_buttonarea(eid)).append( str );
|
|
var formid = rs_formid( eid );
|
|
$("#"+formid).append(str)
|
|
|
|
console.log("[CS] Update log div (" + rs_log(eid) +")");
|
|
$("#"+rs_log(eid)).append("<br /\>Inizio: "+displayDate);
|
|
|
|
console.log("[CS] change text for "+eid);
|
|
recbutton.value = txt_stop;
|
|
|
|
console.log("[CS] change color for area "+eid);
|
|
$("#"+ rs_trxarea(eid) ).css("background-color","red");
|
|
|
|
almostone = true;
|
|
|
|
} else if ( recbutton.value.toUpperCase() == txt_stop.toUpperCase() ) {
|
|
/*
|
|
In this case, user presses STOP
|
|
*/
|
|
|
|
console.log("[CS] "+eid+" == " +txt_stop);
|
|
|
|
var myDate = new Date();
|
|
var displayDate = (myDate.getMonth()+1) + '/' + (myDate.getDate()) + '/' + myDate.getFullYear();
|
|
displayDate = displayDate +' '+ myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds();
|
|
|
|
var str = "\<input type=\"hidden\" id=\""+rs_inputend(eid)+"\" value=\""+displayDate+"\" /\>";
|
|
|
|
$("#"+rs_trxarea(eid)).append( str );
|
|
|
|
$("#"+rs_log(eid)).append("<br /\>Fine: "+displayDate);
|
|
|
|
recbutton.type = "submit";
|
|
recbutton.value = txt_download;
|
|
$("#"+eid).click(function(e){
|
|
e.preventDefault();
|
|
|
|
dataString = $("#JqAjaxForm").serialize();
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "http://127.0.1.1:8000/sampleJSON",
|
|
data: {"value":"value"},
|
|
dataType: "json",
|
|
success: function(data) {
|
|
alert("QUI"+ data);
|
|
|
|
},
|
|
error: function (x) {
|
|
alert("error" + x.status);
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$("#"+ rs_trxarea(eid)).css("background-color","green");
|
|
console.log("EID" + eid);
|
|
$("#"+ rs_trxarea(eid)).append( "<a href=\"#\" id=\"but-down-"+eid+"\" onclick=\"Javascript:download("+eid+");\") >SCARICA LINK</a>" );
|
|
/*$("#but-down-"+eid).click(function(){
|
|
var trxname = trxnameobj.value;
|
|
var starttime = $("#"+rs_inputstart(eid)).val();
|
|
var endtime = $("#"+rs_inputstart(eid)).val();
|
|
var jsondata = {"name":'"'+trxname+'"', "starttime":'"'+ starttime +'"', "endtime":'"'+ endtime +'"'};
|
|
async_load( destdiv, srvaddr, jsondata);
|
|
});*/
|
|
|
|
} else if ( recbutton.value.toUpperCase() == txt_download.toUpperCase() ) {
|
|
|
|
/* In this case, user presses DOWNLOAD
|
|
Save name and block the record. No operations are (more) allowed.
|
|
*/
|
|
|
|
console.log("[CS] "+eid+" == " +txt_download);
|
|
console.log("[CS] GetID"+ eid+ "_name");
|
|
|
|
var trxname = trxnameobj.value;
|
|
var starttime = $("#"+rs_inputstart(eid)).val();
|
|
var endtime = $("#"+rs_inputstart(eid)).val();
|
|
|
|
console.log("[CS] ID = "+eid+"_name ==> "+trxname ) ;
|
|
console.log("[CS] "+trxname+" != "+rec_name_default);
|
|
|
|
if (trxname == rec_name_default) {
|
|
trxname = prompt("Inserire il nome della registrazione per salvarla", "");
|
|
|
|
// check if it is empty or null
|
|
while ( ( $.trim(trxname) == "") || (trxname == null) ) {
|
|
trxname = prompt("Non posso registrare senza un nome!", "");
|
|
}
|
|
|
|
/* no possible !!! */
|
|
if ( $.trim(trxname) == "") {
|
|
alert("Sei riuscito/a a registrare senza dare un nome.. pensi di farla franca '??????"+
|
|
"techbl*c contro il lampo negli occhi della protoscimmia");
|
|
}
|
|
|
|
trxnameobj.setAttribute("value", trxname);
|
|
|
|
}
|
|
|
|
console.log( "Recarea "+rs_trxarea(eid) +" -> " + $("#"+rs_trxarea(eid)).innerHTML );
|
|
$("#"+rs_trxarea(eid)).css("background-color","#ccc");
|
|
|
|
// TODO: fare i controlli su starttime, endtime
|
|
|
|
var jsondata = {"name":'"'+trxname+'"', "starttime":'"'+ starttime +'"', "endtime":'"'+ endtime +'"'};
|
|
|
|
destdiv = "#"+rs_log(eid)
|
|
console.log( destdiv +" <- " + srvaddr + "\n" + jsondata );
|
|
async_load( destdiv, srvaddr, jsondata);
|
|
|
|
}
|
|
|
|
// if there is almost one button and the PLUSBOTTON has previously insered
|
|
if (almostone == true && noplusbotton == true) {
|
|
$("#addnewrecarea").prepend( "<a href=\"#\" id=\"newrecbutton\">+ nuova</a>" );
|
|
$("#newrecbutton").click(function(){
|
|
rec_new();
|
|
});
|
|
noplusbotton = false;
|
|
}
|
|
|
|
}
|
|
|
|
/* GESTIONE CAMBIO DI STATO */
|
|
$(document).ready(function(){
|
|
rec_new();
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--
|
|
QUI ANDREBBE INSERITA UNA LOAD DEI DATI DAL DATABASE PER REDERE
|
|
L'INTERFACCIA COERENTE CON LA BASE DI DATI
|
|
-->
|
|
<div id="pagecontainer">
|
|
<!-- <form action="#" method="POST"> -->
|
|
|
|
<h1> techr*c </h1>
|
|
|
|
<h2> <a href="tempo.php"> macchina del tempo</a> </h2>
|
|
|
|
<div id="buttonscontainer"> </div>
|
|
|
|
<div id="addnewrecarea"> </div>
|
|
|
|
<!-- </form>-->
|
|
|
|
</div>
|
|
|
|
<div id="footer">
|
|
techbl*c
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|