Skip to content

2
2023-029
Commit eab682cb authored by janithgamage1.ed's avatar janithgamage1.ed
Browse files
Options

fix: update 

Desc : update project
parent c7607e34
Show whitespace changes
Inline Side-by-side
Showing with 301 additions and 19 deletions
Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx
View file @ eab682cb
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
// material-ui
import { Box, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material";
import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material";
import { useTheme } from '@mui/material/styles';
// project import
......@@ -12,11 +12,13 @@ import MainCard from "components/MainCard";
import { tutorialTypeUserProgress } from "types/userProgress";
// assets
import { ClockCircleOutlined, FileMarkdownFilled } from "@ant-design/icons";
import { CheckCircleOutlined, CheckOutlined, ClockCircleOutlined, FileImageOutlined, FileMarkdownFilled, LeftOutlined, PlayCircleOutlined, RightOutlined, TrophyOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { PopupTransition } from "components/@extended/Transitions";
import ReportCard from "components/cards/statistics/ReportCard";
import { userProgress } from "data/userProgress";
import { selectedCommonDataProps, selectedItemContentProps } from "./types/types";
import Webcam from 'react-webcam';
// action style
const actionSX = {
......@@ -46,7 +48,12 @@ const Tutorial = () => {
selectedCommonData: null,
backgroundColor: 'white', // Initial background color
});
const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>()
const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>(null)
const [desc, setDesc] = useState("")
const [readMore, setReadMore] = useState(false)
const [itemDesc, setItemDesc] = useState("")
const [itemReadMore, setItemReadMore] = useState(false)
const [itemReferenceData, setItemReferenceData] = useState<"image" | "video">("image")
const handleItemClick = (item: selectedCommonDataProps, backgroundColor: any) => {
setSelectedItem({
......@@ -65,8 +72,14 @@ const Tutorial = () => {
setData(userProgress.curriculums![0].tutorials[0]);
}, []);
const [desc, setDesc] = useState(data?.tutorialDescription?.slice(0, 100))
const [readMore, setReadMore] = useState(false)
useEffect(() => {
setDesc(data?.tutorialDescription?.slice(0, 200)!)
}, [data])
useEffect(() => {
if (!selectedItemContent?.description) return
setItemDesc(selectedItemContent?.description.slice(0, 200)!)
}, [selectedItemContent])
useEffect(() => {
// Filter data based on selectedItem.title
......@@ -81,8 +94,25 @@ const Tutorial = () => {
} else {
setSelectedItemContent(null);
}
}, [selectedItem, data]);
}, [selectedItem]);
//alert model
const [openModel, setOpenModel] = useState(false);
const handleModelClose = () => {
setOpenModel(!openModel);
};
// web cam
const webcamRef = useRef<Webcam>(null);
const [capturedImage, setCapturedImage] = useState<string | null>(null);
const capture = () => {
if (webcamRef.current) {
const imageSrc = webcamRef.current.getScreenshot();
setCapturedImage(imageSrc);
}
};
return (
<>
......@@ -105,10 +135,10 @@ const Tutorial = () => {
<span style={{ fontWeight: "bold", cursor: "pointer" }}
onClick={() => {
if (!readMore) {
setDesc(data?.tutorialDescription)
setDesc(data?.tutorialDescription!)
setReadMore(true)
} else {
setDesc(data?.tutorialDescription?.slice(0, 100))
setDesc(data?.tutorialDescription?.slice(0, 200)!)
setReadMore(false)
}
}} color="secondary">
......@@ -126,7 +156,12 @@ const Tutorial = () => {
<Grid md={5} item>
<Grid container spacing={2}>
<Grid md={12} item>
<ReportCard primary={`${data?.tutorialMarkUser}`} secondary="Tutorial User Mark" color={theme.palette.error.main} iconPrimary={FileMarkdownFilled} />
<ReportCard
primary={`${data?.tutorialMarkUser?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
secondary="Tutorial User Mark" color={theme.palette.error.main} iconPrimary={FileMarkdownFilled} />
</Grid>
<Grid md={12} item>
<ReportCard primary={`${convertMinutesToHMS(data?.tutorialSpentTime!)}`} secondary="Tutorial Time Spent On" color={theme.palette.success.dark} iconPrimary={ClockCircleOutlined} />
......@@ -152,7 +187,6 @@ const Tutorial = () => {
const backgroundColor = isSelected ? theme.palette.primary.lighter : 'white';
const iconColor = isSelected ? 'warning' : 'success';
return (
<>
<ListItemButton
......@@ -174,8 +208,15 @@ const Tutorial = () => {
<ListItemText primary={<Typography variant="subtitle1">{item.title}</Typography>} />
<ListItemSecondaryAction>
<Stack alignItems="flex-end">
<Typography variant="subtitle1" noWrap>User Mark : {item.taskItemMarkUser} </Typography>
<Typography variant="h6" color="secondary" noWrap> Mark : {item.taskItemMark} </Typography>
<Typography variant="subtitle1" noWrap>User Mark : {item.taskItemMarkUser?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Typography>
<Typography variant="h6" color="secondary" noWrap> Mark : {item.taskItemMark?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})} </Typography>
</Stack>
</ListItemSecondaryAction>
</ListItemButton>
......@@ -188,16 +229,257 @@ const Tutorial = () => {
<Grid item md={8}>
<MainCard title="Task View">
<Grid container spacing={2}>
<Grid item md={12}>
{selectedItemContent !== null
?
<>
<Grid item md={8}>
<Typography variant="h4" sx={{ mb: 2 }}>
{selectedItemContent?.title}
</Typography>
<Typography variant="h5" sx={{ textAlign: "justify", mb: 2 }}>
{itemDesc}
<span style={{ fontWeight: "bold", cursor: "pointer" }}
onClick={() => {
if (!itemReadMore) {
setItemDesc(selectedItemContent?.description!)
setItemReadMore(true)
} else {
setItemDesc(selectedItemContent?.description?.slice(0, 200)!)
setItemReadMore(false)
}
}} color="secondary">
{itemReadMore ? "Show Less" : "...Read More"}
</span>
</Typography>
<MainCard title="How To Do">
<List
component="nav"
sx={{
py: 0,
'& .MuiListItemButton-root': {
'& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
}
}}
>
{selectedItemContent?.howToDo && selectedItemContent?.howToDo.map((i, index) => {
return (
<>
<ListItemButton divider>
<ListItemAvatar>
<AntAvatar alt="Basic" type="combined" color="info">
{index + 1}
</AntAvatar>
</ListItemAvatar>
<ListItemText primary={<Typography variant="subtitle1">{i}</Typography>} />
</ListItemButton>
</>
)
})}
</List>
</MainCard>
</Grid>
<Grid item xs={4}>
<Grid container spacing={2}>
<Grid item md={6}>
<Button
variant="outlined"
endIcon={<FileImageOutlined />}
sx={{ my: 2 }}
onClick={() => { setItemReferenceData("image") }}
color="success"
size="small"
>
Image Reference
</Button>
</Grid>
<Grid item md={6}>
<Button
variant="outlined"
endIcon={<VideoCameraOutlined />}
sx={{ my: 2 }}
onClick={() => { setItemReferenceData("video") }}
color="warning"
size="small"
>
Vide Reference
</Button>
</Grid>
<Grid item md={12} xs={4} sx={{ height: '246px', '& img': { mb: 0, width: '100%', height: '100%', objectFit: 'contain' } }}>
{itemReferenceData == "image" && <img src={selectedItemContent?.referenceImage} alt="feature" style={{ width: '100%', height: '100%' }} />}
{itemReferenceData == "video" && <>In Constriction ....</>}
</Grid>
</Grid>
</Grid>
<Grid item md={8}></Grid>
<Grid item md={4}></Grid>
<Grid item md={8}>
<Grid container spacing={2}>
<Grid item md={6}>
<ReportCard primary={`Task Mark : ${(selectedItemContent.taskItemMark)?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
secondary="Task Mark" color={theme.palette.success.dark} iconPrimary={CheckCircleOutlined}
/>
</Grid>
<Grid item md={6}>
<ReportCard primary={`User Mark : ${(selectedItemContent.taskItemMarkUser)?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
secondary="Task User Mark" color={theme.palette.success.dark} iconPrimary={UserOutlined}
/>
</Grid>
<Grid item md={12}>
<ReportCard
primary={`Pass Mark : ${(selectedItemContent.taskItemMark * (85 / 100))?.toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}`}
secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} iconPrimary={TrophyOutlined}
/>
</Grid>
</Grid>
</Grid>
<Grid item md={4}>
<Grid container spacing={1}>
<Grid item md={12}>
<Button
variant="contained"
endIcon={<PlayCircleOutlined />}
fullWidth
sx={{ my: 1, width: "100%", height: "100%" }}
onClick={() => { setOpenModel(true) }}
color="warning"
size="small"
>
Practice Task
</Button>
</Grid>
<Grid item md={12}>
<Button
variant="contained"
endIcon={<CheckOutlined />}
fullWidth
sx={{ my: 1, width: "100%", height: "100%" }}
onClick={() => { }}
color="success"
size="small"
>
Complete Task
</Button>
</Grid>
<Grid item md={6}>
<Button
variant="contained"
endIcon={<LeftOutlined />}
fullWidth
sx={{ my: 1, width: "100%", height: "100%" }}
onClick={() => { }}
color="secondary"
size="small"
>
Previous Task
</Button>
</Grid>
<Grid item md={6}>
<Button
variant="contained"
endIcon={<RightOutlined />}
fullWidth
sx={{ my: 1, width: "100%", height: "100%" }}
onClick={() => { }}
color={"info"}
size="small"
>
Next Task
</Button>
</Grid>
</Grid>
</Grid>
</>
:
<Grid item md={12}>
<Alert variant="border" color="warning">Select a Task</Alert>
</Grid>
}
</Grid>
</MainCard>
</Grid>
</Grid>
<Dialog
maxWidth="lg"
TransitionComponent={PopupTransition}
keepMounted
fullWidth
onClose={handleModelClose}
open={openModel}
sx={{ '& .MuiDialog-paper': { p: 0 }, transition: 'transform 225ms' }}
aria-describedby="alert-dialog-slide-description"
>
<DialogTitle>Practice</DialogTitle>
<Divider />
<DialogContent sx={{ p: 2.5 }}>
<Grid container spacing={2}>
<Grid item md={8}>
<MainCard title="Capture / Upload Image">
<Grid container spacing={2}>
<Grid item md={6}>
<Webcam
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
height={300}
width={400}
// videoConstraints={videoConstraints}
/>
</Grid>
<Grid item md={6}>
{capturedImage && (
<img src={capturedImage} alt="Captured" style={{ width: 400, height: 300 }} />
)}
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid item md={4}>
<MainCard title="Practice Result">
<Grid container spacing={2}>
<Grid item md={12}>
<ReportCard
primary={`Result : N/A`}
secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
</Grid>
<Grid item md={12}>
<ReportCard
primary={`Status : N/A`}
secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
</Grid>
<Grid item md={12}>
<Button variant="contained" color="success" onClick={() => { }} fullWidth>
Get Result
</Button>
</Grid>
</Grid>
</MainCard>
</Grid>
<Grid item md={8}>
<Button size="small" variant="contained" onClick={capture} fullWidth>
Capture
</Button>
</Grid>
<Grid item md={4} />
</Grid>
</DialogContent>
<Divider />
<DialogActions sx={{ p: 2.5 }}>
<Grid container spacing={2}>
<Grid item md={12}>
<Button type="button" variant="contained" sx={{ float: "right" }} onClick={handleModelClose}>
Close
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
</>
)
}
......
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