120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
|
|
import { Box, Button } from '@mui/material';
|
|
import Loading from 'components/Loading';
|
|
import { useRouter } from 'next/dist/client/router';
|
|
import Head from 'next/head';
|
|
|
|
export default () => {
|
|
const [loading, setLoading] = React.useState(true);
|
|
const router = useRouter();
|
|
const [changing_page, setChangingPage] = useState(false);
|
|
|
|
const [queue_type, setQueueType] = useState('');
|
|
const [queue_id, setQueueId] = useState('');
|
|
|
|
useEffect(() => {
|
|
let temp;
|
|
temp = localStorage.getItem('queue_type');
|
|
if (temp) setQueueType(temp);
|
|
|
|
temp = localStorage.getItem('queue_id');
|
|
if (temp) setQueueId(temp);
|
|
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>dashboard - non-urgent case</title>
|
|
<meta name='description' content='Generated by create next app' />
|
|
<link rel='icon' href='/favicon.ico' />
|
|
</Head>
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '90vh',
|
|
}}
|
|
>
|
|
<Box sx={{ fontWeight: 'bold', fontSize: '1.2rem' }}>Queue Number</Box>
|
|
<Box
|
|
style={{
|
|
marginTop: '1.2rem',
|
|
|
|
fontWeight: 'bold',
|
|
fontSize: '6rem',
|
|
backgroundColor: 'lightgray',
|
|
width: '75vw',
|
|
height: '75vw',
|
|
borderRadius: '1rem',
|
|
//
|
|
display: 'inline-flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
//
|
|
}}
|
|
>
|
|
{queue_id}
|
|
</Box>
|
|
|
|
<Box sx={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
{queue_type !== '' ? (
|
|
<>
|
|
<Box sx={{ fontWeight: 'bold' }}>Your waiting list category</Box>
|
|
<Box sx={{ fontWeight: 'bold', fontSize: '1.2rem' }}>{queue_type}</Box>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
marginTop: '1.2rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
fontWeight: 'bold',
|
|
color: 'red',
|
|
}}
|
|
>
|
|
<Box sx={{}}>please screen capture </Box>
|
|
<Box sx={{}}>for saving your Queue Number</Box>
|
|
|
|
<Box sx={{ marginTop: '1rem' }}>
|
|
<Button
|
|
disabled={changing_page}
|
|
onClick={() => {
|
|
localStorage.removeItem('queue_id');
|
|
localStorage.removeItem('queue_name');
|
|
localStorage.removeItem('queue_hkid');
|
|
localStorage.removeItem('queue_mobile');
|
|
localStorage.removeItem('queue_description');
|
|
|
|
alert('Please be informed that the queue information cleared');
|
|
|
|
setChangingPage(true);
|
|
router.push('/');
|
|
}}
|
|
disableElevation
|
|
variant='contained'
|
|
>
|
|
Clear Queue Information
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|