PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fixed theme toggle

Browse Source
This commit is contained in:
PxlLoewe
2025-02-02 20:23:30 +01:00
parent 3104e8c30d
commit 93804855f1
9 changed files with 199 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/dispatch/app/(dispatch)/_components/Map.tsx
View File

@@ -1,27 +1,28 @@
"use client"
import { useEffect, useRef } from "react";
'use client';
import { useEffect, useRef } from 'react';
import L from "leaflet";
import "leaflet/dist/leaflet.css";
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" />;
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-full rounded-lg shadow-lg" />;
};

119
apps/dispatch/app/(dispatch)/_components/Navbar.tsx
View File

@@ -1,64 +1,71 @@
"use client";
import "../globals.css";
import { ToggleTalkButton } from "../_components/ToggleTalkButton";
import { ChangeRufgruppe } from "../_components/ChangeRufgruppe";
import { Notifications } from "../_components/Notifications";
'use client';
import { ToggleTalkButton } from '../_components/ToggleTalkButton';
import { ChangeRufgruppe } from '../_components/ChangeRufgruppe';
import { Notifications } from '../_components/Notifications';
import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
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 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="swap swap-rotate">
{/* this hidden checkbox controls the state */}
<input type="checkbox" className="theme-controller" value="dark" />
{/* sun icon */}
<svg
className="swap-off h-10 w-10 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-10 w-10 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>
<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>
);
}

36
apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { useTalkStore } from "../_store/useTalkStore";
'use client';
import { useTalkStore } from '../../_store/useTalkStore';
export const ToggleTalkButton = () => {
const { isTalking, toggleTalking } = useTalkStore();
@@ -8,21 +8,25 @@ export const ToggleTalkButton = () => {
<button
onClick={toggleTalking}
className={`${
isTalking ? "bg-red-500 hover:bg-red-600" : "bg-transparent hover:bg-neutral-300"
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>
<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>
);
};
};

18
apps/dispatch/app/(dispatch)/layout.tsx
View File

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

15
apps/dispatch/app/(dispatch)/page.tsx
View File

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

22
apps/dispatch/app/layout.tsx
View File

@@ -1,19 +1,19 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import type { Metadata } from 'next';
import localFont from 'next/font/local';
import './globals.css';
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
src: './fonts/GeistVF.woff',
variable: '--font-geist-sans',
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
src: './fonts/GeistMonoVF.woff',
variable: '--font-geist-mono',
});
export const metadata: Metadata = {
title: "VAR Leitstelle v2",
description: "Die neue VAR Leitstelle.",
title: 'VAR Leitstelle v2',
description: 'Die neue VAR Leitstelle.',
};
export default function RootLayout({
@@ -23,7 +23,9 @@ export default function RootLayout({
}>) {
return (
<html lang="de" data-theme="light">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<body
className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col`}
>
{children}
</body>
</html>

1
apps/dispatch/package.json
View File

@@ -11,6 +11,7 @@
"check-types": "tsc --noEmit"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.2",
"@repo/ui": "*",
"@tailwindcss/postcss": "^4.0.2",
"leaflet": "^1.9.4",

1
apps/dispatch/tailwind.config.ts
View File

@@ -6,6 +6,7 @@ export default {
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {