From 9cd0508d4a079259594f84ac423420f126f7719e Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Sun, 19 Jan 2025 15:47:49 +0700 Subject: [PATCH] ok --- src/App.css | 2 + src/components/Header.js | 2 +- src/components/TablesPage.js | 684 ++++++++++++++++--------------- src/pages/Dashboard.js | 2 +- src/pages/NotificationRequest.js | 11 +- 5 files changed, 354 insertions(+), 347 deletions(-) diff --git a/src/App.css b/src/App.css index 3cc1c42..f70efc5 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); + @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap"); html, body { diff --git a/src/components/Header.js b/src/components/Header.js index 70d3b92..dff8c18 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -378,7 +378,7 @@ const Header = ({ Desain kafe setModal("edit_tables")}> - QR kedai + Identifikasi kedai setModal("payment_option")}> Metode pembayaran diff --git a/src/components/TablesPage.js b/src/components/TablesPage.js index b1b2e03..f077969 100644 --- a/src/components/TablesPage.js +++ b/src/components/TablesPage.js @@ -28,7 +28,14 @@ const SetPaymentQr = ({ shop }) => { const [initialSize, setInitialSize] = useState(shop.scale); const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground)); const qrBackgroundInputRef = useRef(null); - const shopUrl = window.location.hostname + "/" + shop.cafeId; + + const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName); + const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate; + + + const cafeIdentifyNameRef = useRef(null); + const [isconfigcafeidentityname, setIsConfigCafeIdentityName] = useState(false); + const generateQRCodeUrl = (tableCode) => { if (tableCode != null) { @@ -124,41 +131,41 @@ 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); - } + 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; - + // Save the original background color const originalBackgroundColor = node.style.backgroundColor; - + // Temporarily remove the background color node.style.backgroundColor = 'transparent'; - + 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` + link.download = isTableSelected + ? `QR Meja (${selectedTable.tableNo}).png` : `QR ${shop.name}.png`; - + link.click(); }) .catch((err) => { @@ -169,14 +176,13 @@ const SetPaymentQr = ({ shop }) => { node.style.backgroundColor = originalBackgroundColor; }); } - - - + + + return (
-

QR kedai

- -
+

Identifikasi kedai

+
{
{
{ wordWrap: 'break-word', }} > - kedaimaster.com/ + {window.location.hostname}/
-
- galauers -
+ onChange={(e)=>setCafeIdentifyNameUpdate(e.target.value)} + value={cafeIdentifyNameUpdate} + onFocus={() => { + setIsConfigCafeIdentityName(true); // Set the state to true when input is focused + }} + onBlur={() => { + setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus + setCafeIdentifyNameUpdate(shop.cafeIdentifyName) + }} // Handle blur event to reset the state + />
{ position: 'absolute', }} > - + + +
{ position: 'absolute', }} > -
- -
-
-
-
{ top: 0, position: 'absolute', }} - > -
+ > + +
{ position: 'absolute', }} > -
+ + +
@@ -532,7 +495,7 @@ const SetPaymentQr = ({ shop }) => { >
{
-
+ > + +
{ >
-
+ + +
@@ -650,6 +598,62 @@ const SetPaymentQr = ({ shop }) => { + + + + {!isconfigcafeidentityname ?
{setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} // Open the config modal + style={{ + backgroundColor: '#303034', + right: 0, + color: 'white', + borderRadius: '0 0 6px 6px', + fontFamily: 'Roboto', + fontSize: '13px', + padding: 3, + cursor: 'pointer', + marginBottom: '10px' + }} + > + Ganti alamat kedai +
: ( +
+
setIsConfigCafeIdentityName(false)} // Close the config modal + style={{ + backgroundColor: '#303034', + width: '47%', + color: 'white', + borderRadius: '0 0 0px 6px', + fontFamily: 'Roboto', + fontSize: '13px', + padding: 3, + cursor: 'pointer', + }} + > + Batalkan +
+ +
{ + // Handle save functionality here + setIsConfigCafeIdentityName(false); // Close after saving + }} + style={{ + backgroundColor: '#303034', + width: '47%', + color: 'white', + borderRadius: '0 0 6px 0px', + fontFamily: 'Roboto', + fontSize: '13px', + padding: 3, + cursor: 'pointer', + }} + > + Simpan +
+
+ )}
{ backgroundColor: '#cdcdcd' }} > - QR Code + QR Code QR Code { />
{!isViewingQR ? - <> -
-

Klik untuk ganti background

-
-
-

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

-
qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti
-
-
- {isConfig && -
- {/*

{ setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> + <> +

+

Klik untuk ganti background

+
+
+

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

+
qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti
+
+
+ {isConfig && +
+ {/*

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

*/} - {isConfigQR && <> -
-