Skip to content

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

fix: update

parent a88a10df
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 80 deletions
Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx
View file @ 588053fb
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
// material-ui // material-ui
import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material"; import { Alert, Box, Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, LinearProgress, List, ListItemAvatar, ListItemButton, ListItemSecondaryAction, ListItemText, Stack, Typography } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
// project import // project import
import AntAvatar from 'components/@extended/Avatar'; import AntAvatar from 'components/@extended/Avatar';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
import UploadSingleFile from 'components/third-party/dropzone/SingleFile';
// types // types
import { tutorialTypeUserProgress } from "types/userProgress"; import { tutorialTypeUserProgress } from "types/userProgress";
// assets // assets
import { CheckCircleOutlined, CheckOutlined, ClockCircleOutlined, FileImageOutlined, FileMarkdownFilled, LeftOutlined, PlayCircleOutlined, RightOutlined, TrophyOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons"; import { CheckCircleOutlined, CheckOutlined, ClockCircleOutlined, FileMarkdownFilled, LeftOutlined, PlayCircleOutlined, RightOutlined, TrophyOutlined, UserOutlined } from "@ant-design/icons";
import { PopupTransition } from "components/@extended/Transitions"; import { PopupTransition } from "components/@extended/Transitions";
import ReportCard from "components/cards/statistics/ReportCard"; import ReportCard from "components/cards/statistics/ReportCard";
import { userProgress } from "data/userProgress"; import { userProgress } from "data/userProgress";
...@@ -55,16 +56,23 @@ const Tutorial = () => { ...@@ -55,16 +56,23 @@ const Tutorial = () => {
backgroundColor: 'white', // Initial background color backgroundColor: 'white', // Initial background color
}); });
const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>(null) const [selectedItemContent, setSelectedItemContent] = useState<selectedItemContentProps | null>(null)
const [desc, setDesc] = useState("") const [desc, setDesc] = useState("")
const [readMore, setReadMore] = useState(false) const [readMore, setReadMore] = useState(false)
const [itemDesc, setItemDesc] = useState("") const [itemDesc, setItemDesc] = useState("")
const [itemReadMore, setItemReadMore] = useState(false) const [itemReadMore, setItemReadMore] = useState(false)
const [itemReferenceData, setItemReferenceData] = useState<"image" | "video">("image") const [itemReferenceData, setItemReferenceData] = useState<"image" | "video">("image")
const [itemPracticeReferenceData, setItemPracticeReferenceData] = useState<"capture" | "upload">("capture")
const [itemResult, setItemResult] = useState<itemResultProps>({ const [itemResult, setItemResult] = useState<itemResultProps>({
itemMarkUser: 0, itemMarkUser: 0,
status: "Pending" status: "Pending"
}) })
useEffect(() => {
setData(userProgress.curriculums![0].tutorials[0]);
}, []);
const handleItemClick = (item: selectedCommonDataProps, backgroundColor: any) => { const handleItemClick = (item: selectedCommonDataProps, backgroundColor: any) => {
setSelectedItem({ setSelectedItem({
selectedCommonData: { selectedCommonData: {
...@@ -77,11 +85,6 @@ const Tutorial = () => { ...@@ -77,11 +85,6 @@ const Tutorial = () => {
}); });
}; };
useEffect(() => {
// Set your data here
setData(userProgress.curriculums![0].tutorials[0]);
}, []);
useEffect(() => { useEffect(() => {
setDesc(data?.tutorialDescription?.slice(0, 200)!) setDesc(data?.tutorialDescription?.slice(0, 200)!)
}, [data]) }, [data])
...@@ -109,13 +112,10 @@ const Tutorial = () => { ...@@ -109,13 +112,10 @@ const Tutorial = () => {
useEffect(() => { useEffect(() => {
setItemResult({ setItemResult({
itemMarkUser: ((selectedItemContent?.taskItemMark! * parseInt(marksCalculator?.confidence!)) / 100)!, itemMarkUser: ((selectedItemContent?.taskItemMark! * parseInt(marksCalculator?.confidence!)) / 100)!,
status: marksCalculator?.status! status: marksCalculator?.status.toUpperCase()!
}) })
}, [marksCalculator]) }, [marksCalculator])
useEffect(() => {
console.log(itemResult);
}, [itemResult])
//alert model //alert model
const [openModel, setOpenModel] = useState(false); const [openModel, setOpenModel] = useState(false);
...@@ -135,12 +135,91 @@ const Tutorial = () => { ...@@ -135,12 +135,91 @@ const Tutorial = () => {
} }
}; };
const PracticeTask = (imgData: any, title: string) => { // upload image
const [uploadImage, setUploadImage] = useState<any>();
const PracticeTask = (uploadImage: any, imgData: any, title: string) => {
if (itemPracticeReferenceData == "capture") {
if (typeof imgData === 'string' && imgData.trim() !== '') {
const curriculumIndex: number = 1;
const tutorialIndex: number = 1;
const imageData: any = imgData; // Your image data
let targetClass: string = ""; // Your target class
switch (title) {
case "Learn Number One":
targetClass = "One";
break;
case "Learn Number Two":
targetClass = "Two";
break;
case "Learn Number Three":
targetClass = "Three";
break;
case "Learn Number Four":
targetClass = "Four";
break;
case "Learn Number Five":
targetClass = "Five";
break;
case "Learn Number Six":
targetClass = "Six";
break;
case "Learn Number Seven":
targetClass = "Seven";
break;
case "Learn Number Eight":
targetClass = "Eight";
break;
case "Learn Number Nine":
targetClass = "Nine";
break;
case "Learn Number Ten":
targetClass = "Ten";
break;
default:
targetClass = "Initial";
break;
}
// Assuming imageData is a base64-encoded image
const base64Image = imageData; // Replace with your actual base64 data
const byteCharacters = atob(base64Image.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/jpeg' });
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
console.log(file);
dispatch(CalculateMarks(curriculumIndex, tutorialIndex, file, targetClass));
} else {
dispatch(
openSnackbar({
open: true,
//@ts-ignore
message: "Invalid Image Data",
variant: 'alert',
alert: {
color: 'warning'
},
close: true
})
);
}
} else if (itemPracticeReferenceData == "upload") {
console.log(uploadImage);
if (typeof imgData === 'string' && imgData.trim() !== '') {
const curriculumIndex: number = 1; const curriculumIndex: number = 1;
const tutorialIndex: number = 1; const tutorialIndex: number = 1;
const imageData: any = imgData; // Your image data const imageData: any = uploadImage[0]; // Your image data
let targetClass: string = ""; // Your target class let targetClass: string = ""; // Your target class
switch (title) { switch (title) {
...@@ -179,35 +258,10 @@ const Tutorial = () => { ...@@ -179,35 +258,10 @@ const Tutorial = () => {
break; break;
} }
// Assuming imageData is a base64-encoded image dispatch(CalculateMarks(curriculumIndex, tutorialIndex, imageData, targetClass));
const base64Image = imageData; // Replace with your actual base64 data
const byteCharacters = atob(base64Image.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/jpeg' });
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
dispatch(CalculateMarks(curriculumIndex, tutorialIndex, file, targetClass));
} else {
dispatch(
openSnackbar({
open: true,
//@ts-ignore
message: "Invalid Image Data",
variant: 'alert',
alert: {
color: 'warning'
},
close: true
})
);
} }
} }
/** /**
...@@ -417,29 +471,11 @@ const Tutorial = () => { ...@@ -417,29 +471,11 @@ const Tutorial = () => {
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item md={6}> <Grid item md={12}>
<Button <ButtonGroup aria-label="outlined button group" sx={{ width: "100%" }}>
variant="outlined" <Button fullWidth sx={{ width: "100%" }} size="small" variant={itemReferenceData == "image" ? "contained" : "outlined"} onClick={() => { setItemReferenceData("image") }}>Image Reference</Button>
endIcon={<FileImageOutlined />} <Button fullWidth sx={{ width: "100%" }} size="small" variant={itemReferenceData == "video" ? "contained" : "outlined"} onClick={() => { setItemReferenceData("video") }}>Vide Reference</Button>
sx={{ my: 2 }} </ButtonGroup>
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>
<Grid item md={12} xs={4} sx={{ height: '246px', '& img': { mb: 0, width: '100%', height: '100%', objectFit: 'contain' } }}> <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 == "image" && <img src={selectedItemContent?.referenceImage} alt="feature" style={{ width: '100%', height: '100%' }} />}
...@@ -559,21 +595,39 @@ const Tutorial = () => { ...@@ -559,21 +595,39 @@ const Tutorial = () => {
<Grid item md={8}> <Grid item md={8}>
<MainCard title="Capture / Upload Image"> <MainCard title="Capture / Upload Image">
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item md={6}> <Grid item md={12}>
<Webcam <ButtonGroup aria-label="outlined button group" >
audio={false} <Button fullWidth sx={{ whiteSpace: "nowrap" }} size="small" variant={itemPracticeReferenceData == "capture" ? "contained" : "outlined"} onClick={() => { setItemPracticeReferenceData("capture") }}>Capture Image</Button>
ref={webcamRef} <Button fullWidth sx={{ whiteSpace: "nowrap" }} size="small" variant={itemPracticeReferenceData == "upload" ? "contained" : "outlined"} onClick={() => { setItemPracticeReferenceData("upload") }}>Upload Image</Button>
screenshotFormat="image/jpeg" </ButtonGroup>
height={300}
width={400}
// videoConstraints={videoConstraints}
/>
</Grid>
<Grid item md={6}>
{capturedImage && (
<img src={capturedImage} alt="Captured" style={{ width: 400, height: 300 }} />
)}
</Grid> </Grid>
{itemPracticeReferenceData == "capture" && <>
<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>
</>}
{itemPracticeReferenceData == "upload" && <>
<Grid item md={12}>
<UploadSingleFile
file={uploadImage}
setFieldValue={function (field: string, value: any): void {
setUploadImage(value)
}}
/>
</Grid>
</>}
</Grid> </Grid>
</MainCard> </MainCard>
</Grid> </Grid>
...@@ -591,7 +645,7 @@ const Tutorial = () => { ...@@ -591,7 +645,7 @@ const Tutorial = () => {
secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} /> secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
</Grid> </Grid>
<Grid item md={12}> <Grid item md={12}>
<Button variant="contained" color="success" onClick={() => { PracticeTask(webcamRef.current?.getScreenshot(), selectedItemContent?.title!) }} fullWidth disabled={isLoading}> <Button variant="contained" color="success" onClick={() => { PracticeTask(uploadImage, webcamRef.current?.getScreenshot(), selectedItemContent?.title!) }} fullWidth disabled={isLoading}>
{isLoading ? <CircularWithPath /> : <>Get Result</>} {isLoading ? <CircularWithPath /> : <>Get Result</>}
</Button> </Button>
</Grid> </Grid>
...@@ -599,9 +653,10 @@ const Tutorial = () => { ...@@ -599,9 +653,10 @@ const Tutorial = () => {
</MainCard> </MainCard>
</Grid> </Grid>
<Grid item md={8}> <Grid item md={8}>
<Button size="small" variant="contained" onClick={capture} fullWidth> {itemPracticeReferenceData == "capture" && <Button size="small" variant="contained" onClick={capture} fullWidth>
Capture Capture
</Button> </Button>
}
</Grid> </Grid>
<Grid item md={4} /> <Grid item md={4} />
</Grid> </Grid>
......
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