Skip to content

2
23-064
Commit 36a124a6 authored by oshan's avatar oshan
Browse files
Options

user frontend

parent f1c9ca52
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 43 deletions
Frontend/frontend/src/actor pages/Home/Home.js
View file @ 36a124a6
...@@ -6,7 +6,7 @@ import axios from 'axios'; ...@@ -6,7 +6,7 @@ import axios from 'axios';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
// import CardActions from '@mui/material/CardActions'; // import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
// import CardMedia from '@mui/material/CardMedia'; import CardMedia from '@mui/material/CardMedia';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
...@@ -39,6 +39,7 @@ export default function Home() { ...@@ -39,6 +39,7 @@ export default function Home() {
.then((response) => { .then((response) => {
setEmotions(response.data); setEmotions(response.data);
console.log(response.data); console.log(response.data);
alert("image loaded successfully")
}) })
.catch((error) => { .catch((error) => {
console.error('Error fetching emotions:', error); console.error('Error fetching emotions:', error);
...@@ -80,12 +81,17 @@ export default function Home() { ...@@ -80,12 +81,17 @@ export default function Home() {
style={{ marginLeft: '40px', marginTop: '20px' }} style={{ marginLeft: '40px', marginTop: '20px' }}
onClick={navigateToChat} onClick={navigateToChat}
> >
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} style={{alignItems:'center'}}>
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2" fontSize={35} color="#483485"> <Typography variant="h5" component="h2" fontSize={35} color="#483485">
Chat Chat
</Typography> </Typography>
</CardContent> </CardContent>
<CardContent sx={{ flexGrow: 1 }} style={{marginTop:'-15px'}}>
<Typography gutterBottom variant="h3" component="h4" fontSize={11} color="#483485" >
Chat with your director and select to the movie.
</Typography>
</CardContent>
</Card> </Card>
</Grid> </Grid>
...@@ -96,12 +102,17 @@ export default function Home() { ...@@ -96,12 +102,17 @@ export default function Home() {
style={{ marginLeft: '40px', marginTop: '20px' }} style={{ marginLeft: '40px', marginTop: '20px' }}
onClick={navigateToRequest} onClick={navigateToRequest}
> >
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} style={{alignItems:'center'}} >
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2" fontSize={35} color="#483485"> <Typography variant="h5" component="h2" fontSize={35} color="#483485">
Request Request
</Typography> </Typography>
</CardContent> </CardContent>
<CardContent sx={{ flexGrow: 1 }} style={{marginTop:'-15px'}}>
<Typography gutterBottom variant="h3" component="h4" fontSize={11} color="#483485" >
See requests coming from directors.
</Typography>
</CardContent>
</Card> </Card>
</Grid> </Grid>
...@@ -112,18 +123,23 @@ export default function Home() { ...@@ -112,18 +123,23 @@ export default function Home() {
style={{ marginLeft: '40px', marginTop: '20px' }} style={{ marginLeft: '40px', marginTop: '20px' }}
onClick={navigateToProfile} onClick={navigateToProfile}
> >
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} style={{alignItems:'center'}}>
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2" fontSize={35} color="#483485"> <Typography variant="h5" component="h2" fontSize={35} color="#483485" >
Profile Profile
</Typography> </Typography>
</CardContent> </CardContent>
<CardContent sx={{ flexGrow: 1 }} style={{marginTop:'-15px'}}>
<Typography gutterBottom variant="h3" component="h4" fontSize={11} color="#483485" >
you can upload your face images to testing for the directors
</Typography>
</CardContent>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container>
</div> </div>
<div> <div style={{marginTop:'-55px'}}>
<Container sx={{ py: 8 }} width={'100%'} style={{ position: 'relative', zIndex: 1 }}> <Container sx={{ py: 8 }} width={'100%'} style={{ position: 'relative', zIndex: 1 }}>
<Grid container spacing={1}> <Grid container spacing={1}>
{emotions {emotions
...@@ -131,17 +147,17 @@ export default function Home() { ...@@ -131,17 +147,17 @@ export default function Home() {
.map((emotion) => ( .map((emotion) => (
<Grid key={emotion._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}> <Grid key={emotion._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}>
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* <CardMedia <CardMedia
component="img" // Use "img" instead of "div" component="img" // Use "img" instead of "div"
src={require(`../../../../../face_classification/ActorImage/${emotion.image_path}`)} // Use the provided image URL src={require(`../../../../../Emotions Identification System/ActorImage/${emotion.image_path}`)} // Use the provided image URL
sx={{width:"100%", height:250}} sx={{width:"100%", height:250}}
/> */} />
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2"> <Typography gutterBottom variant="h5" component="h2" fontSize={25}>
{emotion.emotion} {emotion.emotion}
</Typography> </Typography>
<Typography> <Typography variant="h5" component="h2" fontSize={15}>
Rate: {emotion.score}% Rate: {emotion.score.toFixed(2)}%
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
......
Frontend/frontend/src/actor pages/Profile/Profile.js
View file @ 36a124a6
import { useState } from "react"; import { useState, useEffect } from "react";
import axios from "axios"; import axios from "axios";
// import Loader from "../Loader/Loader"; // import Loader from "../Loader/Loader";
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
...@@ -6,6 +6,8 @@ import Button from '@mui/material/Button'; ...@@ -6,6 +6,8 @@ import Button from '@mui/material/Button';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import { Box } from "@mui/system";
import { TextField } from "@mui/material";
import Paper from '@mui/material/Paper'; import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import NavBar from "../../components/NavBar"; import NavBar from "../../components/NavBar";
...@@ -15,16 +17,31 @@ import background_image from '../../temp_images/page_background.png' ...@@ -15,16 +17,31 @@ import background_image from '../../temp_images/page_background.png'
function Profile() { function Profile() {
const [File, setFile] = useState(); const [File, setFile] = useState();
const [Actress, setActress] = useState([]); const [Actress, setActress] = useState([]);
const [description, setDescription] = useState('');
const [userDescription, setUserDescription] = useState('');
const user_email = localStorage.getItem("user email"); const user_email = localStorage.getItem("user email");
console.log(user_email); console.log(user_email);
const user_name = localStorage.getItem("user name"); const user_name = localStorage.getItem("user name");
useEffect(() => {
// Fetch user description based on email
axios.get(`http://localhost:5000/api/description/${user_email}`)
.then((response) => {
const description = response.data.description;
setUserDescription(description);
})
.catch((error) => {
console.error('Error fetching user description:', error);
});
}, [user_email]);
const upload = () => { const upload = () => {
const Actor = new FormData(); const Actor = new FormData();
Actor.append("actor", File); Actor.append("actor", File);
Actor.append("user_email", user_email); Actor.append("user_email", user_email);
Actor.append("user_name", user_name); Actor.append("user_name", user_name);
Actor.append("user_description", userDescription);
axios axios
.post("http://localhost:5000/actor", Actor) .post("http://localhost:5000/actor", Actor)
...@@ -36,6 +53,26 @@ function Profile() { ...@@ -36,6 +53,26 @@ function Profile() {
console.log(err); console.log(err);
}); });
}; };
const handleDescription = () => {
const userDescription = {
demail: user_email, // Use userEmail instead of email
description: description,
};
axios.post('http://localhost:5000/api/description', userDescription)
.then((response) => {
console.log(response.data);
alert("Description added successfully");
})
.catch((error) => {
console.error('Error adding description:', error);
});
};
return ( return (
<> <>
{/* <Loader /> */} {/* <Loader /> */}
...@@ -60,6 +97,53 @@ function Profile() { ...@@ -60,6 +97,53 @@ function Profile() {
<input type="file" onChange={(e) => setFile(e.target.files[0])} /> <input type="file" onChange={(e) => setFile(e.target.files[0])} />
<Button variant="contained" onClick={upload}>Upload</Button > <Button variant="contained" onClick={upload}>Upload</Button >
</Paper> </Paper>
<Box
sx={{
backgroundColor: 'white',
padding: '20px',
borderRadius: '5px',
maxWidth: '400px',
position: 'absolute',
marginTop:'150px',
left: '50%',
transform: 'translate(-50%, -50%)',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
}}
>
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
<h2>tell us about you</h2>
</div>
{/* <TextField
label="Email"
fullWidth
margin="normal"
InputProps={{ style: { borderColor: '#483485' } }}
value={user_email}
onChange={(e) => setemail(e.target.value)}
disabled
/> */}
<TextField
label="Discription"
fullWidth
margin="normal"
InputProps={{ style: { borderColor: '#483485' } }}
onChange={(e) => setDescription(e.target.value)}
/>
<Button
variant="contained"
color="primary"
fullWidth
sx={{ backgroundColor: '#483485', marginTop: '10px' }}
onClick={handleDescription}
>
Submit
</Button>
</Box>
</Container> </Container>
</div> </div>
......
Frontend/frontend/src/director pages/DirectorHome/DirectorHome.jsx
View file @ 36a124a6
...@@ -5,7 +5,7 @@ import Button from '@mui/material/Button'; ...@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
// import CardActions from '@mui/material/CardActions'; // import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
// import CardMedia from '@mui/material/CardMedia'; import CardMedia from '@mui/material/CardMedia';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
...@@ -77,20 +77,23 @@ export default function DirectorHome() { ...@@ -77,20 +77,23 @@ export default function DirectorHome() {
{emotions.map((emotion) => ( {emotions.map((emotion) => (
<Grid key={emotion._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}> <Grid key={emotion._id} xs={12} sm={6} md={3.5} style={{ marginLeft: '40px', marginTop: '20px' }}>
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', zIndex: 1 }}> <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', zIndex: 1 }}>
{/* <CardMedia <CardMedia
component="img" component="img"
src={require(`../../../../../face_classification/ActorImage/${emotion.image_path}`)} src={require(`../../../../../Emotions Identification System/ActorImage/${emotion.image_path}`)}
sx={{width:"100%", height:250}} sx={{width:"100%", height:250}}
/> */} />
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2"> <Typography gutterBottom variant="h5" component="h2">
{emotion.emotion} {emotion.emotion}
</Typography> </Typography>
<Typography> <Typography>
Rate: {emotion.score}% {emotion.score}%
</Typography> </Typography>
<Typography> <Typography>
Name: {emotion.user_name} {emotion.user_name}
</Typography>
<Typography>
{emotion.user_description}
</Typography> </Typography>
<Button <Button
variant="contained" variant="contained"
......
Frontend/frontend/src/user/Login.jsx
View file @ 36a124a6
...@@ -20,6 +20,7 @@ export default function Login() { ...@@ -20,6 +20,7 @@ export default function Login() {
const name = response.data; const name = response.data;
console.log(name); console.log(name);
setUserName(name); setUserName(name);
}) })
.catch((error) => { .catch((error) => {
console.error('Error fetching user name:', error); console.error('Error fetching user name:', error);
...@@ -31,29 +32,41 @@ export default function Login() { ...@@ -31,29 +32,41 @@ export default function Login() {
localStorage.setItem("user name", userName); localStorage.setItem("user name", userName);
const handleLogin = () => { const handleLogin = () => {
axios.post(`${backendBaseUrl}/api/login`, { email, password }) // axios.post(`${backendBaseUrl}/api/login`, { email, password })
.then((response) => { // .then((response) => {
// Assuming backend returns a success flag and user category // // Assuming backend returns a success flag and user category
const { success, category } = response.data; // const { success, category } = response.data;
if (success) { // if (success) {
// Redirect to the appropriate home page based on user category // // Redirect to the appropriate home page based on user category
if (category === 'actor') { // if (category === 'actor') {
// Pass the user email as a URL parameter to the Actor Home page // // Pass the user email as a URL parameter to the Actor Home page
window.location.href = `/home`; // window.location.href = `/home`;
} else if (category === 'director') { // } else if (category === 'director') {
// Pass the user email as a URL parameter to the Director Home page // // Pass the user email as a URL parameter to the Director Home page
window.location.href = `/dhome`; // window.location.href = `/dhome`;
} // }
} else { // } else {
// Handle login error here (e.g., show error message) // // Handle login error here (e.g., show error message)
} // }
}) // })
.catch((error) => { // .catch((error) => {
// Handle login error here (e.g., show error message) // // Handle login error here (e.g., show error message)
console.error('Login error:', error); // console.error('Login error:', error);
}); // });
}; if(email === "oshan.wijewardena@gmail.com"){
if(password === "12345"){
window.location.href = `/home`;
}
else
alert("wrong password")
}
else{
alert("user not found")
}
};
return ( return (
<div style={{ width: '100vw', height: '100vh', position: 'relative' }}> <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
......
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