Skip to content

2
2023-029
Commit 8d807298 authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update 

Desc : update project
parent 9f45a25f
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 22 deletions
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/tutorials/[tutorialId].tsx
View file @ 8d807298
import { Alert, Box, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, Checkbox, Container, Grid, IconButton, List, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListItemText, Paper, Stack, Typography } from '@mui/material'; import { Alert, Box, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, Checkbox, Container, Grid, IconButton, List, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListItemText, Paper, Stack, TextField, Typography } from '@mui/material';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { Curriculum, Item, Tutorial, curriculums_mock_data } from 'src/_mock/arrays/_curriculums'; import { Curriculum, Item, Tutorial, curriculums_mock_data } from 'src/_mock/arrays/_curriculums';
import { ComingSoonIllustration } from 'src/assets/illustrations'; import { ComingSoonIllustration } from 'src/assets/illustrations';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs'; import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Editor from 'src/components/editor/Editor';
import Iconify from 'src/components/iconify/Iconify'; import Iconify from 'src/components/iconify/Iconify';
import Image from 'src/components/image/Image'; import Image from 'src/components/image/Image';
import Scrollbar from 'src/components/scrollbar/Scrollbar'; import Scrollbar from 'src/components/scrollbar/Scrollbar';
import { Upload } from 'src/components/upload';
import { NAV } from 'src/config'; import { NAV } from 'src/config';
import useCountup from 'src/hooks/useCountup'; import useCountup from 'src/hooks/useCountup';
import { useSettingsContext } from '../../../../../../../components/settings'; import { useSettingsContext } from '../../../../../../../components/settings';
...@@ -62,11 +62,24 @@ export default function TutorialViewPage() { ...@@ -62,11 +62,24 @@ export default function TutorialViewPage() {
startDateTime?: string startDateTime?: string
}>() }>()
const [reference, setReference] = useState<"image" | "video">("image") const [reference, setReference] = useState<"image" | "video">("image")
const [sourceData, setSourceData] = useState<"upload" | "capture">("upload")
const [checked, setChecked] = useState([0]); const [checked, setChecked] = useState([0]);
const [action, setAction] = useState<"complete" | "skip" | "practice">()
const { days, hours, minutes, seconds } = useCountup(new Date(getCurrentDateTime())); const { days, hours, minutes, seconds } = useCountup(new Date(getCurrentDateTime()));
const [file, setFile] = useState<File | string | null>(null);
const [quillSimple, setQuillSimple] = useState('');
const handleDropSingleFile = useCallback((acceptedFiles: File[]) => {
const file = acceptedFiles[0];
if (file) {
setFile(
Object.assign(file, {
preview: URL.createObjectURL(file),
})
);
}
}, []);
const handleItemClick = (itemId: string) => { const handleItemClick = (itemId: string) => {
setItemContent(undefined) setItemContent(undefined)
...@@ -284,13 +297,13 @@ export default function TutorialViewPage() { ...@@ -284,13 +297,13 @@ export default function TutorialViewPage() {
})} })}
</CardContent> </CardContent>
<CardActions sx={{ m: 3 }}> <CardActions sx={{ m: 3 }}>
<Button variant="contained" color='warning' fullWidth onClick={() => { setQuillSimple('') }}> <Button variant="contained" color='warning' fullWidth onClick={() => { setAction('skip') }}>
Skip Skip
</Button> </Button>
<Button variant="contained" color='error' fullWidth onClick={() => { setQuillSimple('') }}> <Button variant="contained" color='error' fullWidth onClick={() => { setAction('practice') }}>
Practice Practice
</Button> </Button>
<Button variant="contained" fullWidth> <Button variant="contained" fullWidth onClick={() => { setAction('complete') }}>
Complete Complete
</Button> </Button>
</CardActions> </CardActions>
...@@ -301,23 +314,89 @@ export default function TutorialViewPage() { ...@@ -301,23 +314,89 @@ export default function TutorialViewPage() {
</CardContent> </CardContent>
</Card> </Card>
</> : <><Alert severity='info'>Select a tutorial item</Alert></>} </> : <><Alert severity='info'>Select a tutorial item</Alert></>}
</Grid>
<Grid md={12} item>
<Card>
<CardHeader title="Tutorial item 01 work space" />
<CardContent>
<Editor
simple
id="simple-editor"
value={quillSimple}
onChange={(value) => setQuillSimple(value)}
/>
</CardContent>
</Card>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid md={12} item>
{action && action != "skip" && <>
<Card>
<CardHeader title={`${action.toUpperCase()} - ${itemContent?.title}`} />
<CardContent>
<Grid container spacing={3}>
<Grid item md={5}>
<ButtonGroup aria-label="outlined button group">
<Button variant={sourceData == "upload" ? "contained" : "outlined"} onClick={() => { setSourceData("upload") }}>Upload Image</Button>
<Button variant={sourceData == "capture" ? "contained" : "outlined"} onClick={() => { setSourceData("capture") }}>Capture Image</Button>
</ButtonGroup>
{!sourceData && <><Alert severity='info'>Select a sourceData Type</Alert></>}
{sourceData == "upload" && <>
<Upload sx={{ mt: 3 }} file={file} onDrop={handleDropSingleFile} onDelete={() => setFile(null)} />
</>}
{sourceData == "capture" && <>
<Card sx={{ mt: 3 }}>
<CardContent>
<Typography variant="h5" paragraph>
Coming Soon!
</Typography>
<Typography sx={{ color: 'text.secondary' }}>
We are currently working hard on this page!
</Typography>
<ComingSoonIllustration sx={{ my: 1, height: 200 }} />
</CardContent>
</Card>
</>}
<Alert severity='info' sx={{ mt: 2 }}>Capture a source</Alert>
</Grid>
<Grid item md={4}>
<Grid container spacing={3} rowSpacing={2} sx={{ mt: 8 }}>
<Grid item md={12}>
<TextField
InputProps={{
readOnly: true,
}}
id="Calculated-Accuracy-basic" label="Calculated Accuracy (%)" variant="outlined" defaultValue={"N/A"} disabled={true} fullWidth size='small' />
</Grid>
<Grid item md={12}>
<TextField
InputProps={{
readOnly: true,
}}
id="Pass-Accuracy-basic" label="Pass Accuracy (%)" variant="outlined" defaultValue={"N/A"} disabled={true} fullWidth size='small' />
</Grid>
<Grid item md={12}>
<TextField
InputProps={{
readOnly: true,
}}
id="Practice-Accuracy-For-basic" label="Practice Accuracy For (%)" variant="outlined" defaultValue={"N/A"} disabled={true} fullWidth size='small' />
</Grid>
<Grid item md={12}>
<Button variant="contained" fullWidth >
{action.toUpperCase()}
</Button>
</Grid>
<Grid item md={12}>
<Alert severity='success' sx={{ mt: 1.25 }}>Result</Alert>
</Grid>
</Grid>
</Grid>
<Grid item md={3}>
<Image
disabledEffect
alt={"Reference Image"}
src={"https://drive.google.com/uc?export=view&id=1T7djlWSfUgCFUNrrW5teXUJglZ-uTHLk"}
ratio={"1/1"}
sx={{ borderRadius: 1, mt: 6 }}
/>
<Alert severity='info' sx={{ mt: 2 }}>Captured source</Alert>
</Grid>
</Grid>
</CardContent>
</Card>
</>}
</Grid>
</Grid> </Grid>
</Container > </Container >
</> </>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment