109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
"use client";
|
|
import { useSession } from "next-auth/react";
|
|
import { connectionStore } from "../../_store/connectionStore";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
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 (
|
|
<>
|
|
{!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">
|
|
{connection.isConnected ? (
|
|
<h3 className="text-lg font-bold mb-5">
|
|
Verbunden als{" "}
|
|
<span className="text-info">
|
|
<{connection.selectedZone}>
|
|
</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
|
|
onChange={(e) =>
|
|
setForm({
|
|
...form,
|
|
logoffTime: e.target.value,
|
|
})
|
|
}
|
|
value={form.logoffTime}
|
|
type="time"
|
|
className="input w-full"
|
|
/>
|
|
</label>
|
|
{!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>
|
|
{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>
|
|
</dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Connection = () => {
|
|
return (
|
|
<div>
|
|
<ConnectionBtn />
|
|
</div>
|
|
);
|
|
};
|