Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo

apps/dispatch/app/(dispatch)/_components/ChangeRufgruppe.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+export const ChangeRufgruppe = () => {
+  return (
+    <>
+        <details className="dropdown">
+            <summary className="dropdown flex items-center gap-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                   className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                >
+                    <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                    />
+                </svg>
+                <div className="badge badge-soft badge-success">1</div>
+            </summary>
+            <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
+                <li><a>Rufgruppe 1</a></li>
+                <li><a>Rufgruppe 2</a></li>
+            </ul>
+        </details>
+    </>
+  );
+};

apps/dispatch/app/(dispatch)/_components/Map.tsx

@@ -0,0 +1,27 @@
+"use client"
+import { useEffect, useRef } from "react";
+
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+export default () => {
+  const mapRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!mapRef.current) return;
+    
+        // Initialisiere die Leaflet-Karte
+        const map = L.map(mapRef.current).setView([51.1657, 10.4515], 6); // Deutschland
+    
+        // OpenStreetMap Tile Layer hinzufügen
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
+        }).addTo(map);
+    
+        return () => {
+          map.remove(); // Karte beim Unmounten bereinigen
+        };
+      }, []);
+  return <div ref={mapRef} className="w-full h-[500px] rounded-lg shadow-lg" />;
+
+}

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

@@ -0,0 +1,64 @@
+"use client"; 
+import "../globals.css";
+import { ToggleTalkButton } from "../_components/ToggleTalkButton";
+import { ChangeRufgruppe } from "../_components/ChangeRufgruppe";
+import { Notifications } from "../_components/Notifications";
+
+export default function Navbar() {
+  return (
+    <div className="navbar bg-base-100 shadow-sm">
+  <div className="flex-1">
+    <a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
+  </div>
+  <div className="flex gap-2">
+    <ul className="menu menu-horizontal bg-base-200 rounded-box">
+    <li>
+      <ToggleTalkButton />
+    </li>
+    <li>
+      <ChangeRufgruppe />
+    </li>
+  </ul>
+  </div>
+  <div className="flex gap-2">
+    <Notifications />
+  </div>
+  <div className="flex gap-2">
+      <label className="btn btn-ghost swap swap-rotate">
+      {/* this hidden checkbox controls the state */}
+      <input type="checkbox" className="theme-controller" value="synthwave" />
+
+      {/* sun icon */}
+      <svg
+        className="swap-off h-7 w-7 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+      </svg>
+
+      {/* moon icon */}
+      <svg
+        className="swap-on h-7 w-7 fill-current"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24">
+        <path
+          d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+      </svg>
+    </label>
+    <div className="dropdown dropdown-end">
+      <div tabIndex={0} role="button" className="btn btn-ghost">...
+        
+      </div>
+      <ul
+        tabIndex={0}
+        className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow">
+        <li><a className="justify-between">Profil</a></li>
+        <li><a>Einstellungen</a></li>
+        <li><a>Logout</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+  );
+}

apps/dispatch/app/(dispatch)/_components/Notifications.tsx

@@ -0,0 +1,28 @@
+"use client"; 
+
+export const Notifications = () => {
+  return (
+    <>
+        <details className="dropdown">
+            <summary className="btn btn-ghost dropdown flex items-center gap-1">
+                <div className="badge badge-sm badge-secondary">+99</div>
+            </summary>
+            <ul className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
+                <li><a>Testbenachrichtigung 1</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 2</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 3</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 4</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 5</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 6</a></li>
+                <li className="divider"></li>
+                <li><a>Testbenachrichtigung 7</a></li>
+            </ul>
+        </details>
+    </>
+  );
+};

apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx

@@ -0,0 +1,28 @@
+"use client"; 
+import { useTalkStore } from "../_store/useTalkStore";
+
+export const ToggleTalkButton = () => {
+  const { isTalking, toggleTalking } = useTalkStore();
+
+  return (
+    <button
+      onClick={toggleTalking}
+      className={`${
+        isTalking ? "bg-red-500 hover:bg-red-600" : "bg-transparent hover:bg-neutral-300"
+      }`}
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor">
+            <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
+        </svg>
+    </button>
+  );
+};

apps/dispatch/app/(dispatch)/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import Navbar from "./_components/Navbar";
+
+export const metadata: Metadata = {
+  title: "VAR Leitstelle v2",
+  description: "Die neue VAR Leitstelle.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de" data-theme="light">
+      <body>
+        <Navbar />
+        {children}
+      </body>
+    </html>
+  );
+}

apps/dispatch/app/(dispatch)/page.tsx

@@ -0,0 +1,8 @@
+"use client"
+import dynamic from "next/dynamic"
+const MyAwesomeMap = dynamic(() => import("./_components/Map"), { ssr: false })
+
+export default () => {
+
+  return <MyAwesomeMap />
+}

apps/dispatch/app/_components/Navbar.tsx

@@ -1,35 +0,0 @@
-import "../globals.css";
-
-export default function Navbar() {
-  return (
-    <div className="navbar bg-base-100 shadow-sm">
-  <div className="flex-1">
-    <a className="btn btn-ghost text-xl">daisyUI</a>
-  </div>
-  <div className="flex gap-2">
-    <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
-    <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
-        <div className="w-10 rounded-full">
-          <img
-            alt="Tailwind CSS Navbar component"
-            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
-        </div>
-      </div>
-      <ul
-        tabIndex={0}
-        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
-        <li>
-          <a className="justify-between">
-            Profile
-            <span className="badge">New</span>
-          </a>
-        </li>
-        <li><a>Settings</a></li>
-        <li><a>Logout</a></li>
-      </ul>
-    </div>
-  </div>
-</div>
-  );
-}

apps/dispatch/app/_store/useTalkStore.ts

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type TalkState = {
+  isTalking: boolean;
+  toggleTalking: () => void;
+};
+
+export const useTalkStore = create<TalkState>((set) => ({
+  isTalking: false,
+  toggleTalking: () => set((state) => ({ isTalking: !state.isTalking })),
+}));

apps/dispatch/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import Navbar from "./_components/Navbar";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -25,7 +24,6 @@ export default function RootLayout({
   return (
     <html lang="de" data-theme="light">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <Navbar />
         {children}
       </body>
     </html>

apps/dispatch/app/login/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Login() {
+  redirect("/");
+}

apps/dispatch/app/page.tsx

@@ -1,8 +0,0 @@
-import { Button } from "@repo/ui/button";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <div>Test</div>
-  );
-}

apps/dispatch/package.json

@@ -13,15 +13,18 @@
   "dependencies": {
     "@repo/ui": "*",
     "@tailwindcss/postcss": "^4.0.2",
+    "leaflet": "^1.9.4",
     "next": "^15.1.0",
     "postcss": "^8.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.2"
+    "tailwindcss": "^4.0.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
+    "@types/leaflet": "^1.9.16",
     "@types/node": "^20",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",