From 1cb8ccf934a271e6ce9670fa08140077be931646 Mon Sep 17 00:00:00 2001 From: insvrgent Date: Tue, 14 Jan 2025 14:07:54 +0700 Subject: [PATCH] ok --- package-lock.json | 7 +++ package.json | 3 +- src/components/Modal.module.css | 1 + src/components/PaymentOptions.js | 91 +++++++++++++++++++++++++++++--- src/pages/Cart.js | 2 +- src/pages/Dashboard.js | 2 +- src/pages/Invoice.js | 2 +- src/pages/Transaction.js | 2 +- src/pages/Transaction_pending.js | 4 +- 9 files changed, 101 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index be736fc..8b4e91c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "caniuse-lite": "^1.0.30001690", + "html-to-image": "^1.11.11", "html2canvas": "^1.4.1", "jsqr": "^1.4.0", "qrcode.react": "^3.1.0", @@ -10264,6 +10265,12 @@ "node": ">=12" } }, + "node_modules/html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==", + "license": "MIT" + }, "node_modules/html-webpack-plugin": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz", diff --git a/package.json b/package.json index 325f78f..833756d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "groovebrew-mockup", "version": "0.1.0", "private": true, - "homepage": ".", + "homepage": "https://dev.kedaimaster.com", "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", @@ -11,6 +11,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "caniuse-lite": "^1.0.30001690", + "html-to-image": "^1.11.11", "html2canvas": "^1.4.1", "jsqr": "^1.4.0", "qrcode.react": "^3.1.0", diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css index 3c7c4b8..8fff705 100644 --- a/src/components/Modal.module.css +++ b/src/components/Modal.module.css @@ -13,6 +13,7 @@ .modalContent { width: 80vw; + max-height: 80vh; position: relative; overflow: visible; /* Add this line to enable scrolling */ display: flex; diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js index e646346..8dc227f 100644 --- a/src/components/PaymentOptions.js +++ b/src/components/PaymentOptions.js @@ -7,7 +7,8 @@ import { saveCafeDetails, setConfirmationStatus, } from "../helpers/cafeHelpers"; -import Switch from "react-switch"; // Import the Switch component + +import { toPng } from 'html-to-image'; const SetPaymentQr = ({ shop }) => { const [initialPos, setInitialPos] = useState({ @@ -15,6 +16,7 @@ const SetPaymentQr = ({ shop }) => { top: shop.yposition, }); + const [isViewingQR, setIsViewingQR] = useState(false); const [isConfigFont, setIsConfigFont] = useState(false); const [fontsize, setfontsize] = useState(shop.fontsize); const [fontcolor, setfontcolor] = useState(shop.fontcolor); @@ -48,6 +50,8 @@ const SetPaymentQr = ({ shop }) => { const [selectedTable, setSelectedTable] = useState(null); + const [tableNo, setTableNo] = useState(null); + useEffect(() => { const fetchData = async () => { try { @@ -118,6 +122,45 @@ const SetPaymentQr = ({ shop }) => { } }; + const handleCreate = async () => { + // if (newTable) { + try { + const createdTable = await createTable(shop.cafeId, { + // ...newTable, + tableNo, + }); + setTables([...tables, createdTable]); + setTableNo(""); + } catch (error) { + console.error("Error creating table:", error); + } + }; + + function downloadQrCodeContainer({ selectedTable, shop }) { + const node = document.getElementById('qr-code-container'); + + if (!node) return; + + const isTableSelected = selectedTable != null; + + toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution + .then((dataUrl) => { + const link = document.createElement('a'); + link.href = dataUrl; + + // Set the file name based on whether selectedTable exists + link.download = isTableSelected + ? `QR Meja (${selectedTable.tableNo}).png` + : `QR ${shop.name}.png`; + + link.click(); + }) + .catch((err) => { + console.error('Could not download the image', err); + }) + } + + return (

QR kedai dan meja

@@ -156,6 +199,7 @@ const SetPaymentQr = ({ shop }) => { textAlign: initialFontPos.left > 50 ? 'right' : 'left' }}>

50 ? -1 : 1})`, width: '200%', lineHeight: 0, @@ -171,11 +215,13 @@ const SetPaymentQr = ({ shop }) => { onChange={handleFileChange} />

+ {!isViewingQR ? + <>

Klik untuk ganti background

-

setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi

+

{setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi

qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti
@@ -332,9 +378,9 @@ const SetPaymentQr = ({ shop }) => { {isViewTables &&
- + setTableNo(e.target.value)} value={tableNo}/>
qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Buat meja
+ onClick={handleCreate} style={styles.uploadButton}>Buat meja
{tables && tables .filter((table) => table.tableNo !== 0) @@ -364,12 +410,31 @@ const SetPaymentQr = ({ shop }) => { } -
+
+ : + <> +
+

QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}

+
+
+ +
+
+

setIsViewingQR(false)} > + Kembali +

+
+ + } ); }; @@ -377,6 +442,9 @@ const SetPaymentQr = ({ shop }) => { // Styles const styles = { container: { + overflowY: 'auto', + overflowX: 'hidden', + maxHeight: '100%', width: '100%', backgroundColor: "white", padding: "20px", @@ -401,6 +469,7 @@ const styles = { uploadMessage: { fontWeight: 600, textAlign: "left", + fontSize: "15px" }, uploadButton: { paddingRight: '10px', @@ -415,6 +484,7 @@ const styles = { }, resultMessage: { marginTop: "-24px", + marginBottom: "10px", textAlign: "left", display: 'flex', justifyContent: 'space-between' @@ -422,9 +492,18 @@ const styles = { buttonContainer: { marginTop: "20px", textAlign: "left", + display: 'flex', + justifyContent: 'space-evenly' + }, + backButtonContainer: { + marginTop: "2px", + marginBottom: "-10px", + textAlign: "left", + display: 'flex', + justifyContent: 'space-evenly' }, saveButton: { - padding: "10px 20px", + padding: "10px 15px", fontSize: "16px", backgroundColor: "#28a745", color: "#fff", diff --git a/src/pages/Cart.js b/src/pages/Cart.js index 4a00ef3..289a95e 100644 --- a/src/pages/Cart.js +++ b/src/pages/Cart.js @@ -220,7 +220,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) { {table.tableNo != null && (
- Diantar ke meja {table.tableNo} + Diantar ke {table.tableNo} {/*