[Task] #77, status design

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" title="ignored">({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>
+					<span>GPS: {statusData.speedGPSMean}km/h</span> <span>Calc: {statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean}km/h</span>
+				</td>
+			</tr>
+
+			<tr>
+				<td><BoltIcon /></td>
+				<th>maxSpeed</th>
+				<td>
+					<span>{statusData.maxSpeed}km/h</span>
+				</td>
+			</tr>
+
+			<tr>
+				<td><ShowChartIcon /></td>
+				<th>vertical</th>
+				<td>
+					<span>{statusData.verticalCalc[0]}km up</span>,  <span>{statusData.verticalCalc[1]}km down</span>
+				</td>
+			</tr>
+
+			<tr>
+				<td><EastIcon /></td>
+				<th>Distance</th>
+				<td>
+					<span>{statusData.distance}km</span>
+				</td>
+			</tr>
+		</table>
 	)
 }
 

src/client/css/start.css

@@ -19,7 +19,7 @@
 	/* grid layout */
 	height: 100%;
 	display: grid;
-	grid-template-columns: 1fr 40vmin;
+	grid-template-columns: 1fr minmax(18.5rem, 40vmin);
 	grid-template-rows: minmax(3em, auto) 1fr 1fr 1fr minmax(3em, auto);
 
 	.grid-item {

src/client/css/status.css

@@ -0,0 +1,56 @@
+.status {
+	container-type: inline-size;
+}
+
+
+.statusTable {
+	font-size: 1.4rem;
+	padding: 0.7rem 0.2em 0.2em 1em;
+	height: 100%;
+
+	th {
+		text-align: left;
+		padding: 0 1rem;
+	}
+
+	td {
+		font-stretch: 120%;
+		font-weight: 350;
+		font-style: oblique 10deg;
+		letter-spacing: 0.0125em;
+	}
+
+	.strike {
+		font-style: normal;
+		position: relative;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 40%;
+			left: 60%;
+			transform: translate(-50%, -50%);
+			border-top: 1px solid;
+			width: 100%;
+		}
+	}
+
+	span {
+		white-space: nowrap;
+	}
+}
+
+@container (max-width: 30rem) {
+	.statusTable {
+		padding: 0.5rem 0.2rem;
+		font-size: 1.3rem;
+	}
+
+	th {
+		display: none;
+	}
+
+	td {
+		padding-inline: 0.2rem;
+	}
+}