<meta charset="UTF-8"> <html> <body> <script src="/socket.io.220.js"></script> <script src="socketName.js" type="text/javascript"></script> <script src="processing.js" type="text/javascript"></script> <style> .btn { background-color: DodgerBlue; border: none; color: white; font-size: 16px; cursor: pointer; border-radius: 10px; } .btn:hover { background-color: RoyalBlue; } #plusButton{ width:1.75vh; height:1.75vh; padding-bottom:0px; padding-left:0px; padding-top:0px; padding-right:0px; background:none; } #plusIMG{ width:1vh; height:1vh; } #processFile{ padding-bottom:0.5vh; padding-top:0.5vh; padding-left:1vh; padding-right:1vh; } #myHeader { position: fixed; padding: 10px 16px; background: rgb(255,143,0); color: #f1f1f1; width: 100%; left: 0px; top: 0px; height:7vh; } #headerTable { border: none; top:30%; position: absolute; } #logOutButton { width:12vh; height:6vh; border-radius: 5px; position:relative; top:-1vh; right:-1vh; visibility: hidden; } th{ text-align:center; font-size:2.3vh; padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; } td { font-size:1.9vh; padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; } div { font-size:1.9vh; } #eventsDiv{ position:absolute; left:47vw; width:49vw; top:10vh; background:rgb(200,255,200); border: 0.3vh solid black; padding-left:2vh; padding-right:2vh; } </style> <p> </p> <br><p> </p> <br><p> </p> <br> <div id='fileSelectionAndFilteringDiv'> <input type="file" id="fileUpload"/> <h1>Filtrera efter</h1> <table> <tr> <td>Elevs kontonamn &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td><input id="student"></input> </td> </tr> <td>Lärares kontonamn </td> <td><input id="teacher"></input> </td> <tr> <td>Rum</td> <td><select name="rooms" id="room"><option value=""></option><option value="Any">Any</option></select></td> </tr> <td>Lista</td> <td><select name="lists" id="list"><option value=""></option><option value="Any">Any</option><option value="examList">Exam list</option><option value="responseList">Response list</option><option value="helpList">Help list</option></select></td> <tr> <td>Steg</td> <td><input id="step" type = "number"></input> </td> </tr> <tr> <td>Event</td> <td><select name="events" id="event"><option value="">Any</option></select> </td> </tr> </table> <p> </p> <input type="button" id="processFile" value="kör" onclick="processFile()" class="btn"/> </div> <div id="infoDiv" style = "display:none"> <div id="eventsDiv"> <h2>Events:</h2> <div id = "logDiv"> </div> </div> <div id="statistikDiv"> <h2>Statistik:</h2> <div id = "statsDiv"> </div> </div> </div> <div class="header" id="myHeader"> <table id = "headerTable" style = "width: 99%; color: white"> <tr> <td style = "width: 50%"> <h2 id = "headerTitle">Online Whiteboard <i></i></h2> <td style = "width: 11%"> <button id = "logOutButton" class="btn" onclick = "logOut()"> Log out </button> </tr> </table> </div> <script type="text/javascript"> //PROBLEMS: //when adding yourself to help list the step isnt recorded //sometimes when an alert is sent the ??? stays yellow even though the alert arrives //alertSuccess doesn't get logged //event:'pushToList',student, room, star, time, step, list, seqNo //event:'availabilityChangeToFalse', time, seqNo //event:'availabilityChangeToTrue', time, seqNo //event:'alertStored',student, teacher, room, star, time, step, list, seqNo, alertId //event:'alertSent',student, teacher, time, seqNo, alertId //event:'alertSuccess',student, teacher, time, seqNo, alertId //event:'markAsDoneWithExam',student, teacher, room, star, time, alerted, step, seqNo //event:'markAsDoneWithResponse',student, teacher, room, star, time, alerted, step, seqNo //event:'removeSelfFromList',student, room, time, alerted, available, step, list, seqNo //event:'removeStudentFromList',student, teacher, room, star, time, alerted, available, step, list, seqNo //event:'teacherConnect',teacher, time //event:'teacherDisconnect',teacher, time //event:'teacherJoinRoom',teacher, time, room //event:'teacherLeaveRoom',teacher, time, room //event:'teacherLogIn',teacher, time //event:'teacherLogOut',teacher, time //event:'teacherLockedList',teacher, time, room, list //event:'teacherUnlockedList',teacher, time, room, list //event:'teacherclearLists',teacher, time, room var arrayOfRooms = ['Engelska', 'Franska', 'Matematik', 'SO', 'Spanska', 'Svenska', 'Tyska']; var arrayOfEvents = ['pushToList', 'availabilityChangeToFalse', 'availabilityChangeToTrue', 'alertStored', 'alertSent', 'alertSuccess', 'markAsDoneWithExam', 'markAsDoneWithResponse', 'removeSelfFromList', 'removeStudentFromList', 'teacherConnect', 'teacherDisconnect', 'teacherJoinRoom',/*'teacherLeaveRoom','teacherLogIn','teacherLogOut',*/'teacherLockedList','teacherUnlockedList','teacherClearLists']; var logArray = []; updateRoomAndEventMultipleChoice(); function processFile(){ //var localLogArray = []; var reader = new FileReader(); reader.onload = function (e) { //console.log(e.target.result); var file = e.target.result; var processingArray = file.split('\n'); //var preJSONLogArray = []; for(var i =0; i < processingArray.length-1; i++){ var temp=JSON.parse(processingArray[i]); logArray.push(temp); /* preJSONLogArray.push(processingArray[i]); if(i==36){ console.log("origional:"); console.log(processingArray[i]); console.log(preJSONLogArray[36]); console.log("post-parse:"); console.log(JSON.parse(processingArray[i])); console.log(localLogArray[36]); console.log("temp:"); console.log(temp); console.log(""); console.log(""); console.log(""); }*/ } // for(var i =0; i < localLogArray.length; i++){ // logArray.push(localLogArray[i]); // } // logArray = localLogArray; console.log(file); //console.log(preJSONLogArray); console.log(logArray); logArray = filter(logArray); printList(logArray,"logDiv"); calculateAndPrintStats(logArray, "statsDiv"); } reader.readAsText(fileUpload.files[0]); document.getElementById('infoDiv').style.display = "block"; document.getElementById('processFile').value = 'kör igen'; } function filter(list){ var listArray2 = []; var studentSearchValue = document.getElementById("student").value; var teacherSearchValue = document.getElementById("teacher").value; var roomSearchValue = document.getElementById("room").value; var listSearchValue = document.getElementById("list").value; var stepSearchValue = document.getElementById("step").value; var eventSearchValue = document.getElementById("event").value; for(var i=0; i<list.length;i++){ var isValid = true; if(studentSearchValue != ""){ if((list[i].student != "")&&(list[i].student != undefined)){ if(list[i].student.indexOf(studentSearchValue) == -1){ isValid = false; } } else{ isValid = false; } } if(teacherSearchValue != ""){ if((list[i].teacher != "")&&(list[i].teacher != undefined)){ if(list[i].teacher.indexOf(teacherSearchValue) == -1){ isValid = false; } } else{ isValid = false; } } if(roomSearchValue != ""){ if((list[i].room != "")&&(list[i].room != undefined)){ if((list[i].room.indexOf(roomSearchValue) == -1) && (roomSearchValue != "Any")){ isValid = false; } } else{ isValid = false; } } if(listSearchValue != ""){ if((list[i].list != "")&&(list[i].list != undefined)){ if((list[i].list.indexOf(listSearchValue) == -1) && (listSearchValue != "Any")){ isValid = false; } } else{ isValid = false; } } if(stepSearchValue != ""){ if((list[i].step != "")&&(list[i].step != undefined)){ if(list[i].step.toString().indexOf(stepSearchValue) == -1){ isValid = false; } } else{ isValid = false; } } if(eventSearchValue != ""){ if((list[i].event != "")&&(list[i].event != undefined)){ if(list[i].event.toString().indexOf(eventSearchValue) == -1){ isValid = false; } } else{ isValid = false; } } if(isValid == true){ listArray2.push(list[i]); } } return listArray2; } function printList(list,divID){ var dvCSV = document.getElementById('logDiv'); dvCSV.innerHTML = ""; for(var i = 0; i < list.length; i++){ dvCSV.innerHTML = dvCSV.innerHTML + list[i].time + ": "; if(list[i].event == "pushToList"){ //dvCSV.innerHTML = dvCSV.innerHTML + "Elev <b>" + list[i].student + "</b> la till sig själva i <b>" + list[i].list + "</b> i rum <b>" + list[i].room + "</b>. Steg: <b>" + list[i].step + "</b>, stjärnmarkerade: <b>" + list[i].star + "</b>"; dvCSV.innerHTML = dvCSV.innerHTML + "student <b>" + list[i].student + "</b> added themselves to <b>" + list[i].list + "</b> in room <b>" + list[i].room + "</b>. Step: <b>" + list[i].step + "</b>, star: <b>" + list[i].star + "</b>"; } if(list[i].event == "availabilityChangeToFalse"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].room = logArray[j].room; list[i].list = logArray[j].list; } } } //dvCSV.innerHTML = dvCSV.innerHTML + "Elev <b>" + list[i].student + "</b> i rum <b>" + list[i].room + "</b> och lista <b>" + list[i].list + "</b> förklarade sig själva <b> icke tillgängliga </b>"; dvCSV.innerHTML = dvCSV.innerHTML + "student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b> declared themselves <b> unavailable </b>"; } if(list[i].event == "availabilityChangeToTrue"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].room = logArray[j].room; list[i].list = logArray[j].list; } } } //dvCSV.innerHTML = dvCSV.innerHTML + "Elev <b>" + list[i].student + "</b> i rum <b>" + list[i].room + "</b> och lista <b>" + list[i].list + "</b> förklarade sig själva <b> tillgängliga </b>"; dvCSV.innerHTML = dvCSV.innerHTML + "student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b> declared themselves <b> available </b>"; } if(list[i].event == "alertStored"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].room = logArray[j].room; list[i].list = logArray[j].list; } } } dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> tried to send alert to student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b>"; } if(list[i].event == "alertSent"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].room = logArray[j].room; list[i].list = logArray[j].list; } } } dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> sent alert to student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b>"; } if(list[i].event == "alertSuccess"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].room = logArray[j].room; list[i].list = logArray[j].list; } } } dvCSV.innerHTML = dvCSV.innerHTML + "student <b>" + list[i].student + "</b> received alert from teacher <b>" + list[i].teacher + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b>"; } if(list[i].event == "markAsDoneWithExam"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].list = logArray[j].list; } } } dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> marked student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b> as <b> done with exam </b>"; } if(list[i].event == "markAsDoneWithResponse"){ for(var j = 0; j < logArray.length; j++){ if(logArray[j].event == 'pushToList'){ if(logArray[j].seqNo == list[i].seqNo){ list[i].list = logArray[j].list; } } } dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> marked student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b> as <b> done with response </b>"; } if(list[i].event == "removeSelfFromList"){ dvCSV.innerHTML = dvCSV.innerHTML + "student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b> removed themselves</b>"; } if(list[i].event == "removeStudentFromList"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> removed student <b>" + list[i].student + "</b> in room <b>" + list[i].room + "</b> and list <b>" + list[i].list + "</b>"; } if(list[i].event == "teacherConnect"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> connected"; } if(list[i].event == "teacherDisconnect"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> disconnected"; } if(list[i].event == "teacherJoinRoom"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> joined room <b>" + list[i].room + "</b>"; } if(list[i].event == "teacherLeaveRoom"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> left room <b>" + list[i].room + "</b>"; } if(list[i].event == "teacherLogIn"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> logged in"; } if(list[i].event == "teacherLogOut"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> logged out"; } if(list[i].event == "teacherLockedList"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> locked list <b>" + list[i].list + "</b> in room <b>" + list[i].room + "</b>"; } if(list[i].event == "teacherUnlockedList"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> unlocked list <b>" + list[i].list + "</b> in room <b>" + list[i].room + "</b>"; } if(list[i].event == "teacherClearLists"){ dvCSV.innerHTML = dvCSV.innerHTML + "teacher <b>" + list[i].teacher + "</b> cleared all entries in room " + list[i].room; } dvCSV.innerHTML = dvCSV.innerHTML + "<br>"; } } function calculateAndPrintStats (list, statsDiv){ var studentSearchValue = document.getElementById("student").value; var teacherSearchValue = document.getElementById("teacher").value; var roomSearchValue = document.getElementById("room").value; var listSearchValue = document.getElementById("list").value; var stepSearchValue = document.getElementById("step").value; var eventSearchValue = document.getElementById("event").value; var statsArray = []; statsArray.push({name:"total hours of teacher time online", value:0, print: true}); statsArray.push({name:"portion of student time spent available", value:0, print: true}); var studentArray = []; var teacherArray = []; var entryArray = []; for(var listIndex = 0; listIndex < list.length; listIndex ++){ var event = goclone(list[listIndex]); event.indexInList = listIndex; console.log(logArray[listIndex]); console.log(event); if(event.student != ""){ //studentArray var studentExists = false; for (var studentIndex=0; studentIndex<studentArray.length; studentIndex ++){ if(studentArray[studentIndex].userName == event.student){ studentArray[studentIndex].events.push(event); studentExists = true; } } if(studentExists == false){ studentArray.push({userName: event.student, events: [event]}); } //entryArray if(event.event == "pushToList"){ //console.log(event); entryArray.push({events:[event],student:event.student, seqNo:event.seqNo}); } else{ for(var entryIndex = 0; entryIndex < entryArray.length; entryIndex ++){ if(entryArray[entryIndex].seqNo == event.seqNo){ entryArray[entryIndex].events.push(event); } } } } if(event.teacher != ""){ //teacherArray var teacherExists = false; for (var teacherIndex=0; teacherIndex<teacherArray.length; teacherIndex ++){ if(teacherArray[teacherIndex].userName == event.teacher){ teacherArray[teacherIndex].events.push(event); teacherExists = true; } } if(teacherExists == false){ teacherArray.push({userName: event.teacher, events: [event]}); } } } console.log(studentArray); console.log(teacherArray); console.log(entryArray); if (studentSearchValue != ""){ // } if (teacherSearchValue != ""){ //portion of school time spent online } else{ //portion of student time spent available } if (stepSearchValue != ""){ // } if (roomSearchValue != ""){ // } if (listSearchValue != ""){ // } //if (eventSearchValue != ""){ portion of alerts which succeed/fail/get stored, portion of alerts which get marked as done, number of students self-removing, number of teachers removing students} //number of events //events/min //rate of alerts } function writeStatistic (name, number){ } function updateRoomAndEventMultipleChoice (){ var roomMultipleChoice = document.getElementById("room"); for(var i=0; i<arrayOfRooms.length; i++){ var roomOption = document.createElement("option"); roomOption.setAttribute("value",arrayOfRooms[i]); roomOption.innerText = arrayOfRooms[i]; roomMultipleChoice.appendChild(roomOption); } var eventMultipleChoice = document.getElementById("event"); for(var i=0; i<arrayOfEvents.length; i++){ var eventOption = document.createElement("option"); eventOption.setAttribute("value",arrayOfEvents[i]); eventOption.innerText = arrayOfEvents[i]; eventMultipleChoice.appendChild(eventOption); } } function getElementsById(elementID){ var elementCollection = new Array(); var allElements = document.getElementsByTagName("*"); for(var i = 0; i < allElements.length; i++){ if(allElements[i].id == elementID){ elementCollection.push(allElements[i]); } } return elementCollection; } function showDivFromPlusButton(divID, plusButtonName){ var div = document.getElementById(divID); var plusButton = document.getElementByName(plusButtonName); if(div.style.display == "none"){ div.style.display = "block"; plusButton.src = "images/minus.png"; } else{ div.style.display = "none"; plusButton.src = "images/plus.png"; } } function goclone(source) { if (Object.prototype.toString.call(source) === '[object Array]') { var clone = []; for (var i=0; i<source.length; i++) { clone[i] = goclone(source[i]); } return clone; } else if (typeof(source)=="object") { var clone = {}; for (var prop in source) { if (source.hasOwnProperty(prop)) { clone[prop] = goclone(source[prop]); } } return clone; } else { return source; } } </script> </body> </html>