Skip to content

2
2023-029
Commit 9f45a25f authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update 

Desc : update project
parent 189489cd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 870 additions and 168 deletions
.vscode/settings.json
View file @ 9f45a25f
{ {
"cSpell.words": [ "cSpell.words": [
"Countup",
"Janith", "Janith",
"SLIIT" "SLIIT"
] ]
......
Project/Frontend/Web_App/src/hooks/useCountup.ts 0 → 100644
View file @ 9f45a25f
import { useEffect, useState } from 'react';
type ReturnType = {
days: string;
hours: string;
minutes: string;
seconds: string;
};
export default function useCountup(date: Date): ReturnType {
const [countup, setCountup] = useState({
days: '00',
hours: '00',
minutes: '00',
seconds: '00',
});
useEffect(() => {
const interval = setInterval(() => setNewTime(), 1000);
return () => clearInterval(interval);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const setNewTime = () => {
const startTime = date;
const endTime = new Date();
const elapsedMilliseconds = endTime.valueOf() - startTime.valueOf();
const getDays = Math.floor(elapsedMilliseconds / (1000 * 60 * 60 * 24));
const getHours = `0${Math.floor((elapsedMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}`.slice(-2);
const getMinutes = `0${Math.floor((elapsedMilliseconds % (1000 * 60 * 60)) / (1000 * 60))}`.slice(-2);
const getSeconds = `0${Math.floor((elapsedMilliseconds % (1000 * 60)) / 1000)}`.slice(-2);
setCountup({
days: getDays.toString() || '000',
hours: getHours || '000',
minutes: getMinutes || '000',
seconds: getSeconds || '000',
});
};
return {
days: countup.days,
hours: countup.hours,
minutes: countup.minutes,
seconds: countup.seconds,
};
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId].tsx 0 → 100644
View file @ 9f45a25f
import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
import { Card, CardContent, CardHeader, Collapse, Container, Grid, IconButton, Typography } from '@mui/material';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Curriculum, Tutorial, curriculums_mock_data } from 'src/_mock/arrays/_curriculums';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import CarouselCenterMode from 'src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode';
import { useSettingsContext } from '../../../../../components/settings';
import DashboardLayout from '../../../../../layouts/dashboard';
CurriculumViewPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumViewPage() {
const { themeStretch } = useSettingsContext();
const { query: { curriculumId }, } = useRouter();
const [tutorials, setTutorials] = useState<Tutorial[]>([])
const [curriculumDetails, setCurriculumDetails] = useState<Curriculum>()
const [expanded, setExpanded] = useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
useEffect(() => {
if (!curriculumId) return
const selectedCurriculum = curriculums_mock_data.curriculums.find(curriculum => curriculum.id === curriculumId);
if (selectedCurriculum) {
setCurriculumDetails(selectedCurriculum)
setTutorials(selectedCurriculum.tutorials!);
}
}, [curriculumId])
return (
<>
<Head>
<title> Curriculum View | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading={`Curriculum View - ${curriculumDetails ? curriculumDetails.title : "N/A"}`}
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum View', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<Card>
<CardHeader
sx={{ mb: 3 }}
title="Comprehensive Sign Language Foundations"
subheader="Master the essential skills of sign language communication in this comprehensive curriculum."
action={
<IconButton
aria-expanded={expanded}
aria-label="show more"
onClick={handleExpandClick}
>
<ExpandMoreIcon />
</IconButton>
}
/>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography variant="subtitle1" >
Embark on a transformative journey of sign language proficiency with our Comprehensive Sign Language Foundations curriculum. Designed to equip learners with fundamental signing
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<Grid md={12} item>
{tutorials && <CarouselCenterMode data={tutorials} curriculumId={curriculumId} />}
</Grid>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../../components/settings';
import DashboardLayout from '../../../../../../layouts/dashboard';
CurriculumViewPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumViewPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Curriculum View | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum View"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum View', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/tutorials/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../../../components/settings';
import DashboardLayout from '../../../../../../../layouts/dashboard';
TutorialListPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function TutorialListPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Tutorial List | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Tutorial List"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorials', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorial List', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../components/settings';
import DashboardLayout from '../../../../../layouts/dashboard';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
CurriculumListPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumListPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Curriculum List | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum List"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum List', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/spokenLanguageTranslation-module/index.tsx
View file @ 9f45a25f
...@@ -174,9 +174,6 @@ export default function SpokenLanguageTranslationHomePage() { ...@@ -174,9 +174,6 @@ export default function SpokenLanguageTranslationHomePage() {
</Grid> </Grid>
</>} </>}
</Grid> </Grid>
</Container> </Container>
</> </>
); );
......
Project/Frontend/Web_App/src/routes/paths.ts
View file @ 9f45a25f
...@@ -104,7 +104,11 @@ export const PATH_DASHBOARD = { ...@@ -104,7 +104,11 @@ export const PATH_DASHBOARD = {
learningModule: { learningModule: {
root: path(ROOTS_DASHBOARD, '/learning-module'), root: path(ROOTS_DASHBOARD, '/learning-module'),
curriculumHome: path(ROOTS_DASHBOARD, '/learning-module/curriculum'), curriculumHome: path(ROOTS_DASHBOARD, '/learning-module/curriculum'),
curriculumView: path(ROOTS_DASHBOARD, '/learning-module/curriculum/process'), curriculumList: path(ROOTS_DASHBOARD, '/learning-module/curriculum/curriculums'),
curriculumView: (curriculumId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}`),
tutorialList: (curriculumId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}/tutorials`),
tutorialView:(curriculumId: string, tutorialId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}/tutorials/${tutorialId}`),
// curriculumView: path(ROOTS_DASHBOARD, '/learning-module/curriculum/process'),
questionAndAnswersHome: path(ROOTS_DASHBOARD, '/learning-module/questionAndAnswers'), questionAndAnswersHome: path(ROOTS_DASHBOARD, '/learning-module/questionAndAnswers'),
leadBoardHome: path(ROOTS_DASHBOARD, '/learning-module/leadBoard'), leadBoardHome: path(ROOTS_DASHBOARD, '/learning-module/leadBoard'),
feedbackHome: path(ROOTS_DASHBOARD, '/learning-module/feedback'), feedbackHome: path(ROOTS_DASHBOARD, '/learning-module/feedback'),
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselAnimation.tsx
View file @ 9f45a25f
...@@ -68,6 +68,7 @@ type CarouselItemProps = { ...@@ -68,6 +68,7 @@ type CarouselItemProps = {
title: string; title: string;
description: string; description: string;
image: string; image: string;
id: string
}; };
isActive: boolean; isActive: boolean;
}; };
...@@ -75,7 +76,7 @@ type CarouselItemProps = { ...@@ -75,7 +76,7 @@ type CarouselItemProps = {
function CarouselItem({ item, isActive }: CarouselItemProps) { function CarouselItem({ item, isActive }: CarouselItemProps) {
const theme = useTheme(); const theme = useTheme();
const { image, title } = item; const { image, title, id } = item;
return ( return (
<Paper sx={{ position: 'relative', height: 500 }}> <Paper sx={{ position: 'relative', height: 500 }}>
...@@ -121,7 +122,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) { ...@@ -121,7 +122,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) {
</m.div> </m.div>
<m.div variants={varFade().inRight}> <m.div variants={varFade().inRight}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView}> <Link href={PATH_DASHBOARD.learningModule.curriculumView(item.id)}>
<Button variant="contained" sx={{ mt: 3 }}> <Button variant="contained" sx={{ mt: 3 }}>
View The Curriculum View The Curriculum
</Button> </Button>
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx
View file @ 9f45a25f
...@@ -15,9 +15,10 @@ type Props = { ...@@ -15,9 +15,10 @@ type Props = {
image: string; image: string;
description: string; description: string;
}[]; }[];
curriculumId?: string | string[]
}; };
export default function CarouselCenterMode({ data }: Props) { export default function CarouselCenterMode({ data, curriculumId }: Props) {
const carouselRef = useRef<Carousel | null>(null); const carouselRef = useRef<Carousel | null>(null);
const theme = useTheme(); const theme = useTheme();
...@@ -67,7 +68,7 @@ export default function CarouselCenterMode({ data }: Props) { ...@@ -67,7 +68,7 @@ export default function CarouselCenterMode({ data }: Props) {
<Carousel ref={carouselRef} {...carouselSettings}> <Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item) => ( {data.map((item) => (
<Box key={item.id} sx={{ px: 1 }}> <Box key={item.id} sx={{ px: 1 }}>
<CarouselItem item={item} /> <CarouselItem item={item} curriculumId={curriculumId!.toString()} />
</Box> </Box>
))} ))}
</Carousel> </Carousel>
...@@ -76,18 +77,17 @@ export default function CarouselCenterMode({ data }: Props) { ...@@ -76,18 +77,17 @@ export default function CarouselCenterMode({ data }: Props) {
); );
} }
// ----------------------------------------------------------------------
type CarouselItemProps = { type CarouselItemProps = {
title: string; title: string;
description: string; description: string;
image: string; image: string;
id: string
}; };
function CarouselItem({ item }: { item: CarouselItemProps }) { function CarouselItem({ item, curriculumId }: { item: CarouselItemProps, curriculumId: string }) {
const theme = useTheme(); const theme = useTheme();
const { image, title } = item; const { image, title, id } = item;
return ( return (
<Paper <Paper
...@@ -127,7 +127,7 @@ function CarouselItem({ item }: { item: CarouselItemProps }) { ...@@ -127,7 +127,7 @@ function CarouselItem({ item }: { item: CarouselItemProps }) {
transition: (theme) => theme.transitions.create('opacity'), transition: (theme) => theme.transitions.create('opacity'),
'&:hover': { opacity: 1 }, '&:hover': { opacity: 1 },
}} }}
href={PATH_DASHBOARD.learningModule.curriculumView} href={PATH_DASHBOARD.learningModule.tutorialView(curriculumId, id)}
> >
learn More learn More
<Iconify icon="eva:arrow-forward-fill" width={16} sx={{ ml: 1 }} /> <Iconify icon="eva:arrow-forward-fill" width={16} sx={{ ml: 1 }} />
......
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