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

Einsatz Card

Browse Source
This commit is contained in:
nocnico
2025-03-16 21:57:30 +01:00
parent cf61740698
commit 51729e4baf
6 changed files with 87 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dispatch/app/(dispatch)/_components/ChangeRufgruppe.tsx
View File

@@ -1,5 +1,3 @@
"use client";
export const ChangeRufgruppe = () => {
return (
<>

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

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import ToastCard from "./toast/ToastCard";
export default () => {
const mapRef = useRef<HTMLDivElement>(null);
@@ -24,5 +25,18 @@ export default () => {
};
}, []);
return <div ref={mapRef} className="w-full h-full rounded-lg shadow-lg" />;
return (
<div className="relative w-full h-full">
<div
ref={mapRef}
className="w-full h-full rounded-lg shadow-lg"
style={{
filter:
"invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
background: "#000 !important",
}}
/>
<ToastCard />
</div>
);
};

42
apps/dispatch/app/(dispatch)/_components/Notifications.tsx
View File

@@ -1,42 +0,0 @@
"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>
</>
);
};

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

@@ -2,7 +2,6 @@
import { ToggleTalkButton } from "../ToggleTalkButton";
import { ChangeRufgruppe } from "../ChangeRufgruppe";
import { Notifications } from "../Notifications";
import Link from "next/link";
import { Connection } from "../Connection";
import { ThemeSwap } from "./_components/ThemeSwap";
@@ -21,12 +20,12 @@ export default function Navbar() {
};
return (
<div className="navbar bg-base-100 shadow-sm">
<div className="navbar bg-base-100 shadow-sm flex gap-5">
<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">
<ul className="menu menu-horizontal bg-base-200 rounded-box flex items-center gap-2">
<li>
<ToggleTalkButton />
</li>
@@ -35,9 +34,6 @@ export default function Navbar() {
</li>
</ul>
</div>
<div className="flex gap-2">
<Notifications />
</div>
<div className="flex gap-6">
<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
<div className="flex items-center">

69
apps/dispatch/app/(dispatch)/_components/toast/ToastCard.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { useState } from "react";
interface ToastCard {
id: number;
title: string;
content: string;
}
const MapToastCard2 = () => {
const [cards, setCards] = useState<ToastCard[]>([]);
const [openCardId, setOpenCardId] = useState<number | null>(null);
const addCard = () => {
const newCard: ToastCard = {
id: Date.now(),
title: `Einsatz #${cards.length + 1}`,
content: `Inhalt von Einsatz #${cards.length + 1}.`,
};
setCards([...cards, newCard]);
};
const removeCard = (id: number) => {
setCards(cards.filter((card) => card.id !== id));
};
const toggleCard = (id: number) => {
setOpenCardId(openCardId === id ? null : id);
};
return (
<div className="absolute top-4 right-4 z-[1000] flex flex-col space-y-4">
{/* DEBUG */}
<button
onClick={addCard}
className="mb-4 p-2 bg-blue-500 text-white rounded self-end"
>
Debug Einsatz
</button>
{/* DEBUG */}
{cards.map((card) => (
<div
key={card.id}
className="collapse collapse-arrow bg-base-100 border-base-300 border w-120 relative"
>
<input
type="checkbox"
className="absolute top-0 left-0 opacity-0"
checked={openCardId === card.id}
onChange={() => toggleCard(card.id)}
/>
<div className="collapse-title font-semibold flex justify-between items-center">
<span>{card.title}</span>
<button
className="btn btn-sm btn-circle btn-ghost z-10 absolute top-3.5 right-8"
onClick={(e) => {
removeCard(card.id);
}}
>
✕
</button>
</div>
<div className="collapse-content text-sm">{card.content}</div>
</div>
))}
</div>
);
};
export default MapToastCard2;