From 93804855f1ffe87fbce97244cbca2c2fa1564e77 Mon Sep 17 00:00:00 2001 From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com> Date: Sun, 2 Feb 2025 20:23:30 +0100 Subject: [PATCH] fixed theme toggle --- .../app/(dispatch)/_components/Map.tsx | 43 +++---- .../app/(dispatch)/_components/Navbar.tsx | 119 +++++++++--------- .../_components/ToggleTalkButton.tsx | 36 +++--- apps/dispatch/app/(dispatch)/layout.tsx | 18 ++- apps/dispatch/app/(dispatch)/page.tsx | 15 ++- apps/dispatch/app/layout.tsx | 22 ++-- apps/dispatch/package.json | 1 + apps/dispatch/tailwind.config.ts | 1 + package-lock.json | 66 +++++++++- 9 files changed, 199 insertions(+), 122 deletions(-) diff --git a/apps/dispatch/app/(dispatch)/_components/Map.tsx b/apps/dispatch/app/(dispatch)/_components/Map.tsx index 29145eb4..970a462d 100644 --- a/apps/dispatch/app/(dispatch)/_components/Map.tsx +++ b/apps/dispatch/app/(dispatch)/_components/Map.tsx @@ -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(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: '© OSM contributors', - }).addTo(map); - - return () => { - map.remove(); // Karte beim Unmounten bereinigen - }; - }, []); - return
; + useEffect(() => { + if (!mapRef.current) return; -} \ No newline at end of file + // 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: + '© OSM contributors', + }).addTo(map); + + return () => { + map.remove(); // Karte beim Unmounten bereinigen + }; + }, []); + + return
; +}; diff --git a/apps/dispatch/app/(dispatch)/_components/Navbar.tsx b/apps/dispatch/app/(dispatch)/_components/Navbar.tsx index 54e9d419..563c1279 100644 --- a/apps/dispatch/app/(dispatch)/_components/Navbar.tsx +++ b/apps/dispatch/app/(dispatch)/_components/Navbar.tsx @@ -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 (
-
- VAR Leitstelle V2 -
-
-
    -
  • - -
    • -
  • - -
    • -
-
-
- -
-
- -
-
... - + +
+
    +
  • + +
    • +
  • + +
    • +
+
+
+ +
+
+ +
+
+ ... +
+ +
-
-
-
); } diff --git a/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx b/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx index b33a0f6e..b1fbcb4d 100644 --- a/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx +++ b/apps/dispatch/app/(dispatch)/_components/ToggleTalkButton.tsx @@ -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 = () => { ); -}; \ No newline at end of file +}; diff --git a/apps/dispatch/app/(dispatch)/layout.tsx b/apps/dispatch/app/(dispatch)/layout.tsx index 1b205990..b5aee3a6 100644 --- a/apps/dispatch/app/(dispatch)/layout.tsx +++ b/apps/dispatch/app/(dispatch)/layout.tsx @@ -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 ( - - - - {children} - - + <> + + {children} + ); } diff --git a/apps/dispatch/app/(dispatch)/page.tsx b/apps/dispatch/app/(dispatch)/page.tsx index 5de19b9d..9dc3bbe6 100644 --- a/apps/dispatch/app/(dispatch)/page.tsx +++ b/apps/dispatch/app/(dispatch)/page.tsx @@ -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 -} \ No newline at end of file + return ( +
+ +
+ ); +}; diff --git a/apps/dispatch/app/layout.tsx b/apps/dispatch/app/layout.tsx index e5269389..24d7a906 100644 --- a/apps/dispatch/app/layout.tsx +++ b/apps/dispatch/app/layout.tsx @@ -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 ( - + {children} diff --git a/apps/dispatch/package.json b/apps/dispatch/package.json index 0abfcf0e..5239bfbf 100644 --- a/apps/dispatch/package.json +++ b/apps/dispatch/package.json @@ -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", diff --git a/apps/dispatch/tailwind.config.ts b/apps/dispatch/tailwind.config.ts index f8122ad9..b9263282 100644 --- a/apps/dispatch/tailwind.config.ts +++ b/apps/dispatch/tailwind.config.ts @@ -6,6 +6,7 @@ export default { './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], + theme: { extend: { colors: { diff --git a/package-lock.json b/package-lock.json index b360be6c..69fb1480 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,17 +21,21 @@ "apps/dispatch": { "version": "0.1.0", "dependencies": { + "@radix-ui/react-icons": "^1.3.2", "@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", @@ -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": { "resolved": "packages/database", "link": true @@ -1548,6 +1560,12 @@ "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "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": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", @@ -1598,6 +1616,15 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "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": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", @@ -1617,13 +1644,13 @@ "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -5534,6 +5561,11 @@ "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": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -9035,6 +9067,34 @@ "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": { "name": "@repo/db", "version": "0.0.0",