techbloc/techrec
1
0
Fork 0
Code Issues 10 Pull requests Releases Activity
techrec/client/new.html

330 lines
11 KiB
HTML
Raw Normal View History

Client
2013-08-28 17:29:31 +02:00
<!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";
bottle works as class
2013-09-08 19:13:23 +02:00
var srvaddr = "http://127.0.1.1:8000/";
Client
2013-08-28 17:29:31 +02:00
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 || '';
bottle works as class
2013-09-08 19:13:23 +02:00
console.log("[ASYNC] " + destdiv + " <- " + uri)
console.log( postdata );
Client
2013-08-28 17:29:31 +02:00
bottle works as class
2013-09-08 19:13:23 +02:00
$(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 ) {
Client
2013-08-28 17:29:31 +02:00
$(".imageloader").remove();
bottle works as class
2013-09-08 19:13:23 +02:00
resmsg = "ALSWAST["+jqXHR.status+"]";
$(destdiv).append( resmsg );
}
).complete(
function (jqXHR, msgstatus) {
alert("Comlpete " +jqXHR + " - " + msgstatus);
}
);
Client
2013-08-28 17:29:31 +02:00
}
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"; }
bottle works as class
2013-09-08 19:13:23 +02:00
function rs_formid(code) { return "form-"+code; }
Client
2013-08-28 17:29:31 +02:00
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
bottle works as class
2013-09-08 19:13:23 +02:00
// 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)+"\" ";
Client
2013-08-28 17:29:31 +02:00
str = str + " class=\"recbutton\" value=\"Inizia\" /\>";
bottle works as class
2013-09-08 19:13:23 +02:00
str = str + "</form>";
$("#"+formid).attr("action","#") .attr("method","post") //set the form attributes
Client
2013-08-28 17:29:31 +02:00
$("#"+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
bottle works as class
2013-09-08 19:13:23 +02:00
// $("#"+rs_button(recid) ).click(function(){
$("#"+rs_button(recid) ).submit(function(){
Client
2013-08-28 17:29:31 +02:00
rec_changestate( rs_button(recid) );
});
}
bottle works as class
2013-09-08 19:13:23 +02:00
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");
}
Client
2013-08-28 17:29:31 +02:00
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
***/
bottle works as class
2013-09-08 19:13:23 +02:00
console.log("RECBUTTON value :"+recbutton.value);
//console.log("TXT " + txt_star.toUpperCase() );
Client
2013-08-28 17:29:31 +02:00
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+"\" /\>";
bottle works as class
2013-09-08 19:13:23 +02:00
//$("#"+rs_buttonarea(eid)).append( str );
var formid = rs_formid( eid );
$("#"+formid).append(str)
Client
2013-08-28 17:29:31 +02:00
bottle works as class
2013-09-08 19:13:23 +02:00
console.log("[CS] Update log div (" + rs_log(eid) +")");
Client
2013-08-28 17:29:31 +02:00
$("#"+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);
bottle works as class
2013-09-08 19:13:23 +02:00
recbutton.type = "submit";
Client
2013-08-28 17:29:31 +02:00
recbutton.value = txt_download;
bottle works as class
2013-09-08 19:13:23 +02:00
$("#"+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);
}
});
});
Client
2013-08-28 17:29:31 +02:00
$("#"+ rs_trxarea(eid)).css("background-color","green");
bottle works as class
2013-09-08 19:13:23 +02:00
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);
});*/
Client
2013-08-28 17:29:31 +02:00
} 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;
bottle works as class
2013-09-08 19:13:23 +02:00
var starttime = $("#"+rs_inputstart(eid)).val();
var endtime = $("#"+rs_inputstart(eid)).val();
Client
2013-08-28 17:29:31 +02:00
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);
}
bottle works as class
2013-09-08 19:13:23 +02:00
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 +'"'};
Client
2013-08-28 17:29:31 +02:00
bottle works as class
2013-09-08 19:13:23 +02:00
destdiv = "#"+rs_log(eid)
console.log( destdiv +" <- " + srvaddr + "\n" + jsondata );
async_load( destdiv, srvaddr, jsondata);
Client
2013-08-28 17:29:31 +02:00
}
// 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">
bottle works as class
2013-09-08 19:13:23 +02:00
<!-- <form action="#" method="POST"> -->
Client
2013-08-28 17:29:31 +02:00
<h1> techr*c </h1>
<h2> <a href="tempo.php"> macchina del tempo</a> </h2>
<div id="buttonscontainer"> </div>
<div id="addnewrecarea"> </div>
bottle works as class
2013-09-08 19:13:23 +02:00
<!-- </form>-->
Client
2013-08-28 17:29:31 +02:00
</div>
<div id="footer">
techbl*c
</div>
</body>
</html>
Reference in a new issue Copy permalink