From a768324553eb48ac06f055960bbf2e2be9b71ab6 Mon Sep 17 00:00:00 2001 From: zadit frontend Date: Wed, 31 Jul 2024 17:31:33 +0000 Subject: [PATCH] crazy chatgpt working on tablemaps --- src/components/Header.js | 2 +- src/components/Modal.js | 2 + src/components/TableMaps.js | 234 +++++++++++++++++++++++++++++++++++- src/config.js | 2 +- src/helpers/tableHelper.js | 6 +- 5 files changed, 239 insertions(+), 7 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 8ae40c0..9b95643 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -308,7 +308,7 @@ const Header = ({ {shopId && user.username !== undefined && user.roleId === 1 && ( <> see your other cafes - setModal("edit_account")}> + setModal("edit_tables")}> {shopName} table maps diff --git a/src/components/Modal.js b/src/components/Modal.js index f9b8229..048b567 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,5 +1,6 @@ import React from "react"; import styles from "./Modal.module.css"; +import TableMaps from "../components/TableMaps"; const Modal = ({ isOpen, onClose, children }) => { if (!isOpen) return null; @@ -23,6 +24,7 @@ const Modal = ({ isOpen, onClose, children }) => { + ); diff --git a/src/components/TableMaps.js b/src/components/TableMaps.js index 4bd40cd..b997f4a 100644 --- a/src/components/TableMaps.js +++ b/src/components/TableMaps.js @@ -1,3 +1,233 @@ -import { getTables } from "../helpers/itemHelper.js"; +import React, { useRef, useState, useEffect } from "react"; -const { response, cafe, data } = await getTables(5); +// Dummy function to simulate fetching tables +const getTables = async (cafeId) => { + return [ + { tableId: 1, xposition: 1, yposition: 1, cafeId: 5, tableNo: 1 }, + { tableId: 2, xposition: 30, yposition: 1, cafeId: 5, tableNo: 2 }, + { tableId: 3, xposition: 50, yposition: 70, cafeId: 5, tableNo: 3 }, + { tableId: 4, xposition: 200, yposition: 70, cafeId: 5, tableNo: 4 }, + { tableId: 5, xposition: -200, yposition: 70, cafeId: 5, tableNo: 4 }, + ]; +}; + +const TableCanvas = () => { + const [tables, setTables] = useState([]); + const [newTable, setNewTable] = useState(null); + const canvasRef = useRef(null); + const containerRef = useRef(null); + const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }); + const padding = 50; // Padding around the edges + const rectWidth = 40; // Width of each rectangle + const rectHeight = 30; // Height of each rectangle + + useEffect(() => { + const fetchData = async () => { + try { + const fetchedTables = await getTables(5); + setTables(fetchedTables); + } catch (error) { + console.error("Error fetching tables:", error); + } + }; + + fetchData(); + }, []); + + useEffect(() => { + const handleResize = () => { + if (containerRef.current) { + const { clientWidth, clientHeight } = containerRef.current; + setCanvasSize({ width: clientWidth, height: clientHeight }); + } + }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + useEffect(() => { + if ( + tables.length === 0 || + canvasSize.width === 0 || + canvasSize.height === 0 + ) + return; + + const canvas = canvasRef.current; + const context = canvas.getContext("2d"); + + canvas.width = canvasSize.width; + canvas.height = canvasSize.height; + + context.clearRect(0, 0, canvas.width, canvas.height); + + const allTables = newTable ? [...tables, newTable] : tables; + + // Calculate bounds for all tables + const minX = Math.min(...allTables.map((table) => table.xposition)); + const minY = Math.min(...allTables.map((table) => table.yposition)); + const maxX = Math.max(...allTables.map((table) => table.xposition)); + const maxY = Math.max(...allTables.map((table) => table.yposition)); + + const patternWidth = maxX - minX; + const patternHeight = maxY - minY; + + // Calculate the scale factor to fit tables within the canvas + const scaleX = (canvas.width - 2 * padding) / patternWidth; + const scaleY = (canvas.height - 2 * padding) / patternHeight; + const scale = Math.min(scaleX, scaleY); + + // Apply the scaling factor and adjust positions to include padding + const scaledTables = allTables.map((table) => ({ + ...table, + xposition: (table.xposition - minX) * scale + padding, + yposition: (table.yposition - minY) * scale + padding, + })); + + // Draw the tables as rectangles and print table numbers + scaledTables.forEach((table) => { + context.beginPath(); + context.rect(table.xposition, table.yposition, rectWidth, rectHeight); + context.fillStyle = "blue"; + context.fill(); + context.stroke(); + + context.font = "12px Arial"; + context.fillStyle = "white"; + context.textAlign = "center"; + context.textBaseline = "middle"; + context.fillText( + table.tableNo, + table.xposition + rectWidth / 2, + table.yposition + rectHeight / 2 + ); + }); + }, [tables, canvasSize, newTable]); + + const handleAddTable = () => { + const nextId = + (tables.length ? Math.max(tables.map((t) => t.tableId)) : 0) + 1; + setNewTable({ + tableId: nextId, + xposition: 100, // Initial position + yposition: 100, // Initial position + tableNo: nextId, + }); + }; + + const moveTable = (direction) => { + if (!newTable) return; + + const moveAmount = 10; // Amount to move per step + + const { xposition, yposition } = newTable; + let newX = xposition; + let newY = yposition; + + switch (direction) { + case "left": + newX = xposition - moveAmount; + break; + case "right": + newX = xposition + moveAmount; + break; + case "up": + newY = yposition - moveAmount; + break; + case "down": + newY = yposition + moveAmount; + break; + default: + break; + } + + setNewTable({ + ...newTable, + xposition: newX, + yposition: newY, + }); + }; + + return ( +
+ +
+ + {newTable && ( +
+ + + + +
+ )} +
+
    + {tables.map((table) => ( +
  • + Table {table.tableNo} - Position: ({table.xposition},{" "} + {table.yposition}) +
    • + ))} +
+
+
+
+ ); +}; + +const buttonStyle = { + padding: "10px", + fontSize: "20px", + border: "1px solid #ddd", + borderRadius: "4px", + cursor: "pointer", + margin: "0 5px", +}; + +export default TableCanvas; diff --git a/src/config.js b/src/config.js index 834407c..7e37a1d 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ // src/config.js -const API_BASE_URL = "https://7ms8v2-5000.csb.app"; // Replace with your actual backend URL +const API_BASE_URL = "https://44l6f8-5000.csb.app"; // Replace with your actual backend URL export default API_BASE_URL; diff --git a/src/helpers/tableHelper.js b/src/helpers/tableHelper.js index 3eb2f9a..2cc961b 100644 --- a/src/helpers/tableHelper.js +++ b/src/helpers/tableHelper.js @@ -16,8 +16,8 @@ export async function getTables(shopId) { return false; } - const tableDetail = await response.json(); - return tableDetail; + const tables = await response.json(); + return tables; } catch (error) { console.error("Error:", error); } @@ -32,7 +32,7 @@ export async function getTable(shopId, tableNo) { headers: { "Content-Type": "application/json", }, - }, + } ); if (!response.ok) {