From 128ee97525651eb2d7929b85a225816e686af592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20M=C3=A4ckelmann?=
 <6890706+n1kPLV@users.noreply.github.com>
Date: Tue, 19 Sep 2023 23:36:54 +0200
Subject: [PATCH] Added smart-ish links to the header

---
 Website/src/app/components/dynlist.tsx        | 14 ++++---
 Website/src/app/components/dynmap.tsx         |  5 +++
 .../src/app/components/dynmap_with_list.tsx   |  2 +-
 Website/src/app/components/form.tsx           | 16 ++++----
 Website/src/app/components/layout/header.tsx  | 17 +++++---
 .../components/layout/smart_navigation.tsx    | 39 +++++++++++++++++++
 .../src/app/components/selectTrackButton.tsx  | 14 +++++++
 .../src/app/components/track_selection.tsx    | 32 +++++++++++----
 Website/src/app/components/tracker.tsx        |  8 ++--
 Website/src/app/list/page.tsx                 |  2 +-
 Website/src/app/management/layout.tsx         | 20 +++++++++-
 Website/src/utils/helpers.ts                  | 10 +++--
 12 files changed, 141 insertions(+), 38 deletions(-)
 create mode 100644 Website/src/app/components/layout/smart_navigation.tsx
 create mode 100644 Website/src/app/components/selectTrackButton.tsx

diff --git a/Website/src/app/components/dynlist.tsx b/Website/src/app/components/dynlist.tsx
index c41a2ec0..d7d21139 100644
--- a/Website/src/app/components/dynlist.tsx
+++ b/Website/src/app/components/dynlist.tsx
@@ -9,6 +9,7 @@ import TrackerCharge from "@/app/components/tracker";
 import { FunctionComponent } from "react";
 import { getFetcher } from "@/utils/fetcher";
 import { useRouter } from "next/navigation";
+import { SelectTrackButton } from "@/app/components/selectTrackButton";
 
 /**
  * A component to focus a vehicle. A link to the map view with the respective search parameter
@@ -77,7 +78,7 @@ export function VehicleList({
 							</td>
 						)}
 						<td className={"px-2 text-center"}>
-							<div className={"max-w-[16rem] mx-auto"}>
+							<div className={"max-w-[16rem] w-fit mx-auto"}>
 								{v.trackerIds.map(trackerId => (
 									<TrackerCharge key={trackerId} trackerId={trackerId} />
 								))}
@@ -127,7 +128,7 @@ export default function DynamicList({
 	const sorted_vehicles = vehicles?.sort((a, b) => a.id - b.id);
 
 	// obtain the NextJS router
-	const router = useRouter()
+	const router = useRouter();
 
 	if (logged_in && error) {
 		if (error instanceof UnauthorizedError || (error instanceof RevalidateError && error.statusCode === 401)) {
@@ -139,9 +140,12 @@ export default function DynamicList({
 
 	return (
 		<>
-			<h2>
-				Fahrzeuge der Strecke {track_data?.start} - {track_data?.end}
-			</h2>
+			<div className={"flex flex-wrap justify-between items-center gap-2 mb-2"}>
+				<h2 className={"text-xl text-left"}>
+					Fahrzeuge der Strecke {track_data?.start} - {track_data?.end}
+				</h2>
+				<SelectTrackButton />
+			</div>
 			<VehicleList sorted_vehicles={sorted_vehicles} FocusVehicle={FocusVehicle} />
 		</>
 	);
diff --git a/Website/src/app/components/dynmap.tsx b/Website/src/app/components/dynmap.tsx
index b403f645..3386b58f 100644
--- a/Website/src/app/components/dynmap.tsx
+++ b/Website/src/app/components/dynmap.tsx
@@ -6,6 +6,7 @@ import useSWR from "swr";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { getFetcher } from "@/utils/fetcher";
+import { SelectTrackButton } from "@/app/components/selectTrackButton";
 
 // This complicated thing with `dynamic` is necessary to disable server side rendering
 // for the actual map, which does not work with leaflet.
@@ -76,6 +77,10 @@ export default function DynamicMap({
 					setFocus
 				}}
 			/>
+			{/* This will stack over the map, if all map layers have a z-index < 1100 (which should be the default) */}
+			<div className={"absolute left-5 bottom-5 z-1100"}>
+				<SelectTrackButton />
+			</div>
 		</div>
 	);
 }
diff --git a/Website/src/app/components/dynmap_with_list.tsx b/Website/src/app/components/dynmap_with_list.tsx
index 07118955..8ce6c848 100644
--- a/Website/src/app/components/dynmap_with_list.tsx
+++ b/Website/src/app/components/dynmap_with_list.tsx
@@ -84,7 +84,7 @@ export default function DynamicMapList({
 					}}
 				/>
 			</div>
-			<div className={"basis-30 flex flex-col gap-2 mr-2"}>
+			<div className={"basis-32 flex grow-0 flex-col gap-2 mr-2"}>
 				<div className={"grow overflow-y-auto basis-0"}>
 					<VehicleList
 						sorted_vehicles={sorted_vehicles}
diff --git a/Website/src/app/components/form.tsx b/Website/src/app/components/form.tsx
index 965c6b08..fba2d5f7 100644
--- a/Website/src/app/components/form.tsx
+++ b/Website/src/app/components/form.tsx
@@ -7,15 +7,13 @@ import React from "react";
  *                 children of this element.
  * @constructor
  */
-export function FormWrapper({children}: { children: React.ReactNode }) {
-    return (
-        <main className="mx-auto max-w-2xl w-full grow">
-            <div className={'bg-white dark:bg-slate-800 dark:text-white p-4 rounded'}>
-                {children}
-            </div>
-        </main>
-    )
+export function FormWrapper({ children }: { children: React.ReactNode }) {
+	return (
+		<main className="mx-auto mt-2 max-w-2xl w-full grow">
+			<div className={"bg-white dark:bg-slate-800 dark:text-white p-4 rounded"}>{children}</div>
+		</main>
+	);
 }
 
 // TODO: create a component for a form in a dialog to replace/refactor
-//  the LoginDialog and SelectionDialog components.
\ No newline at end of file
+//  the LoginDialog and SelectionDialog components.
diff --git a/Website/src/app/components/layout/header.tsx b/Website/src/app/components/layout/header.tsx
index babaec65..3b55a5ef 100644
--- a/Website/src/app/components/layout/header.tsx
+++ b/Website/src/app/components/layout/header.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { CurrentUser } from "@/app/components/layout/currentUser";
+import SmartNavigation from "@/app/components/layout/smart_navigation";
 
 /**
  * The header for the web page
@@ -8,18 +9,22 @@ export default function Header() {
 	return (
 		<header
 			className={
-				"flex flex-row w-full justify-items-center justify-around p-2 flex-wrap bg-white dark:bg-slate-800"
+				"flex flex-row w-full items-center justify-around p-2 flex-wrap bg-white dark:bg-slate-900 gap-2"
 			}>
 			<div className={"mr-auto"}>
 				<Link href={"/"}>RailTrail Verwaltung</Link>
 			</div>
-			<CurrentUser className={"ml-auto sm:order-last"} />
+			<CurrentUser className={"ml-auto md:order-last"} />
 			{/* Force a line break for small devices */}
-			<div className={"w-full sm:hidden"} />
+			<div className={"w-full md:hidden"} />
 
-			<div>Foo</div>
-			<div>Bar</div>
-			<div>Baz</div>
+			<SmartNavigation href={"/map"}>Karte</SmartNavigation>
+			<SmartNavigation href={"/list"}>Liste</SmartNavigation>
+			<SmartNavigation href={"/mapList"} className={"px-2 border-2 border-transparent hidden sm:block"}>
+				Karte + Liste
+			</SmartNavigation>
+
+			<SmartNavigation href={"/management"}>Datenverwaltung</SmartNavigation>
 		</header>
 	);
 }
diff --git a/Website/src/app/components/layout/smart_navigation.tsx b/Website/src/app/components/layout/smart_navigation.tsx
new file mode 100644
index 00000000..7b287e57
--- /dev/null
+++ b/Website/src/app/components/layout/smart_navigation.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import Link, { LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+import { PropsWithChildren } from "react";
+
+/**
+ * A navigation link that has a different style when the user is on the page it links to, or on a sub-page
+ * @param href				The URL to navigate to
+ * @param className			CSS classes for the enclosing div
+ * @param activeClassName	Additional CSS classes for the enclosing div, when active
+ * @param linkClassName		The CSS classes for the anchor tag
+ * @param children			The contents in the anchor tag
+ * @param props				Other options applicable to <Link>
+ * @constructor
+ */
+export default function SmartNavigation({
+	href,
+	className = "px-2 border-2 border-transparent",
+	linkClassName,
+	children,
+	...props
+}: PropsWithChildren<LinkProps & { href: string; className?: string; linkClassName?: string }>) {
+	// get the path of the currently open page
+	const currentPath = usePathname();
+
+	// and determine if we are currently on that path
+	const active = (currentPath === href || currentPath?.startsWith(href + "/")) ?? false;
+
+	const activeClassName = "bg-neutral-500/20 !border-gray-500 rounded";
+
+	return (
+		<div className={className + (active ? " " + activeClassName : "")}>
+			<Link href={href} className={linkClassName} {...props}>
+				{children}
+			</Link>
+		</div>
+	);
+}
diff --git a/Website/src/app/components/selectTrackButton.tsx b/Website/src/app/components/selectTrackButton.tsx
new file mode 100644
index 00000000..0e2e5b48
--- /dev/null
+++ b/Website/src/app/components/selectTrackButton.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+/**
+ * A link that somewhat resembles a button to select a different track.
+ */
+export function SelectTrackButton() {
+	return (
+		<Link
+			href={"/select_track"}
+			className={"bg-gray-200 dark:bg-slate-600 border-2 border-gray-500 rounded px-2 py-1 no-a-style"}>
+			Andere Strecke wählen
+		</Link>
+	);
+}
diff --git a/Website/src/app/components/track_selection.tsx b/Website/src/app/components/track_selection.tsx
index dc9b60cd..12e8c6a4 100644
--- a/Website/src/app/components/track_selection.tsx
+++ b/Website/src/app/components/track_selection.tsx
@@ -1,10 +1,8 @@
-"use client";
-
 import { Dispatch, FormEventHandler, PropsWithChildren, useEffect, useRef, useState } from "react";
 
 import Footer from "@/app/components/layout/footer";
 import useSWR from "swr";
-import { setCookie } from "cookies-next";
+import { getCookie, setCookie } from "cookies-next";
 import { inter } from "@/utils/common";
 import { getFetcher } from "@/utils/fetcher";
 import { useRouter } from "next/navigation";
@@ -24,6 +22,7 @@ export default function Selection({
 	const { data, error, isLoading } = useSWR("/webapi/tracks/list", getFetcher<"/webapi/tracks/list">);
 	// get the next page router
 	const router = useRouter();
+	const selectedTrack = getCookie("track_id")?.toString();
 
 	const selectTrack: FormEventHandler = e => {
 		e.preventDefault();
@@ -41,7 +40,7 @@ export default function Selection({
 	};
 
 	return (
-		<form onSubmit={selectTrack} className="grid grid-cols-2 gap-y-1 my-1.5 items-center h-24">
+		<form onSubmit={selectTrack} className="grid grid-cols-[1fr, 7fr] gap-y-1 my-1.5 items-center h-24">
 			{isLoading ? (
 				<div className={"flex col-span-2 justify-center items-center gap-5"}>
 					<Spinner className={"h-10 w-auto"} />
@@ -52,14 +51,18 @@ export default function Selection({
 			) : completed ? (
 				<div className={"flex col-span-2 justify-center items-center gap-5"}>
 					<Spinner className={"h-10 w-auto"} />
-					<div>Wird gepeichert...</div>
+					<div>Wird gespeichert...</div>
 				</div>
 			) : (
 				<>
 					<label className={""} htmlFor="track">
 						Strecke:{" "}
 					</label>
-					<select id={"track"} name={"track"} className="dark:bg-slate-700 rounded">
+					<select
+						defaultValue={selectedTrack}
+						id={"track"}
+						name={"track"}
+						className="dark:bg-slate-700 rounded">
 						{data?.map(({ id, start, end }) => (
 							<option
 								value={id}
@@ -80,10 +83,12 @@ export default function Selection({
 
 /**
  * The track selection form wrapped in a dialog, for easy display in a modal way.
- * @param children       HTML elements to display over the login form in the dialog, for example for explanations.
+ * @param children 	HTML elements to display over the login form in the dialog, for example for explanations.
+ * @param modal		Whether this is shown as part of a modal route.
  */
-export function SelectionDialog({ children }: PropsWithChildren) {
+export function SelectionDialog({ children, modal = false }: PropsWithChildren<{ modal?: boolean }>) {
 	const dialogRef = useRef(null as HTMLDialogElement | null);
+	const router = useRouter();
 
 	// get a "completed" state
 	const [completed, setCompleted] = useState(false);
@@ -94,10 +99,21 @@ export function SelectionDialog({ children }: PropsWithChildren) {
 		}
 	}, []);
 
+	// if this is a modal, we need to move back to the previous page using the router
+	useEffect(() => {
+		if (completed && modal) {
+			router.back();
+		}
+	}, [completed, modal, router]);
+
 	return (
 		<dialog
 			ref={dialogRef}
 			onCancel={event => {
+				if (modal) {
+					// if this is a modal, we need to move back to the previous page using the router
+					router.back();
+				}
 				event.preventDefault();
 			}}
 			className="drop-shadow-xl shadow-black bg-white p-4 rounded max-w-2xl w-full dark:bg-slate-800 dark:text-white backdrop:bg-gray-200/30 backdrop:backdrop-blur">
diff --git a/Website/src/app/components/tracker.tsx b/Website/src/app/components/tracker.tsx
index 6d48676d..8ca9a3a8 100644
--- a/Website/src/app/components/tracker.tsx
+++ b/Website/src/app/components/tracker.tsx
@@ -14,9 +14,9 @@ export default function TrackerCharge({ trackerId }: { trackerId: string }) {
 	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={"flex flex-nowrap my-1 gap-1 min-w-0 w-32 sm:w-44 md:w-52 xl:w-64"}>
+					<div className={"group relative grow-0 md:grow shrink min-w-0 basis-30 lg:basis-32 text-left"}>
+						<div className={"truncate basis-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 dark:bg-gray-900 dark:text-white bg-gray-100 rounded py-2 px-3 top-8 -left-3 w-max"
@@ -24,7 +24,7 @@ export default function TrackerCharge({ trackerId }: { trackerId: string }) {
 							{tracker_data.id}
 						</div>
 					</div>
-					<div className={"basis-10 text-right shrink-0"}>
+					<div className={"basis-14 text-right shrink-0"}>
 						{tracker_data.battery == undefined ? "?" : batteryLevelFormatter.format(tracker_data.battery)}
 					</div>
 				</div>
diff --git a/Website/src/app/list/page.tsx b/Website/src/app/list/page.tsx
index 9b90e7ff..45afa32a 100644
--- a/Website/src/app/list/page.tsx
+++ b/Website/src/app/list/page.tsx
@@ -26,7 +26,7 @@ export default async function Home() {
 	};
 
 	return (
-		<main className="mx-auto w-full max-w-4xl grow">
+		<main className="mx-auto w-full max-w-4xl grow mt-2">
 			<div className={"bg-white dark:bg-slate-800 dark:text-white p-4 rounded"}>
 				<LoginWrapper
 					logged_in={token !== undefined}
diff --git a/Website/src/app/management/layout.tsx b/Website/src/app/management/layout.tsx
index f2ae9c36..40296c11 100644
--- a/Website/src/app/management/layout.tsx
+++ b/Website/src/app/management/layout.tsx
@@ -1,5 +1,6 @@
 import { FormWrapper } from "@/app/components/form";
 import React from "react";
+import SmartNavigation from "@/app/components/layout/smart_navigation";
 
 /**
  * The
@@ -7,5 +8,22 @@ import React from "react";
  * @constructor
  */
 export default function Layout({ children }: { children: React.ReactNode }) {
-	return <FormWrapper>{children}</FormWrapper>;
+	return (
+		<>
+			<header
+				className={
+					"flex flex-row w-full justify-items-center justify-around p-2 flex-wrap bg-gray-100 dark:bg-slate-800 gap-2"
+				}>
+				<SmartNavigation href={"/management/add_track"}>Strecke hinzufügen</SmartNavigation>
+				<SmartNavigation href={"/management/vehicles"}>Fahrzeuge</SmartNavigation>
+				<SmartNavigation href={"/management/trackers"}>Tracker</SmartNavigation>
+				<SmartNavigation href={"/management/poi"}>Interessenspunkte</SmartNavigation>
+				<SmartNavigation href={"/management/vehicleTypes"}>Fahrzeugarten</SmartNavigation>
+				<SmartNavigation href={"/management/poiTypes"}>Interessenspunktarten</SmartNavigation>
+				<SmartNavigation href={"/management/users"}>andere Nutzer</SmartNavigation>
+				<SmartNavigation href={"/management/myself"}>eigener Nutzer</SmartNavigation>
+			</header>
+			<FormWrapper>{children}</FormWrapper>
+		</>
+	);
 }
diff --git a/Website/src/utils/helpers.ts b/Website/src/utils/helpers.ts
index e85026cb..759406eb 100644
--- a/Website/src/utils/helpers.ts
+++ b/Website/src/utils/helpers.ts
@@ -3,18 +3,22 @@ import { decodeJwt, JWTPayload } from "jose";
 import { NextResponse } from "next/server";
 import { isTokenPayload } from "@/utils/api";
 
-export const batteryLevelFormatter = new Intl.NumberFormat("de-DE", {
+export const batteryLevelFormatter = {
+	format: (voltage: number) => `${voltage.toFixed(2)}\xA0V`
+};
+
+/* new Intl.NumberFormat("de-DE", {
 	notation: "standard",
 	style: "percent",
 	unit: "percent",
 	maximumFractionDigits: 1
-});
+}); */
 
 export const coordinateFormatter = new Intl.NumberFormat("de-DE", {
 	notation: "standard",
 	style: "unit",
 	unit: "degree",
-	maximumFractionDigits: 4
+	maximumFractionDigits: 3
 });
 
 export const speedFormatter = new Intl.NumberFormat("de-DE", {