aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/Modals/Inputs
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/views/Modals/Inputs/WriteNFCModal.jsx109
1 files changed, 109 insertions, 0 deletions
diff --git a/src/views/Modals/Inputs/WriteNFCModal.jsx b/src/views/Modals/Inputs/WriteNFCModal.jsx
new file mode 100644
index 0000000..d71a2a3
--- /dev/null
+++ b/src/views/Modals/Inputs/WriteNFCModal.jsx
@@ -0,0 +1,109 @@
+import {
+ Box,
+ Button,
+ Checkbox,
+ ListItem,
+ Modal,
+ ModalDialog,
+ Typography,
+} from '@mui/joy'
+import React, { useState } from 'react'
+
+function WriteNFCModal({ config }) {
+ const [nfcStatus, setNfcStatus] = useState('idle') // 'idle', 'writing', 'success', 'error'
+ const [errorMessage, setErrorMessage] = useState('')
+ const [isAutoCompleteWhenScan, setIsAutoCompleteWhenScan] = useState(false)
+
+ const requestNFCAccess = async () => {
+ if ('NDEFReader' in window) {
+ // Assuming permission request is implicit in 'write' or 'scan' methods
+ setNfcStatus('idle')
+ } else {
+ alert('NFC is not supported by this browser.')
+ }
+ }
+
+ const writeToNFC = async url => {
+ if ('NDEFReader' in window) {
+ try {
+ const ndef = new window.NDEFReader()
+ await ndef.write({
+ records: [{ recordType: 'url', data: url }],
+ })
+ setNfcStatus('success')
+ } catch (error) {
+ console.error('Error writing to NFC tag:', error)
+ setNfcStatus('error')
+ setErrorMessage('Error writing to NFC tag. Please try again.')
+ }
+ } else {
+ setNfcStatus('error')
+ setErrorMessage('NFC is not supported by this browser.')
+ }
+ }
+
+ const handleClose = () => {
+ config.onClose()
+ setNfcStatus('idle')
+ setErrorMessage('')
+ }
+ const getURL = () => {
+ let url = config.url
+ if (isAutoCompleteWhenScan) {
+ url = url + '?auto_complete=true'
+ }
+
+ return url
+ }
+ return (
+ <Modal open={config?.isOpen} onClose={handleClose}>
+ <ModalDialog>
+ <Typography level='h4' mb={1}>
+ {nfcStatus === 'success' ? 'Success!' : 'Write to NFC'}
+ </Typography>
+
+ {nfcStatus === 'success' ? (
+ <Typography level='body-md' gutterBottom>
+ URL written to NFC tag successfully!
+ </Typography>
+ ) : (
+ <>
+ <Typography level='body-md' gutterBottom>
+ {nfcStatus === 'error'
+ ? errorMessage
+ : 'Press the button below to write to NFC.'}
+ </Typography>
+ <ListItem>
+ <Checkbox
+ checked={isAutoCompleteWhenScan}
+ onChange={e => setIsAutoCompleteWhenScan(e.target.checked)}
+ label='Auto-complete when scanned'
+ />
+ </ListItem>
+ <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+ <Button
+ onClick={() => writeToNFC(getURL())}
+ fullWidth
+ sx={{ mr: 1 }}
+ disabled={nfcStatus === 'writing'}
+ >
+ Write NFC
+ </Button>
+ <Button onClick={requestNFCAccess} variant='outlined'>
+ Request Access
+ </Button>
+ </Box>
+ </>
+ )}
+
+ <Box display={'flex'} justifyContent={'center'} mt={2}>
+ <Button onClick={handleClose} variant='outlined'>
+ Close
+ </Button>
+ </Box>
+ </ModalDialog>
+ </Modal>
+ )
+}
+
+export default WriteNFCModal