LST Verbinden & Verbunden Button

apps/dispatch/app/(dispatch)/_components/Connection.tsx

@@ -1,6 +1,85 @@
 import { useSession } from "next-auth/react";
 import { connectionStore } from "../../_store/connectionStore";
 import { useEffect } from "react";
+import { CheckCircledIcon } from "@radix-ui/react-icons";
+
+export const ConnectBtn = () => {
+	return (
+		<>
+			<button
+				className="btn btn-soft btn-info"
+				onClick={() =>
+					(
+						document.getElementById("my_modal_1") as HTMLDialogElement
+					)?.showModal()
+				}
+			>
+				Verbinden
+			</button>
+			<dialog id="my_modal_1" className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
+					<fieldset className="fieldset w-full">
+						<label className="floating-label w-full text-base">
+							<span>Logoff Zeit (UTC+1)</span>
+							<input type="time" className="input w-full" />
+						</label>
+						<p className="fieldset-label">
+							Du kannst diese Zeit später noch anpassen.
+						</p>
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Abbrechen</button>
+							<button className="btn btn-soft btn-info">Verbinden</button>
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</>
+	);
+};
+
+export const ConnectedBtn = () => {
+	return (
+		<>
+			<button
+				className="btn btn-soft btn-success"
+				onClick={() =>
+					(
+						document.getElementById("my_modal_1") as HTMLDialogElement
+					)?.showModal()
+				}
+			>
+				Verbunden
+			</button>
+			<dialog id="my_modal_1" className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					<h3 className="text-lg font-bold mb-5">
+						Verbunden als <span className="text-info">&lt;LST_01&gt;</span>
+					</h3>
+					<fieldset className="fieldset w-full">
+						<label className="floating-label w-full text-base join">
+							<span>Logoff Zeit (UTC+1)</span>
+							<input type="time" className="input w-full" />
+							<button className="btn btn-soft btn-info join-item">
+								<CheckCircledIcon className="w-4 h-4" /> Save
+							</button>
+						</label>
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Abbrechen</button>
+							<button className="btn btn-soft btn-error">
+								Verbindung Trennen
+							</button>
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</>
+	);
+};
 
 export const Connection = () => {
 	const session = useSession();
@@ -13,5 +92,5 @@ export const Connection = () => {
 		}
 	}, [uid]);
 
-	return <div>{cStore.isConnected ? "Connected" : "Not Connected"}</div>;
+	return <div>{cStore.isConnected ? <ConnectedBtn /> : <ConnectBtn />}</div>;
 };

apps/dispatch/app/(dispatch)/_components/Navbar.tsx

@@ -51,7 +51,7 @@ export default function Navbar() {
 						<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>
 				</label>
-				<div>
+				<div className="flex items-center">
 					<Connection />
 				</div>
 				<div className="dropdown dropdown-end">