12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- import React from "react";
- function Tables({persons}) {
- function addEventlistener(name){
- return function(event){
- var personDiv = document.getElementById(name);
- var extend = personDiv.lastChild;
- if (extend.style.display === "block") {
- extend.style.display = "none";
- } else {
- extend.style.display = "block";
- }
- }
- }
-
- var currentDate = new Date()
- const sortedpersons = persons.sort(function(a, b){return b.longitude - a.longitude});
-
- return (
- <div>
- <div className="header">
- <p>RACE</p>
- <p>{currentDate.getDate()}.{currentDate.getMonth() + 1}.{currentDate.getFullYear()}</p>
- </div>
- <div id="online">
- {sortedpersons.filter(person => person.online).map((person, index) => {
- return (
- <div key={person.name} className="person" id={person.name} data-status={person.online ? "online" : "offline"} onClick={addEventlistener(person.name)}>
- {person.longitude}-{person.latitude}-
- <div className='rank'>{index + 1}</div>
- <div className='color' style={{backgroundColor: person.color}}> </div>
- {person.shortName}
-
- <div className='speed'>{person.speed}</div>
-
- <div className='extend'>
- <img src='foto.png' alt={person.fullName}/>
- <p>{person.fullName}</p>
- <p>Geschwindigkeit: {person.speed}</p>
- <p>Status: {person.online ? "online" : "offline"}</p>
- </div>
- </div>
- );
- })}
- </div>
- <div id="offline">
- {sortedpersons.filter(person => !person.online).map(person => {
- return (
- <div key={person.name} className="person" id={person.name} data-status={person.online ? "online" : "offline"} onClick={addEventlistener(person.name)}>
- <div className='color' style={{backgroundColor: person.color}}> </div>
- {person.shortName}
- <div className='speed'>OUT</div>
- <div className='extend'>
- <img src='foto.png' alt={person.fullName}/>
- <p>{person.fullName}</p>
- <p>Status: {person.online ? "online" : "offline"}</p>
- </div>
- </div>
- );
- })}
- </div>
-
-
- </div>
- );
- }
- export default Tables;
|