diff --git a/src/App.js b/src/App.js index 1a6ae18..401664d 100644 --- a/src/App.js +++ b/src/App.js @@ -297,9 +297,12 @@ function App() { } /> - - {modalContent} - + ); } diff --git a/src/components/Modal.js b/src/components/Modal.js index 048b567..79cb33b 100644 --- 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 (
- {children} - + {modalContent === "edit_tables" && }
); diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index 22eb746..99c0b95 100644 --- 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 */ } diff --git a/src/components/TableCanvas.module.css b/src/components/TableCanvas.module.css new file mode 100644 index 0000000..569f21a --- /dev/null +++ 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); +} diff --git a/src/components/TableMaps.js b/src/components/TableMaps.js index 5b1dfff..4bac910 100644 --- 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,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 (
- - {newTable && ( -
- - - - + {!selectedTable && !newTable && ( + + )} + {(selectedTable || newTable) && ( +
+
+ + + + +
+
+ + + {(newTable || selectedTable) && ( + + )} +
)}
{ 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; diff --git a/src/config.js b/src/config.js index 7e37a1d..79de8a5 100644 --- 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; diff --git a/src/helpers/tableHelper.js b/src/helpers/tableHelper.js index 2cc961b..d8dd2d0 100644 --- 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");