From 1726daf4c03604334f3efb5c8756beaee18de51d Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Tue, 27 Aug 2024 15:37:37 +0200
Subject: [PATCH] [Task] #77, status design

---
 src/client/components/Status.tsx | 74 ++++++++++++++++++++++++++------
 src/client/css/status.css        | 19 ++++++++
 src/client/css/status.module.css |  0
 3 files changed, 80 insertions(+), 13 deletions(-)
 create mode 100644 src/client/css/status.css
 delete mode 100644 src/client/css/status.module.css

diff --git a/src/client/components/Status.tsx b/src/client/components/Status.tsx
index c93395b..48fd182 100644
--- a/src/client/components/Status.tsx
+++ b/src/client/components/Status.tsx
@@ -1,6 +1,13 @@
 import React from 'react'
 import { getMaxSpeed } from "../helper/maxSpeed";
-//import * as css from "../css/status.module.css";
+import "../css/status.css";
+import StorageIcon from '@mui/icons-material/Storage';
+import NetworkCheckIcon from '@mui/icons-material/NetworkCheck';
+import SpeedIcon from '@mui/icons-material/Speed';
+import BoltIcon from '@mui/icons-material/Bolt';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import EastIcon from '@mui/icons-material/East';
+
 function getStatusData(entries) {
 	const cleanEntries = entries.filter((entry: Models.IEntry) => !entry.ignore);
 
@@ -44,15 +51,15 @@ function getStatusData(entries) {
 			}
 		}
 
-		return [up, down];
+		return [(up / 1000).toFixed(2), (down / 1000).toFixed(2)];
 	}
 
 	function getDistance() {
-		return cleanEntries.reduce((accumulatorValue:number, entry) => {
+		return cleanEntries.reduce((accumulatorValue: number, entry) => {
 			console.log(accumulatorValue);
-			if (!entry.distance ) { return accumulatorValue }			
+			if (!entry.distance) { return accumulatorValue }
 			return accumulatorValue + parseFloat(entry.distance.horizontal);
-		}, 0) / 1000; 
+		}, 0) / 1000;
 	}
 
 	const ignoredEntries = entries.length - cleanEntries.length;
@@ -82,14 +89,55 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	//const lastEntry = entries.at(-1);
 
 	return (
-		<ul>
-			<li>datapoints: {entries.length - statusData.ignoredEntries}<i>({statusData.ignoredEntries})</i></li>
-			<li>Ø upload: {statusData.uploadMean}s </li>
-			<li>Ø speed: GPS: {statusData.speedGPSMean}km/h Calc: {statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean}km/h </li>
-			<li>maxSpeed: {statusData.maxSpeed}</li>
-			<li>vertcial: {statusData.verticalCalc[0]} up,  {statusData.verticalCalc[1]} down</li>
-			<li>distance {statusData.distance}km</li>
-		</ul>
+		<table className="statusTable">
+			<tr>
+				<td><StorageIcon /></td>
+				<th>data</th>
+				<td>
+					{entries.length - statusData.ignoredEntries}<i className="strike">({statusData.ignoredEntries})</i>
+				</td>
+			</tr>
+
+			<tr>
+				<td><NetworkCheckIcon /></td>
+				<th>Ø upload</th>
+				<td>
+					{statusData.uploadMean}s
+				</td>
+			</tr>
+
+			<tr>
+				<td><SpeedIcon /></td>
+				<th>Ø speed</th>
+				<td>
+					GPS: {statusData.speedGPSMean}km/h Calc:&#160;{statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean}km/h
+				</td>
+			</tr>
+
+			<tr>
+				<td><BoltIcon /></td>
+				<th>maxSpeed</th>
+				<td>
+					{statusData.maxSpeed}km/h
+				</td>
+			</tr>
+
+			<tr>
+				<td><ShowChartIcon /></td>
+				<th>vertical</th>
+				<td>
+					{statusData.verticalCalc[0]}km up,  {statusData.verticalCalc[1]}km:&#160;down
+				</td>
+			</tr>
+
+			<tr>
+				<td><EastIcon /></td>
+				<th>Distance</th>
+				<td>
+					{statusData.distance}km	
+				</td>
+			</tr>
+		</table>
 	)
 }
 
diff --git a/src/client/css/status.css b/src/client/css/status.css
new file mode 100644
index 0000000..7aa0cde
--- /dev/null
+++ b/src/client/css/status.css
@@ -0,0 +1,19 @@
+.statusTable {
+	font-size: 1.4rem;
+	padding: 0.7rem 0.2em 0.2em 1em;
+	height: 100%;
+
+	tr {
+
+	}
+
+	th {
+		text-align: left;
+		padding: 0 1rem;
+	}
+
+	&.strike {
+		text-decoration: line-through;
+		font-style: normal;
+	}
+}
\ No newline at end of file
diff --git a/src/client/css/status.module.css b/src/client/css/status.module.css
deleted file mode 100644
index e69de29..0000000