kediritechnopark/groovee
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";
const QRCodeWithBackground = ({
isConfigure,
qrCodeUrl,
backgroundUrl,
initialQrPosition,
initialQrSize,
setInitialPos,
setInitialSize,
onBackgroundUrlChange,
}) => {
const [qrPosition, setQrPosition] = useState(initialQrPosition);
@@ -33,6 +36,12 @@ const QRCodeWithBackground = ({
}
};
const handleSave = () => {
setInitialPos(qrPosition);
setInitialSize(qrSize);
onBackgroundUrlChange(bgImage);
};
const printQRCode = () => {
const element = document.getElementById("qr-code-container");
if (element) {
@@ -89,65 +98,165 @@ const QRCodeWithBackground = ({
}}
/>
</div>
<div style={{ marginTop: "20px" }}>
<label>
QR Code Size:
<input
type="range"
min="10"
max="100"
value={qrSize}
onChange={handleSizeChange}
style={{ marginLeft: "10px" }}
/>
{qrSize}%
</label>
<br />
<label>
QR Code Position X:
<input
type="range"
name="left"
min="0"
max="100"
value={qrPosition.left}
onChange={handlePositionChange}
style={{ marginLeft: "10px" }}
/>
{qrPosition.left}%
</label>
<br />
<label>
QR Code Position Y:
<input
type="range"
name="top"
min="0"
max="100"
value={qrPosition.top}
onChange={handlePositionChange}
style={{ marginLeft: "10px" }}
/>
{qrPosition.top}%
</label>
<br />
<label>
Background Image Upload:
<input
type="file"
accept="image/*"
onChange={handleFileChange}
style={{ marginLeft: "10px" }}
/>
</label>
<br />
<button onClick={printQRCode} style={{ marginTop: "10px" }}>
{isConfigure ? (
<div style={{ marginTop: "20px" }}>
<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={qrSize}
onChange={handleSizeChange}
style={styles.input}
/>
<span style={styles.labelEnd}>100%</span>
<span style={styles.value}>{qrSize}%</span>
</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={qrPosition.left}
onChange={handlePositionChange}
style={styles.input}
/>
<span style={styles.labelEnd}>100%</span>
<span style={styles.value}>{qrPosition.left}%</span>
</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={qrPosition.top}
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
</button>
</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;