crazy gpt

2024-08-01 06:59:03 +00:00
parent 4a891598fd
commit e424195d2e
7 changed files with 424 additions and 93 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -297,9 +297,12 @@ function App() {
          <Route path="/guest-side" element={<GuestSide socket={socket} />} />
        </Routes>
      </header>
-      <Modal isOpen={isModalOpen} onClose={closeModal}>
-        {modalContent}
-      </Modal>
+      <Modal
+        shopId={shopId}
+        isOpen={isModalOpen}
+        modalContent={modalContent}
+        onClose={closeModal}
+      />
    </div>
  );
 }
--- a/src/components/Modal.js
+++ b/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>
  );
--- a/src/components/Modal.module.css
+++ b/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;
-  background: #f44336;
-  color: white;
+  position: absolute;
+  top: 10px;
+  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 */
 }
--- a/src/components/TableCanvas.module.css
+++ b/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);
+}
--- a/src/components/TableMaps.js
+++ b/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,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;
--- a/src/config.js
+++ b/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;
--- a/src/helpers/tableHelper.js
+++ b/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");