techrec/server/static/js/reclibrary.js

console.log("Loading...");

function trx_startbut( code )  { return "startbutton-"+code; }
function trx_stopbut( code )   { return "stopbutton-"+code; }
function trx_downbut( code )   { return "downloadbutton-"+code; }
function trx_endbut( code )		 { return "endbutton-"+code; }

function trx_logarea( code )   { return "logarea-"+code; }

function rs_button( code )     { return "button"+code; }

function rs_trxarea( code )    { return "recarea-"+code; }
function rs_trxname( code )    { return "name-"+code; }
function rs_buttonarea( code ) { return "butarea-"+code; }
function rs_inputstart( code ) { return "starttime-"+code; }
function rs_inputend( code )   { return "endtime-"+code; }
function rs_formid(code)       { return "form-"+code; }
function rs_dellink(code)		{ return "dellink-"+code;}
function rs_id(code)           { return code; }

var txt_start       = "Inizia";
var txt_stop        = "Ferma";
var txt_download    = "Scarica";

var srvaddr         = "/";

var almostone       = false;
var noplusbotton    = true;

var rec_name_default = "";

/*
TODO: cambiare logica
Quando premo il primo tasto, faccio la crazione,
per ogni altro pulsante, faccio solo e sempre UPDATE
*/
/**
  * Perform Ajax async loading
  **/

function newformstr ( recid , butflag=false )
{
    var formid = rs_formid( recid );
    var str = "<form id=\""+formid+"\" name=\""+formid+"\" action=\"#\">";

    if (butflag) {
        str = str + "<input type=\"button\" name=\""+trx_startbut(recid)+"\" id=\""+trx_startbut(recid)+"\" ";
        str = str + " class=\"recbutton\" value=\"Inizia\" />";
        str = str + "<input type=\"button\" name=\""+trx_stopbut(recid)+"\" id=\""+trx_stopbut(recid)+"\" ";
        str = str + " class=\"recbutton\" value=\"Stop\" />";
        str = str + "<input type=\"submit\" name=\""+trx_downbut(recid)+"\" id=\""+trx_downbut(recid)+"\" ";
        str = str + " class=\"recbutton\" value=\"Salva\" />";
        str = str + "<input type=\"submit\" name=\""+trx_endbut(recid)+"\" id=\""+trx_endbut(recid)+"\" ";
        str = str + " class=\"recbutton\" value=\"Download\" />";
    }

    str = str + "<input type=\"hidden\" id=\"recid\" name=\"recid\" value=\""+recid+"\" />";
    str = str + "<input type=\"text\" id=\""+rs_trxname(recid)+"\" name=\""+rs_trxname(recid)+"\" />";
    str = str + "<input type=\"text\" id=\""+rs_inputstart(recid)+"\" name=\""+rs_inputstart(recid)+"\" />";
    str = str + "<input type=\"text\" id=\""+rs_inputend(recid)+"\" name=\""+rs_inputend(recid)+"\" />";

    if (! butflag) {
        str = str + "<input type=\"button\" name=\""+trx_downbut(recid)+"\" id=\""+trx_downbut(recid)+"\" ";
        str = str + " class=\"downloadbutton\" value=\"scarica\" />";
    }
    /*
    str = str + "<input type=\"text\" id=\"name\" name=\"name\" />";
    str = str + "<input type=\"text\" id=\"starttime\" name=\"starttime\" />";
    str = str + "<input type=\"text\" id=\"endtime\" name=\"endtime\" /> ";
    */
    str = str + "</form>";

    return str;
}

/**
*  GetActive Recs
**/

function rec_active( recid ) {
    dataString = "";
    var request = RecAjax("search", dataString);

    request.done( function(data) {
        $.each(data, function(key, val) {
            console.log("Key " + key + " > VAL " + val );
		    $("#"+trx_logarea( recid )).append( "Key " + key + " > VAL " + val + "<br>"  );
		});

    	console.log("Req OK: "+ data);
	    // console.log("request"+ req);
    	ChangeState(recid, trx_downbut(recid) , trx_endbut(recid));
    });
}


/**
  *  New record
  **/
function rec_new( )
{

    var myDate = new Date()
	console.log("New ID "+ myDate.getTime());
    var recid = "rec-"+ myDate.getTime();

    console.log("[rec_new] New Rec " + recid);

    $("#buttonscontainer").append( "<div id=\""+rs_trxarea(recid)+"\" class=\"recarea\"> </div>" );
    $("#"+rs_trxarea(recid)).append( "<div id=\""+rs_buttonarea(recid)+"\" class=\"buttonarea\"> </div>" );
    console.log("[rec_new"+recid+"] add div (TRXArea, ButtonArea) ok " );

    var formid = rs_formid( recid );

    var str = newformstr(recid, butflag=true);
    $("#"+rs_buttonarea(recid)).append( str );

    $("#"+trx_stopbut(recid)).hide();
    $("#"+trx_downbut(recid)).hide();
    $("#"+trx_endbut(recid)).hide();

    console.log("[rec_new "+recid+"] Form OK");

    $("#"+rs_buttonarea(recid)).append( "<div class=\"dellinkarea\" > <a href=\"#\" id="+rs_dellink(recid)+"> cancella</a> </div>" );

    // INSERT AND POPULATE BUTTON AREA
    $("#"+rs_trxarea(recid)).append( "<div id=\""+trx_logarea(recid)+"\" class=\"logarea\"> Nuova trasmissione </div>" );

    // Bind the Delete Links
	$("#"+rs_dellink(recid)).click(function(){
		console.log("Remove " + rs_trxarea(recid) + "[ID"+recid+"]");
		 // $("#"+rs_trxarea(recid)).remove();
		recDelete (recid,rs_trxarea(recid));
    });

    // FORM SUBMIT: THE REC IS STOPPEND AND MUST BE PROCESSED
    $("#"+formid).submit(function(event){
 		// Immediately, mark the end time (stop action)
		ChangeState(recid, trx_downbut(recid) , trx_endbut(recid));

        // Force a Name
		while (true) {
	    	if ( $("#"+rs_trxname(recid)).val() == "" )
			{
				var tmpname = prompt("Nessun nome di trasmissione!!!");
				$("#"+rs_trxname(recid)).val(tmpname);
				$("#"+trx_logarea(recid)).append("Titolo: <b>"+ tmpname +"</b> <br/>");
			}
    		else { break; }
		}

        event.preventDefault();

        // Update data (send to server) in order to save some information
        recUpdate(recid);

        recStart(recid);

    }); // End of form SUBMIT

    // Bind the STOP button
    $("#"+trx_stopbut(recid)).click( function(event){

        event.preventDefault();
        ChangeState(recid, trx_stopbut(recid) , trx_downbut(recid));
        recUpdate(recid);

    }); // End of STOP button

    // Bind the START button
    $("#"+trx_startbut(recid)).click( function(event){

        // Immediately, mark the start time (start action) and send it to Server
		ChangeState(recid, trx_startbut(recid) , trx_stopbut(recid));
        event.preventDefault();
        recNew( recid );

    }); // End of START button

    console.log("New form has been built.");
}

/* Delete Record */
function recDelete ( recid, targetarea ) {
    var formid = rs_formid( recid );
    var dataString = "recid="+recid

    console.log("Del rec: "+dataString);
    var req_del = RecAjax("delete", dataString);

    req_del.done (function(data) {
        $.each(data, function(del_key, del_val) {
            console.log("K:V " + del_key +":"+del_val );

            if (del_key == "message") {
                $("#"+targetarea).fadeOut( 200, function() { $(this).remove(); });
                console.log("delete area "+rs_trxarea(key));

            }

            if (del_key == "error") {
                alert("Impossibile cancellare elemento:\n" + del_val );
            }

        });
    });
}

/* New Record */
function recNew ( recid ) {
    var formid = rs_formid( recid );
    var dataString = $("#"+formid).serialize();

    console.log("New rec: "+dataString);

    var request = RecAjax("create", dataString);

    request.done( function(data) {
    	$.each(data, function(key, val) {
      	    console.log("Received (K:V) ("+key+":"+val+")") ;
      	    if (key == "msg") {
    			$("#"+trx_logarea(recid)).html("Nuova Registrazione </br> (recid:"+recid+") </br>");
    			$("#"+trx_logarea(recid)).append("Inizio: "+ $("#"+rs_inputstart(recid)).val() +"<br/>");
      	    }
			if (key == "error") {
    			$("#"+trx_logarea( recid )).html("Errore: impossibile creare una nuova registrazione"+val+" </ br>");
      	    }

		});
    } );
    return request;
}

/* Update Record */
function recUpdate( recid  ) {
    var formid = rs_formid( recid );
    var dataString = $("#"+formid).serialize();
    console.log("Sending Ajax Update request: "+ dataString);

    //event.preventDefault();
    var request = RecAjax("update", dataString );
    request.done( function(data) {
    	$.each(data, function(key, val) {
          	console.log("recUpdate receive (k:v) ("+key+":"+val+")" );

          	if (key == "message") {
          	    var str = "";
          	    str += "<b>RecID</b> "+ recid + "</br>"
          	    str += "<b>nome</b> "+ $("#"+rs_trxname(recid)).val() + "</br>"
          	    str += "<b>Inizio</b> "+ $("#"+rs_inputstart(recid)).val() + "</br>"
          	    str += "<b>Fine</b> "+ $("#"+rs_inputend(recid)).val() + "</br>"

			    $("#"+trx_logarea(recid)).html( str );
                // if all elements have been recorded
                if ($("#"+rs_trxname(recid)).val() != "") {
                    $("#"+trx_logarea(recid)).append( "<b>In Elaborazione</b>" );
                }
        	}

          	if (key == "error") {
        		$("#"+trx_logarea( recid )).append( "Error:" + val +"<br>"  );
		    }
    	}); // end of each
    }); // end of request.done
}

/*
 *
 * 	AJAX REQUEST
 *
 */
function RecAjax(apipath, dataString ) {

   	var srv = srvaddr + apipath ;

    var request = $.ajax({
        type: "POST",
		cache: false,
        url: srv,
        data: dataString,
        dataType: "json"
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error("The following error occured: "+ jqXHR.status +"-"+ textStatus + "-" + errorThrown );
        if (jqXHR.status == 0 && jqXHR.readyState === 4)
		{
			alert("Errore di connessione, impossibile inviare i dati al server "+ srv);
		} else {
    	    alert("Error: "+jqXHR.status +"\nTextStatus: "+ textStatus + "\n Ready State "+jqXHR.readyState+"\n" + errorThrown );
		}
	});

    return request;
}

/*
 * 	GetNow (data parser)
 */
function getnow()
{
    var myDate = new Date()
    var displayDate = myDate.getFullYear() + '/' + (myDate.getMonth()+1) + '/' + myDate.getDate();
    displayDate = displayDate +' '+ myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds();
	return displayDate;
}

/*
FUNCTION: CHANGE STATE (gui)
*/
function ChangeState(recid, from, to) {

  console.log("ChangeState: " + from + " --> " + to );

  $("#"+from).css("display", "none");
  $("#"+to).css("display", "inline");

  // take the date
  var displayDate = getnow();

  if ( from == trx_startbut(recid) ) {
    $("#"+rs_inputstart(recid)).val( displayDate );

    console.log("ChangeState: set "+rs_inputstart(recid)+ " to "+ displayDate )
  }

  if ( from == trx_stopbut(recid) ) {
    $("#"+rs_inputend(recid)).val( displayDate );
    console.log("ChangeState: set '"+rs_inputend(recid)+ "' to "+ displayDate )
  }

  if ( from == trx_downbut(recid) ) {
	$("input[type=submit]").attr("disabled", "disabled");
    console.log("ChangeState: set '"+rs_inputend(recid)+ "' to "+ displayDate );
  }
} // End function ChangeState