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

ok

Browse Source
This commit is contained in:
insvrgent
2025-01-13 15:47:39 +07:00
parent ba5c440a2a
commit 5d8b2af2c9
2 changed files with 242 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
src/components/PaymentOptions.js
View File

@@ -14,6 +14,15 @@ const SetPaymentQr = ({ shop }) => {
left: shop.xposition, left: shop.xposition,
top: shop.yposition, top: shop.yposition,
}); });
const [isConfigFont, setIsConfigFont] = useState(false);
const [fontsize, setfontsize] = useState(shop.fontsize);
const [fontcolor, setfontcolor] = useState(shop.fontcolor);
const [initialFontPos, setInitialFontPos] = useState({
left: shop.fontxposition,
top: shop.fontyposition,
});
const [initialSize, setInitialSize] = useState(shop.scale); const [initialSize, setInitialSize] = useState(shop.scale);
const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground)); const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
const qrBackgroundInputRef = useRef(null); const qrBackgroundInputRef = useRef(null);
@@ -30,12 +39,15 @@ const SetPaymentQr = ({ shop }) => {
)}`; )}`;
} }
}; };
const [isConfig, setIsConfig] = useState(false); const [isConfig, setIsConfig] = useState(false);
const [isConfigQR, setIsConfigQR] = useState(false);
const [isViewTables, setIsViewTables] = useState(false); const [isViewTables, setIsViewTables] = useState(false);
const [tables, setTables] = useState([]); const [tables, setTables] = useState([]);
const [selectedTable, setSelectedTable] = useState(null);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
@@ -57,7 +69,10 @@ const SetPaymentQr = ({ shop }) => {
const details = { const details = {
qrSize: initialSize, qrSize: initialSize,
qrPosition: initialPos, qrPosition: initialPos,
qrBackgroundFile, // Include qrBackground file qrBackgroundFile,
fontsize,
fontcolor,
fontPosition: initialFontPos,
}; };
// Call saveCafeDetails function with the updated details object // Call saveCafeDetails function with the updated details object
@@ -79,10 +94,21 @@ const SetPaymentQr = ({ shop }) => {
})); }));
}; };
const handleFontPositionChange = (e) => {
const { name, value } = e.target;
setInitialFontPos((prevPosition) => ({
...prevPosition,
[name]: parseFloat(value).toFixed(2),
}));
};
const handleSizeChange = (e) => { const handleSizeChange = (e) => {
setInitialSize(parseFloat(e.target.value).toFixed(2)); setInitialSize(parseFloat(e.target.value).toFixed(2));
}; };
const handleFontSizeChange = (e) => {
setfontsize(parseFloat(e.target.value).toFixed(2));
};
const handleFileChange = (e) => { const handleFileChange = (e) => {
const file = e.target.files[0]; const file = e.target.files[0];
@@ -94,7 +120,7 @@ const SetPaymentQr = ({ shop }) => {
return ( return (
<div style={styles.container}> <div style={styles.container}>
<h3 style={styles.title}>Konfigurasi pembayaran</h3> <h3 style={styles.title}>QR kedai dan meja</h3>
<div <div
id="qr-code-container" id="qr-code-container"
@@ -111,7 +137,7 @@ const SetPaymentQr = ({ shop }) => {
}} }}
> >
<img <img
src={generateQRCodeUrl(shopUrl)} src={generateQRCodeUrl(selectedTable?.tableCode || null)}
alt="QR Code" alt="QR Code"
style={{ style={{
position: "absolute", position: "absolute",
@@ -120,6 +146,23 @@ const SetPaymentQr = ({ shop }) => {
top: `${initialPos.top}%`, top: `${initialPos.top}%`,
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
}} /> }} />
<div style={{
transformOrigin: 'left',
transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
position: "absolute",
fontSize: `${fontsize * 3}%`,
left: `${initialFontPos.left}%`,
top: `${initialFontPos.top}%`,
textAlign: initialFontPos.left > 50 ? 'right' : 'left'
}}>
<h1 style={{
transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
width: '200%',
lineHeight: 0,
fontFamily: 'Plus Jakarta Sans',
color: fontcolor
}} >{selectedTable == null ? 'Nomor meja' : selectedTable.tableNo}</h1>
</div>
<input <input
type="file" type="file"
accept="image/*" accept="image/*"
@@ -132,72 +175,194 @@ const SetPaymentQr = ({ shop }) => {
<p>Klik untuk ganti background</p> <p>Klik untuk ganti background</p>
</div> </div>
<div style={styles.resultMessage}> <div style={styles.resultMessage}>
<p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p> <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
<div <div
onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div> onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
</div> </div>
<div style={styles.switchContainer}> <div style={styles.switchContainer}>
{isConfig && <> {isConfig &&
<div style={styles.sliderContainer}> <div style={{ marginLeft: '15px' }}>
<label style={styles.label}> <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
QR Code Size: {isConfigQR ? '˅' : '˃'} Konfigurasi QR
<div style={styles.sliderWrapper}> </p>
<span style={styles.labelStart}>10%</span> {isConfigQR && <>
<input <div style={styles.sliderContainer}>
type="range" <label style={styles.label}>
step="0.25" QR Code Size:
min="10" <div style={styles.sliderWrapper}>
max="100" <span style={styles.labelStart}>10%</span>
value={initialSize} <input
onChange={handleSizeChange} type="range"
style={styles.input} step="0.25"
/> min="10"
<span style={styles.value}>{initialSize}%</span> max="100"
value={initialSize}
onChange={handleSizeChange}
style={styles.input}
/>
<span style={styles.value}>{initialSize}%</span>
</div>
</label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> QR Code Position X:
<label style={styles.label}> <div style={styles.sliderWrapper}>
QR Code Position X: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="left"
step="0.25" min="0"
name="left" max="100"
min="0" value={initialPos.left}
max="100" onChange={handlePositionChange}
value={initialPos.left} style={styles.input}
onChange={handlePositionChange} />
style={styles.input} <span style={styles.value}>{initialPos.left}%</span>
/> </div>
<span style={styles.value}>{initialPos.left}%</span> </label>
</div> </div>
</label> <div style={styles.sliderContainer}>
</div> <label style={styles.label}>
<div style={styles.sliderContainer}> QR Code Position Y:
<label style={styles.label}> <div style={styles.sliderWrapper}>
QR Code Position Y: <span style={styles.labelStart}>0%</span>
<div style={styles.sliderWrapper}> <input
<span style={styles.labelStart}>0%</span> type="range"
<input step="0.25"
type="range" name="top"
step="0.25" min="0"
name="top" max="100"
min="0" value={initialPos.top}
max="100" onChange={handlePositionChange}
value={initialPos.top} style={styles.input}
onChange={handlePositionChange} />
style={styles.input} <span style={styles.value}>{initialPos.top}%</span>
/> </div>
<span style={styles.value}>{initialPos.top}%</span> </label>
</div> </div>
</label> </>}
<p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
{isConfigFont ? '˅' : '˃'} Konfigurasi nomor
</p>
{isConfigFont && (
<>
<div style={styles.sliderContainer}>
<label style={styles.label}>
Ukuran nomor meja:
<div style={styles.sliderWrapper}>
<span style={styles.labelStart}>10%</span>
<input
type="range"
step="0.25"
min="10"
max="100"
value={fontsize}
onChange={handleFontSizeChange}
style={styles.input}
/>
<span style={styles.value}>{fontsize}%</span>
</div>
</label>
</div>
<div style={styles.sliderContainer}>
<label style={styles.label}>
Posisi nomor meja - horizontal:
<div style={styles.sliderWrapper}>
<span style={styles.labelStart}>0%</span>
<input
type="range"
step="0.25"
name="left"
min="0"
max="100"
value={initialFontPos.left}
onChange={handleFontPositionChange}
style={styles.input}
/>
<span style={styles.value}>{initialFontPos.left}%</span>
</div>
</label>
</div>
<div style={styles.sliderContainer}>
<label style={styles.label}>
Posisi nomor meja - vertikal:
<div style={styles.sliderWrapper}>
<span style={styles.labelStart}>0%</span>
<input
type="range"
step="0.25"
name="top"
min="0"
max="100"
value={initialFontPos.top}
onChange={handleFontPositionChange}
style={styles.input}
/>
<span style={styles.value}>{initialFontPos.top}%</span>
</div>
</label>
</div>
<div style={styles.sliderContainer}>
<label style={styles.label}>
Warna nomor meja:
<div style={styles.sliderWrapper}>
<input
type="color"
value='#FFFFFF' // This should be the state holding the selected font color
onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
style={styles.colorInput} // Add your styles for the color input if needed
/>
<span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
</div>
</label>
</div>
</>
)}
</div> </div>
</>} }
<p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}> <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
{isViewTables ? '˅' : '˃'} Daftar meja {isViewTables ? '˅' : '˃'} Daftar meja
</p> </p>
{isViewTables &&
<div style={{marginTop: '34px', marginLeft: '15px'}}>
<div style={styles.resultMessage}>
<input style={{borderRadius: '12px', paddingLeft: '13px'}} placeholder="Meja A1"/>
<div
onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Buat meja</div>
</div>
{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",
listStyle: 'square'
}}
onClick={() => setSelectedTable(selectedTable == table ? null : table)}
>
<div style={{ marginBottom: "10px" }}>
{table.tableNo}
</div>
</li>
))
}
</div>
}
</div> </div>
<div style={styles.buttonContainer}> <div style={styles.buttonContainer}>
@@ -270,6 +435,7 @@ const styles = {
}, },
switchContainer: { switchContainer: {
textAlign: "left", textAlign: "left",
marginTop: '-15px'
}, },
description: { description: {
margin: "10px 0", margin: "10px 0",

16
src/helpers/cafeHelpers.js
View File

@@ -164,6 +164,22 @@ export async function saveCafeDetails(cafeId, details) {
try { try {
const formData = new FormData(); const formData = new FormData();
// Append qrBackground file if it exists
if (details.fontsize) {
formData.append("fontsize", details.fontsize);
}
// Append qrBackground file if it exists
if (details.fontfamily) {
formData.append("fontfamily", details.fontfamily);
}
// Append qrBackground file if it exists
if (details.fontPosition) {
formData.append("fontxposition", details.fontPosition.left);
formData.append("fontyposition", details.fontPosition.top);
}
// Append qrBackground file if it exists // Append qrBackground file if it exists
if (details.qrBackgroundFile) { if (details.qrBackgroundFile) {
formData.append("qrBackground", details.qrBackgroundFile); formData.append("qrBackground", details.qrBackgroundFile);