Einsatz Card
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
export const ChangeRufgruppe = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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
69
apps/dispatch/app/(dispatch)/_components/toast/ToastCard.tsx
Normal 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;
|
||||
121
package-lock.json
generated
121
package-lock.json
generated
@@ -59,8 +59,7 @@
|
||||
"nodemailer": "^6.10.0",
|
||||
"react": "^19.0.0",
|
||||
"redis": "^4.7.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"socket.io-redis": "^6.1.1"
|
||||
"socket.io": "^4.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/db": "*",
|
||||
@@ -68,7 +67,6 @@
|
||||
"@types/express": "^5.0.0",
|
||||
"@types/node": "^22.13.5",
|
||||
"@types/nodemailer": "^6.4.17",
|
||||
"@types/socket.io-redis": "^3.0.0",
|
||||
"concurrently": "^9.1.2",
|
||||
"typescript": "latest"
|
||||
}
|
||||
@@ -3233,17 +3231,6 @@
|
||||
"@types/send": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/socket.io-redis": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/socket.io-redis/-/socket.io-redis-3.0.0.tgz",
|
||||
"integrity": "sha512-AFINYd5w7LwUqUDZAfmv4AEhXOJ0YsXCQf11RRDok+Zq7cCyhTMgFAbWSwUScP/JEYD4KF6+4O4SiussjrKbmQ==",
|
||||
"deprecated": "This is a stub types definition. socket.io-redis provides its own type definitions, so you do not need this installed.",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"socket.io-redis": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/through": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.33.tgz",
|
||||
@@ -5449,15 +5436,6 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/denque": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/denque/-/denque-1.5.1.tgz",
|
||||
"integrity": "sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
@@ -14693,33 +14671,6 @@
|
||||
"@redis/time-series": "1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redis-commands": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/redis-commands/-/redis-commands-1.7.0.tgz",
|
||||
"integrity": "sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redis-errors": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
|
||||
"integrity": "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/redis-parser": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
|
||||
"integrity": "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"redis-errors": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@@ -15863,76 +15814,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-redis": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-redis/-/socket.io-redis-6.1.1.tgz",
|
||||
"integrity": "sha512-jeaXe3TGKC20GMSlPHEdwTUIWUpay/L7m5+S9TQcOf22p9Llx44/RkpJV08+buXTZ8E+aivOotj2RdeFJJWJJQ==",
|
||||
"deprecated": "This package has been renamed to '@socket.io/redis-adapter', please see the migration guide here: https://socket.io/docs/v4/redis-adapter/#migrating-from-socketio-redis",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "~4.3.1",
|
||||
"notepack.io": "~2.2.0",
|
||||
"redis": "^3.0.0",
|
||||
"socket.io-adapter": "~2.2.0",
|
||||
"uid2": "0.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-redis/node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"supports-color": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-redis/node_modules/notepack.io": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/notepack.io/-/notepack.io-2.2.0.tgz",
|
||||
"integrity": "sha512-9b5w3t5VSH6ZPosoYnyDONnUTF8o0UkBw7JLA6eBlYJWyGT1Q3vQa8Hmuj1/X6RYvHjjygBDgw6fJhe0JEojfw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/socket.io-redis/node_modules/redis": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/redis/-/redis-3.1.2.tgz",
|
||||
"integrity": "sha512-grn5KoZLr/qrRQVwoSkmzdbw6pwF+/rwODtrOr6vuBRiR/f3rjSTGupbF90Zpqm2oenix8Do6RV7pYEkGwlKkw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"denque": "^1.5.0",
|
||||
"redis-commands": "^1.7.0",
|
||||
"redis-errors": "^1.2.0",
|
||||
"redis-parser": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/node-redis"
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-redis/node_modules/socket.io-adapter": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.2.0.tgz",
|
||||
"integrity": "sha512-rG49L+FwaVEwuAdeBRq49M97YI3ElVabJPzvHT9S6a2CWhDKnjSFasvwAwSYPRhQzfn4NtDIbCaGYgOCOU/rlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/socket.io-redis/node_modules/uid2": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",
|
||||
"integrity": "sha512-5gSP1liv10Gjp8cMEnFd6shzkL/D6W1uhXSFNCxDC+YI8+L8wkCYCbJ7n77Ezb4wE/xzMogecE+DtamEe9PZjg=="
|
||||
},
|
||||
"node_modules/socket.io/node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
|
||||
Reference in New Issue
Block a user