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

ok

Browse Source
This commit is contained in:
frontend perkafean
2024-08-05 08:28:03 +00:00
parent 0c94adc20f
commit 4caf11e4a1
3 changed files with 208 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/components/QR.js
View File

@@ -2,10 +2,13 @@ import React, { useState } from "react";
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
const QRCodeWithBackground = ({ const QRCodeWithBackground = ({
isConfigure,
qrCodeUrl, qrCodeUrl,
backgroundUrl, backgroundUrl,
initialQrPosition, initialQrPosition,
initialQrSize, initialQrSize,
setInitialPos,
setInitialSize,
onBackgroundUrlChange, onBackgroundUrlChange,
}) => { }) => {
const [qrPosition, setQrPosition] = useState(initialQrPosition); const [qrPosition, setQrPosition] = useState(initialQrPosition);
@@ -33,6 +36,12 @@ const QRCodeWithBackground = ({
} }
}; };
const handleSave = () => {
setInitialPos(qrPosition);
setInitialSize(qrSize);
onBackgroundUrlChange(bgImage);
};
const printQRCode = () => { const printQRCode = () => {
const element = document.getElementById("qr-code-container"); const element = document.getElementById("qr-code-container");
if (element) { if (element) {
@@ -89,65 +98,165 @@ const QRCodeWithBackground = ({
}} }}
/> />
</div> </div>
{isConfigure ? (
<div style={{ marginTop: "20px" }}> <div style={{ marginTop: "20px" }}>
<label> <div style={styles.sliderContainer}>
QR Code Size: <label style={styles.label}>
<input QR Code Size:
type="range" <div style={styles.sliderWrapper}>
min="10" <span style={styles.labelStart}>10%</span>
max="100" <input
value={qrSize} type="range"
onChange={handleSizeChange} step="0.25"
style={{ marginLeft: "10px" }} min="10"
/> max="100"
{qrSize}% value={qrSize}
</label> onChange={handleSizeChange}
<br /> style={styles.input}
<label> />
QR Code Position X: <span style={styles.labelEnd}>100%</span>
<input <span style={styles.value}>{qrSize}%</span>
type="range" </div>
name="left" </label>
min="0" </div>
max="100" <div style={styles.sliderContainer}>
value={qrPosition.left} <label style={styles.label}>
onChange={handlePositionChange} QR Code Position X:
style={{ marginLeft: "10px" }} <div style={styles.sliderWrapper}>
/> <span style={styles.labelStart}>0%</span>
{qrPosition.left}% <input
</label> type="range"
<br /> step="0.25"
<label> name="left"
QR Code Position Y: min="0"
<input max="100"
type="range" value={qrPosition.left}
name="top" onChange={handlePositionChange}
min="0" style={styles.input}
max="100" />
value={qrPosition.top} <span style={styles.labelEnd}>100%</span>
onChange={handlePositionChange} <span style={styles.value}>{qrPosition.left}%</span>
style={{ marginLeft: "10px" }} </div>
/> </label>
{qrPosition.top}% </div>
</label> <div style={styles.sliderContainer}>
<br /> <label style={styles.label}>
<label> QR Code Position Y:
Background Image Upload: <div style={styles.sliderWrapper}>
<input <span style={styles.labelStart}>0%</span>
type="file" <input
accept="image/*" type="range"
onChange={handleFileChange} step="0.25"
style={{ marginLeft: "10px" }} name="top"
/> min="0"
</label> max="100"
<br /> value={qrPosition.top}
<button onClick={printQRCode} style={{ marginTop: "10px" }}> onChange={handlePositionChange}
style={styles.input}
/>
<span style={styles.labelEnd}>100%</span>
<span style={styles.value}>{qrPosition.top}%</span>
</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}
style={{
padding: "10px 20px",
fontSize: "16px",
backgroundColor: "#28a745",
color: "#fff",
border: "none",
borderRadius: "4px",
cursor: "pointer",
transition: "background-color 0.3s",
}}
onMouseOver={(e) =>
(e.currentTarget.style.backgroundColor = "#218838")
}
onMouseOut={(e) =>
(e.currentTarget.style.backgroundColor = "#28a745")
}
>
Save
</button>
</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 Print QR Code
</button> </button>
</div> )}
</div> </div>
); );
}; };
// Styles for the configuration labels and inputs
const styles = {
label: {
display: "block",
fontSize: "16px",
fontWeight: "bold",
marginBottom: "5px",
},
sliderContainer: {
marginBottom: "20px",
},
sliderWrapper: {
display: "flex",
alignItems: "center",
gap: "10px",
marginTop: "5px",
},
input: {
flex: "1",
margin: "0 10px",
},
value: {
fontSize: "16px",
minWidth: "50px",
textAlign: "right",
},
labelStart: {
fontSize: "14px",
},
labelEnd: {
fontSize: "14px",
},
fileInput: {
marginLeft: "10px",
},
};
export default QRCodeWithBackground; export default QRCodeWithBackground;

50
src/components/TableList.js
View File

@@ -2,6 +2,8 @@ import React, { useState } from "react";
import QRCodeWithBackground from "./QR"; // Adjust path as needed import QRCodeWithBackground from "./QR"; // Adjust path as needed
const TableList = ({ tables, onSelectTable, selectedTable }) => { const TableList = ({ tables, onSelectTable, selectedTable }) => {
const [initialPos, setInitialPos] = useState({ left: 50, top: 50 });
const [initialSize, setInitialSize] = useState(20);
const [bgImageUrl, setBgImageUrl] = useState( const [bgImageUrl, setBgImageUrl] = useState(
"https://example.com/your-background-image.png" "https://example.com/your-background-image.png"
); );
@@ -25,6 +27,36 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
}} }}
> >
<ul style={{ listStyleType: "none", padding: 0, margin: 0 }}> <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
isConfigure={true}
setInitialPos={setInitialPos}
setInitialSize={setInitialSize}
qrCodeUrl={generateQRCodeUrl("sample")}
backgroundUrl={bgImageUrl}
initialQrPosition={initialPos}
initialQrSize={initialSize}
onBackgroundUrlChange={handleBackgroundUrlChange}
/>
)}
</li>
{tables.map((table) => ( {tables.map((table) => (
<li <li
key={table.tableId} key={table.tableId}
@@ -45,13 +77,17 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
{table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} - {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
Position: ({table.xposition}, {table.yposition}) Position: ({table.xposition}, {table.yposition})
</div> </div>
<QRCodeWithBackground {table.tableId == selectedTable?.tableId && (
qrCodeUrl={generateQRCodeUrl(table.tableCode)} <QRCodeWithBackground
backgroundUrl={bgImageUrl} setInitialPos={setInitialPos}
initialQrPosition={{ left: 50, top: 50 }} setInitialSize={setInitialSize}
initialQrSize={20} qrCodeUrl={generateQRCodeUrl(table.tableCode)}
onBackgroundUrlChange={handleBackgroundUrlChange} backgroundUrl={bgImageUrl}
/> initialQrPosition={initialPos}
initialQrSize={initialSize}
onBackgroundUrlChange={handleBackgroundUrlChange}
/>
)}
</li> </li>
))} ))}
</ul> </ul>

1
src/components/TablesPage.js
View File

@@ -110,6 +110,7 @@ const TablesPage = ({ shopId }) => {
}; };
const handleSelect = (table) => { const handleSelect = (table) => {
console.log(table);
setSelectedTable(null); setSelectedTable(null);
setSelectedTable(table); setSelectedTable(table);
setNewTable(null); setNewTable(null);