Skip to content

2
2023-029
Commit d95d1752 authored by Gamage B.G.J's avatar Gamage B.G.J
Browse files
Options

Merge branch 'dev' into 'master' 

Dev

See merge request !9
parents 39909344 a4f95b73
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 3 deletions
Project/Frontend/Web_App/src/pages/dashboard/spokenLanguageTranslation-module/index.tsx
View file @ d95d1752
import { Container, Typography } from '@mui/material';
import { Alert, Button, Card, CardActions, CardContent, CardHeader, Container, Grid, Typography } from '@mui/material';
import Head from 'next/head';
import { useCallback, useState } from 'react';
import { ComingSoonIllustration } from 'src/assets/illustrations';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import HomeWidget from 'src/sections/@dashboard/spokenLanguageTranslation-module/HomeWidget';
import _mock from '../../../_mock';
import Editor from '../../../components/editor';
import { useSettingsContext } from '../../../components/settings';
import { Upload } from '../../../components/upload';
import DashboardLayout from '../../../layouts/dashboard';
import {
CarouselBasic3
} from '../../../sections/_examples/extra/carousel';
SpokenLanguageTranslationHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function SpokenLanguageTranslationHomePage() {
const { themeStretch } = useSettingsContext();
const [translateType, setTranslateType] = useState<"video" | "text">()
const [file, setFile] = useState<File | string | null>(null);
const [quillSimple, setQuillSimple] = useState('');
const handleHomeWidgetOnClick = (value: string) => {
if (!value) return
if (value == "Video Translate") {
setTranslateType("video")
return
}
if (value == "Text Translate") {
setTranslateType("text")
return
}
}
const handleDropSingleFile = useCallback((acceptedFiles: File[]) => {
const file = acceptedFiles[0];
if (file) {
setFile(
Object.assign(file, {
preview: URL.createObjectURL(file),
})
);
}
}, []);
const _carouselsExample = [...Array(5)].map((_, index) => ({
id: _mock.id(index),
title: _mock.text.title(index),
image: _mock.image.cover(index),
description: _mock.text.description(index),
}));
return (
<>
<Head>
<title> Blank Page | SignConnect+</title>
<title> Spoken Language Translation Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Typography variant="h6"> Blank </Typography>
<CustomBreadcrumbs
heading="Spoken Language Translation"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Spoken Language Translation Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Spoken Language Translation', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={3}>
<Grid item xs={12} md={6} lg={6}>
<HomeWidget
title="Video Translate"
subTitle="Spoken Language Video Convert to sign language"
icon="eva:video-fill"
color='warning'
handleClick={handleHomeWidgetOnClick}
/>
</Grid>
<Grid item xs={12} md={6} lg={6}>
<HomeWidget
title="Text Translate"
subTitle="Spoken Language Text Convert to sign language"
icon="eva:text-fill"
color="success"
handleClick={handleHomeWidgetOnClick}
/>
</Grid>
{!translateType && <>
<Grid item xs={12} md={12} lg={12}>
<Alert severity='info' >Select a Translation type</Alert>
</Grid>
</>}
{translateType == "video" && <>
<Grid item xs={12} md={8} lg={8}>
<Card>
<CardHeader
title="Upload Video"
subheader="Upload you're video to convert to sigh language"
/>
<CardContent>
<Upload file={file} onDrop={handleDropSingleFile} onDelete={() => setFile(null)} />
</CardContent>
<CardActions>
<Button variant="contained" color='error' fullWidth onClick={() => { setFile(null) }}>
Reset
</Button>
<Button variant="contained" fullWidth>
Convert
</Button>
</CardActions>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Card>
<CardHeader title="3D Model" />
<CardContent>
<Typography variant="h3" paragraph>
Coming Soon!
</Typography>
<Typography sx={{ color: 'text.secondary' }}>
We are currently working hard on this page!
</Typography>
<ComingSoonIllustration sx={{ my: 1, height: 200 }} />
</CardContent>
</Card>
</Grid>
</>}
{translateType == "text" && <>
<Grid item xs={12} md={8} lg={8}>
<Card sx={{ height: "100%" }}>
<CardHeader
title="Enter text"
subheader="Enter you're text to convert to sigh language"
/>
<CardContent>
<Editor
simple
id="simple-editor"
value={quillSimple}
onChange={(value) => setQuillSimple(value)}
/>
</CardContent>
<CardActions>
<Button variant="contained" color='error' fullWidth onClick={() => { setQuillSimple('') }}>
Reset
</Button>
<Button variant="contained" fullWidth>
Convert
</Button>
</CardActions>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Card>
<CardHeader title="Converted Output" />
<CardContent>
<CarouselBasic3 data={_carouselsExample} />
</CardContent>
</Card>
</Grid>
</>}
</Grid>
</Container>
</>
);
......
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