From 6b09e3380eb6814bb8e3eedce602707c89eb82fa Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Tue, 25 Mar 2025 00:19:08 -0700
Subject: [PATCH] Added side Pannel

---
 .../app/(dispatch)/_components/map/Map.tsx    |  14 ++-----------
 .../_components/pannel/OpenButton.tsx         |  15 ++++++++++++++
 .../(dispatch)/_components/pannel/Pannel.tsx  |  16 +++++++++++++++
 apps/dispatch/app/(dispatch)/page.tsx         |  19 ++++++++++++++++--
 apps/dispatch/app/_store/missionsStore.ts     |  16 +++++++++++++++
 apps/dispatch/app/_store/pannelStore.ts       |  11 ++++++++++
 apps/dispatch/app/layout.tsx                  |   2 +-
 apps/dispatch/tailwind.config.ts              |   3 +++
 grafana/grafana.db                            | Bin 1122304 -> 1122304 bytes
 9 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx
 create mode 100644 apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
 create mode 100644 apps/dispatch/app/_store/missionsStore.ts
 create mode 100644 apps/dispatch/app/_store/pannelStore.ts

diff --git a/apps/dispatch/app/(dispatch)/_components/map/Map.tsx b/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
index 49f43b7b..2552837d 100644
--- a/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/map/Map.tsx
@@ -1,25 +1,15 @@
 "use client";
-import { useEffect, useRef } from "react";
-
-import L from "leaflet";
 import "leaflet/dist/leaflet.css";
-import ToastCard from "../toast/ToastCard";
-import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
 import { useMapStore } from "_store/mapStore";
 import { MapContainer } from "react-leaflet";
 import { BaseMaps } from "(dispatch)/_components/map/BaseMaps";
 import { ContextMenu } from "(dispatch)/_components/map/ContextMenu";
 
-export default () => {
+export default ({}) => {
 	const { map } = useMapStore();
 
 	return (
-		<MapContainer
-			className="h-full w-full"
-			center={map.center}
-			zoom={map.zoom}
-			scrollWheelZoom={true}
-		>
+		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
 			<BaseMaps />
 			<ContextMenu />
 		</MapContainer>
diff --git a/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx b/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx
new file mode 100644
index 00000000..be01bcf5
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx
@@ -0,0 +1,15 @@
+import { usePannelStore } from "_store/pannelStore";
+
+export const OpenButton = () => {
+	const { setOpen } = usePannelStore();
+	return (
+		<button
+			onClick={() => {
+				setOpen(true);
+			}}
+			className="btn absolute inset-y-0 right-0 z-9999"
+		>
+			Open
+		</button>
+	);
+};
diff --git a/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx b/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
new file mode 100644
index 00000000..f68b1f3e
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx
@@ -0,0 +1,16 @@
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "helpers/cn";
+
+export const Pannel = () => {
+	const { isOpen, setOpen } = usePannelStore();
+	return (
+		<div className={cn("flex-1 max-w-[200px] z-9999999")}>
+			<div className="bg-base-100 h-full w-full">
+				<div className="flex justify-between items-center p-4">
+					<h1 className="text-xl font-bold">Pannel</h1>
+					<button onClick={() => setOpen(false)}>Close</button>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/dispatch/app/(dispatch)/page.tsx b/apps/dispatch/app/(dispatch)/page.tsx
index e411885f..41b5b97d 100644
--- a/apps/dispatch/app/(dispatch)/page.tsx
+++ b/apps/dispatch/app/(dispatch)/page.tsx
@@ -1,12 +1,27 @@
 "use client";
 
+import { OpenButton } from "(dispatch)/_components/pannel/OpenButton";
+import { Pannel } from "(dispatch)/_components/pannel/Pannel";
+import { usePannelStore } from "_store/pannelStore";
+import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
 const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
 
 export default () => {
+	const { isOpen } = usePannelStore();
 	return (
-		<div className="relative flex-1">
-			<Map />
+		<div
+			className={cn(
+				"relative flex-1 flex transition-all duration-500 ease",
+				!isOpen && "w-[calc(100%+200px)]",
+				isOpen && "w-[100%]",
+			)}
+		>
+			{/* <MapToastCard2 /> */}
+			<Map>
+				<OpenButton />
+			</Map>
+			<Pannel />
 		</div>
 	);
 };
diff --git a/apps/dispatch/app/_store/missionsStore.ts b/apps/dispatch/app/_store/missionsStore.ts
new file mode 100644
index 00000000..c5f1586f
--- /dev/null
+++ b/apps/dispatch/app/_store/missionsStore.ts
@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface Mission {
+	id: string;
+	name: string;
+}
+
+interface MissionStore {
+	missions: Mission[];
+	setMissions: (missions: Mission[]) => void;
+}
+
+export const missionsStore = create<MissionStore>((set) => ({
+	missions: [],
+	setMissions: (missions) => set({ missions }),
+}));
diff --git a/apps/dispatch/app/_store/pannelStore.ts b/apps/dispatch/app/_store/pannelStore.ts
new file mode 100644
index 00000000..3022b37e
--- /dev/null
+++ b/apps/dispatch/app/_store/pannelStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface PannelStore {
+	isOpen: boolean;
+	setOpen: (isOpen: boolean) => void;
+}
+
+export const usePannelStore = create<PannelStore>((set) => ({
+	isOpen: true,
+	setOpen: (isOpen) => set({ isOpen }),
+}));
diff --git a/apps/dispatch/app/layout.tsx b/apps/dispatch/app/layout.tsx
index 65ee4d64..aba881cd 100644
--- a/apps/dispatch/app/layout.tsx
+++ b/apps/dispatch/app/layout.tsx
@@ -27,7 +27,7 @@ export default async function RootLayout({
 	return (
 		<html lang="de" data-theme="dark">
 			<body
-				className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col`}
+				className={`${geistSans.variable} ${geistMono.variable} h-screen flex flex-col overflow-hidden`}
 			>
 				<NextAuthSessionProvider session={session}>
 					{children}
diff --git a/apps/dispatch/tailwind.config.ts b/apps/dispatch/tailwind.config.ts
index d8f4ec22..b800ba5d 100644
--- a/apps/dispatch/tailwind.config.ts
+++ b/apps/dispatch/tailwind.config.ts
@@ -13,6 +13,9 @@ export default {
 				background: "var(--background)",
 				foreground: "var(--foreground)",
 			},
+			transitionProperty: {
+				width: "width",
+			},
 		},
 	},
 } satisfies Config;
diff --git a/grafana/grafana.db b/grafana/grafana.db
index 982230a210c5d5cdf210dcb2522c015e605fdc15..8d2cbe89024a5354d1be1f7cea5f065cad909f2d 100644
GIT binary patch
delta 323
zcmZoT;L>owWr7qFv*<(_Cm^{o;hQcSo17T4Gw1Zi&78v11+2I@n#=Xt%k>z6m<foP
zftUq|S%H{sd$}Ha_eZ`-49xu5Ed1I0TlsJCPueW#5Y0b5Tc1OThdKR`pD6<agQ6t|
z%k+MG4lx#x!1T>PInB`YN8wYISXdcs8CjBZQWNt^3l#EmQWO&N^79l@Qp+-vQ;V6>
zA6}N+{!gD{IX@#?`!ahDAm-e@%$_SefCXp}?^Z@eW`XT23%LHy=jVCOz{yt2z`u;&
zm)DoAcDsNBcP<-O2@3}Uho!2iaq#qyKHS>erXdDqR>sCwMy65I5BhM+NSP|Y1oX^I
xOpJ`pOic{64GgRd47PuE<Nm_R0(5>_`)eO=Am#yLULfWJV*c%~eFQ`=0{}^eV3_~_

delta 251
zcmZoT;L>owWr7qF)ANZkPC#;F!Z%$uRyi?dXU^%3n>mH23s`Y+G?(kOm+LVCF%u9o
z12GE_vjQ>O_HsS;?vH%87?}C98ThmLxAIToFWfBX5Y0b5Tc1OTn<@R_+=+@TtPHlC
z(;w(_NHV2An7$b#p_~42ks|{GgBsAHLVXSypv3ln`W(yoSy^S6Z5gLO)aQ_BKV;7V
z#GKm?*>hP3umDZs-O9+wEU=wr0oUL8{6O8DY@ZqUm+|}Z`tm&AF5tkO%QjiTp=|qS
iH|{U2EGaA;4DGLdxPh1lh<SmS4~Y4<zxELjy$k?{a!{`T