From 0b2c458d601c2af7785f5c7e304eca89ecfaf499 Mon Sep 17 00:00:00 2001 From: Roberto Date: Wed, 5 Jun 2024 01:16:10 -0600 Subject: [PATCH] front_presentacion --- healthmanager/src/BuscarPaciente.jsx | 2 +- healthmanager/src/DescargaRecetas.jsx | 11 +- healthmanager/src/EditarPaciente.css | 6 +- healthmanager/src/EditarPaciente.jsx | 85 +++++--- healthmanager/src/EliminarPacientes.css | 71 +++++++ healthmanager/src/EliminarPacientes.jsx | 90 ++++++++ healthmanager/src/HistorialPacientes.jsx | 2 +- healthmanager/src/Login.jsx | 12 +- healthmanager/src/MedicoPrincipal .jsx | 85 ++++---- healthmanager/src/MiPerfilMedico.css | 89 ++++++++ healthmanager/src/MiPerfilMedico.jsx | 68 ++++++ healthmanager/src/MisPacientes.css | 71 +++++++ healthmanager/src/MisPacientes.jsx | 110 ++++++++++ healthmanager/src/Paciente.css | 32 --- healthmanager/src/RecetaMedica.css | 19 +- healthmanager/src/RecetaMedica.jsx | 252 ++++++++++++++--------- healthmanager/src/RegistrarPaciente.jsx | 136 ++++++++---- healthmanager/src/main.jsx | 22 +- healthmanager/src/registrarPaciente.css | 88 +++----- healthmanager/src/registrarPaciente.html | 45 ---- healthmanager/src/simboloReceta.JPG | Bin 0 -> 31791 bytes 21 files changed, 917 insertions(+), 379 deletions(-) create mode 100644 healthmanager/src/EliminarPacientes.css create mode 100644 healthmanager/src/EliminarPacientes.jsx create mode 100644 healthmanager/src/MiPerfilMedico.css create mode 100644 healthmanager/src/MiPerfilMedico.jsx create mode 100644 healthmanager/src/MisPacientes.css create mode 100644 healthmanager/src/MisPacientes.jsx delete mode 100644 healthmanager/src/Paciente.css delete mode 100644 healthmanager/src/registrarPaciente.html create mode 100644 healthmanager/src/simboloReceta.JPG diff --git a/healthmanager/src/BuscarPaciente.jsx b/healthmanager/src/BuscarPaciente.jsx index 86e7be3..ab75386 100644 --- a/healthmanager/src/BuscarPaciente.jsx +++ b/healthmanager/src/BuscarPaciente.jsx @@ -23,7 +23,7 @@ function BuscarPaciente(props){

- + diff --git a/healthmanager/src/DescargaRecetas.jsx b/healthmanager/src/DescargaRecetas.jsx index 01909b9..4b8f665 100644 --- a/healthmanager/src/DescargaRecetas.jsx +++ b/healthmanager/src/DescargaRecetas.jsx @@ -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); diff --git a/healthmanager/src/EditarPaciente.css b/healthmanager/src/EditarPaciente.css index f955d48..7655e1a 100644 --- a/healthmanager/src/EditarPaciente.css +++ b/healthmanager/src/EditarPaciente.css @@ -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 { diff --git a/healthmanager/src/EditarPaciente.jsx b/healthmanager/src/EditarPaciente.jsx index a35fd72..7196122 100644 --- a/healthmanager/src/EditarPaciente.jsx +++ b/healthmanager/src/EditarPaciente.jsx @@ -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 ( -
-

Editar Paciente

-
- setNombre(e.target.value)} - /> - setEdad(e.target.value)} - /> - setPeso(e.target.value)} - /> - setContacto(e.target.value)} - /> - -
-

- - - -
+ <>

Health Manager - Editar Paciente

+

Edita los datos de un paciente.

+
+
+
+ setNombre(e.target.value)} /> + setEdad(e.target.value)} /> + setPeso(e.target.value)} /> + setContacto(e.target.value)} /> + +
+

+
); } diff --git a/healthmanager/src/EliminarPacientes.css b/healthmanager/src/EliminarPacientes.css new file mode 100644 index 0000000..02fedc8 --- /dev/null +++ b/healthmanager/src/EliminarPacientes.css @@ -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; +} \ No newline at end of file diff --git a/healthmanager/src/EliminarPacientes.jsx b/healthmanager/src/EliminarPacientes.jsx new file mode 100644 index 0000000..2d396d8 --- /dev/null +++ b/healthmanager/src/EliminarPacientes.jsx @@ -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 ( + <> +

Health Manager - Mis recetas

+
+ +
+
+

Elimina tus pacientes.

+
+
+ + + ) +} + +export default DescargaRecetas \ No newline at end of file diff --git a/healthmanager/src/HistorialPacientes.jsx b/healthmanager/src/HistorialPacientes.jsx index 019c719..c39bd7f 100644 --- a/healthmanager/src/HistorialPacientes.jsx +++ b/healthmanager/src/HistorialPacientes.jsx @@ -86,7 +86,7 @@ function HistorialPacientes(props) {
)}

- +
diff --git a/healthmanager/src/Login.jsx b/healthmanager/src/Login.jsx index b17a1c6..61a7019 100644 --- a/healthmanager/src/Login.jsx +++ b/healthmanager/src/Login.jsx @@ -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) {

Inicia sesion para continuar

- + - + diff --git a/healthmanager/src/MedicoPrincipal .jsx b/healthmanager/src/MedicoPrincipal .jsx index 34ec409..df0758d 100644 --- a/healthmanager/src/MedicoPrincipal .jsx +++ b/healthmanager/src/MedicoPrincipal .jsx @@ -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) {
- + @@ -220,7 +230,7 @@ function MedicoPrincipal(props) { - + @@ -240,7 +250,7 @@ function MedicoPrincipal(props) { - + @@ -260,7 +270,7 @@ function MedicoPrincipal(props) { - + @@ -280,7 +290,7 @@ function MedicoPrincipal(props) { - + @@ -300,7 +310,7 @@ function MedicoPrincipal(props) { - + @@ -320,7 +330,7 @@ function MedicoPrincipal(props) { - + @@ -340,26 +350,7 @@ function MedicoPrincipal(props) { - - - - - `calc(${theme.spacing(1)} + 6px)`, - }} - > - {image8.title} - - - - +
diff --git a/healthmanager/src/MiPerfilMedico.css b/healthmanager/src/MiPerfilMedico.css new file mode 100644 index 0000000..7b568db --- /dev/null +++ b/healthmanager/src/MiPerfilMedico.css @@ -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; +} \ No newline at end of file diff --git a/healthmanager/src/MiPerfilMedico.jsx b/healthmanager/src/MiPerfilMedico.jsx new file mode 100644 index 0000000..3c78d11 --- /dev/null +++ b/healthmanager/src/MiPerfilMedico.jsx @@ -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 ( + <> +

HealthManager - Mi perfil

+
+ +
+
+

Visualiza tus datos como Usuario, Correo y Contraseña.

+
+
+ Nombre + {window.localStorage.getItem("ID")} + + Contacto + {window.localStorage.getItem("Contacto")} + + No. de medico sistema + {window.localStorage.getItem("IdMed")} + + Cedula profesional + {window.localStorage.getItem("CedProf")} + + Correo + {window.localStorage.getItem("Usuario")} + + Contraseña + {window.localStorage.getItem("Contraseña")} + +
+ + ) +} + +export default MiPerfil \ No newline at end of file diff --git a/healthmanager/src/MisPacientes.css b/healthmanager/src/MisPacientes.css new file mode 100644 index 0000000..02fedc8 --- /dev/null +++ b/healthmanager/src/MisPacientes.css @@ -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; +} \ No newline at end of file diff --git a/healthmanager/src/MisPacientes.jsx b/healthmanager/src/MisPacientes.jsx new file mode 100644 index 0000000..463a19f --- /dev/null +++ b/healthmanager/src/MisPacientes.jsx @@ -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 ( + <> +

Health Manager - Mis recetas

+
+ +
+
+

Visualiza tus pacientes.

+
+
+
+
+ {publicacionesData.map((elemento) => ( +
+
+

Paciente No. ({elemento.idPac})

+ +

Nombre del Paciente: {elemento.nombre}

+

Contacto del Paciente: {elemento.contacto}

+

Edad del Paciente: {elemento.edad} años

+

Peso del Paciente: {elemento.peso} kg

+

No. de Usuario del Paciente: {elemento.idUsuario}

+ + +
+
+ ))} +
+
+ + ) +} + +export default MisPacientes \ No newline at end of file diff --git a/healthmanager/src/Paciente.css b/healthmanager/src/Paciente.css deleted file mode 100644 index cb253c6..0000000 --- a/healthmanager/src/Paciente.css +++ /dev/null @@ -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; - } \ No newline at end of file diff --git a/healthmanager/src/RecetaMedica.css b/healthmanager/src/RecetaMedica.css index b6feb28..eefb788 100644 --- a/healthmanager/src/RecetaMedica.css +++ b/healthmanager/src/RecetaMedica.css @@ -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; } \ No newline at end of file diff --git a/healthmanager/src/RecetaMedica.jsx b/healthmanager/src/RecetaMedica.jsx index c9bad9b..d3fbbbb 100644 --- a/healthmanager/src/RecetaMedica.jsx +++ b/healthmanager/src/RecetaMedica.jsx @@ -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 ( -
-

Emitir receta médica

- -

Health Manager - Receta Medica

+ +

Datos de la Receta

+ - - - setContactoMedico(e.target.value)} - /> - + setPesoPaciente(e.target.value)} - /> - + setEdadPaciente(e.target.value)} - /> - + setPresionArt(e.target.value)} - /> - setFecha(e.target.value)} - /> - + setTempPaciente(e.target.value)} - /> -