|
@@ -4,7 +4,7 @@
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
<style>
|
|
#wrapper{
|
|
#wrapper{
|
|
- width: 80%;
|
|
|
|
|
|
+ width: 30%;
|
|
max-height: 80vh;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
@@ -36,7 +36,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
img{
|
|
img{
|
|
- width: 120px;
|
|
|
|
|
|
+ width: 90px;
|
|
float: left;
|
|
float: left;
|
|
margin-right: 20px;
|
|
margin-right: 20px;
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
@@ -78,13 +78,13 @@ var persons = [
|
|
|
|
|
|
// create div for every person in persons array
|
|
// create div for every person in persons array
|
|
function createDivs(){
|
|
function createDivs(){
|
|
- for (i=0; i<persons.length; i++) {
|
|
|
|
|
|
+ for (person of persons) {
|
|
div = document.createElement('div');
|
|
div = document.createElement('div');
|
|
div.className = "person";
|
|
div.className = "person";
|
|
- div.id = persons[i].name;
|
|
|
|
- div.setAttribute("data-status", persons[i].status);
|
|
|
|
|
|
+ div.id = person.name;
|
|
|
|
+ div.setAttribute("data-status", person.status);
|
|
pushPersonToDiv(div);
|
|
pushPersonToDiv(div);
|
|
- updateDivContent(persons[i]);
|
|
|
|
|
|
+ updateDivContent(person);
|
|
|
|
|
|
// add event listener to extend every person div
|
|
// add event listener to extend every person div
|
|
div.addEventListener("click", function(event) {
|
|
div.addEventListener("click", function(event) {
|
|
@@ -102,24 +102,6 @@ function createDivs(){
|
|
|
|
|
|
createDivs();
|
|
createDivs();
|
|
|
|
|
|
-// add event listener to every person
|
|
|
|
-// TODO: combine with create ?
|
|
|
|
-//var person = document.getElementsByClassName("person");
|
|
|
|
-//var i;
|
|
|
|
-//
|
|
|
|
-//for (i = 0; i < person.length; i++) {
|
|
|
|
-// person[i].addEventListener("click", function(event) {
|
|
|
|
-// this.classList.toggle("active");
|
|
|
|
-// var targetElement = event.target || event.srcElement;
|
|
|
|
-// /*var panel = this.nextElementSibling;*/
|
|
|
|
-// var extend = targetElement.children[0];
|
|
|
|
-// if (extend.style.display === "block") {
|
|
|
|
-// extend.style.display = "none";
|
|
|
|
-// } else {
|
|
|
|
-// extend.style.display = "block";
|
|
|
|
-// }
|
|
|
|
-// });
|
|
|
|
-//}
|
|
|
|
|
|
|
|
// update the content inside the div of one person
|
|
// update the content inside the div of one person
|
|
// TODO: only execute if something has changed
|
|
// TODO: only execute if something has changed
|
|
@@ -146,19 +128,18 @@ function updateDivContent(person){
|
|
"<p>Status: " + person.status + "</p>" +
|
|
"<p>Status: " + person.status + "</p>" +
|
|
"</div>";
|
|
"</div>";
|
|
}
|
|
}
|
|
-
|
|
|
|
pushPersonToDiv(div);
|
|
pushPersonToDiv(div);
|
|
}
|
|
}
|
|
|
|
|
|
// convert nodes to array
|
|
// convert nodes to array
|
|
-function getPersonArray(){
|
|
|
|
- var nodes = document.getElementsByClassName("person");
|
|
|
|
- var personArray = [];
|
|
|
|
- for (var j=0; j<nodes.length; j++) {
|
|
|
|
- personArray.push(nodes[j]);
|
|
|
|
- }
|
|
|
|
- return personArray;
|
|
|
|
-}
|
|
|
|
|
|
+//function getPersonArray(){
|
|
|
|
+// var nodes = document.getElementsByClassName("person");
|
|
|
|
+// var personArray = [];
|
|
|
|
+// for (node of nodes) {
|
|
|
|
+// personArray.push(node);
|
|
|
|
+// }
|
|
|
|
+// return personArray;
|
|
|
|
+//}
|
|
|
|
|
|
// put every person in the right div (online or offline)
|
|
// put every person in the right div (online or offline)
|
|
function pushPersonToDiv(personDiv){
|
|
function pushPersonToDiv(personDiv){
|
|
@@ -172,13 +153,13 @@ function pushPersonToDiv(personDiv){
|
|
// change the status from every person
|
|
// change the status from every person
|
|
// TODO: check if status changed in intervall
|
|
// TODO: check if status changed in intervall
|
|
function changeStatus(){
|
|
function changeStatus(){
|
|
- for (var i=0; i<persons.length; i++) {
|
|
|
|
- if (persons[i].status=="online"){
|
|
|
|
- persons[i].status = "offline";
|
|
|
|
- updateDivContent(persons[i]);
|
|
|
|
|
|
+ for (person of persons) {
|
|
|
|
+ if (person.status=="online"){
|
|
|
|
+ person.status = "offline";
|
|
|
|
+ updateDivContent(person);
|
|
}else{
|
|
}else{
|
|
- persons[i].status = "online";
|
|
|
|
- updateDivContent(persons[i]);
|
|
|
|
|
|
+ person.status = "online";
|
|
|
|
+ updateDivContent(person);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|