From 76741e304f87b13d6780d9a6f01c169529096f34 Mon Sep 17 00:00:00 2001
From: frontend perkafean
 <165241731+frontendperkafean@users.noreply.github.com>
Date: Mon, 5 Aug 2024 09:44:01 +0000
Subject: [PATCH] working on qr

---
 src/components/QR.js         | 156 +++++++++++++++++++++++++++--------
 src/components/TableList.js  |  28 ++++---
 src/components/TablesPage.js |   1 +
 src/helpers/tableHelper.js   |  23 ++++++
 4 files changed, 162 insertions(+), 46 deletions(-)

diff --git a/src/components/QR.js b/src/components/QR.js
index c20d2f9..91336a0 100644
--- a/src/components/QR.js
+++ b/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,28 +244,53 @@ const QRCodeWithBackground = ({
           </div>
         </div>
       ) : (
-        <button
-          onClick={printQRCode}
-          style={{
-            marginTop: "10px",
-            padding: "10px 20px",
-            fontSize: "16px",
-            backgroundColor: "#007bff",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-            transition: "background-color 0.3s",
-          }}
-          onMouseOver={(e) =>
-            (e.currentTarget.style.backgroundColor = "#0056b3")
-          }
-          onMouseOut={(e) =>
-            (e.currentTarget.style.backgroundColor = "#007bff")
-          }
-        >
-          Print QR Code
-        </button>
+        <div>
+          <button
+            onClick={printQRCode}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              backgroundColor: "#007bff",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              transition: "background-color 0.3s",
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.backgroundColor = "#0056b3")
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.backgroundColor = "#007bff")
+            }
+          >
+            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;
diff --git a/src/components/TableList.js b/src/components/TableList.js
index c9a24c7..7ef36b0 100644
--- a/src/components/TableList.js
+++ b/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,16 +77,20 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
               {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
               Position: ({table.xposition}, {table.yposition})
             </div>
-            {table.tableId == selectedTable?.tableId && (
-              <QRCodeWithBackground
-                setInitialPos={setInitialPos}
-                setInitialSize={setInitialSize}
-                qrCodeUrl={generateQRCodeUrl(table.tableCode)}
-                backgroundUrl={bgImageUrl}
-                initialQrPosition={initialPos}
-                initialQrSize={initialSize}
-                onBackgroundUrlChange={handleBackgroundUrlChange}
-              />
+            {table.tableNo != 0 && table.tableId == selectedTable?.tableId && (
+              <>
+                <QRCodeWithBackground
+                  tableNo={table.tableNo}
+                  setInitialPos={setInitialPos}
+                  setInitialSize={setInitialSize}
+                  qrCodeUrl={generateQRCodeUrl(table.tableCode)}
+                  backgroundUrl={bgImageUrl}
+                  initialQrPosition={initialPos}
+                  initialQrSize={initialSize}
+                  onBackgroundUrlChange={handleBackgroundUrlChange}
+                />
+                <h2>{shopUrl + "/" + table.tableCode}</h2>
+              </>
             )}
           </li>
         ))}
diff --git a/src/components/TablesPage.js b/src/components/TablesPage.js
index 8c250a8..c2b1ea2 100644
--- a/src/components/TablesPage.js
+++ b/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}
diff --git a/src/helpers/tableHelper.js b/src/helpers/tableHelper.js
index d8dd2d0..cef4247 100644
--- a/src/helpers/tableHelper.js
+++ b/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);
+  }
+}