primera parte medico
This commit is contained in:
parent
6fd18bab86
commit
75777bab4e
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const BuscarPaciente = () => {
|
||||
function BuscarPaciente(props){
|
||||
const [busqueda, setBusqueda] = useState('');
|
||||
|
||||
const handleBusqueda = (e) => {
|
||||
|
@ -28,6 +29,6 @@ const BuscarPaciente = () => {
|
|||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default BuscarPaciente;
|
|
@ -12,6 +12,13 @@
|
|||
}
|
||||
#headerPublicaciones{
|
||||
margin-left: 50px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#divPublicaciones{
|
||||
display: flex;
|
||||
|
@ -28,8 +35,9 @@
|
|||
margin-right: 100px;
|
||||
padding: auto;
|
||||
}
|
||||
#division{
|
||||
#division2{
|
||||
margin-top: 20px;
|
||||
height: 2px;
|
||||
}
|
||||
#botonEliminar{
|
||||
margin: 0 auto;
|
||||
|
@ -39,9 +47,18 @@
|
|||
|
||||
}
|
||||
#divLista2{
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-weight: bolder;
|
||||
background-color: aliceblue;
|
||||
width: 600px;
|
||||
display: grid;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
#btnDescargar{
|
||||
margin-left: 480px;
|
||||
background-color: black;
|
||||
}
|
||||
#divBotonesRecetas{
|
||||
display: flex;
|
||||
|
|
|
@ -76,7 +76,7 @@ function DescargaRecetas(props) {
|
|||
return (
|
||||
<>
|
||||
<h1 id="headerFacultad">Health Manager - Mis recetas</h1>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
<nav id="divPublicaciones">
|
||||
<h1 id="headerPublicaciones">Mis publicaciones</h1>
|
||||
<div id="divBotonesRecetas">
|
||||
|
@ -88,10 +88,10 @@ function DescargaRecetas(props) {
|
|||
</Box>
|
||||
</div>
|
||||
</nav>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
<div id="divLeyenda">
|
||||
<p id="leyendaPublicacion">Visualiza tus recetas.</p>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
</div>
|
||||
<div id="listaEliminar">
|
||||
<div id="divLista2">
|
||||
|
@ -99,12 +99,12 @@ function DescargaRecetas(props) {
|
|||
<div id="divsPublicaciones2" key={elemento.idRec}>
|
||||
<div className='informacionPublicacion'>
|
||||
<p id="parrafoNum">Receta No. ({elemento.idRec})</p>
|
||||
<Divider id="division" color="primary"/>
|
||||
<p id="parrafoMed">{elemento.nombreMed}</p>
|
||||
<p id="parrafoCon">{elemento.contactoMed}</p>
|
||||
<p id="parrafoFecha"className='parrafoFecha'>{elemento.fecha}</p>
|
||||
<Divider id="division2" color="gray"/>
|
||||
<p id="parrafoMed">Medico emisor: {elemento.nombreMed}</p>
|
||||
<p id="parrafoCon">Contacto del medico: {elemento.contactoMed}</p>
|
||||
<p id="parrafoFecha"className='parrafoFecha'>Fecha de emision: {elemento.fecha}</p>
|
||||
<Button id="btnDescargar" variant="contained" type="submit" color="warning" onClick={()=>generarPdf(elemento.idRec,elemento.nombreMed,elemento.contactoMed,elemento.fecha)}>Descargar</Button>
|
||||
<Divider id="division" color="primary"/>
|
||||
<Divider id="division2" color="gray"/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React, { useState } from 'react';
|
||||
import './EditarPaciente.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const EditarPaciente = () => {
|
||||
function EditarPaciente(props) {
|
||||
const [nombre, setNombre] = useState('');
|
||||
const [edad, setEdad] = useState('');
|
||||
const [peso, setPeso] = useState('');
|
||||
|
@ -50,6 +51,6 @@ const EditarPaciente = () => {
|
|||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default EditarPaciente;
|
|
@ -1,8 +1,10 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './HistorialPacientes.css';
|
||||
//import './HistorialPacientes.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const HistorialPacientes = () => {
|
||||
function HistorialPacientes(props) {
|
||||
const [pacientes, setPatientes] = useState([]);
|
||||
const [selecPaciente, setSelecPaciente] = useState(null);
|
||||
const [preinscripcion, setPreinscripcion] = useState([]);
|
||||
|
@ -89,6 +91,6 @@ const HistorialPacientes = () => {
|
|||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default HistorialPacientes;
|
|
@ -1,9 +1,8 @@
|
|||
#divPrincipalLog{
|
||||
body{
|
||||
background-image: url("https://www.meditips.com/wp-content/uploads/2017/07/AdobeStock_103968342-scaled-uai-1032x688.jpeg");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
height:708px;
|
||||
}
|
||||
.h1login {
|
||||
padding-top: 10px;
|
||||
|
|
|
@ -36,13 +36,21 @@ function Login(props) {
|
|||
const response = await hacerPeticion()
|
||||
setCargando(false)
|
||||
if (response.data === 'Usuario Correcto') {
|
||||
if(response.data === 'Usuario Medico'){
|
||||
navigate('/MedicoPrincipal');
|
||||
window.localStorage.setItem('Usuario',datosLogin.correo);
|
||||
window.localStorage.setItem('Contraseña',datosLogin.contraseña)
|
||||
}else{
|
||||
navigate('/Principal');
|
||||
window.localStorage.setItem('Usuario',datosLogin.correo);
|
||||
window.localStorage.setItem('Contraseña',datosLogin.contraseña)
|
||||
}
|
||||
} else {
|
||||
alert("Credenciales incorrectas, revisa tu correo o contraseña");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("error", error)
|
||||
alert("Error de envio al servidor. Intentelo de nuevo porfavor.")
|
||||
setCargando(false)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,369 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
TextField,
|
||||
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 "./MedicoPrincipal.css";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
function MedicoPrincipal(props) {
|
||||
const navigate = useNavigate();
|
||||
const [publicacionesData, setPublicacionesData] = useState([]);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [Cargando, setCargando] = useState(false);
|
||||
const correoUsuario = window.localStorage.getItem("Usuario");
|
||||
|
||||
const datosUsuario = async () => {
|
||||
try {
|
||||
const respuesta = await axios.get(
|
||||
"http://localhost:4567/datosUsuario",
|
||||
{ params: { correo: correoUsuario }}
|
||||
);
|
||||
console.log("Entrando")
|
||||
return respuesta.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const UsuarioData = async () => {
|
||||
try {
|
||||
const respuesta = await datosUsuario();
|
||||
const nombreUsuarioSesion = respuesta.nombre;
|
||||
const edadUsuarioSesion = respuesta.edad;
|
||||
const pesoUsuarioSesion = respuesta.peso;
|
||||
const idUsuarioSesion = respuesta.idUsuario;
|
||||
|
||||
window.localStorage.setItem("ID", nombreUsuarioSesion);
|
||||
window.localStorage.setItem("Edad", edadUsuarioSesion);
|
||||
window.localStorage.setItem("Peso", pesoUsuarioSesion);
|
||||
window.localStorage.setItem("IDUsuario",idUsuarioSesion)
|
||||
|
||||
console.log(idUsuarioSesion)
|
||||
} catch (error) {
|
||||
console.log("holaa");
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
UsuarioData();
|
||||
|
||||
|
||||
const cerrarSesion = () => {
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
const misRecetas = () => {
|
||||
navigate("/DescargaRecetas");
|
||||
};
|
||||
|
||||
const miPerfil = () => {
|
||||
navigate("/MiPerfil");
|
||||
};
|
||||
|
||||
|
||||
const usuarioSesion = window.localStorage.getItem("ID");
|
||||
|
||||
const image1 =
|
||||
{
|
||||
url: "https://media.istockphoto.com/vectors/medical-prescription-and-services-icon-flat-design-long-shadow-vector-id486995030?k=6&m=486995030&s=170667a&w=0&h=BEVyN20V5ul2u3WvHtc7D6QVXK7qrVsLnUn9A_OAmEE=",
|
||||
title: "Receta medica",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image2 =
|
||||
{
|
||||
url: "https://cdn.icon-icons.com/icons2/2266/PNG/512/crowd_patient_patients_icon_140474.png",
|
||||
title: "Mis pacientes",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image3 =
|
||||
{
|
||||
url: "https://roianalytics.agency/wp-content/uploads/2020/09/Perfil-de-usuario.png",
|
||||
title: "Mi perfil",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image4 =
|
||||
{
|
||||
url: "https://icon-library.com/images/history-icon-png/history-icon-png-29.jpg",
|
||||
title: "Historial pacientes",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image5 =
|
||||
{
|
||||
url: "https://static.vecteezy.com/system/resources/previews/007/796/592/non_2x/patient-medical-record-flat-icon-for-apps-or-websites-free-vector.jpg",
|
||||
title: "Registrar pacientes",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image6 =
|
||||
{
|
||||
url: "https://th.bing.com/th/id/OIP.pqAA7eV8PNeB7yDAMewlawHaHa?rs=1&pid=ImgDetMain",
|
||||
title: "Editar pacientes",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image7 =
|
||||
{
|
||||
url: "https://th.bing.com/th/id/OIP.euKNS7ep6s3C7PD9QXum7AHaHa?rs=1&pid=ImgDetMain",
|
||||
title: "Eliminar pacientes",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const image8 =
|
||||
{
|
||||
url: "https://image.freepik.com/vector-gratis/hombre-saliendo-puerta_1133-32.jpg",
|
||||
title: "Cerrar sesion",
|
||||
width: "23%",
|
||||
};
|
||||
|
||||
const ImageButton = styled(ButtonBase)(({ theme }) => ({
|
||||
position: "relative",
|
||||
height: 300,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
width: "100% !important", // Overrides inline-style
|
||||
height: 20,
|
||||
},
|
||||
"&:hover, &.Mui-focusVisible": {
|
||||
zIndex: 1,
|
||||
"& .MuiImageBackdrop-root": {
|
||||
opacity: 0.15,
|
||||
},
|
||||
"& .MuiImageMarked-root": {
|
||||
opacity: 0,
|
||||
},
|
||||
"& .MuiTypography-root": {
|
||||
border: "4px solid currentColor",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
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"),
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="divPrincipal">
|
||||
<h1 id="headerSistema">Health Manager - Menu Principal</h1>
|
||||
<div id="division" />
|
||||
<div id="divPublicaciones">
|
||||
<h1 id="bienvenidoUsuario">¡Hola Medico {usuarioSesion}! </h1>
|
||||
</div>
|
||||
<div id="division" />
|
||||
<div id="divBotones">
|
||||
<ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image1.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)`,
|
||||
}}
|
||||
>
|
||||
{image1.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={miPerfil}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image2.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)`,
|
||||
}}
|
||||
>
|
||||
{image2.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={cerrarSesion}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image3.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)`,
|
||||
}}
|
||||
>
|
||||
{image3.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image4.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)`,
|
||||
}}
|
||||
>
|
||||
{image4.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image5.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)`,
|
||||
}}
|
||||
>
|
||||
{image5.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image6.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)`,
|
||||
}}
|
||||
>
|
||||
{image6.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image7.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)`,
|
||||
}}
|
||||
>
|
||||
{image7.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
<ImageButton id="img" focusRipple key={image8.title} style={{width:image8.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image8.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)`,
|
||||
}}
|
||||
>
|
||||
{image8.title}
|
||||
<ImageMarked className="MuiImageMarked-root" />
|
||||
</Typography>
|
||||
</Image>
|
||||
</ImageButton>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MedicoPrincipal;
|
|
@ -0,0 +1,92 @@
|
|||
#headerSistema {
|
||||
margin-top: 10px;
|
||||
margin-left: 50px;
|
||||
text-align: left;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#bienvenidoUsuario {
|
||||
margin-top: 10px;
|
||||
margin-left: 50px;
|
||||
text-align: left;
|
||||
font-size:larger;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
}
|
||||
#headerFacultad{
|
||||
margin-left: 50px;
|
||||
text-align: left;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
#headerPublicaciones{
|
||||
margin-left: 120px;
|
||||
}
|
||||
#divPublicaciones{
|
||||
display: flex;
|
||||
height: max-content;
|
||||
}
|
||||
#divsPublicaciones{
|
||||
width: 600px;
|
||||
text-align:justify;
|
||||
font-family:Georgia, 'Times New Roman', Times, serif;
|
||||
}
|
||||
#boxCerrar{
|
||||
margin-left: auto;
|
||||
margin-right: 100px;
|
||||
}
|
||||
#divLista{
|
||||
width: max-content;
|
||||
display:grid;
|
||||
padding: 180px;
|
||||
}
|
||||
#headerForm {
|
||||
font-size: small;
|
||||
}
|
||||
#divBotones {
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
margin-top: 20px;
|
||||
margin-left: 65px;
|
||||
}
|
||||
body{
|
||||
background: rgb(0,22,36);
|
||||
background: linear-gradient(90deg, rgba(0,22,36,0.6946428229494923) 0%, rgba(9,92,121,1) 35%, rgba(0,212,255,1) 100%);
|
||||
}
|
||||
#img1{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#img2{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#img3{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#img4{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#img5{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#img6{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#img7{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#division{
|
||||
width: auto;
|
||||
height: 5px;
|
||||
background-color: gray;
|
||||
margin-top: 0px;
|
||||
}
|
|
@ -2,18 +2,44 @@
|
|||
margin-left: 50px;
|
||||
text-align: left;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#headerMiPerfil{
|
||||
margin-left: 50px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
#divMiPerfil{
|
||||
display: flex;
|
||||
padding: auto;
|
||||
height: max-content;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#regresarMenu{
|
||||
background-color: black;
|
||||
}
|
||||
#cerrarSesion{
|
||||
background-color: black;
|
||||
}
|
||||
#divLista{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: max-content;
|
||||
margin-left: 100px;
|
||||
width: 900px;
|
||||
display:grid;
|
||||
padding-top: 20px;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
#dialogUsuario{
|
||||
padding-bottom: 10px;
|
||||
|
@ -51,4 +77,13 @@
|
|||
#leyendaPublicacion{
|
||||
margin-right: auto;
|
||||
margin-left: 50px;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#divider{
|
||||
height: 2px;
|
||||
}
|
|
@ -24,10 +24,10 @@ function MiPerfil(props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 id="headerFacultad">HealthManager - Mi Perfil</h1>
|
||||
<Divider />
|
||||
<h1 id="headerFacultad">HealthManager - Mi perfil</h1>
|
||||
<div id="division" />
|
||||
<nav id="divMiPerfil">
|
||||
<h1 id="headerMiPerfil">Mi Perfil</h1>
|
||||
<h1 id="headerMiPerfil">Mi perfil</h1>
|
||||
<div id="divBotonesPerfil">
|
||||
<Box m={1}>
|
||||
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
|
||||
|
@ -37,26 +37,26 @@ function MiPerfil(props) {
|
|||
</Box>
|
||||
</div>
|
||||
</nav>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
<div id="divLeyenda">
|
||||
<p id="leyendaPublicacion">Visualiza tu datos como Usuario, Correo y Contraseña.</p>
|
||||
</div>
|
||||
<div id="divLista">
|
||||
<leyend id="leyendas">Nombre</leyend>
|
||||
<DialogContentText id="dialogUsuario" variant="contained" className='contenidoText'>{window.localStorage.getItem("ID")}</DialogContentText>
|
||||
<Divider color="primary"/>
|
||||
<Divider id="divider" color="black"/>
|
||||
<leyend id="leyendas">Edad</leyend>
|
||||
<DialogContentText id="dialogEdad" variant="contained" className='contenidoText'>{window.localStorage.getItem("Edad")} años</DialogContentText>
|
||||
<Divider color="primary"/>
|
||||
<Divider id="divider" color="black"/>
|
||||
<leyend id="leyendas">Peso</leyend>
|
||||
<DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("Peso")} kg</DialogContentText>
|
||||
<Divider color="primary"/>
|
||||
<Divider id="divider" color="black"/>
|
||||
<leyend id="leyendas">Correo</leyend>
|
||||
<DialogContentText id="dialogCorreo" variant="contained" className='contenidoText'>{window.localStorage.getItem("Usuario")}</DialogContentText>
|
||||
<Divider color="primary"/>
|
||||
<Divider id="divider" color="black"/>
|
||||
<leyend id="leyendas">Contraseña</leyend>
|
||||
<DialogContentText id="dialogContraseña" variant="contained" className='contenidoText'>{window.localStorage.getItem("Contraseña")}</DialogContentText>
|
||||
<Divider color="primary"/>
|
||||
<Divider id="divider" color="black"/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -2,15 +2,24 @@
|
|||
margin-top: 10px;
|
||||
margin-left: 50px;
|
||||
text-align: left;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
}
|
||||
#bienvenidoUsuario {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 50px;
|
||||
text-align: left;
|
||||
font-size: medium;
|
||||
font-size:larger;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: aliceblue;
|
||||
text-shadow:
|
||||
1px 1px 2px black,
|
||||
0 0 1em blue,
|
||||
0 0 0.2em blue;
|
||||
}
|
||||
#headerFacultad{
|
||||
margin-left: 50px;
|
||||
|
@ -46,9 +55,19 @@
|
|||
margin-top: 80px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
body{
|
||||
background: rgb(0,22,36);
|
||||
background: linear-gradient(90deg, rgba(0,22,36,0.6946428229494923) 0%, rgba(9,92,121,1) 35%, rgba(0,212,255,1) 100%);
|
||||
}
|
||||
#img1{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#img2{
|
||||
margin-right: 10px;
|
||||
}
|
||||
#division{
|
||||
width: auto;
|
||||
height: 5px;
|
||||
background-color: gray;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
|
|
@ -53,6 +53,7 @@ function Principal(props) {
|
|||
}
|
||||
};
|
||||
UsuarioData();
|
||||
|
||||
|
||||
const cerrarSesion = () => {
|
||||
navigate("/");
|
||||
|
@ -86,7 +87,7 @@ function Principal(props) {
|
|||
const image3 =
|
||||
{
|
||||
url: "https://image.freepik.com/vector-gratis/hombre-saliendo-puerta_1133-32.jpg",
|
||||
title: "Cerrar Sesion",
|
||||
title: "Cerrar sesion",
|
||||
width: "32%",
|
||||
};
|
||||
|
||||
|
@ -158,11 +159,11 @@ function Principal(props) {
|
|||
<>
|
||||
<div id="divPrincipal">
|
||||
<h1 id="headerSistema">Health Manager - Menu Principal</h1>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
<div id="divPublicaciones">
|
||||
<h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
|
||||
</div>
|
||||
<Divider />
|
||||
<div id="division" />
|
||||
<div id="divBotones">
|
||||
<ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
|
||||
<ImageSrc style={{ backgroundImage: `url(${image1.url})` }} />
|
||||
|
@ -231,44 +232,3 @@ function Principal(props) {
|
|||
}
|
||||
|
||||
export default Principal;
|
||||
|
||||
/*
|
||||
<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>
|
||||
|
||||
*/
|
|
@ -1,8 +1,9 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React, { useId, useState } from 'react';
|
||||
import './RecetaMedica.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const RecetaMedica = () => {
|
||||
function RecetaMedica(props){
|
||||
const [idreceta, setIdReceta] = useId('');
|
||||
const [idPaciente, setIdPaciente] = useId('');
|
||||
const [idMedico, setIdMedico] = useId('');
|
||||
|
@ -121,6 +122,6 @@ const RecetaMedica = () => {
|
|||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default RecetaMedica;
|
|
@ -1,8 +1,9 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React, { useState } from 'react';
|
||||
import './Paciente.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Paciente = () => {
|
||||
function RegistrarPaciente(props){
|
||||
const [nombre, setNombre] = useState('');
|
||||
const [edad, setEdad] = useState('');
|
||||
const [peso, setPeso] = useState('');
|
||||
|
@ -49,6 +50,6 @@ const Paciente = () => {
|
|||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Paciente;
|
||||
export default RegistrarPaciente;
|
|
@ -5,8 +5,13 @@ import { RouterProvider, createHashRouter } from 'react-router-dom'
|
|||
import Principal from './Principal.jsx'
|
||||
import DescargaRecetas from './DescargaRecetas.jsx'
|
||||
import MiPerfil from './MiPerfil.jsx'
|
||||
//import registrarPaciente from './registrarPaciente.html'
|
||||
//import Publicaciones from './Publicaciones'
|
||||
import MedicoPrincipal from './MedicoPrincipal .jsx'
|
||||
import Paciente from './RegistrarPaciente.jsx';
|
||||
import EditarPaciente from './EditarPaciente';
|
||||
import RecetaMedica from './RecetaMedica';
|
||||
import BuscarPaciente from './BuscarPaciente';
|
||||
import HistorialPacientes from './HistorialPacientes'
|
||||
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
|
@ -20,11 +25,33 @@ import MiPerfil from './MiPerfil.jsx'
|
|||
{
|
||||
path: "/Principal",
|
||||
element: <Principal/>
|
||||
}/*,
|
||||
},
|
||||
{
|
||||
path: "/MiPerfil",
|
||||
element:<MiPerfil/>
|
||||
}*/,
|
||||
path: "MedicoPrincipal",
|
||||
element: <MedicoPrincipal/>
|
||||
}
|
||||
,
|
||||
{
|
||||
path: "/Paciente",
|
||||
element:<Paciente/>
|
||||
},
|
||||
{
|
||||
path: "/EditarPaciente",
|
||||
element:<EditarPaciente/>
|
||||
},
|
||||
{
|
||||
path: "/RecetaMedica",
|
||||
element:<RecetaMedica/>
|
||||
}
|
||||
,
|
||||
{
|
||||
path: "/BuscarPaciente",
|
||||
element:<BuscarPaciente/>
|
||||
},
|
||||
{
|
||||
path: "/HistorialPacientes",
|
||||
element:<HistorialPacientes/>
|
||||
},
|
||||
{
|
||||
path: "/MiPerfil",
|
||||
element:<MiPerfil/>
|
||||
|
|
Loading…
Reference in New Issue