Avances en el diseño web y requerimientos

folaciregui · Oct 26, 2023 · 31323d8 · 31323d8
1 parent da4e7f3
commit 31323d8
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 45 deletions.
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/ENTREGA 5/src/Frontend/abrir-incidente.html b/ENTREGA 5/src/Frontend/abrir-incidente.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -20,8 +21,8 @@ <h1 class="titulo">Abrir incidente</h1>
                     <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
                     <a class="referencia" href="consultar-incidente.html">Consultar Incidente</a>
                     <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                    <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
                     <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                    <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
                 </div>
             </div>
             <div class="columna2">
@@ -43,7 +44,6 @@ <h1 class="titulo">Abrir incidente</h1>
                             <!-- Aquí se llenará la lista de monitoreables con JavaScript -->
                         </select>
                     </div>
-
             </div>
         </div>
 
@@ -54,7 +54,7 @@ <h1 class="titulo">Abrir incidente</h1>
         <!-- No entendi bien para que es lo de abajo -->
         <button style="display: none;" onclick="abrirFormulario()">Abrir Formulario</button>
 
-        <div id="formularioIncidente" style="display: none;">
+        ><div id="formularioIncidente" style="display: none;">
             <!-- Aquí se mostrará el formulario de incidente -->
         </div>
 
@@ -69,18 +69,34 @@ <h1 class="titulo">Abrir incidente</h1>
 
     <!--<script src="abrir-incidente.js"></script> quizas abstraer la logica en un archivo aparte-->
     <script>
+        //cargo lista monitoreables
         const selectMonitoreable = document.getElementById('selectMonitoreable');
         const formularioIncidente = document.getElementById('formularioIncidente');
-
-        // Aquí puedes obtener la lista de monitoreables desde tu base de datos y llenar el desplegable.
-        // Ejemplo:
         const monitoreables = ["Monitoreable 1", "Monitoreable 2", "Monitoreable 3"];
         monitoreables.forEach(monitoreable => {
             const option = document.createElement('option');
             option.value = monitoreable;
             option.textContent = monitoreable;
             selectMonitoreable.appendChild(option);
         });
+        //cargo lista entidad
+        const selectEntidad = document.getElementById('selectEntidad');
+        const entidades = ["Medio de Transporte", "Empresa"];
+        monitoreables.forEach(entidad => {
+            const option = document.createElement('option');
+            option.value = entidad;
+            option.textContent = entidad;
+            selectEntidad.appendChild(option);
+        });
+        //cargo lista establecimiento
+        const selectEstablecimiento = document.getElementById('selectEstablecimiento');
+        const establecimientos = ["Establecimiento 1", "Establecimiento 2"]; //faltaria ver como hacemos para que muestre solo o establecimientos o sucursales segun lo elegido antes
+        monitoreables.forEach(establecimiento => {
+            const option = document.createElement('option');
+            option.value = establecimiento;
+            option.textContent = establecimiento;
+            selectEstablecimiento.appendChild(option);
+        });
 
         function abrirFormulario() {
             // Cuando se hace clic en el botón "Abrir Formulario," se muestra el formulario.

diff --git a/ENTREGA 5/src/Frontend/cargar-datos-entidades.html b/ENTREGA 5/src/Frontend/cargar-datos-entidades.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -20,8 +21,8 @@ <h1 class="titulo">Formulario</h1>
                 <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
                 <a class="referencia" href="consultar-incidente.html">Consultar Incidente</a>
                 <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
                 <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
             </div>
         </div>
         <div class="columna2">

diff --git a/ENTREGA 5/src/Frontend/cerrar-incidente.html b/ENTREGA 5/src/Frontend/cerrar-incidente.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -20,8 +21,8 @@ <h1 class="titulo">Cerrar incidente</h1>
                 <a class="referenciaElegida" href="cerrar-incidente.html">Cerrar Incidente</a>
                 <a class="referencia" href="consultar-incidente.html">Consultar Incidente</a>
                 <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
                 <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
             </div>
         </div>
         <div class="columna2">

diff --git a/ENTREGA 5/src/Frontend/consultar-incidente.html b/ENTREGA 5/src/Frontend/consultar-incidente.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -19,15 +20,45 @@ <h1 class="titulo">Consultar Incidentes por Estado</h1>
                 <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
                 <a class="referenciaElegida" href="consultar-incidente.html">Consultar Incidente</a>
                 <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
                 <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
             </div>
         </div>
         <div class="columna2">
-            <div class="subcontenedor">
-                FALTA!!
+            <div class="opciones">
+                <label class="label" for="selectEntidad">Selecciona una Entidad:</label>
+                <select class="input" id="selectEntidad">
+                    <!-- Aquí se llenará la lista de entidades con JavaScript -->
+                </select>
             </div>
+            <div class="opciones">
+                <label class="label" for="selectEstablecimiento">Selecciona un Establecimiento:</label>
+                <select class="input" id="selectEstablecimiento">
+                    <!-- Aquí se llenará la lista de establecimientos con JavaScript -->
+                </select>
+            </div>
+            <a class="referencia" href="incidentes-filtrados.html">Filtrar</a>
         </div>
     </div>
+<script>
+    //cargo lista entidad
+    const selectEntidad = document.getElementById('selectEntidad');
+    const entidades = ["Medio de Transporte", "Empresa"];
+    entidades.forEach(entidad => {
+        const option = document.createElement('option');
+        option.value = entidad;
+        option.textContent = entidad;
+        selectEntidad.appendChild(option);
+    });
+    //cargo lista establecimiento
+    const selectEstablecimiento = document.getElementById('selectEstablecimiento');
+    const establecimientos = ["Establecimiento 1", "Establecimiento 2"]; //faltaria ver como hacemos para que muestre solo o establecimientos o sucursales segun lo elegido antes
+    establecimientos.forEach(establecimiento => {
+        const option = document.createElement('option');
+        option.value = establecimiento;
+        option.textContent = establecimiento;
+        selectEstablecimiento.appendChild(option);
+    });
+</script>
 </body>
 </html>
diff --git a/ENTREGA 5/src/Frontend/imagenes/logoUTN.png b/ENTREGA 5/src/Frontend/imagenes/logoUTN.png
diff --git a/ENTREGA 5/src/Frontend/incidentes-filtrados.html b/ENTREGA 5/src/Frontend/incidentes-filtrados.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
+    <link rel="stylesheet" href="estilosRequerimientos.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
+    <title>Consultar Incidente</title>
+</head>
+<body>
+<a class="botonIrAPagPrincipal" href="pagina-principal.html">Ir a Pagina Principal</a>
+<h1 class="titulo">Consultar Incidentes por Estado</h1>
+<div class="contenedorColumna">
+    <div class="columna1">
+        <div class="contenedorColumna1">
+            <a class="referencia" href="cargar-datos-entidades.html">Cargar datos Entidades y Organismos</a>
+            <a class="referencia" href="abrir-incidente.html">Abrir Incidente</a>
+            <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
+            <a class="referenciaElegida" href="consultar-incidente.html">Consultar Incidente</a>
+            <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
+            <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+            <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
+        </div>
+    </div>
+    <div class="columna2">
+        <div class="opciones">
+            <label class="label" for="selectIncidente">Selecciona un Incidente:</label>
+            <select class="input" id="selectIncidente">
+                <!-- Aquí se llenará la lista de incidentes con JavaScript -->
+            </select>
+        </div>
+        <button class="botonCargar" type="submit" class="btn btn-sm btn-outline-primary text-nowrap mt-5">Buscar Incidente</button>
+    </div>
+</div>
+<script>
+    //cargo lista incidentes
+    const selectIncidente = document.getElementById('selectIncidente');
+    const incidentes = ["Incidente 1", "Incidente 2"];
+    incidentes.forEach(incidente => {
+        const option = document.createElement('option');
+        option.value = incidente;
+        option.textContent = incidente;
+        selectIncidente.appendChild(option);
+    });
+</script>
+</body>
+</html>
diff --git a/ENTREGA 5/src/Frontend/index.html b/ENTREGA 5/src/Frontend/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="estilos.css">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
@@ -116,19 +117,26 @@ <h1 class="subtitulo">INICIAR SESIÓN</h1>
     const userEmail = document.getElementById("user-email");
 
     // Función para registarse
-    function register(){
+    function register() {
         const email = document.getElementById("emailRegister").value;
         const password = document.getElementById("passwordRegister").value;
         firebase.auth().createUserWithEmailAndPassword(email, password)
-            .catch(function(error){
+            .then((userCredential) => {
+                // Creación del usuario exitosa
+                const user = userCredential.user;
+                verificarCorreo();
+                alert("Registrado con exito");
+                inicioSesion(user);
+            })
+            .catch(function(error) {
                 var errorCode = error.code;
                 var errorMessage = error.message;
-                alert(errorMessage);
-            })
-            .then(function (){
-                verificarCorreo()
-            })
+                alert("Error al registrar la cuenta: " + errorMessage);
+                document.getElementById("emailLogin").innerHTML= "";//no terminado
+                document.getElementById("passwordLogin").innerHTML="";
+            });
     }
+
     // Función para iniciar sesión
     function verificarCorreo(){
         var user = firebase.auth().currentUser;

diff --git a/...src/Frontend/administracion-usuarios.html → ENTREGA 5/src/Frontend/mi-cuenta.html b/...src/Frontend/administracion-usuarios.html → ENTREGA 5/src/Frontend/mi-cuenta.html
@@ -2,16 +2,17 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
-    <title>Administración Usuarios</title>
+    <title>Mi cuenta</title>
 </head>
 <body>
     <div>
         <a class="botonIrAPagPrincipal" href="pagina-principal.html">Ir a Pagina Principal</a>
-        <h1 class="titulo">Administración de Usuarios</h1>
+        <h1 class="titulo">Mi cuenta</h1>
     </div>
     <div class="contenedorColumna">
         <div class="columna1">
@@ -21,8 +22,8 @@ <h1 class="titulo">Administración de Usuarios</h1>
                 <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
                 <a class="referencia" href="consultar-incidente.html">Consultar Incidente</a>
                 <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                <a class="referenciaElegida" href="administracion-usuarios.html">Administrar Usuarios</a>
                 <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                <a class="referenciaElegida" href="mi-cuenta.html">Mi cuenta</a>
             </div>
         </div>
         <div class="columna2">

diff --git a/ENTREGA 5/src/Frontend/pagina-principal.html b/ENTREGA 5/src/Frontend/pagina-principal.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosPagPrincipal.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -23,9 +24,9 @@ <h1 class="tituloPrincipal">Menú</h1>
             <br></br>
             <a class="referencia" href="sugerencia-incidente.html">Sugerencia Incidente</a>
             <br></br>
-            <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
-            <br></br>
             <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+            <br></br>
+            <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
         </div>
     </div>
 
@@ -49,8 +50,8 @@ <h1 class="tituloPrincipal">Menú</h1>
         const user = JSON.parse(localStorage.getItem('user'));
         if(user){
             console.log("el usuario tiene: "+user);
-            console.log("nombre usuario"+user.displayName);
-            console.log("correo usuario"+user.email);
+            console.log("nombre usuario: "+user.displayName);
+            console.log("correo usuario: "+user.email);
             document.getElementById("user-displayname").textContent = user.displayName;
             document.getElementById("user-email").textContent = user.email;
             // a partir de aca trabajo el resto de cosas

diff --git a/ENTREGA 5/src/Frontend/sugerencia-incidente.html b/ENTREGA 5/src/Frontend/sugerencia-incidente.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="imagenes/logoUTN.png">
     <link rel="stylesheet" href="estilosRequerimientos.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
@@ -19,15 +20,33 @@ <h1 class="titulo">Sugerencia Incidentes</h1>
                 <a class="referencia" href="cerrar-incidente.html">Cerrar Incidente</a>
                 <a class="referencia" href="consultar-incidente.html">Consultar Incidente</a>
                 <a class="referenciaElegida" href="sugerencia-incidente.html">Sugerencia Incidente</a>
-                <a class="referencia" href="administracion-usuarios.html">Administrar Usuarios</a>
                 <a class="referencia" href="visualizacion-rankings.html">Rankings</a>
+                <a class="referencia" href="mi-cuenta.html">Mi cuenta</a>
             </div>
         </div>
         <div class="columna2">
-            <div class="subcontenedor">
-                FALTA!!
+            <div class="opciones">
+                <label class="label">Incidentes cercanos a revisar</label>
+                <select class="input" id="selectIncidente">
+                    <!-- Aquí se llenará la lista de incidentes con JavaScript -->
+                </select>
+                <button class="botonCargar" type="submit" class="btn btn-sm btn-outline-primary text-nowrap mt-5">Actualizar</button>
             </div>
         </div>
+        <div class="mapa">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.8058592213542!2d-58.470550524898655!3d-34.65960557293423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc966bf151d67%3A0x255fef772508e89c!2sNational%20Technological%20University!5e0!3m2!1sen!2sar!4v1698345224360!5m2!1sen!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
     </div>
+<script>
+    //aca cargo la lista para mostrar los incidentes
+    const selectIncidente = document.getElementById('selectIncidente');
+    const incidentes = ["Incidente 1", "Incidente 2"];
+    incidentes.forEach(incidente => {
+        const option = document.createElement('option');
+        option.value = incidente;
+        option.textContent = incidente;
+        selectIncidente.appendChild(option);
+    });
+</script>
 </body>
 </html>