Show Service Messages in Leitstelle #9

apps/dispatch/app/(app)/dispatch/_components/navbar/Navbar.tsx

@@ -1,42 +1,23 @@
 import { Connection } from "./_components/Connection";
-/* import { ThemeSwap } from "./_components/ThemeSwap"; */
 import { Audio } from "../../../../_components/Audio/Audio";
-/* import { useState } from "react"; */
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { Settings } from "_components/navbar/Settings";
 import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
 import AdminPanel from "_components/navbar/AdminPanel";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
-import { prisma } from "@repo/db";
+import { WarningAlert } from "_components/navbar/PageAlert";
 
 export default async function Navbar() {
 	const session = await getServerSession();
 
-	const latestNotam = await prisma.notam.findFirst({
-		orderBy: { createdAt: "desc" },
-	});
-
-	let wartungsarbeiten = false;
-	if (
-		latestNotam &&
-		latestNotam.wartungsmodus &&
-		latestNotam.active &&
-		((latestNotam.showUntilActive && new Date(latestNotam.showUntil) > new Date()) ||
-			!latestNotam.showUntilActive)
-	) {
-		wartungsarbeiten = true;
-	}
-
 	return (
 		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
 			<div className="flex items-center gap-2">
 				<ModeSwitchDropdown />
 				{session?.user.permissions.includes("ADMIN_KICK") && <AdminPanel />}
 			</div>
-			{wartungsarbeiten && (
-				<p className="alert alert-error shadow-lg font-bold">Wartungsmodus aktiv!</p>
-			)}
+			<WarningAlert />
 			<div className="flex items-center gap-5">
 				<div className="flex items-center gap-2">
 					<Audio />
@@ -44,7 +25,6 @@ export default async function Navbar() {
 				<div className="flex items-center">
 					<Connection />
 				</div>
-				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
 				<div className="flex items-center">
 					<Settings />
 					<Link

apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx

@@ -1,27 +1,16 @@
-"use client";
-
 import { Connection } from "./_components/Connection";
 import { Audio } from "_components/Audio/Audio";
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { Settings } from "_components/navbar/Settings";
 import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
+import { WarningAlert } from "_components/navbar/PageAlert";
 
 export default function Navbar() {
-	/* const [isDark, setIsDark] = useState(false);
-
-	const toggleTheme = () => {
-		const newTheme = !isDark;
-		setIsDark(newTheme);
-		document.documentElement.setAttribute(
-			"data-theme",
-			newTheme ? "nord" : "dark",
-		);
-	}; */
-
 	return (
 		<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
 			<ModeSwitchDropdown />
+			<WarningAlert />
 			<div className="flex items-center gap-5">
 				<div className="flex items-center gap-2">
 					<Audio />
@@ -29,7 +18,6 @@ export default function Navbar() {
 				<div className="flex items-center">
 					<Connection />
 				</div>
-				{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
 				<div className="flex items-center">
 					<Settings />
 					<Link

apps/dispatch/app/_components/navbar/PageAlert.tsx

@@ -0,0 +1,51 @@
+import { prisma } from "@repo/db";
+import { MessageCircleWarning } from "lucide-react";
+const fetchMainMessage = async () => {
+	return await prisma.notam.findFirst({
+		where: {
+			active: true,
+		},
+	});
+};
+
+export const WarningAlert = async () => {
+	const mainMessage = await fetchMainMessage();
+
+	if (mainMessage?.showUntilActive && new Date(mainMessage.showUntil) < new Date()) {
+		return <></>;
+	}
+
+	let msgColor;
+	switch (mainMessage?.color) {
+		case "WARNING":
+			msgColor = "alert alert-soft alert-warning ml-3 py-2 flex items-center gap-2";
+			break;
+		case "INFO":
+			msgColor = "alert alert-soft alert-info ml-3 py-2 flex items-center gap-2";
+			break;
+		case "SUCCESS":
+			msgColor = "alert alert-soft alert-success ml-3 py-2 flex items-center gap-2";
+			break;
+		case "ERROR":
+			msgColor = "alert alert-error ml-3 py-2 flex items-center gap-2";
+			break;
+		default:
+			msgColor = "alert alert-soft ml-3 py-2 flex items-center gap-2";
+	}
+
+	if ((mainMessage?.message == "" && !mainMessage?.wartungsmodus) || !mainMessage) {
+		return <></>;
+	} else {
+		return (
+			<div role="alert" className={msgColor}>
+				<MessageCircleWarning />
+				<span className="font-bold m-0">
+					{mainMessage?.wartungsmodus ? "Wartungsmodus aktiv!" : mainMessage?.message}
+				</span>
+			</div>
+		);
+	}
+};
+
+/* ACHTUNG! Wir führen am kommenden Samstag Wartungsarbeiten am Server
+				durch, von 19:00 Uhr bis 19:30 Uhr wird das HUB nicht erreichbar sein. */