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

3
apps/dispatch-server/index.ts
View File

@@ -5,6 +5,7 @@ import { Server } from "socket.io";
import { createAdapter } from "@socket.io/redis-adapter";
import { jwtMiddleware } from "modules/socketJWTmiddleware";
import { pubClient, subClient } from "modules/redis";
import { handle } from "socket-events/connect-dispatch";
const app = express();
const server = createServer(app);
@@ -17,7 +18,7 @@ const io = new Server(server, {
io.use(jwtMiddleware);
io.on("connection", (socket) => {
socket.on("connect-dispatch", () => {});
socket.on("connect-dispatch", handle(socket, io));
});
server.listen(process.env.PORT, () => {
console.log(`Server running on port ${process.env.PORT}`);

5
apps/dispatch-server/package.json
View File

@@ -13,12 +13,12 @@
"@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"
},
"dependencies": {
"@react-email/components": "^0.0.33",
"@redis/json": "^1.0.7",
"@socket.io/redis-adapter": "^8.3.0",
"axios": "^1.7.9",
"cron": "^4.1.0",
@@ -28,7 +28,6 @@
"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"
}
}

28
apps/dispatch-server/socket-events/connect-dispatch.ts
View File

@@ -1,14 +1,34 @@
import { pubClient } from "modules/redis";
import { Server, Socket } from "socket.io";
export const handle = (socket: Socket, io: Server) => async (jwt: string) => {
export const handle =
(socket: Socket, io: Server) =>
async ({
logoffTime,
selectedZone,
}: {
logoffTime: string;
selectedZone: string;
}) => {
const userId = socket.data.user.id; // User ID aus dem JWT-Token
await pubClient.set(`dispatchers:${socket.id}`, userId);
await pubClient.json.set(`dispatchers:${socket.id}`, "$", {
logoffTime,
selectedZone,
userId,
});
socket.join("dispatchers"); // Dem Dispatcher-Raum beitreten
const keys = await pubClient.keys("dispatchers:*");
const dispatchers = await Promise.all(
keys.map(async (key) => {
return await pubClient.json.get(key);
}),
);
console.log(dispatchers);
socket.on("disconnect", async () => {
console.log("Disconnected from dispatch server");
await pubClient.del(`dispatchers:${socket.id}`);
await pubClient.json.del(`dispatchers:${socket.id}`);
});
};
};

129
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 (
<>
{!connection.isConnected ? (
<button
className="btn btn-soft btn-info"
onClick={() =>
(
document.getElementById("my_modal_1") as HTMLDialogElement
)?.showModal()
}
onClick={() => modalRef.current?.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()
}
onClick={() => modalRef.current?.showModal()}
>
Verbunden
</button>
<dialog id="my_modal_1" className="modal">
)}
<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">&lt;LST_01&gt;</span>
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 join">
<label className="floating-label w-full text-base">
<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>
<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>
<button className="btn btn-soft btn-error">
{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>
);
};

26
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) => {
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 });
});

1
apps/dispatch/package.json
View File

@@ -20,6 +20,7 @@
"postcss": "^8.5.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"socket.io-client": "^4.8.1",
"tailwindcss": "^4.0.14",
"zustand": "^5.0.3"

8
docker-compose.dev.yml
View File

@@ -23,15 +23,11 @@ services:
- postgres
redis:
container_name: redis
image: docker.io/bitnami/redis:7.4
environment:
# ALLOW_EMPTY_PASSWORD is recommended only for development.
- ALLOW_EMPTY_PASSWORD=yes
- REDIS_DISABLE_COMMANDS=FLUSHDB,FLUSHALL
image: redis/redis-stack:latest
ports:
- "6379:6379"
volumes:
- "redis_data:/bitnami/redis/data"
- "redis_data:/data"
moodle_database:
container_name: moodle_database

2
package-lock.json generated
View File

@@ -30,6 +30,7 @@
"postcss": "^8.5.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"socket.io-client": "^4.8.1",
"tailwindcss": "^4.0.14",
"zustand": "^5.0.3"
@@ -48,6 +49,7 @@
"apps/dispatch-server": {
"dependencies": {
"@react-email/components": "^0.0.33",
"@redis/json": "^1.0.7",
"@socket.io/redis-adapter": "^8.3.0",
"axios": "^1.7.9",
"cron": "^4.1.0",