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": [
"Countup",
"Janith",
"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() {
</Grid>
</>}
</Grid>
</Container>
</>
);
......
Project/Frontend/Web_App/src/routes/paths.ts
View file @ 9f45a25f
......@@ -104,7 +104,11 @@ export const PATH_DASHBOARD = {
learningModule: {
root: path(ROOTS_DASHBOARD, '/learning-module'),
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'),
leadBoardHome: path(ROOTS_DASHBOARD, '/learning-module/leadBoard'),
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 = {
title: string;
description: string;
image: string;
id: string
};
isActive: boolean;
};
......@@ -75,7 +76,7 @@ type CarouselItemProps = {
function CarouselItem({ item, isActive }: CarouselItemProps) {
const theme = useTheme();
const { image, title } = item;
const { image, title, id } = item;
return (
<Paper sx={{ position: 'relative', height: 500 }}>
......@@ -121,7 +122,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) {
</m.div>
<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 }}>
View The Curriculum
</Button>
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx
View file @ 9f45a25f
......@@ -15,9 +15,10 @@ type Props = {
image: 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 theme = useTheme();
......@@ -67,7 +68,7 @@ export default function CarouselCenterMode({ data }: Props) {
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item) => (
<Box key={item.id} sx={{ px: 1 }}>
<CarouselItem item={item} />
<CarouselItem item={item} curriculumId={curriculumId!.toString()} />
</Box>
))}
</Carousel>
......@@ -76,18 +77,17 @@ export default function CarouselCenterMode({ data }: Props) {
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
title: string;
description: string;
image: string;
id: string
};
function CarouselItem({ item }: { item: CarouselItemProps }) {
function CarouselItem({ item, curriculumId }: { item: CarouselItemProps, curriculumId: string }) {
const theme = useTheme();
const { image, title } = item;
const { image, title, id } = item;
return (
<Paper
......@@ -127,7 +127,7 @@ function CarouselItem({ item }: { item: CarouselItemProps }) {
transition: (theme) => theme.transitions.create('opacity'),
'&:hover': { opacity: 1 },
}}
href={PATH_DASHBOARD.learningModule.curriculumView}
href={PATH_DASHBOARD.learningModule.tutorialView(curriculumId, id)}
>
learn More
<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