Jossellin.Herrera
/
mezontleTeam-ProyectoFrontend
2
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

botones principal

This commit is contained in:
Roberto 2024-05-08 08:57:44 -06:00
parent 8f5d89ace5
commit 9d98ec5442
2 changed files with 221 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
healthmanager/src/Principal.css
View File

@ -29,7 +29,6 @@ body{
font-family:Georgia, 'Times New Roman', Times, serif; font-family:Georgia, 'Times New Roman', Times, serif;
} }
#boxCerrar{ #boxCerrar{
padding-top: 20px;
margin-left: auto; margin-left: auto;
margin-right: 100px; margin-right: 100px;
} }
@ -41,19 +40,15 @@ body{
#headerForm { #headerForm {
font-size: small; font-size: small;
} }
#divBotones{
display:flex;
justify-content: center;
align-items: center;
}
#botonMiPerfil,#botonMisPublicaciones,#botonNuevaPublicacion{
width: 300px;
height: 300px;
margin: 20px;
}
#divMenu { #divMenu {
font-family:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
margin-left: auto; margin-left: auto;
margin-right: 150px; margin-right: 150px;
padding: 10px; padding: 10px;
} }
#cerrarSesion{
align-items: center;
}
#divBotones{
padding-top: 30px;
}

291
healthmanager/src/Principal.jsx
View File

@ -1,93 +1,230 @@
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
import { Button, Box, TextField, DialogContentText, Divider } from "@mui/material" import {
import axios from "axios" Button,
import {useEffect,useState } from "react" Box,
import './Principal.css' TextField,
import { useNavigate } from 'react-router-dom' DialogContentText,
Divider,
} from "@mui/material";
import { styled } from "@mui/material/styles";
import ButtonBase from "@mui/material/ButtonBase";
import Typography from "@mui/material/Typography";
import axios from "axios";
import { useEffect, useState } from "react";
import "./Principal.css";
import { useNavigate } from "react-router-dom";
function Principal(props) { function Principal(props) {
const navigate = useNavigate(); const navigate = useNavigate();
const [publicacionesData, setPublicacionesData] = useState([]); const [publicacionesData, setPublicacionesData] = useState([]);
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [Cargando, setCargando] = useState (false) const [Cargando, setCargando] = useState(false);
const correoUsuario = window.localStorage.getItem('Usuario'); const correoUsuario = window.localStorage.getItem("Usuario");
const datosUsuario=async()=>{ const datosUsuario = async () => {
try { try {
const respuesta=await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",{params:{correo: correoUsuario}}); const respuesta = await axios.get(
return respuesta.data; "https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",
} catch (error) { { params: { correo: correoUsuario } }
console.log(error); );
} return respuesta.data;
} catch (error) {
console.log(error);
} }
};
const UsuarioData=async()=>{ const UsuarioData = async () => {
try { try {
const respuesta=await datosUsuario(); const respuesta = await datosUsuario();
const nombreUsuarioSesion=respuesta.idUsuario; const nombreUsuarioSesion = respuesta.idUsuario;
const contraseñaUsuarioSesion=respuesta.contraseña; const contraseñaUsuarioSesion = respuesta.contraseña;
window.localStorage.setItem("ID",nombreUsuarioSesion); window.localStorage.setItem("ID", nombreUsuarioSesion);
window.localStorage.setItem("Contraseña",contraseñaUsuarioSesion); window.localStorage.setItem("Contraseña", contraseñaUsuarioSesion);
} catch (error) { } catch (error) {
console.log("holaa"); console.log("holaa");
console.log(error); console.log(error);
}
} }
UsuarioData(); };
UsuarioData();
const cerrarSesion = () => { const cerrarSesion = () => {
navigate('/'); navigate("/");
} };
const miPerfil = () => { const miPerfil = () => {
navigate('/MiPerfil'); navigate("/MiPerfil");
} };
const publicaciones = () => { const publicaciones = () => {
navigate('/Publicaciones') navigate("/Publicaciones");
} };
const crearPublicacion = () => { const crearPublicacion = () => {
navigate('/CrearPublicacion'); navigate("/CrearPublicacion");
} };
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
// eslint-disable-next-line no-useless-catch // eslint-disable-next-line no-useless-catch
try { try {
const res = await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones"); const res = await axios.get(
console.log("Publicaciones data: ",res.data); "https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones"
setPublicacionesData(res.data); );
} catch (error) { console.log("Publicaciones data: ", res.data);
throw error; setPublicacionesData(res.data);
} } catch (error) {
}; throw error;
fetchData(); }
}, []); };
fetchData();
}, []);
const usuarioSesion = window.localStorage.getItem('ID'); const usuarioSesion = window.localStorage.getItem("ID");
return ( const images = [
{
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
title: "Mis recetas",
width: "33%",
},
{
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
title: "Mi perfil",
width: "33%",
},
{
url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
title: "Cerrar Sesion",
width: "33%",
},
];
<> const ImageButton = styled(ButtonBase)(({ theme }) => ({
<div> position: "relative",
<h1 id="headerFacultad">Health Manager</h1> height: 510,
<Divider/> [theme.breakpoints.down("sm")]: {
<div id="divPublicaciones"> width: "100% !important", // Overrides inline-style
<h1 id="headerPublicaciones">Menu Principal</h1> height: 100,
<h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1> },
<Box id="boxCerrar" m={0}> "&:hover, &.Mui-focusVisible": {
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button> zIndex: 1,
</Box> "& .MuiImageBackdrop-root": {
</div> opacity: 0.15,
<Divider/> },
<div id="divBotones"> "& .MuiImageMarked-root": {
<Button id="botonMiPerfil" variant="contained" type="button" color="primary" disabled={Cargando} onClick={miPerfil}>Mi perfil</Button> opacity: 0,
<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={publicaciones}>Mis recetas</Button> },
<Button id="botonNuevaPublicacion" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={crearPublicacion}>Otros</Button> "& .MuiTypography-root": {
</div> border: "4px solid currentColor",
</div> },
</> },
) }));
const ImageSrc = styled("span")({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: "cover",
backgroundPosition: "center 40%",
});
const Image = styled("span")(({ theme }) => ({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: theme.palette.common.white,
}));
const ImageBackdrop = styled("span")(({ theme }) => ({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create("opacity"),
}));
const ImageMarked = styled("span")(({ theme }) => ({
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: "absolute",
bottom: -2,
left: "calc(50% - 9px)",
transition: theme.transitions.create("opacity"),
}));
//<Button id="botonMiPerfil" variant="contained" type="button" color="primary" disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
//<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary" disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
//<h1 id="headerPublicaciones">Menu Principal</h1>
return (
<>
<div>
<h1 id="headerFacultad">Health Manager - Menu Principal</h1>
<Divider />
<div id="divPublicaciones">
<h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
<Box id="boxCerrar" m={0}>
<Button id="cerrarSesion"
variant="contained"
type="submit"
color="warning"
onClick={cerrarSesion}>
Cerrar sesion
</Button>
</Box>
</div>
<Divider />
<div id="divBotones">
<Box
sx={{
display: "flex",
flexWrap: "wrap",
minWidth: 300,
width: "100%",
}}
>
{images.map((image) => (
<ImageButton
focusRipple
key={image.title}
style={{
width: image.width,
}}
>
<ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
<Typography
component="span"
variant="subtitle1"
color="inherit"
sx={{
position: "relative",
p: 4,
pt: 2,
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
}}
>
{image.title}
<ImageMarked className="MuiImageMarked-root" />
</Typography>
</Image>
</ImageButton>
))}
</Box>
</div>
</div>
</>
);
} }
export default Principal export default Principal;