ok
This commit is contained in:
insvrgent
@@ -14,6 +14,15 @@ const SetPaymentQr = ({ shop }) => {
|
||||
left: shop.xposition,
|
||||
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 [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
|
||||
const qrBackgroundInputRef = useRef(null);
|
||||
@@ -32,10 +41,13 @@ const SetPaymentQr = ({ shop }) => {
|
||||
};
|
||||
|
||||
const [isConfig, setIsConfig] = useState(false);
|
||||
const [isConfigQR, setIsConfigQR] = useState(false);
|
||||
const [isViewTables, setIsViewTables] = useState(false);
|
||||
|
||||
const [tables, setTables] = useState([]);
|
||||
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
@@ -57,7 +69,10 @@ const SetPaymentQr = ({ shop }) => {
|
||||
const details = {
|
||||
qrSize: initialSize,
|
||||
qrPosition: initialPos,
|
||||
qrBackgroundFile, // Include qrBackground file
|
||||
qrBackgroundFile,
|
||||
fontsize,
|
||||
fontcolor,
|
||||
fontPosition: initialFontPos,
|
||||
};
|
||||
|
||||
// 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) => {
|
||||
setInitialSize(parseFloat(e.target.value).toFixed(2));
|
||||
};
|
||||
|
||||
const handleFontSizeChange = (e) => {
|
||||
setfontsize(parseFloat(e.target.value).toFixed(2));
|
||||
};
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
@@ -94,7 +120,7 @@ const SetPaymentQr = ({ shop }) => {
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h3 style={styles.title}>Konfigurasi pembayaran</h3>
|
||||
<h3 style={styles.title}>QR kedai dan meja</h3>
|
||||
|
||||
<div
|
||||
id="qr-code-container"
|
||||
@@ -111,7 +137,7 @@ const SetPaymentQr = ({ shop }) => {
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={generateQRCodeUrl(shopUrl)}
|
||||
src={generateQRCodeUrl(selectedTable?.tableCode || null)}
|
||||
alt="QR Code"
|
||||
style={{
|
||||
position: "absolute",
|
||||
@@ -120,6 +146,23 @@ const SetPaymentQr = ({ shop }) => {
|
||||
top: `${initialPos.top}%`,
|
||||
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
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -132,72 +175,194 @@ const SetPaymentQr = ({ shop }) => {
|
||||
<p>Klik untuk ganti background</p>
|
||||
</div>
|
||||
<div style={styles.resultMessage}>
|
||||
<p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
|
||||
<p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
|
||||
<div
|
||||
onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
|
||||
</div>
|
||||
<div style={styles.switchContainer}>
|
||||
{isConfig && <>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Size:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>10%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
min="10"
|
||||
max="100"
|
||||
value={initialSize}
|
||||
onChange={handleSizeChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialSize}%</span>
|
||||
{isConfig &&
|
||||
<div style={{ marginLeft: '15px' }}>
|
||||
<p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
|
||||
{isConfigQR ? '˅' : '˃'} Konfigurasi QR
|
||||
</p>
|
||||
{isConfigQR && <>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Size:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>10%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
min="10"
|
||||
max="100"
|
||||
value={initialSize}
|
||||
onChange={handleSizeChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialSize}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Position X:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>0%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
name="left"
|
||||
min="0"
|
||||
max="100"
|
||||
value={initialPos.left}
|
||||
onChange={handlePositionChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialPos.left}%</span>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Position X:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>0%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
name="left"
|
||||
min="0"
|
||||
max="100"
|
||||
value={initialPos.left}
|
||||
onChange={handlePositionChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialPos.left}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Position Y:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>0%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
name="top"
|
||||
min="0"
|
||||
max="100"
|
||||
value={initialPos.top}
|
||||
onChange={handlePositionChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialPos.top}%</span>
|
||||
<div style={styles.sliderContainer}>
|
||||
<label style={styles.label}>
|
||||
QR Code Position Y:
|
||||
<div style={styles.sliderWrapper}>
|
||||
<span style={styles.labelStart}>0%</span>
|
||||
<input
|
||||
type="range"
|
||||
step="0.25"
|
||||
name="top"
|
||||
min="0"
|
||||
max="100"
|
||||
value={initialPos.top}
|
||||
onChange={handlePositionChange}
|
||||
style={styles.input}
|
||||
/>
|
||||
<span style={styles.value}>{initialPos.top}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</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>
|
||||
</>}
|
||||
}
|
||||
<p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
|
||||
{isViewTables ? '˅' : '˃'} Daftar meja
|
||||
</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 style={styles.buttonContainer}>
|
||||
@@ -270,6 +435,7 @@ const styles = {
|
||||
},
|
||||
switchContainer: {
|
||||
textAlign: "left",
|
||||
marginTop: '-15px'
|
||||
},
|
||||
description: {
|
||||
margin: "10px 0",
|
||||
|
||||
@@ -164,6 +164,22 @@ export async function saveCafeDetails(cafeId, details) {
|
||||
try {
|
||||
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
|
||||
if (details.qrBackgroundFile) {
|
||||
formData.append("qrBackground", details.qrBackgroundFile);
|
||||
|
||||
Reference in New Issue
Block a user