|
|
@@ -0,0 +1,103 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+
|
|
|
+
|
|
|
+class Tables extends Component {
|
|
|
+ constructor(props){
|
|
|
+ super(props);
|
|
|
+
|
|
|
+ this.state = {
|
|
|
+ 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}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.sortDivs = this.sortDivs.bind(this)
|
|
|
+ }
|
|
|
+
|
|
|
+ // put every person in the right div (online or offline)
|
|
|
+ pushPersonToDiv(personDiv){
|
|
|
+ if (personDiv.dataset.status==="online"){
|
|
|
+ document.getElementById("online").appendChild(personDiv);
|
|
|
+ }else{
|
|
|
+ document.getElementById("offline").appendChild(personDiv);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // update the content inside the div of one person
|
|
|
+ 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>";
|
|
|
+ }
|
|
|
+ this.pushPersonToDiv(div);
|
|
|
+ }
|
|
|
+
|
|
|
+ // create div with event listener for every person in array
|
|
|
+ createDivs(person){
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.className = "person";
|
|
|
+ div.id = person.name;
|
|
|
+ div.setAttribute("data-status", person.status);
|
|
|
+
|
|
|
+ this.pushPersonToDiv(div);
|
|
|
+ this.updateDivContent(person);
|
|
|
+
|
|
|
+ // add event listener to extend every person div
|
|
|
+ div.addEventListener("click", function(event) {
|
|
|
+ this.classList.toggle("active");
|
|
|
+ var targetElement = event.target || event.srcElement;
|
|
|
+ var extend = targetElement.children[0];
|
|
|
+ if (extend.style.display === "block") {
|
|
|
+ extend.style.display = "none";
|
|
|
+ } else {
|
|
|
+ extend.style.display = "block";
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // comparing the speed
|
|
|
+ sortDivs(){
|
|
|
+ this.state.persons.sort(function(a, b){return b.speed - a.speed});
|
|
|
+ this.state.persons.map((person) => (this.updateDivContent(person)));
|
|
|
+ }
|
|
|
+
|
|
|
+ // render every person and a button in a wrapper
|
|
|
+ render(){
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {this.state.persons.map((person) => (
|
|
|
+ this.createDivs(person)
|
|
|
+ ))}
|
|
|
+ <button onClick={this.sortDivs}>Sort</button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Tables;
|
