|
|
@@ -3,13 +3,13 @@
|
|
|
<head>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<style>
|
|
|
-#persons{
|
|
|
+#wrapper{
|
|
|
width: 80%;
|
|
|
max-height: 80vh;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.person {
|
|
|
- background-color: #eee;
|
|
|
+ background-color: #ddd;
|
|
|
color: #444;
|
|
|
cursor: pointer;
|
|
|
padding: 18px;
|
|
|
@@ -21,8 +21,12 @@
|
|
|
transition: 0.4s;
|
|
|
}
|
|
|
|
|
|
-.person:hover {
|
|
|
- background-color: #ccc;
|
|
|
+#offline .person{
|
|
|
+ background-color: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+#offline .person:hover, #online .person:hover {
|
|
|
+ background-color: #bbb;
|
|
|
}
|
|
|
|
|
|
.extend {
|
|
|
@@ -46,63 +50,46 @@ img{
|
|
|
|
|
|
<h2>Tabelle</h2>
|
|
|
|
|
|
-
|
|
|
-<div id="persons">
|
|
|
- <div class="person">
|
|
|
- Martin
|
|
|
- <div class="extend">
|
|
|
- <img src="foto.png"/>
|
|
|
- <p>Martin Venzl</p>
|
|
|
- <p>Geschwindigkeit: </p>
|
|
|
- <p>Online seit: </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="person">
|
|
|
- Simon
|
|
|
- <div class="extend">
|
|
|
- <img src="foto.png"/>
|
|
|
- <p>Simon Ellinger</p>
|
|
|
- <p>Geschwindigkeit: </p>
|
|
|
- <p>Online seit: </p>
|
|
|
- </div>
|
|
|
+<div id="wrapper">
|
|
|
+ <div id="online">
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="person">
|
|
|
- Lukas
|
|
|
- <div class="extend">
|
|
|
- <img src="foto.png"/>
|
|
|
- <p>Lukas Wagner</p>
|
|
|
- <p>Geschwindigkeit: </p>
|
|
|
- <p>Online seit: </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="person">
|
|
|
- Bernie
|
|
|
- <div class="extend">
|
|
|
- <img src="foto.png"/>
|
|
|
- <p>Bernadette Hammerle</p>
|
|
|
- <p>Geschwindigkeit: </p>
|
|
|
- <p>Online seit: </p>
|
|
|
- </div>
|
|
|
+ <p></p>
|
|
|
+ <div id="offline">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
-<button onclick="sortDivs()">Reverse</button>
|
|
|
+<button onclick="sortDivs()">Sort</button>
|
|
|
+<button onclick="changeStatus()">Status</button>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-var person = document.getElementsByClassName("person");
|
|
|
-var i;
|
|
|
-
|
|
|
-for (i = 0; i < person.length; i++) {
|
|
|
- person[i].addEventListener("click", function(event) {
|
|
|
+//TODO: external script
|
|
|
+
|
|
|
+// global array of objects
|
|
|
+var persons = [
|
|
|
+ {name: "Martin", fullName: "Martin Venzl", status: "online", speed: 2},
|
|
|
+ {name: "Simon", fullName: "Simon Ellinger", status: "online", speed: 4},
|
|
|
+ {name: "Lukas", fullName: "Lukas Wagner", status: "online", speed: 1},
|
|
|
+ {name: "Bernie", fullName: "Bernadette Hammerle", status: "online", speed: 3},
|
|
|
+
|
|
|
+ {name: "tester1", fullName: "Testperson 1", status: "online", speed: 0},
|
|
|
+ {name: "tester2", fullName: "Testperson 2", status: "offline", speed: 6}
|
|
|
+];
|
|
|
+
|
|
|
+// create div for every person in persons array
|
|
|
+function createDivs(){
|
|
|
+ for (i=0; i<persons.length; i++) {
|
|
|
+ div = document.createElement('div');
|
|
|
+ div.className = "person";
|
|
|
+ div.id = persons[i].name;
|
|
|
+ div.setAttribute("data-status", persons[i].status);
|
|
|
+ pushPersonToDiv(div);
|
|
|
+ updateDivContent(persons[i]);
|
|
|
+
|
|
|
+ // add event listener to extend every person div
|
|
|
+ div.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";
|
|
|
@@ -110,24 +97,99 @@ for (i = 0; i < person.length; i++) {
|
|
|
extend.style.display = "block";
|
|
|
}
|
|
|
});
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-function sortDivs(){
|
|
|
+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
|
|
|
+// TODO: only execute if something has changed
|
|
|
+function updateDivContent(person){
|
|
|
+ var id = person.name;
|
|
|
+ var div = document.getElementById(id);
|
|
|
+ div.dataset.status = person.status;
|
|
|
+ if (person.status=="online") {
|
|
|
+ div.innerHTML = person.name +
|
|
|
+ " (" + person.speed + " - " + person.status + ")" +
|
|
|
+ "<div class=\'extend\'>" +
|
|
|
+ "<img src=\'foto.png\'/>" +
|
|
|
+ "<p>" + person.fullName + "</p>" +
|
|
|
+ "<p>Geschwindigkeit: " + person.speed + "</p>" +
|
|
|
+ "<p>Status: " + person.status + "</p>" +
|
|
|
+ "</div>";
|
|
|
+ }else{
|
|
|
+ div.innerHTML = person.name +
|
|
|
+ " (" + person.status + ")" +
|
|
|
+ "<div class=\'extend\'>" +
|
|
|
+ "<img src=\'foto.png\'/>" +
|
|
|
+ "<p>" + person.fullName + "</p>" +
|
|
|
+ "<p>Geschwindigkeit: " + person.speed + "</p>" +
|
|
|
+ "<p>Status: " + person.status + "</p>" +
|
|
|
+ "</div>";
|
|
|
+ }
|
|
|
+
|
|
|
+ pushPersonToDiv(div);
|
|
|
+}
|
|
|
+
|
|
|
+// convert nodes to array
|
|
|
+function getPersonArray(){
|
|
|
var nodes = document.getElementsByClassName("person");
|
|
|
- var j;
|
|
|
var personArray = [];
|
|
|
- for (j=0; j<nodes.length; j++) {
|
|
|
+ for (var j=0; j<nodes.length; j++) {
|
|
|
personArray.push(nodes[j]);
|
|
|
}
|
|
|
-
|
|
|
- personArray.reverse();
|
|
|
+ return personArray;
|
|
|
+}
|
|
|
|
|
|
- var i;
|
|
|
- for (i=0; i<personArray.length; i++) {
|
|
|
- document.getElementById("persons").appendChild(personArray[i]);
|
|
|
+// put every person in the right div (online or offline)
|
|
|
+function pushPersonToDiv(personDiv){
|
|
|
+ if (personDiv.dataset.status=="online"){
|
|
|
+ document.getElementById("online").appendChild(personDiv);
|
|
|
+ }else{
|
|
|
+ document.getElementById("offline").appendChild(personDiv);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// change the status from every person
|
|
|
+// TODO: check if status changed in intervall
|
|
|
+function changeStatus(){
|
|
|
+ for (var i=0; i<persons.length; i++) {
|
|
|
+ if (persons[i].status=="online"){
|
|
|
+ persons[i].status = "offline";
|
|
|
+ updateDivContent(persons[i]);
|
|
|
+ }else{
|
|
|
+ persons[i].status = "online";
|
|
|
+ updateDivContent(persons[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// comparing the speed
|
|
|
+// TODO: get speed from ?
|
|
|
+function sortDivs(){
|
|
|
+ persons.sort(function(a, b){return b.speed - a.speed});
|
|
|
+ persons.forEach(updateDivContent);
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
</body>
|
