1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import React from "react";
- function Tables({persons}) {
- function addEventlistener(name){
- return function(event){
- var personDiv = document.getElementById(name);
- var extend = personDiv.children[0];
- if (extend.style.display === "block") {
- extend.style.display = "none";
- } else {
- extend.style.display = "block";
- }
- }
- }
- const sortedpersons = persons.sort(function(a, b){return b.speed - a.speed});
-
- return (
- <div>
- <div id="online">
- {sortedpersons.filter(person => person.speed>0).map(person => {
- return (
- <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
- {person.name} ({person.speed} - {person.speed>0 ? "online" : "offline"})
- <div className='extend'>
- <img src='foto.png' alt={person.fullName}/>
- <p>{person.fullName}</p>
- <p>Geschwindigkeit: {person.speed}</p>
- <p>Status: {person.speed>0 ? "online" : "offline"}</p>
- </div>
- </div>
- );
- })}
- </div>
- <div id="offline">
- {sortedpersons.filter(person => person.speed<1).map(person => {
- return (
- <div key={person.name} className="person" id={person.name} data-status={person.speed>0 ? "online" : "offline"} onClick={addEventlistener(person.name)}>
- {person.name} ({person.speed>0 ? "online" : "offline"})
- <div className='extend'>
- <img src='foto.png' alt={person.fullName}/>
- <p>{person.fullName}</p>
- <p>Status: {person.speed>0 ? "online" : "offline"}</p>
- </div>
- </div>
- );
- })}
- </div>
-
-
- </div>
- );
- }
- export default Tables;
|