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

finished conenct modal

Browse Source
This commit is contained in:
PxlLoewe
2025-03-15 20:40:40 -07:00
parent 2ecc91adb9
commit cf61740698
8 changed files with 147 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
apps/dispatch/app/(dispatch)/_components/Connection.tsx
View File

@@ -1,79 +1,96 @@
"use client";
import { useSession } from "next-auth/react";
import { connectionStore } from "../../_store/connectionStore";
import { useEffect } from "react";
import { CheckCircledIcon } from "@radix-ui/react-icons";
import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
export const ConnectBtn = () => {
export const ConnectionBtn = () => {
const modalRef = useRef<HTMLDialogElement>(null);
const connection = connectionStore((state) => state);
const [form, setForm] = useState({
logoffTime: "",
selectedZone: "LST_01",
});
const session = useSession();
const uid = session.data?.user?.id;
if (!uid) return null;
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">
{!connection.isConnected ? (
<button
className="btn btn-soft btn-info"
onClick={() => modalRef.current?.showModal()}
>
Verbinden
</button>
) : (
<button
className="btn btn-soft btn-success"
onClick={() => modalRef.current?.showModal()}
>
Verbunden
</button>
)}
<dialog ref={modalRef} 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>
{connection.isConnected ? (
<h3 className="text-lg font-bold mb-5">
Verbunden als{" "}
<span className="text-info">
&lt;{connection.selectedZone}&gt;
</span>
</h3>
) : (
<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" />
<input
onChange={(e) =>
setForm({
...form,
logoffTime: e.target.value,
})
}
value={form.logoffTime}
type="time"
className="input w-full"
/>
</label>
<p className="fieldset-label">
Du kannst diese Zeit später noch anpassen.
</p>
{!connection.isConnected && (
<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>
{connection.isConnected ? (
<button
className="btn btn-soft btn-error"
type="submit"
onSubmit={() => false}
onClick={() => {
connection.disconnect();
}}
>
Verbindung Trennen
</button>
) : (
<button
type="submit"
onSubmit={() => false}
onClick={() => {
connection.connect(uid, form.selectedZone, form.logoffTime);
}}
className="btn btn-soft btn-info"
>
Verbinden
</button>
)}
</form>
</div>
</div>
@@ -83,15 +100,9 @@ export const ConnectedBtn = () => {
};
export const Connection = () => {
const session = useSession();
const cStore = connectionStore((state) => state);
const uid = session.data?.user?.id;
useEffect(() => {
if (uid) {
cStore.connect(uid);
}
}, [uid]);
return <div>{cStore.isConnected ? <ConnectedBtn /> : <ConnectBtn />}</div>;
return (
<div>
<ConnectionBtn />
</div>
);
};

30
apps/dispatch/app/_store/connectionStore.ts
View File

@@ -3,17 +3,39 @@ import { socket } from "../(dispatch)/socket";
interface ConnectionStore {
isConnected: boolean;
connect: (uid: string) => Promise<void>;
selectedZone: string;
connect: (
uid: string,
selectedZone: string,
logoffTime: string,
) => Promise<void>;
disconnect: () => void;
}
export const connectionStore = create<ConnectionStore>((set) => ({
isConnected: false,
connect: async (uid: string) => {
socket.auth = { uid };
socket.connect();
selectedZone: "LST_01",
connect: async (uid, selectedZone, logoffTime) =>
new Promise((resolve) => {
socket.auth = { uid };
set({ selectedZone });
socket.connect();
socket.once("connect", () => {
socket.emit("connect-dispatch", {
logoffTime,
selectedZone,
});
resolve();
});
}),
disconnect: () => {
socket.disconnect();
},
}));
socket.on("connect", () => {
connectionStore.setState({ isConnected: true });
});
socket.on("disconnect", () => {
connectionStore.setState({ isConnected: false });
});