front_presentacion

This commit is contained in:
Roberto 2024-06-05 01:16:10 -06:00
parent f0eaf67673
commit 0b2c458d60
21 changed files with 917 additions and 379 deletions

View File

@ -23,7 +23,7 @@ function BuscarPaciente(props){
<button type='submit'>Buscar</button>
<p></p>
<p></p>
<Link to="/">
<Link to="/MedicoPrincipal">
<button className="btnsalir">Regresar al menú principal</button>
</Link>
</div>

View File

@ -61,8 +61,8 @@ function DescargaRecetas(props) {
setCargando(false);
}
}
/*const generarPdf= (idReceta,nombreMedico,contactoMedico,fecha) =>{
/*
const generarPdf= (idReceta,nombreMedico,contactoMedico,fecha) =>{
var doc = new jsPDF();
const docWidth = doc.internal.pageSize.getWidth();
doc.text(10, 10,'Receta No.'+ idReceta);
@ -71,15 +71,14 @@ function DescargaRecetas(props) {
doc.text(10, 30,'Contacto: '+contactoMedico)
doc.text(10, 40,'Fecha: '+fecha)
doc.save('Receta '+ fecha + ' .pdf');
}*/
//nuevo
}
*/
const generarPdf = (idReceta, nombreMedico, contactoMedico, fecha) => {
const doc = new jsPDF();
const docWidth = doc.internal.pageSize.getWidth();
//por su usamos imagen como la que viene en la imagen que me pasast
const imgData = 'datos/de/la/imagen/';
const imgData = './simboloReceta.JPG';
doc.addImage(imgData, 'PNG', 10, 10, 50, 15);
doc.setFontSize(18);

View File

@ -1,10 +1,12 @@
.editar-paciente-container {
margin-bottom: 20px;
margin-top: 20px;
}
.editar-paciente-form {
display: flex;
flex-direction: column;
display: grid;
padding: 20px;
align-items: center;
}
.editar-paciente-form input {

View File

@ -2,8 +2,12 @@
import React, { useState } from 'react';
import './EditarPaciente.css';
import { Link } from 'react-router-dom';
import axios from "axios";
import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
import { useNavigate } from 'react-router-dom'
function EditarPaciente(props) {
const navigate = useNavigate();
const [nombre, setNombre] = useState('');
const [edad, setEdad] = useState('');
const [peso, setPeso] = useState('');
@ -15,41 +19,54 @@ function EditarPaciente(props) {
};
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
return (
<div className="editar-paciente-container">
<h2>Editar Paciente</h2>
<form onSubmit={handleSubmit} className="editar-paciente-form">
<input
type="text"
placeholder="Nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>
<input
type="number"
placeholder="Edad"
value={edad}
onChange={(e) => setEdad(e.target.value)}
/>
<input
type="text"
placeholder="Peso"
value={peso}
onChange={(e) => setPeso(e.target.value)}
/>
<input
type="text"
placeholder="Contacto"
value={contacto}
onChange={(e) => setContacto(e.target.value)}
/>
<button type="submit">Guardar cambios</button>
</form>
<p></p>
<Link to="/">
<button className="btnsalir">Regresar al menú principal</button>
</Link>
</div>
<><h1 id="headerFacultad">Health Manager - Editar Paciente</h1><div id="division" /><nav id="divPublicaciones">
<h1 id="headerPublicaciones">Mis pacientes</h1>
<div id="divBotonesRecetas">
<Box id="box1" m={0}>
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
</Box>
<Box id="box2" m={0}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav><div id="division" /><div id="divLeyenda">
<p id="leyendaPublicacion">Edita los datos de un paciente.</p>
<div id="division" />
</div><div className="editar-paciente-container">
<form onSubmit={handleSubmit} className="editar-paciente-form">
<input
type="text"
placeholder="Nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)} />
<input
type="number"
placeholder="Edad"
value={edad}
onChange={(e) => setEdad(e.target.value)} />
<input
type="text"
placeholder="Peso"
value={peso}
onChange={(e) => setPeso(e.target.value)} />
<input
type="text"
placeholder="Contacto"
value={contacto}
onChange={(e) => setContacto(e.target.value)} />
<button type="submit">Guardar cambios</button>
</form>
<p></p>
</div></>
);
}

View File

@ -0,0 +1,71 @@
#headerFacultad{
margin-left: 50px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#box1{
padding-top: 15px;
margin-right: 20px;
}
#box2{
padding-top: 15px;
}
#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;
padding: auto;
}
#divsPublicaciones2{
width: 600px;
text-align:justify;
font-family:Georgia, 'Times New Roman', Times, serif;
padding-top: 15px;
}
#boxCerrar{
margin-left: auto;
margin-right: 100px;
padding: auto;
}
#division2{
margin-top: 20px;
height: 2px;
}
#botonEliminar{
margin: 0 auto;
}
#listaEliminar{
display: flex;
}
#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;
margin-left: auto;
margin-right: 100px;
}
#leyendaPublicacion{
margin-right: auto;
margin-left: 50px;
}

View File

@ -0,0 +1,90 @@
/* eslint-disable no-unused-vars */
import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
import axios from "axios"
import {useEffect,useState } from "react"
import './DescargaRecetas.css'
import { useNavigate } from 'react-router-dom'
import jsPDF from "jspdf"
// eslint-disable-next-line no-unused-vars
function DescargaRecetas(props) {
const navigate = useNavigate();
const [publicacionesData, setPublicacionesData] = useState([]);
const [Cargando, setCargando] = useState (false)
const [datosID, setDatosID] = useState( {idPublicacion:''} )
const nombreUsuario = window.localStorage.getItem("IDUsuario");
const cambiosID = (evento) => {
const {name, value} = evento.target
setDatosID( { ...datosID, [name] : value })
}
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
const obtenerListaMisPublicaciones = async () => {
try {
const response = await axios.get("http://localhost:4567/MisPacientes", { params: { idUsuario: nombreUsuario } });
console.log(response.data)
console.log(nombreUsuario)
setPublicacionesData(response.data);
} catch (error) {
console.error('Error al obtener el id del usuario:', error);
}
};
obtenerListaMisPublicaciones()
const peticionEliminar=async()=>{
try {
const respuesta= await axios.post("https://back-endproyectofinal8-production-a397.up.railway.app/eliminarPublicacion",{params:{idPublicacion:window.localStorage.getItem("idePublicacion")}});
return respuesta;
} catch (error) {
console.log(error);
}
}
const procesarEliminacion=async()=>{
setCargando(true);
try {
const respuesta=await peticionEliminar();
console.log("Respuesta de publicacion a eliminar", respuesta.data);
alert("Publicacion eliminada",respuesta.data);
setCargando(false);
} catch (error) {
console.log(error);
setCargando(false);
}
}
return (
<>
<h1 id="headerFacultad">Health Manager - Mis recetas</h1>
<div id="division" />
<nav id="divPublicaciones">
<h1 id="headerPublicaciones">Mis publicaciones</h1>
<div id="divBotonesRecetas">
<Box id="box1" m={0}>
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
</Box>
<Box id="box2" m={0}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav>
<div id="division" />
<div id="divLeyenda">
<p id="leyendaPublicacion">Elimina tus pacientes.</p>
<div id="division" />
</div>
</>
)
}
export default DescargaRecetas

View File

@ -86,7 +86,7 @@ function HistorialPacientes(props) {
</div>
)}
<p></p>
<Link to="/">
<Link to="/MedicoPrincipal">
<button className="btnsalir">Regresar al menú principal</button>
</Link>
</div>

View File

@ -29,6 +29,11 @@ function Login(props) {
}
const procesarLogin = async (evento) => {
const correoInput = document.getElementById("correoInput");
const contraseñaInput = document.getElementById("contraseñaInput");
if(correoInput.value === '' || contraseñaInput.value === ''){
alert("Faltan campos por llenar.")
}else{
evento.preventDefault()
console.log("datos recuperados en el form: ", datosLogin)
setCargando(true)
@ -41,7 +46,7 @@ function Login(props) {
window.localStorage.setItem('Usuario',datosLogin.correo);
window.localStorage.setItem('Contraseña',datosLogin.contraseña)
}else{
navigate('/Principal');
navigate('/MedicoPrincipal');
window.localStorage.setItem('Usuario',datosLogin.correo);
window.localStorage.setItem('Contraseña',datosLogin.contraseña)
}
@ -54,6 +59,7 @@ function Login(props) {
setCargando(false)
}
}
}
return (
<>
@ -63,10 +69,10 @@ function Login(props) {
<form id="formLogin" onSubmit={ procesarLogin }>
<h1 className="h1login" id="headerForm">Inicia sesion para continuar</h1>
<Box m={5}>
<TextField label="Correo" variant="standard" fullWidth onChange={cambiosLogin} name="correo" value={datosLogin.correo}></TextField>
<TextField id="correoInput" label="Correo" variant="standard" fullWidth onChange={cambiosLogin} name="correo" value={datosLogin.correo}></TextField>
</Box>
<Box m={5}>
<TextField label="Contraseña" variant="standard" fullWidth onChange={cambiosLogin} name="contraseña" value={datosLogin.contraseña}></TextField>
<TextField id="contraseñaInput" label="Contraseña" variant="standard" fullWidth onChange={cambiosLogin} name="contraseña" value={datosLogin.contraseña}></TextField>
</Box>
<Button id="botonEnviar" variant="contained" type="submit" color="primary" disabled={Cargando}>Iniciar Sesión</Button>

View File

@ -13,6 +13,7 @@ import axios from "axios";
import { useEffect, useState } from "react";
import "./MedicoPrincipal.css";
import { useNavigate } from "react-router-dom";
import HistorialPacientes from "./HistorialPacientes";
function MedicoPrincipal(props) {
const navigate = useNavigate();
const [publicacionesData, setPublicacionesData] = useState([]);
@ -23,7 +24,7 @@ function MedicoPrincipal(props) {
const datosUsuario = async () => {
try {
const respuesta = await axios.get(
"http://localhost:4567/datosUsuario",
"http://localhost:4567/datosUsuarioMedico",
{ params: { correo: correoUsuario }}
);
console.log("Entrando")
@ -36,19 +37,19 @@ function MedicoPrincipal(props) {
const UsuarioData = async () => {
try {
const respuesta = await datosUsuario();
const nombreUsuarioSesion = respuesta.nombre;
const edadUsuarioSesion = respuesta.edad;
const pesoUsuarioSesion = respuesta.peso;
const idUsuarioSesion = respuesta.idUsuario;
const nombreUsuarioSesion = respuesta.nombreMed;
const idMedicoUsuarioSesion = respuesta.idMed;
const cedProfUsuarioSesion = respuesta.cedProf;
const contactoUsuarioSesion = respuesta.contacto;
window.localStorage.setItem("ID", nombreUsuarioSesion);
window.localStorage.setItem("Edad", edadUsuarioSesion);
window.localStorage.setItem("Peso", pesoUsuarioSesion);
window.localStorage.setItem("IDUsuario",idUsuarioSesion)
window.localStorage.setItem("IdMed", idMedicoUsuarioSesion);
window.localStorage.setItem("CedProf", cedProfUsuarioSesion);
window.localStorage.setItem("Contacto",contactoUsuarioSesion);
console.log(idUsuarioSesion)
console.log(idMedicoUsuarioSesion)
} catch (error) {
console.log("holaa");
console.log("Error en datos del usuario");
console.log(error);
}
};
@ -59,12 +60,28 @@ function MedicoPrincipal(props) {
navigate("/");
};
const misRecetas = () => {
navigate("/DescargaRecetas");
const crearReceta = () => {
navigate("/RecetaMedica");
};
const misPacientes = () => {
navigate("/MisPacientes");
};
const historialPacientes = () => {
navigate("/HistorialPacientes");
};
const registrarPacientes = () => {
navigate("/RegistrarPaciente");
};
const editarPaciente = () => {
navigate("/EditarPaciente");
};
const miPerfil = () => {
navigate("/MiPerfil");
navigate("/MiPerfilMedico");
};
@ -113,13 +130,6 @@ function MedicoPrincipal(props) {
};
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",
@ -200,7 +210,7 @@ function MedicoPrincipal(props) {
</div>
<div id="division" />
<div id="divBotones">
<ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
<ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={crearReceta}>
<ImageSrc style={{ backgroundImage: `url(${image1.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -220,7 +230,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={miPerfil}>
<ImageButton id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={misPacientes}>
<ImageSrc style={{ backgroundImage: `url(${image2.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -240,7 +250,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={cerrarSesion}>
<ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={miPerfil}>
<ImageSrc style={{ backgroundImage: `url(${image3.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -260,7 +270,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={misRecetas}>
<ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={historialPacientes}>
<ImageSrc style={{ backgroundImage: `url(${image4.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -280,7 +290,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={misRecetas}>
<ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={registrarPacientes}>
<ImageSrc style={{ backgroundImage: `url(${image5.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -300,7 +310,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={misRecetas}>
<ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={editarPaciente}>
<ImageSrc style={{ backgroundImage: `url(${image6.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -320,7 +330,7 @@ function MedicoPrincipal(props) {
</Typography>
</Image>
</ImageButton>
<ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={misRecetas}>
<ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={cerrarSesion}>
<ImageSrc style={{ backgroundImage: `url(${image7.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
@ -340,26 +350,7 @@ function MedicoPrincipal(props) {
</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>
</>

View File

@ -0,0 +1,89 @@
#headerFacultad{
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;
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;
font-family: Arial, Helvetica, sans-serif;
}
#dialogEdad{
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#dialogPeso{
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#dialogCorreo{
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#dialogContraseña{
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#leyendas{
padding-top: 10px;
padding-bottom: 10px;
}
#divBotonesPerfil{
display: flex;
margin-left: auto;
margin-right: 100px;
}
#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;
}

View File

@ -0,0 +1,68 @@
import { Button, Box,DialogContentText, Divider} from "@mui/material"
// eslint-disable-next-line no-unused-vars
import axios from "axios"
// eslint-disable-next-line no-unused-vars
import {useEffect,useState } from "react"
import './MiPerfilMedico.css'
import { useNavigate } from 'react-router-dom'
// eslint-disable-next-line no-unused-vars
function MiPerfil(props) {
const navigate = useNavigate();
// eslint-disable-next-line no-unused-vars
const [Cargando, setCargando] = useState (false)
//const [miPerfilData, setMiPerfilData] = useState({idUsuario:window.localStorage.getItem("ID"),correo:window.localStorage.getItem("Usuario"),contraseña:window.localStorage.getItem("Contraseña")});
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
return (
<>
<h1 id="headerFacultad">HealthManager - Mi perfil</h1>
<div id="division" />
<nav id="divMiPerfil">
<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>
</Box>
<Box m={1}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav>
<div id="division" />
<div id="divLeyenda">
<p id="leyendaPublicacion">Visualiza tus 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 id="divider" color="black"/>
<leyend id="leyendas">Contacto</leyend>
<DialogContentText id="dialogEdad" variant="contained" className='contenidoText'>{window.localStorage.getItem("Contacto")}</DialogContentText>
<Divider id="divider" color="black"/>
<leyend id="leyendas">No. de medico sistema</leyend>
<DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("IdMed")}</DialogContentText>
<Divider id="divider" color="black"/>
<leyend id="leyendas">Cedula profesional</leyend>
<DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("CedProf")}</DialogContentText>
<Divider id="divider" color="black"/>
<leyend id="leyendas">Correo</leyend>
<DialogContentText id="dialogCorreo" variant="contained" className='contenidoText'>{window.localStorage.getItem("Usuario")}</DialogContentText>
<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 id="divider" color="black"/>
</div>
</>
)
}
export default MiPerfil

View File

@ -0,0 +1,71 @@
#headerFacultad{
margin-left: 50px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#box1{
padding-top: 15px;
margin-right: 20px;
}
#box2{
padding-top: 15px;
}
#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;
padding: auto;
}
#divsPublicaciones2{
width: 600px;
text-align:justify;
font-family:Georgia, 'Times New Roman', Times, serif;
padding-top: 15px;
}
#boxCerrar{
margin-left: auto;
margin-right: 100px;
padding: auto;
}
#division2{
margin-top: 20px;
height: 2px;
}
#botonEliminar{
margin: 0 auto;
}
#listaEliminar{
display: flex;
}
#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;
margin-left: auto;
margin-right: 100px;
}
#leyendaPublicacion{
margin-right: auto;
margin-left: 50px;
}

View File

@ -0,0 +1,110 @@
/* eslint-disable no-unused-vars */
import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
import axios from "axios"
import {useEffect,useState } from "react"
import './MisPacientes.css'
import { useNavigate } from 'react-router-dom'
import jsPDF from "jspdf"
// eslint-disable-next-line no-unused-vars
function MisPacientes(props) {
const navigate = useNavigate();
const [publicacionesData, setPublicacionesData] = useState([]);
const [Cargando, setCargando] = useState (false)
const [datosID, setDatosID] = useState( {idPublicacion:''} )
const nombreUsuario = window.localStorage.getItem("IDUsuario");
const cambiosID = (evento) => {
const {name, value} = evento.target
setDatosID( { ...datosID, [name] : value })
}
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
const obtenerListaMisPublicaciones = async () => {
try {
const response = await axios.get("http://localhost:4567/MisPacientes", { params: { idUsuario: nombreUsuario } });
console.log(response.data)
console.log(nombreUsuario)
setPublicacionesData(response.data);
} catch (error) {
console.error('Error al obtener el id del usuario:', error);
}
};
obtenerListaMisPublicaciones()
const peticionEliminar=async(idPac)=>{
try {
const respuesta= await axios.get("http://localhost:4567/eliminarPaciente",{params:{idPac}});
return respuesta;
} catch (error) {
console.log(error);
}
}
const procesarEliminacion=async(idPac)=>{
setCargando(true);
try {
const respuesta=await peticionEliminar(idPac);
console.log("Respuesta de paciente a eliminar", respuesta.data);
alert("Paciente eliminado",respuesta.data);
setCargando(false);
} catch (error) {
console.log(error);
alert("Paciente no eliminado");
setCargando(false);
}
}
return (
<>
<h1 id="headerFacultad">Health Manager - Mis recetas</h1>
<div id="division" />
<nav id="divPublicaciones">
<h1 id="headerPublicaciones">Mis pacientes</h1>
<div id="divBotonesRecetas">
<Box id="box1" m={0}>
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
</Box>
<Box id="box2" m={0}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav>
<div id="division" />
<div id="divLeyenda">
<p id="leyendaPublicacion">Visualiza tus pacientes.</p>
<div id="division" />
</div>
<div id="listaEliminar">
<div id="divLista2">
{publicacionesData.map((elemento) => (
<div id="divsPublicaciones2" key={elemento.idPac}>
<div className='informacionPublicacion'>
<p id="parrafoNum">Paciente No. ({elemento.idPac})</p>
<Divider id="division2" color="gray"/>
<p id="parrafoMed">Nombre del Paciente: {elemento.nombre}</p>
<p id="parrafoCon">Contacto del Paciente: {elemento.contacto}</p>
<p id="parrafoEdad">Edad del Paciente: {elemento.edad} años</p>
<p id="parrafoCon">Peso del Paciente: {elemento.peso} kg</p>
<p id="parrafoCon">No. de Usuario del Paciente: {elemento.idUsuario}</p>
<Button id="btnDescargar" variant="contained" type="submit" color="warning" onClick={()=>procesarEliminacion(elemento.idPac)}>Eliminar Paciente</Button>
<Divider id="division2" color="gray"/>
</div>
</div>
))}
</div>
</div>
</>
)
}
export default MisPacientes

View File

@ -1,32 +0,0 @@
.paciente-container {
margin-bottom: 20px;
}
.paciente-form {
display: flex;
flex-direction: column;
}
.paciente-form input {
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
}
.paciente-form button {
padding: 10px 20px;
font-size: 16px;
background-color: #28a745;
color: #fff;
border: none;
cursor: pointer;
}
.btnsalir {
margin-bottom: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}

View File

@ -1,22 +1,23 @@
.receta-medica-container {
margin-top: 20px;
margin-bottom: 20px;
}
.receta-medica-form{
display: grid;
padding: 20px;
align-items: center;
}
.receta-medica-form textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
}
.receta-medica-form button {
padding: 10px 20px;
font-size: 16px;
background-color: #28a745;
color: #fff;
border: none;
cursor: pointer;
}
.btnsalir {
margin-bottom: 20px;
@ -24,6 +25,10 @@
font-size: 18px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
#textArea{
resize: none;
height: 100px;
width: 400px;
align-items: center;
}

View File

@ -1,126 +1,176 @@
/* eslint-disable no-useless-catch */
/* eslint-disable no-unused-vars */
import React, { useId, useState } from 'react';
import './RecetaMedica.css';
import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
import { Link } from 'react-router-dom';
import axios from "axios";
import { useNavigate } from 'react-router-dom'
import jsPDF from "jspdf"
function RecetaMedica(props){
const [idreceta, setIdReceta] = useId('');
const [idPaciente, setIdPaciente] = useId('');
const [idMedico, setIdMedico] = useId('');
const [contactoMedico, setContactoMedico] = useState ('');
const [pesoPaciente, setPesoPaciente] = useState ('');
const [edadPaciente, setEdadPaciente] = useState ('');
const [presionArt, setPresionArt] = useState();
const [fecha, setFecha] = useState('');
const [tempPaciente, setTempPaciente] = useState('');
const [prescripcion, setPrescripcion] = useState('');
const [firmaMedico, setFirmaMedico] = useState(null);
const fechaActual = new Date();
const navigate = useNavigate();
const mes = fechaActual.getMonth()+1;
const nombreMed = window.localStorage.getItem("ID");
const contactoMed = window.localStorage.getItem("Usuario");
const idMed = window.localStorage.getItem("IdMed");
const firmaMed = "nohayfirma"
const [datosReceta, setdatosReceta] = useState( {
nombreMed:nombreMed,
firmaMed:firmaMed,
contactoMed:contactoMed,
pesoPac:'',
edadPac:'',
fecha:fechaActual.getFullYear()+"/"+mes+"/"+fechaActual.getDate(),
presArt:'',
tempPac:'',
contenido:'',
idPaciente:'',
idMedico:idMed,
})
const [Cargando, setCargando] = useState (false)
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (file) {
setFirmaMedico(file);
const hacerPeticion=async()=>{
try{
const respuesta= await axios.post("http://localhost:4567/realizarReceta",datosReceta);
console.log(respuesta.data);
return respuesta.data;
}catch(error){
throw error;
}
}
};
const handleSubmit = (e) => {
e.preventDefault();
const procesarFormulario= async (evento)=>{
evento.preventDefault();
console.log("Datos recuperados del evento: ", datosReceta);
setCargando(true);
try{
const respuesta=await hacerPeticion();
setCargando(false);
if(respuesta==='Receta creada'){
generarPdf(nombreMed,contactoMed,fechaActual.getFullYear()+"/"+mes+"/"+fechaActual.getDate());
document.getElementById('idPaciente').value = ''
document.getElementById('pesoPac').value = ''
document.getElementById('edadPac').value = ''
document.getElementById('presArt').value = ''
document.getElementById('tempPac').value = ''
document.getElementById('textArea').value = ''
alert("Se realizo la receta :)");
}else{
alert("La receta no se realizo :(");
console.log("La receta no se realizo");
}
}catch(error){
setCargando(false);
}
}
console.log({
idreceta,
idPaciente,
idMedico,
contactoMedico,
pesoPaciente,
edadPaciente,
presionArt,
fecha,
tempPaciente,
prescripcion,
firmaMedico
});
const cambiosFormulario=(evento)=>{
const {name,value} =evento.target;
setdatosReceta({
...datosReceta,
[name]: value
})
}
const generarPdf = (nombreMedico, contactoMedico, fecha) => {
const doc = new jsPDF();
const docWidth = doc.internal.pageSize.getWidth();
};
//por su usamos imagen como la que viene en la imagen que me pasast
//const imgData = 'http://roianalytics.agency/wp-content/uploads/2020/09/Perfil-de-usuario.png';
//doc.addImage(imgData, 'PNG', 10, 10, 50, 15);
doc.setFontSize(18);
doc.setFont('helvetica', 'bold');
const tituloX = 70;
const tituloY = 15;
doc.text(`Receta No. 0`, tituloX, tituloY);
const lineaY = tituloY + 6;
doc.line(tituloX - 5, lineaY, docWidth - 10, lineaY);
doc.setFontSize(12);
doc.setFont('helvetica', 'normal');
const contenidoX = tituloX;
const contenidoY = lineaY + 10;
const separacionLineas = 8;
doc.text(`Medico: ${nombreMedico}`, contenidoX, contenidoY);
doc.text(`Contacto: ${contactoMedico}`, contenidoX, contenidoY + separacionLineas);
doc.text(`Fecha: ${fecha}`, contenidoX, contenidoY + separacionLineas * 2);
const camposY = contenidoY + separacionLineas * 4;
doc.setFontSize(10);
doc.text('Paciente:', 10, camposY);
doc.text('Edad:', 60, camposY);
doc.text('Diagnostico:', 10, camposY + 10);
doc.text('Fecha:', 60, camposY + 10);
doc.save(`Receta_${fecha}.pdf`);
};
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
return (
<div className="receta-medica-container">
<h2>Emitir receta médica</h2>
<form onSubmit={handleSubmit} className="receta-medica-form">
<input
<><h1 id="headerFacultad">Health Manager - Receta Medica</h1><div id="division" /><nav id="divPublicaciones">
<h1 id="headerPublicaciones">Receta medica</h1>
<div id="divBotonesRecetas">
<Box id="box1" m={0}>
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
</Box>
<Box id="box2" m={0}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav><div id="division" /><div className="receta-medica-container">
<form onSubmit={procesarFormulario} className="receta-medica-form">
<p>Datos de la Receta</p>
<input
id="idPaciente"
type="text"
placeholder='id de receta'
value={idreceta}
disabled
/>
<input
type="text"
placeholder='id de paciente'
value={idPaciente}
disabled
/>
<input
type="text"
placeholder='id de medico'
value={idMedico}
disabled
/>
<input
type="text"
placeholder='Contacto'
value={contactoMedico}
onChange={(e) => setContactoMedico(e.target.value)}
/>
<input
placeholder='ID del paciente'
name="idPaciente"
onChange={cambiosFormulario} />
<input
id="pesoPac"
type="text"
placeholder='Peso'
value={pesoPaciente}
onChange={(e) => setPesoPaciente(e.target.value)}
/>
<input
name="pesoPac"
onChange={cambiosFormulario} />
<input
id="edadPac"
type="text"
placeholder='Edad'
value={edadPaciente}
onChange={(e) => setEdadPaciente(e.target.value)}
/>
<input
name="edadPac"
onChange={cambiosFormulario} />
<input
id="presArt"
type="text"
placeholder='Presion arterial'
value={presionArt}
onChange={(e) => setPresionArt(e.target.value)}
/>
<input
type="text"
placeholder='Fecha'
value={fecha}
onChange={(e) => setFecha(e.target.value)}
/>
<input
name="presArt"
onChange={cambiosFormulario} />
<input
id="tempPac"
type="text"
placeholder='Temperatura'
value={tempPaciente}
onChange={(e) => setTempPaciente(e.target.value)}
/>
<textarea
placeholder="Escriba la prescripción médica"
value={prescripcion}
onChange={(e) => setPrescripcion(e.target.value)}
/>
<input
type="file"
accept="image/*"
onChange={handleImageUpload}
/>
<p></p>
<p></p>
<button type="submit">Emitir receta</button>
</form>
<p></p>
<p></p>
<Link to="/">
<button className="btnsalir">Regresar al menú principal</button>
</Link>
</div>
name="tempPac"
onChange={cambiosFormulario} />
<textarea
id="textArea"
placeholder="Escriba la prescripción médica"
name="contenido"
onChange={cambiosFormulario} />
<button type="submit">Emitir receta</button>
</form>
</div></>
);
}

View File

@ -1,54 +1,104 @@
/* eslint-disable no-undef */
/* eslint-disable no-useless-catch */
/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import './Paciente.css';
import { Button, Box, TextField ,DialogContentText, Divider} from "@mui/material"
import './RegistrarPaciente.css';
import axios from "axios";
import { useNavigate } from 'react-router-dom'
import { Link } from 'react-router-dom';
function RegistrarPaciente(props){
const [nombre, setNombre] = useState('');
const [edad, setEdad] = useState('');
const [peso, setPeso] = useState('');
const [contacto, setContacto] = useState('');
const esMedico = false;
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
};
const [datosUsuario,setDatosUsuario] = useState({
correo:'',
contraseña:'',
esMedico:esMedico,
})
const [Cargando, setCargando] = useState (false)
const hacerPeticion=async()=>{
try{
const respuesta= await axios.post("http://localhost:4567/AgregarUsuario",datosUsuario);
console.log(respuesta.data);
return respuesta.data;
}catch(error){
throw error;
}
}
const procesarFormulario= async (evento)=>{
evento.preventDefault();
console.log("Datos recuperados del evento: ", datosUsuario);
setCargando(true);
try{
console.log("Entrando try");
const respuesta=await hacerPeticion();
setCargando(false);
if(respuesta==='Usuario agregado'){
document.getElementById('correoI').value = ''
document.getElementById('contraseñaI').value = ''
alert("Se registro paciente");
}else{
alert("El registro no se realizo :(");
console.log("El registro no se realizo");
}
}catch(error){
setCargando(false);
}
}
const cambiosFormulario=(evento)=>{
const {name,value} =evento.target;
setDatosUsuario({
...datosUsuario,
[name]: value
})
}
const regresarPrincipal = () => {
navigate('/MedicoPrincipal');
}
const cerrarSesion = () => {
navigate('/');
}
return (
<div className="paciente-container">
<h2>Registrar paciente</h2>
<form onSubmit={handleSubmit} className="paciente-form">
<input
type="text"
placeholder="Nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>
<input
type="number"
placeholder="Edad"
value={edad}
onChange={(e) => setEdad(e.target.value)}
/>
<input
type="text"
placeholder="Peso"
value={peso}
onChange={(e) => setPeso(e.target.value)}
/>
<input
type="text"
placeholder="Contacto"
value={contacto}
onChange={(e) => setContacto(e.target.value)}
/>
<button type="submit">Registrar paciente</button>
</form>
<p></p>
<Link to="/">
<button className="btnsalir">Regresar al menú principal</button>
</Link>
</div>
<><h1 id="headerFacultad">Health Manager - Registrar Paciente</h1><div id="division" /><nav id="divPublicaciones">
<h1 id="headerPublicaciones">Registrar Paciente</h1>
<div id="divBotonesRecetas">
<Box id="box1" m={0}>
<Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
</Box>
<Box id="box2" m={0}>
<Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
</Box>
</div>
</nav><div id="division" /><div id="divLeyenda">
<div id="division" />
</div><div className="paciente-container">
<form onSubmit={procesarFormulario} className="paciente-form">
<p>Datos del Paciente</p>
<input
id="correoI"
type="text"
name="correo"
placeholder="Correo electronico"
onChange={cambiosFormulario} />
<input
id="contraseñaI"
type="text"
name="contraseña"
placeholder="Contraseña"
onChange={cambiosFormulario} />
<button type="submit">Registrar paciente</button>
</form>
<p></p>
</div></>
);
}

View File

@ -6,11 +6,14 @@ import Principal from './Principal.jsx'
import DescargaRecetas from './DescargaRecetas.jsx'
import MiPerfil from './MiPerfil.jsx'
import MedicoPrincipal from './MedicoPrincipal .jsx'
import Paciente from './RegistrarPaciente.jsx';
import RegistrarPaciente from './RegistrarPaciente.jsx';
import EditarPaciente from './EditarPaciente';
import RecetaMedica from './RecetaMedica';
import BuscarPaciente from './BuscarPaciente';
import HistorialPacientes from './HistorialPacientes'
import MiPerfilMedico from './MiPerfilMedico.jsx'
import MisPacientes from './MisPacientes.jsx'
import EliminarPacientes from './EliminarPacientes.jsx'
const router = createHashRouter([
@ -32,8 +35,8 @@ import HistorialPacientes from './HistorialPacientes'
}
,
{
path: "/Paciente",
element:<Paciente/>
path: "/RegistrarPaciente",
element:<RegistrarPaciente/>
},
{
path: "/EditarPaciente",
@ -55,6 +58,19 @@ import HistorialPacientes from './HistorialPacientes'
{
path: "/MiPerfil",
element:<MiPerfil/>
},
{
path: "MisPacientes",
element:<MisPacientes/>
}
,
{
path: "/MiPerfilMedico",
element:<MiPerfilMedico/>
},
{
path: "/EliminarPacientes",
element:<EliminarPacientes/>
}
])

View File

@ -1,55 +1,35 @@
*{
font-family:'Times New Roman', Times, serif;
box-sizing: border-box;
}
.formulario{
align-items: center;
justify-content:center;
margin: 0 auto;
background-color: #afc0f5;
height: fit-content;
width: 400px;
border-radius: 20px;
padding-top: 10px;
gap: 25px;
flex: 1 1 300px;
margin-bottom: 25px;
overflow: hidden;
}
label{
margin-left: 30px;
margin-bottom: 30px;
}
input[type="number"]{
width: 45px;
}
input{
border-radius: 10%;
border: 1px grey;
margin-bottom: 10px;
}
button{
background-color: rgb(123, 123, 248);
border-radius: 10%;
font-size: 18px;
border: 1px grey;
color:white;
margin-left: 30px;
.paciente-container {
margin-bottom: 20px;
margin-top: 20px;
margin-bottom: 30px;
padding: 5px 10px;
}
.btnCancelar{
background-color: red;
margin-left: 160px;
}
h2 {
margin-bottom: 30px;
text-align: center;
}
}
.paciente-form {
display: grid;
padding: 20px;
align-items: center;
}
.paciente-form input {
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
}
.paciente-form button {
padding: 10px 20px;
font-size: 16px;
background-color: #28a745;
color: #fff;
border: none;
cursor: pointer;
}
.btnsalir {
margin-bottom: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}

View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrar Paciente</title>
<link rel="stylesheet" href="registrarPaciente.css">
</head>
<body>
<div class="formulario">
<h2>Registrar Paciente</h2>
<form action= "" id="registrarPaciente">
<label for="nombre" class="campoTexto">Nombre:</label>
<input type="text" name="nombre" id="nombre">
<div>
<label for="edad" class="edad">Edad:</label>
<input type="number" name="edad" id="edad">
<label for="peso" class="peso">Peso:</label>
<input type="number" name="peso" id="peso">
<label for="altura" class="altura">Altura:</label>
<input type="number" name="altura" id="altura">
</div>
<div>
<label for="presionArterial" class="presion">Presión Arterial:</label>
<input type="number" name="presionArterial" id="presionArterial">
<label for="temperatura" class="temperatura">Temperatura:</label>
<input type="number" name="temperatura" id="temperatura">
</div>
<label for="alergias" class="campoTexto">Alergias:</label>
<input type="text" name="alergias" id="alergias">
<div>
<button type="submit" class="btnRegistar">Registrar</button>
<button class="btnCancelar">Cancelar</button>
</div>
</form>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB