1
Fork 0
mirror of https://github.com/Steffo99/registro-fermi.git synced 2024-11-22 16:14:27 +00:00
registro-steffo/web/addmarks.htm
Stefano Pigozzi 728c61aee1 Nuovi commenti in tutto il codice (#2)
* Aggiunti commenti alla pagina di login

* Aggiunti commenti alla pagina della visualizzazione voti

* Aggiunti commenti alla dashboard del professore

* Aggiunti commenti alla pagina di aggiunta voti
2016-09-15 20:17:50 +02:00

295 lines
10 KiB
HTML

<html>
<!--Copyright © 2016 Stefano Pigozzi, Emiliano Maccaferri
Released under the GPL v3 license-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/style/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="/lib/cookie.js"></script>
<script>
var classData;
var sessionid = Cookies.get("sessionid");
var rank = Cookies.get("rank");
var selectedclass = Cookies.get("selectedclass");
//Visualizza un errore in una riga.
function displayFieldError(formgroup, str)
{
formgroup.find(".help-block").text(str);
formgroup.find("input").addClass("has-error");
}
//Rimuovi l'errore da una riga.
function clearFieldError(formgroup)
{
formgroup.find(".help-block").text("");
formgroup.find("input").removeClass("has-error");
}
//Visualizza un errore su tutta la pagina.
function displayFullPageError(str)
{
$("#error").text(str)
$("#error").removeClass("hidden");
$("#data").addClass("hidden");
}
//Converti una data in Unix Epoch
function toEpoch(datestr)
{
var date = new Date(datestr);
var epoch = date.getTime();
return epoch;
}
//Controlla se una riga ha degli errori
function checkForErrors()
{
var rowId = $(this).parents("tr").attr("id")
var thisInput = $("#" + rowId + " input")
var thisStatus = $("#" + rowId + " .status")
var thisStatusText = $("#" + rowId + " .status-text")
var thisStatusIcon = $("#" + rowId + " .status-icon")
thisInput.attr("class", "")
thisStatus.attr("class", "status")
thisStatusText.attr("class", "status-text")
thisStatusText.text("Elaborazione in corso...")
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-cog")
insertedMark = thisInput.val()
if(insertedMark == "")
{
thisStatusText.text("Nessun voto inserito.")
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-ban-circle")
}
else if(!$.isNumeric(insertedMark))
{
thisInput.addClass("has-error")
thisStatus.addClass("text-error")
thisStatusText.text("Il voto inserito non è un numero.")
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-remove")
}
else if(insertedMark < 2 || insertedMark > 10)
{
thisInput.addClass("has-error")
thisStatus.addClass("text-error")
thisStatusText.text("Il voto inserito non è compreso tra 2 e 10.")
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-remove")
}
else
{
thisInput.addClass("has-data")
thisStatus.addClass("text-data")
thisStatusText.text("Voto pronto per essere inserito.")
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-ok-sign")
}
}
//Crea la tabella di tutti gli alunni della classe e i campi in cui inserire i voti
function drawTable(list)
{
for(var i = 0; i < list.length; i++)
{
$("#alunni tbody").append("<tr id=\"alunno-" + list[i].username + "\"></tr>");
$("#alunno-" + list[i].username).append("<td><div class=\"name\">" + list[i].lastname + " " + list[i].firstname + "</div><div class=\"username\">" + list[i].username + "</div></td>");
$("#alunno-" + list[i].username).append("<td><input placeholder=\"Vuoto\" type=\"text\"></td>");
$("#alunno-" + list[i].username).append("<td class=\"status\"><span class=\"status-icon glyphicon glyphicon-ban-circle\"></span> <span class=\"status-text\">Nessun voto inserito.</span></td>");
$("#alunno-" + list[i].username + " input").keyup(checkForErrors);
};
}
//Ricevi dal server i dati di una classe.
function getClassData()
{
if(sessionid == undefined)
{
displayFullPageError("Non hai eseguito l'accesso. Torna alla pagina di login e riprova.");
Cookies.set("sessionid", "");
}
else if(rank !== "prof")
{
displayFullPageError("Non hai i privilegi richiesti per aggiungere voti. Esegui l'accesso come insegnante e riprova.");
}
else if(selectedclass == undefined)
{
displayFullPageError("Non hai selezionato nessuna classe! Torna alla dashboard e riprova.");
}
else
{
$("#classname").text(selectedclass);
$.post("https://api.emilianomaccaferri.me/getClassData", {
"class": selectedclass
}, function(data)
{
if(data["success"])
{
classData = data["list"];
drawTable(classData);
}
else
{
//Sì, faccio il controllo due volte.
if(data.error === "invalid_sessionid")
{
displayFullPageError("Non hai eseguito l'accesso. Torna alla pagina di login e riprova.");
Cookies.set("sessionid", "");
}
else if(data.error === "not_authorized")
{
displayFullPageError("Non hai i privilegi richiesti per aggiungere voti. Esegui l'accesso come insegnante e riprova.");
}
else
{
displayFullPageError("Qualcosa è andato storto! Prova a ricaricare la pagina o contatta un amministratore.")
}
}
}, "json");
}
}
function sendMarks()
{
if($("#input-subject").val() === "")
{
displayFieldError($("#form-subject"), "Questo campo non può essere lasciato vuoto.")
}
else if($("#input-date").val() === "")
{
displayFieldError($("#form-date"), "Questo campo non può essere lasciato vuoto.")
}
/*
Se description viene mandato vuoto non succede niente, vero? VERO? Altrimenti, togli il commento da qua.
else if($("#input-description").val() === "")
{
displayFieldError($("#form-description"), "Questo campo non può essere lasciato vuoto.")
}
*/
else if(!($("#input-term").val() === "I" || $("#input-term").val() === "II"))
{
displayFieldError($("#form-subject"), "Questo campo accetta come valori solo I e II.")
}
for(var i = 0; i < classData.length; i++)
{
var rowId = "alunno-" + classData[i].username;
var thisInput = $("#" + rowId + " input");
var thisStatus = $("#" + rowId + " .status");
var thisStatusText = $("#" + rowId + " .status-text");
var thisStatusIcon = $("#" + rowId + " .status-icon");
args = {
'sessionid': sessionid,
'username': classData[i].username,
'subject': $("#input-subject").val(),
'mark': $("#alunno-" + classData[i].username + " input").val(),
'date': toEpoch($("#input-date").val()),
'description': $("#input-description").val(),
'term': $("#input-term").val()
};
if(args.mark !== "")
{
thisInput.attr("class", "has-data");
thisStatus.attr("class", "status has-data");
thisStatusText.attr("class", "status-text");
thisStatusText.text("Invio in corso...");
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-cog loading");
$.post("https://api.emilianomaccaferri.me/addMark", args, function(data, rowId)
{
var thisInput = $("#" + rowId + " input");
var thisStatus = $("#" + rowId + " .status");
var thisStatusText = $("#" + rowId + " .status-text");
var thisStatusIcon = $("#" + rowId + " .status-icon");
if(data.success)
{
thisInput.attr("class", "has-finished");
thisStatus.attr("class", "status has-finished");
thisStatusText.text("Voto inserito correttamente!");
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-ok-sign");
}
else
{
thisInput.attr("class", "has-error");
thisStatus.attr("class", "status has-error");
thisStatusText.text(data.error);
thisStatusIcon.attr("class", "status-icon glyphicon glyphicon-remove");
console.log(data.error);
}
});
}
};
}
function init()
{
getClassData();
$("#btn-send").click(sendMarks);
}
window.onload = init;
</script>
</head>
<body>
<div class="container">
<h1>
Aggiungi voti a una classe intera
</h1>
<div class="text-error hidden" id="error"></div>
<div id="data" class="form-horizontal">
<h2>
Classe <span id="classname"></span>
</h2>
<div class="form-group" id="form-subject">
<label for="input-subject" class="col-sm-2">Materia</label>
<div class="col-sm-10">
<input type="text" id="input-subject" placeholder="Materia">
<span id="help-subject" class="help-block"></span>
</div>
</div>
<div class="form-group" id="form-date">
<label for="input-date" class="col-sm-2">Data</label>
<div class="col-sm-10">
<input type="date" id="input-date" placeholder="aaaa-mm-gg" min="2016-06-01" max="2017-05-31">
<span id="help-date" class="help-block"></span>
</div>
</div>
<div class="form-group" id="form-description">
<label for="input-description" class="col-sm-2">Descrizione</label>
<div class="col-sm-10">
<input type="text" id="input-description" placeholder="Descrizione">
<span id="help-description" class="help-block"></span>
</div>
</div>
<div class="form-group" id="form-term">
<label for="input-term" class="col-sm-2">Quadrimestre</label>
<div class="col-sm-10">
<input type="text" id="input-term" placeholder="1">
<span id="help-term" class="help-block"></span>
</div>
</div>
<table id="alunni" class="table table-responsive">
<thead>
<tr>
<th>Alunno</th>
<th>Voto</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="submit" id="btn-send" class="btn">Invia</button>
</div>
</div>
</body>
</html>