display tracker batery information (if known)

Website/src/app/components/dynlist.tsx

@@ -5,6 +5,7 @@ import { Vehicle } from "@/utils/api";
 import useSWR from "swr";
 import { coordinateFormatter } from "@/utils/helpers";
 import Link from "next/link";
+import TrackerCharge from "@/app/components/tracker";
 
 const fetcher = async ([url, track_id]: [url: string, track_id: number]) => {
 	const res = await fetch(`${url}/${track_id}`, { method: "get" });
@@ -54,11 +55,17 @@ export default function DynamicList({ server_vehicles, track_id, logged_in, trac
 				<thead>
 					<tr className={"my-2"}>
 						<th className={"mx-2 border-b-black dark:border-b-white border-b px-2"}>Name</th>
-						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>geog. Breite</th>
-						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>geog. Länge</th>
-						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>Richtung</th>
+						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>
+							geog. Breite
+						</th>
+						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>
+							geog. Länge
+						</th>
+						<th className={"mx-2 border-b-black dark:border-b-white hidden sm:table-cell border-b px-2"}>
+							Richtung
+						</th>
 						<th className={"mx-2 border-b-black dark:border-b-white border-b px-2"}>Batterieladung</th>
-						<th className={"mx-2 border-b-black dark:border-b-white border-b px-2"}>Auf Karte anzeigen</th>
+						<th className={"mx-2 border-b-black dark:border-b-white border-b px-2"}>Auf Karte zeigen</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -74,8 +81,14 @@ export default function DynamicList({ server_vehicles, track_id, logged_in, trac
 							<td className={"mx-2 px-2 hidden sm:table-cell text-center"}>
 								{v.heading ? coordinateFormatter.format(v.heading) : "unbekannt"}
 							</td>
-							<td className={"mx-2 px-2 text-center"}>{{}.toString()}</td>
-							<td className={"mx-2 px-2 text-center"}>
+							<td className={"px-2 text-center"}>
+								<div className={"max-w-[16rem] mx-auto"}>
+									{v.trackerIds.map(trackerId => (
+										<TrackerCharge key={trackerId} trackerId={trackerId} />
+									))}
+								</div>
+							</td>
+							<td className={"px-2 text-center"}>
 								<Link className="text-blue-600 visited:text-purple-700" href={`/map?focus=${v.id}`}>
 									Link
 								</Link>

Website/src/app/components/tracker.tsx

@@ -1,11 +1,29 @@
-import {getFetcher, TrackerIdRoute} from "@/utils/fetcher";
+import { getFetcher, TrackerIdRoute } from "@/utils/fetcher";
 import useSWR from "swr";
+import { batteryLevelFormatter } from "@/utils/helpers";
 
-export default function TrackerCharge({trackerId}: {trackerId: string}) {
+export default function TrackerCharge({ trackerId }: { trackerId: string }) {
+	const safeTrackerId = encodeURIComponent(trackerId);
+	const { data: tracker_data } = useSWR(`/webapi/tracker/read/${safeTrackerId}`, getFetcher<TrackerIdRoute>);
 
-    const safeTrackerId = encodeURIComponent(trackerId);
-    const {data: tracker_data} = useSWR(`/webapi/tracker/read/${safeTrackerId}`, getFetcher<TrackerIdRoute>)
-
-    return (<div>{tracker_data && <>{tracker_data.id}: {tracker_data.data ?? "unbekannt"} %</>}</div>)
-
-}
+	return (
+		<>
+			{tracker_data && (
+				<div className={"w-full flex flex-nowrap my-1 gap-1"}>
+					<div className={"group relative sm:grow shrink min-w-0 basis-32 text-left"}>
+						<div className={"truncate w-32 sm:w-full max-w-full min-w-0"}>{tracker_data.id}</div>
+						<div
+							className={
+								"opacity-0 group-hover:opacity-100 z-10 transition-opacity pointer-events-none absolute bg-gray-100 rounded py-2 px-3 top-5 w-max"
+							}>
+							{tracker_data.id}
+						</div>
+					</div>
+					<div className={"basis-10 text-right shrink-0"}>
+						{tracker_data.battery == undefined ? "?" : batteryLevelFormatter.format(tracker_data.battery)}
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

Website/src/app/list/page.tsx

@@ -25,9 +25,8 @@ export default async function Home() {
 				return [undefined, [], [], []];
 		  });
 
-	console.log("server vehicles", server_vehicles);
 	return (
-		<main className="container mx-auto max-w-4xl grow">
+		<main className="mx-auto w-full max-w-4xl grow">
 			<div className={"bg-white dark:bg-slate-800 dark:text-white p-4 rounded"}>
 				<LoginWrapper
 					logged_in={token !== undefined}

Website/src/utils/api.ts

@@ -116,6 +116,7 @@ export type VehicleType = UpdateVehicleType & {
 export type Tracker = {
 	id: string;
 	vehicleId: number | null;
+	battery?: number;
 	data?: unknown;
 };
 

Website/src/utils/helpers.ts

@@ -17,17 +17,17 @@ export const coordinateFormatter = new Intl.NumberFormat("de-DE", {
 	notation: "standard",
 	style: "unit",
 	unit: "degree",
-	maximumFractionDigits: 2
+	maximumFractionDigits: 4
 });
 
 export function nanToUndefined(x: number): number | undefined {
-	if (Number.isNaN(x)) return
-	return x}
+	if (Number.isNaN(x)) return;
+	return x;
+}
 
 export function nanToNull(x: number): number | null {
-	if (Number.isNaN(x))
-		return null
-	return x
+	if (Number.isNaN(x)) return null;
+	return x;
 }
 
 /**
@@ -37,12 +37,12 @@ export function inlineTry<T>(f: () => T): T | undefined {
 	try {
 		return f();
 	} catch (e) {
-		return
+		return;
 	}
 }
 
 export function apiError(statusCode: number): NextResponse<Error> {
-	const statusText = http.STATUS_CODES[statusCode]
+	const statusText = http.STATUS_CODES[statusCode];
 
 	return new NextResponse(statusText + "\r\n", {
 		status: statusCode,
@@ -60,5 +60,5 @@ export function getUsername(token: string): string {
 	if (!isTokenPayload(payload)) {
 		throw new TypeError("Not a valid jwt auth token");
 	}
-	return payload.username
+	return payload.username;
 }