working on qr style

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "html2canvas": "^1.4.1",
         "qrcode.react": "^3.1.0",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
@@ -5864,6 +5865,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6595,6 +6604,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -9505,6 +9522,18 @@
         }
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -17281,6 +17310,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -17777,6 +17814,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "html2canvas": "^1.4.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",

src/components/QR.js

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import html2canvas from "html2canvas";
+
+const QRCodeWithBackground = ({
+  qrCodeUrl,
+  backgroundUrl,
+  initialQrPosition,
+  initialQrSize,
+  onBackgroundUrlChange,
+}) => {
+  const [qrPosition, setQrPosition] = useState(initialQrPosition);
+  const [qrSize, setQrSize] = useState(initialQrSize);
+  const [bgImage, setBgImage] = useState(backgroundUrl);
+
+  const handlePositionChange = (e) => {
+    const { name, value } = e.target;
+    setQrPosition((prevPosition) => ({
+      ...prevPosition,
+      [name]: value,
+    }));
+  };
+
+  const handleSizeChange = (e) => {
+    setQrSize(e.target.value);
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const newBgImage = URL.createObjectURL(file);
+      setBgImage(newBgImage);
+      onBackgroundUrlChange(newBgImage);
+    }
+  };
+
+  const printQRCode = () => {
+    const element = document.getElementById("qr-code-container");
+    if (element) {
+      html2canvas(element, {
+        useCORS: true,
+        backgroundColor: null,
+      })
+        .then((canvas) => {
+          const img = canvas.toDataURL("image/png");
+          const printWindow = window.open("", "", "height=600,width=800");
+          printWindow.document.write(
+            "<html><head><title>Print QR Code</title></head><body>"
+          );
+          printWindow.document.write(
+            '<img src="' + img + '" style="width:100%;height:auto;"/>'
+          );
+          printWindow.document.write("</body></html>");
+          printWindow.document.close();
+          printWindow.focus();
+          printWindow.print();
+        })
+        .catch((err) => {
+          console.error("Error capturing image:", err);
+        });
+    } else {
+      console.error("Element not found for printing.");
+    }
+  };
+
+  return (
+    <div>
+      <div
+        id="qr-code-container"
+        style={{
+          position: "relative",
+          width: "300px",
+          height: "300px",
+          background: `url(${bgImage}) no-repeat center center`,
+          backgroundSize: "contain",
+          overflow: "hidden",
+          border: "1px solid #ddd",
+        }}
+      >
+        <img
+          src={qrCodeUrl}
+          alt="QR Code"
+          style={{
+            position: "absolute",
+            width: `${qrSize}%`,
+            height: `${qrSize}%`,
+            left: `${qrPosition.left}%`,
+            top: `${qrPosition.top}%`,
+            transform: "translate(-50%, -50%)",
+          }}
+        />
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        <label>
+          QR Code Size:
+          <input
+            type="range"
+            min="10"
+            max="100"
+            value={qrSize}
+            onChange={handleSizeChange}
+            style={{ marginLeft: "10px" }}
+          />
+          {qrSize}%
+        </label>
+        <br />
+        <label>
+          QR Code Position X:
+          <input
+            type="range"
+            name="left"
+            min="0"
+            max="100"
+            value={qrPosition.left}
+            onChange={handlePositionChange}
+            style={{ marginLeft: "10px" }}
+          />
+          {qrPosition.left}%
+        </label>
+        <br />
+        <label>
+          QR Code Position Y:
+          <input
+            type="range"
+            name="top"
+            min="0"
+            max="100"
+            value={qrPosition.top}
+            onChange={handlePositionChange}
+            style={{ marginLeft: "10px" }}
+          />
+          {qrPosition.top}%
+        </label>
+        <br />
+        <label>
+          Background Image Upload:
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleFileChange}
+            style={{ marginLeft: "10px" }}
+          />
+        </label>
+        <br />
+        <button onClick={printQRCode} style={{ marginTop: "10px" }}>
+          Print QR Code
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default QRCodeWithBackground;

src/components/TableList.js

@@ -1,6 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
+import QRCodeWithBackground from "./QR"; // Adjust path as needed
 
 const TableList = ({ tables, onSelectTable, selectedTable }) => {
+  const [bgImageUrl, setBgImageUrl] = useState(
+    "https://example.com/your-background-image.png"
+  );
+
+  const generateQRCodeUrl = (tableCode) =>
+    `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
+      tableCode
+    )}`;
+
+  const handleBackgroundUrlChange = (newUrl) => {
+    setBgImageUrl(newUrl);
+  };
+
   return (
     <div
       style={{
@@ -15,21 +29,29 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
           <li
             key={table.tableId}
             style={{
-              backgroundColor: "white",
+              backgroundColor:
+                table.tableId === selectedTable?.tableId
+                  ? "lightblue"
+                  : "white",
               marginBottom: "10px",
               padding: "10px",
               borderRadius: "4px",
               boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
               cursor: "pointer",
-              backgroundColor:
-                table.tableId === selectedTable?.tableId
-                  ? "lightblue"
-                  : "white",
             }}
             onClick={() => onSelectTable(table)}
           >
-            {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
+            <div style={{ marginBottom: "10px" }}>
-            Position: ({table.xposition}, {table.yposition})
+              {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
+              Position: ({table.xposition}, {table.yposition})
+            </div>
+            <QRCodeWithBackground
+              qrCodeUrl={generateQRCodeUrl(table.tableCode)}
+              backgroundUrl={bgImageUrl}
+              initialQrPosition={{ left: 50, top: 50 }}
+              initialQrSize={20}
+              onBackgroundUrlChange={handleBackgroundUrlChange}
+            />
           </li>
         ))}
       </ul>

src/config.js

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