kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
client perkafean
2024-08-12 09:28:22 +00:00
parent 6102db3f56
commit 9c3a14366c
20 changed files with 725 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/TableList.js
View File

@@ -1,12 +1,13 @@
import React, { useState, useEffect } from "react";
import QRCodeWithBackground from "./QR"; // Adjust path as needed
const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
const [initialPos, setInitialPos] = useState({ left: 50, top: 50 });
const [initialSize, setInitialSize] = useState(20);
const [bgImageUrl, setBgImageUrl] = useState(
"https://example.com/your-background-image.png"
);
const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
const [initialPos, setInitialPos] = useState({
left: shop.xposition,
top: shop.yposition,
});
const [initialSize, setInitialSize] = useState(shop.scale);
const [bgImageUrl, setBgImageUrl] = useState(shop.qrBackground);
const shopUrl = window.location.hostname + "/" + shop.cafeId;
const generateQRCodeUrl = (tableCode) =>
`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
@@ -51,6 +52,7 @@ const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
<div style={{ marginBottom: "10px" }}>configure</div>
{-1 == selectedTable?.tableId && (
<QRCodeWithBackground
shopId={shop.cafeId}
isConfigure={true}
handleQrSave={handleQrSave}
setInitialPos={setInitialPos}
@@ -62,41 +64,43 @@ const TableList = ({ shopUrl, tables, onSelectTable, selectedTable }) => {
/>
)}
</li>
{tables
.filter((table) => table.tableNo !== 0)
.map((table) => (
<li
key={table.tableId}
style={{
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",
}}
onClick={() => onSelectTable(table)}
>
<div style={{ marginBottom: "10px" }}>
Table {table.tableNo}
</div>
{table.tableId === selectedTable?.tableId && (
<>
<QRCodeWithBackground
tableNo={table.tableNo}
qrCodeUrl={generateQRCodeUrl(table.tableCode)}
backgroundUrl={bgImageUrl}
initialQrPosition={initialPos}
initialQrSize={initialSize}
/>
<h5>{shopUrl + "/" + table.tableCode}</h5>
</>
)}
</li>
))}
{tables &&
tables
.filter((table) => table.tableNo !== 0)
.map((table) => (
<li
key={table.tableId}
style={{
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",
}}
onClick={() => onSelectTable(table)}
>
<div style={{ marginBottom: "10px" }}>
Table {table.tableNo}
</div>
{table.tableId === selectedTable?.tableId && (
<>
<QRCodeWithBackground
tableNo={table.tableNo}
qrCodeUrl={generateQRCodeUrl(table.tableCode)}
backgroundUrl={bgImageUrl}
initialQrPosition={initialPos}
initialQrSize={initialSize}
cafeId={shop.cafeId}
/>
<h5>{shopUrl + "/" + table.tableCode}</h5>
</>
)}
</li>
))}
</ul>
</div>
);