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" 'use client';
import { useEffect, useRef } from "react"; import { useEffect, useRef } from 'react';
import L from "leaflet"; import L from 'leaflet';
import "leaflet/dist/leaflet.css"; import 'leaflet/dist/leaflet.css';
export default () => { export default () => {
const mapRef = useRef<HTMLDivElement>(null); const mapRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (!mapRef.current) return; 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" />;
} // 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"; 'use client';
import "../globals.css"; import { ToggleTalkButton } from '../_components/ToggleTalkButton';
import { ToggleTalkButton } from "../_components/ToggleTalkButton"; import { ChangeRufgruppe } from '../_components/ChangeRufgruppe';
import { ChangeRufgruppe } from "../_components/ChangeRufgruppe"; import { Notifications } from '../_components/Notifications';
import { Notifications } from "../_components/Notifications"; import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
export default function Navbar() { export default function Navbar() {
return ( return (
<div className="navbar bg-base-100 shadow-sm"> <div className="navbar bg-base-100 shadow-sm">
<div className="flex-1"> <div className="flex-1">
<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a> <a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<ul className="menu menu-horizontal bg-base-200 rounded-box"> <ul className="menu menu-horizontal bg-base-200 rounded-box">
<li> <li>
<ToggleTalkButton /> <ToggleTalkButton />
</li> </li>
<li> <li>
<ChangeRufgruppe /> <ChangeRufgruppe />
</li> </li>
</ul> </ul>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Notifications /> <Notifications />
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<label className="btn btn-ghost swap swap-rotate"> <label className="swap swap-rotate">
{/* this hidden checkbox controls the state */} {/* this hidden checkbox controls the state */}
<input type="checkbox" className="theme-controller" value="synthwave" /> <input type="checkbox" className="theme-controller" value="dark" />
{/* sun icon */} {/* sun icon */}
<svg <svg
className="swap-off h-7 w-7 fill-current" className="swap-off h-10 w-10 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> 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" /> <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> </svg>
{/* moon icon */} {/* moon icon */}
<svg <svg
className="swap-on h-7 w-7 fill-current" className="swap-on h-10 w-10 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"> 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" /> <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> </svg>
</label> </label>
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">
<div tabIndex={0} role="button" className="btn btn-ghost">... <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>
<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>
</div>
); );
} }

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

@@ -1,5 +1,5 @@
"use client"; 'use client';
import { useTalkStore } from "../_store/useTalkStore"; import { useTalkStore } from '../../_store/useTalkStore';
export const ToggleTalkButton = () => { export const ToggleTalkButton = () => {
const { isTalking, toggleTalking } = useTalkStore(); const { isTalking, toggleTalking } = useTalkStore();
@@ -8,21 +8,25 @@ export const ToggleTalkButton = () => {
<button <button
onClick={toggleTalking} onClick={toggleTalking}
className={`${ 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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5" className="h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor"
<path >
strokeLinecap="round" <path
strokeLinejoin="round" strokeLinecap="round"
strokeWidth="2" strokeLinejoin="round"
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" /> strokeWidth="2"
</svg> 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> </button>
); );
}; };

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

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

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

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

1
apps/dispatch/package.json
View File

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

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

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

66
package-lock.json generated
View File

@@ -21,17 +21,21 @@
"apps/dispatch": { "apps/dispatch": {
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@radix-ui/react-icons": "^1.3.2",
"@repo/ui": "*", "@repo/ui": "*",
"@tailwindcss/postcss": "^4.0.2", "@tailwindcss/postcss": "^4.0.2",
"leaflet": "^1.9.4",
"next": "^15.1.0", "next": "^15.1.0",
"postcss": "^8.5.1", "postcss": "^8.5.1",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"tailwindcss": "^4.0.2" "tailwindcss": "^4.0.2",
"zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@repo/eslint-config": "*", "@repo/eslint-config": "*",
"@repo/typescript-config": "*", "@repo/typescript-config": "*",
"@types/leaflet": "^1.9.16",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "18.3.1", "@types/react": "18.3.1",
"@types/react-dom": "18.3.0", "@types/react-dom": "18.3.0",
@@ -1166,6 +1170,14 @@
} }
} }
}, },
"node_modules/@radix-ui/react-icons": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
"integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
"peerDependencies": {
"react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/@repo/db": { "node_modules/@repo/db": {
"resolved": "packages/database", "resolved": "packages/database",
"link": true "link": true
@@ -1548,6 +1560,12 @@
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
"dev": true "dev": true
}, },
"node_modules/@types/geojson": {
"version": "7946.0.16",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
"dev": true
},
"node_modules/@types/glob": { "node_modules/@types/glob": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -1598,6 +1616,15 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true "dev": true
}, },
"node_modules/@types/leaflet": {
"version": "1.9.16",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
"integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/minimatch": { "node_modules/@types/minimatch": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -1617,13 +1644,13 @@
"version": "15.7.14", "version": "15.7.14",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
"dev": true "devOptional": true
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.3.1", "version": "18.3.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
"integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -5534,6 +5561,11 @@
"node": ">=0.10" "node": ">=0.10"
} }
}, },
"node_modules/leaflet": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"node_modules/levn": { "node_modules/levn": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9035,6 +9067,34 @@
"url": "https://github.com/sponsors/colinhacks" "url": "https://github.com/sponsors/colinhacks"
} }
}, },
"node_modules/zustand": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
"integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
"engines": {
"node": ">=12.20.0"
},
"peerDependencies": {
"@types/react": ">=18.0.0",
"immer": ">=9.0.6",
"react": ">=18.0.0",
"use-sync-external-store": ">=1.2.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
},
"use-sync-external-store": {
"optional": true
}
}
},
"packages/database": { "packages/database": {
"name": "@repo/db", "name": "@repo/db",
"version": "0.0.0", "version": "0.0.0",