110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import QRCodeWithBackground from "./QR"; // Adjust path as needed
|
|
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(
|
|
shopUrl + "/" + tableCode
|
|
)}`;
|
|
|
|
const handleBackgroundUrlChange = (newUrl) => {
|
|
setBgImageUrl(newUrl);
|
|
};
|
|
|
|
const handleQrSave = (qrPosition, qrSize, bgImage) => {
|
|
setInitialPos(qrPosition);
|
|
setInitialSize(qrSize);
|
|
setBgImageUrl(bgImage);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
marginTop: "20px",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
|
|
<li
|
|
style={{
|
|
backgroundColor:
|
|
-1 === selectedTable?.tableId ? "lightblue" : "white",
|
|
marginBottom: "10px",
|
|
padding: "10px",
|
|
borderRadius: "4px",
|
|
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() =>
|
|
onSelectTable({
|
|
tableId: -1,
|
|
})
|
|
}
|
|
>
|
|
<div style={{ marginBottom: "10px" }}>configure</div>
|
|
{-1 == selectedTable?.tableId && (
|
|
<QRCodeWithBackground
|
|
shopId={shop.cafeId}
|
|
isConfigure={true}
|
|
handleQrSave={handleQrSave}
|
|
setInitialPos={setInitialPos}
|
|
setInitialSize={setInitialSize}
|
|
qrCodeUrl={generateQRCodeUrl("sample")}
|
|
backgroundUrl={bgImageUrl}
|
|
initialQrPosition={initialPos}
|
|
initialQrSize={initialSize}
|
|
/>
|
|
)}
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default TableList;
|