crazy gpt

src/components/TableMaps.js

@@ -1,37 +1,32 @@
 import React, { useRef, useState, useEffect } from "react";
+import { getTables, updateTable, createTable } from "../helpers/tableHelper";
 
-// 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 },
-  ];
-};
-
-const TableCanvas = () => {
+const TableCanvas = ({ shopId }) => {
   const [tables, setTables] = useState([]);
+  const [selectedTable, setSelectedTable] = useState(null);
   const [newTable, setNewTable] = useState(null);
+  const [originalTables, setOriginalTables] = useState([]);
+  const [tableNo, setTableNo] = useState(""); // State for table name
   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
+  const padding = 50;
+  const rectWidth = 40;
+  const rectHeight = 30;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const fetchedTables = await getTables(5);
+        const fetchedTables = await getTables(shopId);
         setTables(fetchedTables);
+        setOriginalTables(fetchedTables);
       } catch (error) {
         console.error("Error fetching tables:", error);
       }
     };
 
     fetchData();
-  }, []);
+  }, [shopId]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -63,68 +58,80 @@ const TableCanvas = () => {
     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 hasMultipleTables = allTables.length > 1;
+    const minX = hasMultipleTables
+      ? Math.min(...allTables.map((table) => table.xposition))
+      : 0;
+    const minY = hasMultipleTables
+      ? Math.min(...allTables.map((table) => table.yposition))
+      : 0;
+    const maxX = hasMultipleTables
+      ? Math.max(...allTables.map((table) => table.xposition))
+      : 1;
+    const maxY = hasMultipleTables
+      ? Math.max(...allTables.map((table) => table.yposition))
+      : 1;
 
     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 scaleX =
+      patternWidth > 0 ? (canvas.width - 2 * padding) / patternWidth : 1;
+    const scaleY =
+      patternHeight > 0 ? (canvas.height - 2 * padding) / patternHeight : 1;
     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 first
     scaledTables.forEach((table) => {
       context.beginPath();
       context.rect(table.xposition, table.yposition, rectWidth, rectHeight);
-      context.fillStyle = "blue";
+      context.fillStyle =
+        table.tableId === (selectedTable?.tableId || newTable?.tableId)
+          ? "red"
+          : "blue";
       context.fill();
       context.stroke();
-    });
-
-    // Then draw the table numbers on top
-    scaledTables.forEach((table) => {
       context.font = "12px Arial";
       context.fillStyle = "white";
       context.textAlign = "center";
       context.textBaseline = "middle";
       context.fillText(
-        table.tableNo,
+        table.tableId === (selectedTable?.tableId || newTable?.tableId)
+          ? tableNo == 0
+            ? "clerk"
+            : tableNo
+          : table.tableNo == 0
+          ? "clerk"
+          : table.tableNo,
         table.xposition + rectWidth / 2,
         table.yposition + rectHeight / 2
       );
     });
-  }, [tables, canvasSize, newTable]);
+  }, [tables, canvasSize, newTable, selectedTable, tableNo]);
 
   const handleAddTable = () => {
-    const nextId =
-      (tables.length ? Math.max(tables.map((t) => t.tableId)) : 0) + 1;
+    const nextId = Math.random().toString(36).substr(2, 11);
+
+    setTables(originalTables);
     setNewTable({
       tableId: nextId,
-      xposition: 100, // Initial position
-      yposition: 100, // Initial position
+      xposition: 100,
+      yposition: 100,
       tableNo: nextId,
     });
+    setSelectedTable(null);
+    setTableNo(""); // Reset table name
   };
 
   const moveTable = (direction) => {
-    if (!newTable) return;
+    if (!selectedTable && !newTable) return;
 
-    const moveAmount = 10; // Amount to move per step
-
-    const { xposition, yposition } = newTable;
+    const moveAmount = 10;
+    const { xposition, yposition } = selectedTable || newTable;
     let newX = xposition;
     let newY = yposition;
 
@@ -145,51 +152,207 @@ const TableCanvas = () => {
         break;
     }
 
-    setNewTable({
-      ...newTable,
-      xposition: newX,
-      yposition: newY,
-    });
+    if (newTable) {
+      setNewTable({
+        ...newTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    } else if (selectedTable) {
+      setTables(
+        tables.map((table) =>
+          table.tableId === selectedTable.tableId
+            ? { ...table, xposition: newX, yposition: newY }
+            : table
+        )
+      );
+      setSelectedTable({
+        ...selectedTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    }
+  };
+
+  const handleSelectTable = (event) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const clickedTable = tables.find(
+      (table) =>
+        x >= table.xposition &&
+        x <= table.xposition + rectWidth &&
+        y >= table.yposition &&
+        y <= table.yposition + rectHeight
+    );
+
+    if (clickedTable) {
+      setSelectedTable(clickedTable);
+      setNewTable(null);
+      setTableNo(clickedTable.tableNo || ""); // Set table name if exists
+    } else if (newTable) {
+      setSelectedTable(newTable);
+      setTableNo(newTable.tableNo || ""); // Set table name if exists
+    }
+  };
+
+  const handleSelect = (table) => {
+    setSelectedTable(null);
+    setSelectedTable(table);
+    setNewTable(null);
+    setTables(originalTables);
+    if (table.tableNo != 0)
+      setTableNo(table.tableNo || ""); // Set table name if exists
+    else setTableNo(0);
+    console.log(table.tableNo);
+  };
+
+  const handleCancel = () => {
+    setSelectedTable(null);
+    setNewTable(null);
+    setTables(originalTables);
+    setTableNo(""); // Reset table name
+  };
+
+  const handleSave = async () => {
+    if (newTable) {
+      try {
+        const createdTable = await createTable(shopId, {
+          ...newTable,
+          tableNo,
+        });
+        setTables([...tables, createdTable]);
+        setOriginalTables([...tables, createdTable]);
+        setNewTable(null);
+        setTableNo(""); // Reset table name
+      } catch (error) {
+        console.error("Error creating table:", error);
+      }
+    } else if (selectedTable) {
+      try {
+        const updatedTable = await updateTable(shopId, {
+          ...selectedTable,
+          tableNo,
+        });
+        setTables(
+          tables.map((table) =>
+            table.tableId === updatedTable.tableId ? updatedTable : table
+          )
+        );
+        setOriginalTables(
+          tables.map((table) =>
+            table.tableId === updatedTable.tableId ? updatedTable : table
+          )
+        );
+        setSelectedTable(null);
+        setTableNo(""); // Reset table name
+      } catch (error) {
+        console.error("Error updating table:", error);
+      }
+    }
+  };
+
+  const handleSetTableNo = (event) => {
+    const newValue = event.target.value;
+    // Prevent setting value to '0' or starting with '0'
+    // if (newValue === "" || /^[1-9][0-9]*$/.test(newValue)) {
+    setTableNo(newValue);
+    // }
   };
 
   return (
     <div ref={containerRef} style={{ width: "100%", height: "50%" }}>
       <canvas
         ref={canvasRef}
-        style={{ border: "1px solid black", display: "block" }}
+        style={{
+          display: "block",
+          borderRadius: "5px",
+          backgroundColor: "#e9e9e9",
+        }}
+        onClick={handleSelectTable}
       />
       <div style={{ marginTop: "20px" }}>
-        <button
-          onClick={handleAddTable}
-          style={{
-            display: "block",
-            width: "100%",
-            padding: "10px",
-            backgroundColor: "#007bff",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            fontSize: "16px",
-            cursor: "pointer",
-            marginBottom: "10px",
-          }}
-        >
-          Add Table
-        </button>
-        {newTable && (
-          <div style={{ display: "flex", justifyContent: "center" }}>
-            <button onClick={() => moveTable("left")} style={buttonStyle}>
-              {"<"}
-            </button>
-            <button onClick={() => moveTable("up")} style={buttonStyle}>
-              {"^"}
-            </button>
-            <button onClick={() => moveTable("down")} style={buttonStyle}>
-              {"v"}
-            </button>
-            <button onClick={() => moveTable("right")} style={buttonStyle}>
-              {">"}
-            </button>
+        {!selectedTable && !newTable && (
+          <button
+            onClick={handleAddTable}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "10px",
+              backgroundColor: "#007bff",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              fontSize: "16px",
+              cursor: "pointer",
+              marginBottom: "10px",
+              transition: "background-color 0.3s ease",
+            }}
+          >
+            Add Table
+          </button>
+        )}
+        {(selectedTable || newTable) && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginBottom: "10px",
+              }}
+            >
+              <button onClick={() => moveTable("left")} style={buttonStyle}>
+                {"◄"}
+              </button>
+              <button onClick={() => moveTable("up")} style={buttonStyle}>
+                {"▲"}
+              </button>
+              <button onClick={() => moveTable("down")} style={buttonStyle}>
+                {"▼"}
+              </button>
+              <button onClick={() => moveTable("right")} style={buttonStyle}>
+                {"►"}
+              </button>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                marginBottom: "10px",
+              }}
+            >
+              <input
+                type="text"
+                placeholder="Table No"
+                value={tableNo}
+                onChange={handleSetTableNo}
+                style={{
+                  marginRight: "10px",
+                  padding: "10px",
+                  fontSize: "16px",
+                  borderRadius: "4px",
+                  border: "1px solid #ddd",
+                  boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+                  width: "100px",
+                }}
+              />
+              <button onClick={handleCancel} style={actionButtonStyle}>
+                Cancel
+              </button>
+              {(newTable || selectedTable) && (
+                <button onClick={handleSave} style={actionButtonStyle}>
+                  Save
+                </button>
+              )}
+            </div>
           </div>
         )}
         <div
@@ -211,6 +374,7 @@ const TableCanvas = () => {
                   borderRadius: "4px",
                   boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
                 }}
+                onClick={() => handleSelect(table)}
               >
                 Table {table.tableNo} - Position: ({table.xposition},{" "}
                 {table.yposition})
@@ -232,4 +396,14 @@ const buttonStyle = {
   margin: "0 5px",
 };
 
+const actionButtonStyle = {
+  padding: "10px 20px",
+  fontSize: "16px",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  margin: "0 5px",
+  transition: "background-color 0.3s ease, color 0.3s ease",
+};
+
 export default TableCanvas;