crazy gpt

src/App.js

@@ -297,9 +297,12 @@ function App() {
           <Route path="/guest-side" element={<GuestSide socket={socket} />} />
         </Routes>
       </header>
-      <Modal isOpen={isModalOpen} onClose={closeModal}>
+      <Modal
-        {modalContent}
+        shopId={shopId}
-      </Modal>
+        isOpen={isModalOpen}
+        modalContent={modalContent}
+        onClose={closeModal}
+      />
     </div>
   );
 }

src/components/Modal.js

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./Modal.module.css";
 import TableMaps from "../components/TableMaps";
 
-const Modal = ({ isOpen, onClose, children }) => {
+const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
@@ -20,11 +20,10 @@ const Modal = ({ isOpen, onClose, children }) => {
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
-        {children}
         <button onClick={onClose} className={styles.closeButton}>
-          Close
+          &times;
         </button>
-        <TableMaps />
+        {modalContent === "edit_tables" && <TableMaps shopId={shopId} />}
       </div>
     </div>
   );

src/components/Modal.module.css

@@ -1,4 +1,5 @@
 /* src/components/Modal.module.css */
+
 .modalOverlay {
   position: fixed;
   top: 0;
@@ -22,12 +23,20 @@
   position: relative;
 }
 
+/* Style the close button as an "X" */
 .closeButton {
-  margin-top: 20px;
+  position: absolute;
-  background: #f44336;
+  top: 10px;
-  color: white;
+  right: 10px;
+  background: none;
   border: none;
-  padding: 10px;
+  font-size: 24px;
   cursor: pointer;
-  border-radius: 5px;
+  color: #333;
+  padding: 0;
+}
+
+/* Optional: Add a hover effect */
+.closeButton:hover {
+  color: #f44336; /* Change color on hover for better UX */
 }

src/components/TableCanvas.module.css

@@ -0,0 +1,89 @@
+/* TableCanvas.module.css */
+.arrowContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 200px; /* Adjust as needed */
+  margin-top: 20px;
+}
+
+.verticalArrows {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.arrowButton {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.leftArrow {
+  position: absolute;
+  left: 0;
+}
+
+.rightArrow {
+  position: absolute;
+  right: 0;
+}
+
+.topArrow {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.bottomArrow {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.buttonStyle {
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.container {
+  width: 100%;
+  height: 50%;
+}
+
+.canvas {
+  display: block;
+  border-radius: 5px;
+  background-color: #e9e9e9;
+}
+
+.inputStyle {
+  margin-right: 10px;
+  padding: 5px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.listStyle {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.listItemStyle {
+  background-color: white;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}

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 TableCanvas = ({ shopId }) => {
-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 [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 padding = 50;
-  const rectWidth = 40; // Width of each rectangle
+  const rectWidth = 40;
-  const rectHeight = 30; // Height of each rectangle
+  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;
-
+    const hasMultipleTables = allTables.length > 1;
-    // Calculate bounds for all tables
+    const minX = hasMultipleTables
-    const minX = Math.min(...allTables.map((table) => table.xposition));
+      ? Math.min(...allTables.map((table) => table.xposition))
-    const minY = Math.min(...allTables.map((table) => table.yposition));
+      : 0;
-    const maxX = Math.max(...allTables.map((table) => table.xposition));
+    const minY = hasMultipleTables
-    const maxY = Math.max(...allTables.map((table) => table.yposition));
+      ? 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;
-
+    const scaleX =
-    // Calculate the scale factor to fit tables within the canvas
+      patternWidth > 0 ? (canvas.width - 2 * padding) / patternWidth : 1;
-    const scaleX = (canvas.width - 2 * padding) / patternWidth;
+    const scaleY =
-    const scaleY = (canvas.height - 2 * padding) / patternHeight;
+      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 =
+    const nextId = Math.random().toString(36).substr(2, 11);
-      (tables.length ? Math.max(tables.map((t) => t.tableId)) : 0) + 1;
+
+    setTables(originalTables);
     setNewTable({
       tableId: nextId,
-      xposition: 100, // Initial position
+      xposition: 100,
-      yposition: 100, // Initial position
+      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 moveAmount = 10;
-
+    const { xposition, yposition } = selectedTable || newTable;
-    const { xposition, yposition } = newTable;
     let newX = xposition;
     let newY = yposition;
 
@@ -145,20 +152,129 @@ const TableCanvas = () => {
         break;
     }
 
+    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" }}>
+        {!selectedTable && !newTable && (
           <button
             onClick={handleAddTable}
             style={{
@@ -172,25 +288,72 @@ const TableCanvas = () => {
               fontSize: "16px",
               cursor: "pointer",
               marginBottom: "10px",
+              transition: "background-color 0.3s ease",
             }}
           >
             Add Table
           </button>
-        {newTable && (
+        )}
-          <div style={{ display: "flex", justifyContent: "center" }}>
+        {(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}>
-              {"v"}
+                {"▼"}
               </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
           style={{
@@ -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;

src/config.js

@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://44l6f8-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://hflt3s-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;

src/helpers/tableHelper.js

@@ -1,6 +1,63 @@
 import API_BASE_URL from "../config.js";
 import { getLocalStorage } from "./localStorageHelpers";
 
+export async function createTable(shopId, newTable) {
+  try {
+    const token = getLocalStorage("auth");
+
+    // Construct the URL endpoint for creating a new table
+    const response = await fetch(`${API_BASE_URL}/table/create/${shopId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        newTable: newTable,
+      }), // Include the new table data in the body
+    });
+
+    if (!response.ok) {
+      const error = await response.text(); // Get error details from the response
+      throw new Error(`Error: ${error}`);
+    }
+
+    const table = await response.json(); // Assuming the response is the created table
+    return table;
+  } catch (error) {
+    console.error("Error:", error);
+    return false; // or handle the error as needed
+  }
+}
+
+export async function updateTable(shopId, table) {
+  try {
+    console.log(table);
+    const token = getLocalStorage("auth");
+    const response = await fetch(
+      `${API_BASE_URL}/table/set-table/${shopId}/${table.tableId}`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          table: table,
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const tables = await response.json();
+    return tables;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
 export async function getTables(shopId) {
   try {
     const token = getLocalStorage("auth");