124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
import { CopyAll } from '@mui/icons-material'
|
|
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
Input,
|
|
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. You can still copy the URL and write it to an NFC tag using a compatible device.',
|
|
)
|
|
}
|
|
}
|
|
|
|
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>
|
|
<Input
|
|
value={getURL()}
|
|
fullWidth
|
|
readOnly
|
|
label='URL'
|
|
sx={{ mt: 1 }}
|
|
endDecorator={
|
|
<CopyAll
|
|
sx={{ cursor: 'pointer' }}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(getURL())
|
|
alert('URL copied to clipboard!')
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
<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>
|
|
</>
|
|
)}
|
|
</ModalDialog>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default WriteNFCModal
|