working on qr

src/components/QR.js

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import html2canvas from "html2canvas";
 
 const QRCodeWithBackground = ({
   isConfigure,
+  tableNo,
   qrCodeUrl,
   backgroundUrl,
   initialQrPosition,
@@ -14,6 +15,8 @@ const QRCodeWithBackground = ({
   const [qrPosition, setQrPosition] = useState(initialQrPosition);
   const [qrSize, setQrSize] = useState(initialQrSize);
   const [bgImage, setBgImage] = useState(backgroundUrl);
+  const fileInputRef = useRef(null);
+  const overlayTextRef = useRef(null);
 
   const handlePositionChange = (e) => {
     const { name, value } = e.target;
@@ -45,6 +48,10 @@ const QRCodeWithBackground = ({
   const printQRCode = () => {
     const element = document.getElementById("qr-code-container");
     if (element) {
+      // Hide overlay text
+      const overlayText = overlayTextRef.current;
+      if (overlayText) overlayText.style.display = "none";
+
       html2canvas(element, {
         useCORS: true,
         backgroundColor: null,
@@ -65,12 +72,49 @@ const QRCodeWithBackground = ({
         })
         .catch((err) => {
           console.error("Error capturing image:", err);
+        })
+        .finally(() => {
+          // Show overlay text again
+          if (overlayText) overlayText.style.display = "flex";
         });
     } else {
       console.error("Element not found for printing.");
     }
   };
 
+  const saveImage = () => {
+    const element = document.getElementById("qr-code-container");
+    if (element) {
+      // Hide overlay text
+      const overlayText = overlayTextRef.current;
+      if (overlayText) overlayText.style.display = "none";
+
+      html2canvas(element, {
+        useCORS: true,
+        backgroundColor: null,
+      })
+        .then((canvas) => {
+          canvas.toBlob((blob) => {
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.download = `table ${tableNo}_QRCode.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          });
+        })
+        .catch((err) => {
+          console.error("Error capturing image:", err);
+        })
+        .finally(() => {
+          // Show overlay text again
+          if (overlayText) overlayText.style.display = "flex";
+        });
+    } else {
+      console.error("Element not found for saving.");
+    }
+  };
+
   return (
     <div>
       <div
@@ -97,6 +141,22 @@ const QRCodeWithBackground = ({
             transform: "translate(-50%, -50%)",
           }}
         />
+        {/* Overlay text that triggers file input */}
+        <div
+          ref={overlayTextRef}
+          style={styles.overlayText}
+          onClick={() => fileInputRef.current.click()}
+        >
+          Click To Change Image
+        </div>
+        {/* Hidden file input */}
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
       </div>
       {isConfigure ? (
         <div style={{ marginTop: "20px" }}>
@@ -159,17 +219,6 @@ const QRCodeWithBackground = ({
               </div>
             </label>
           </div>
-          <div style={{ marginTop: "20px" }}>
-            <label style={styles.label}>
-              Background Image Upload:
-              <input
-                type="file"
-                accept="image/*"
-                onChange={handleFileChange}
-                style={styles.fileInput}
-              />
-            </label>
-          </div>
           <div style={{ marginTop: "20px" }}>
             <button
               onClick={handleSave}
@@ -195,6 +244,7 @@ const QRCodeWithBackground = ({
           </div>
         </div>
       ) : (
+        <div>
           <button
             onClick={printQRCode}
             style={{
@@ -217,6 +267,30 @@ const QRCodeWithBackground = ({
           >
             Print QR Code
           </button>
+          <button
+            onClick={saveImage}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              backgroundColor: "#17a2b8",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              transition: "background-color 0.3s",
+              marginLeft: "10px",
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.backgroundColor = "#138496")
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.backgroundColor = "#17a2b8")
+            }
+          >
+            Save Image
+          </button>
+        </div>
       )}
     </div>
   );
@@ -257,6 +331,20 @@ const styles = {
   fileInput: {
     marginLeft: "10px",
   },
+  overlayText: {
+    position: "absolute",
+    fontSize: "70px",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    top: "0",
+    bottom: "0",
+    color: "white",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer", // Indicates it's clickable
+    zIndex: 10, // Ensure it appears above other elements
+  },
 };
 
 export default QRCodeWithBackground;

src/components/TableList.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import QRCodeWithBackground from "./QR"; // Adjust path as needed
 
-const TableList = ({ tables, onSelectTable, selectedTable }) => {
+const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
   const [initialPos, setInitialPos] = useState({ left: 50, top: 50 });
   const [initialSize, setInitialSize] = useState(20);
   const [bgImageUrl, setBgImageUrl] = useState(
@@ -10,7 +10,7 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
 
   const generateQRCodeUrl = (tableCode) =>
     `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-      tableCode
+      shopUrl + "/" + tableCode
     )}`;
 
   const handleBackgroundUrlChange = (newUrl) => {
@@ -77,8 +77,10 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
               {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
               Position: ({table.xposition}, {table.yposition})
             </div>
-            {table.tableId == selectedTable?.tableId && (
+            {table.tableNo != 0 && table.tableId == selectedTable?.tableId && (
+              <>
                 <QRCodeWithBackground
+                  tableNo={table.tableNo}
                   setInitialPos={setInitialPos}
                   setInitialSize={setInitialSize}
                   qrCodeUrl={generateQRCodeUrl(table.tableCode)}
@@ -87,6 +89,8 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
                   initialQrSize={initialSize}
                   onBackgroundUrlChange={handleBackgroundUrlChange}
                 />
+                <h2>{shopUrl + "/" + table.tableCode}</h2>
+              </>
             )}
           </li>
         ))}

src/components/TablesPage.js

@@ -201,6 +201,7 @@ const TablesPage = ({ shopId }) => {
         tableNo={tableNo}
       />
       <TableList
+        shopUrl={window.location.hostname + "/" + shopId}
         tables={tables}
         onSelectTable={handleSelect}
         selectedTable={selectedTable}

src/helpers/tableHelper.js

@@ -102,3 +102,26 @@ export async function getTable(shopId, tableNo) {
     console.error("Error:", error);
   }
 }
+
+export async function getTableByCode(tableCode) {
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/table/get-table-by-code/${tableCode}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const table = await response.json();
+    return table;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}