diff --git a/src/client/components/Status.tsx b/src/client/components/Status.tsx index c93395b..421f510 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 ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
data + {entries.length - statusData.ignoredEntries}({statusData.ignoredEntries}) +
Ø upload + {statusData.uploadMean}s +
Ø speed + GPS: {statusData.speedGPSMean}km/h Calc: {statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean}km/h +
maxSpeed + {statusData.maxSpeed}km/h +
vertical + {statusData.verticalCalc[0]}km up, {statusData.verticalCalc[1]}km down +
Distance + {statusData.distance}km +
) } diff --git a/src/client/css/start.css b/src/client/css/start.css index 67b3530..6b3c25a 100644 --- a/src/client/css/start.css +++ b/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 { diff --git a/src/client/css/status.css b/src/client/css/status.css new file mode 100644 index 0000000..fae036d --- /dev/null +++ b/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; + } +} \ 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