Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2023-029
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
2023-029
2023-029
Commits
588053fb
Commit
588053fb
authored
Sep 03, 2023
by
janithgamage1.ed
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: update
parent
a88a10df
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
135 additions
and
80 deletions
+135
-80
Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx
...ent/learning-curriculums-subscribed/tutorial/tutorial.tsx
+135
-80
No files found.
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
,
File
ImageOutlined
,
FileMarkdownFilled
,
LeftOutlined
,
PlayCircleOutlined
,
RightOutlined
,
TrophyOutlined
,
UserOutlined
,
VideoCamera
Outlined
}
from
"
@ant-design/icons
"
;
import
{
CheckCircleOutlined
,
CheckOutlined
,
ClockCircleOutlined
,
File
MarkdownFilled
,
LeftOutlined
,
PlayCircleOutlined
,
RightOutlined
,
TrophyOutlined
,
User
Outlined
}
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,8 +135,12 @@ const Tutorial = () => {
...
@@ -135,8 +135,12 @@ 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
()
!==
''
)
{
if
(
typeof
imgData
===
'
string
'
&&
imgData
.
trim
()
!==
''
)
{
const
curriculumIndex
:
number
=
1
;
const
curriculumIndex
:
number
=
1
;
const
tutorialIndex
:
number
=
1
;
const
tutorialIndex
:
number
=
1
;
...
@@ -193,6 +197,8 @@ const Tutorial = () => {
...
@@ -193,6 +197,8 @@ const Tutorial = () => {
const
file
=
new
File
([
blob
],
'
image.jpg
'
,
{
type
:
'
image/jpeg
'
});
const
file
=
new
File
([
blob
],
'
image.jpg
'
,
{
type
:
'
image/jpeg
'
});
console
.
log
(
file
);
dispatch
(
CalculateMarks
(
curriculumIndex
,
tutorialIndex
,
file
,
targetClass
));
dispatch
(
CalculateMarks
(
curriculumIndex
,
tutorialIndex
,
file
,
targetClass
));
}
else
{
}
else
{
dispatch
(
dispatch
(
...
@@ -208,6 +214,54 @@ const Tutorial = () => {
...
@@ -208,6 +214,54 @@ const Tutorial = () => {
})
})
);
);
}
}
}
else
if
(
itemPracticeReferenceData
==
"
upload
"
)
{
console
.
log
(
uploadImage
);
const
curriculumIndex
:
number
=
1
;
const
tutorialIndex
:
number
=
1
;
const
imageData
:
any
=
uploadImage
[
0
];
// 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
;
}
dispatch
(
CalculateMarks
(
curriculumIndex
,
tutorialIndex
,
imageData
,
targetClass
));
}
}
}
/**
/**
...
@@ -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,6 +595,13 @@ const Tutorial = () => {
...
@@ -559,6 +595,13 @@ 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=
{
12
}
>
<
ButtonGroup
aria
-
label=
"outlined button group"
>
<
Button
fullWidth
sx=
{
{
whiteSpace
:
"
nowrap
"
}
}
size=
"small"
variant=
{
itemPracticeReferenceData
==
"
capture
"
?
"
contained
"
:
"
outlined
"
}
onClick=
{
()
=>
{
setItemPracticeReferenceData
(
"
capture
"
)
}
}
>
Capture Image
</
Button
>
<
Button
fullWidth
sx=
{
{
whiteSpace
:
"
nowrap
"
}
}
size=
"small"
variant=
{
itemPracticeReferenceData
==
"
upload
"
?
"
contained
"
:
"
outlined
"
}
onClick=
{
()
=>
{
setItemPracticeReferenceData
(
"
upload
"
)
}
}
>
Upload Image
</
Button
>
</
ButtonGroup
>
</
Grid
>
{
itemPracticeReferenceData
==
"
capture
"
&&
<>
<
Grid
item
md=
{
6
}
>
<
Grid
item
md=
{
6
}
>
<
Webcam
<
Webcam
audio=
{
false
}
audio=
{
false
}
...
@@ -574,6 +617,17 @@ const Tutorial = () => {
...
@@ -574,6 +617,17 @@ const Tutorial = () => {
<
img
src=
{
capturedImage
}
alt=
"Captured"
style=
{
{
width
:
400
,
height
:
300
}
}
/>
<
img
src=
{
capturedImage
}
alt=
"Captured"
style=
{
{
width
:
400
,
height
:
300
}
}
/>
)
}
)
}
</
Grid
>
</
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment