Skip to content

Commit

Permalink
Sprint 4 (#30)
Browse files Browse the repository at this point in the history 
* Archivo firebase.js creado dentro del directorio js del proyecto

* Credenciales de firebase establecidas en archivo firebase.js

* Archivo .jshintrc incluido en la raíz del proyecto para establecer que versión de JavaScript se ejecuta en el proyecto

* Archivo firebase.js vinculado al index.html mediante etiqueta <script>

* Gráfica de lineas agregada a la sección de análisis de la aplicación

* Se removieron las clases que colapsaban las diferentes secciones de la aplicación y se actualizaron los vínculos del menú

* Se eliminaron las funciones del menú anterior y se creo la función que crea la gráfica de PLG del último registro

* Grafico del último registro de CO agregado al proyecto

* Se agregó fecha y hora del ultimo registro a las tarjetas de monitoreo

* Tabla agregada a la funcionalidad de la aplicación

* Íconos de cabecera se agregaron a la tabla, tambien se habilitó el idioma español

* Estilos aplicados a los botones de exportación e impresión de los datos de la tabla

* Seremovió la opción de exportar data de tabla a pdf y se sustituyó por la opción de descargar la data en formato de archivo JSON

* Se agregó año de forma dinámica en el footer de la aplicación

* Se agregó la librería moment para el formateo de fechas en la aplicación

* Seagregó la referencia al la librería moment en archivo index.html

* Se aplico filtro en los datos mostrados por la gráfica de líneas y ahora solo muestra los registros correspondientes al dia en curso

* Se habilitaron elementos popover de ayuda

* Descripción de las herramientas de la aplicación actualizada

* Ids para tarjeta de alerta creados

* Responsive de aplicación a un 95%

* Funcionalidad de la tarjeta de alertas completa

* Archivos de imagen basura eliminados y se agregó la imagen que se utilizará en las alertas

* Sección 'acerca de' de la aplicación terminada

* Cambios efectuados a la barra de menú
  • Loading branch information
@lintavo
lintavo authored Jun 15, 2022
1 parent 338e3e5 commit c2191ee
Show file tree
Hide file tree
Showing 7 changed files with 412 additions and 92 deletions.
3 changes: 3 additions & 0 deletions .jshintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"esversion": 6
}
12 changes: 12 additions & 0 deletions css/app.estilos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ Escritorio (XL para todos os dispositivos con resolución mayor a 1336px en adel
width: 80%;
}
}

.ahi:hover {
font-size: large;
color: red;
}

/*=============================================================================================
Laptop (XL para todos os dispositivos con resolución mayor a 1336px en adelante
=============================================================================================*/
Expand Down Expand Up @@ -76,4 +82,10 @@ Móvil vertical (para todos os dispositivos con resolución mayor a 320px en ade
width: 100%;
padding-top: 0px;
}
#table .btn-group {
visibility: collapse;
}
.btn h2 {
font-size: small;
}
}
Binary file added img/A8tv.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 82 additions & 52 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,19 @@
<!-- Firebase -->
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<!-- D3 -->
<!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> -->
<script>
const div = d3.selectAll("div");
</script>
<!-- C3 -->
<script src="c3/c3.min.js"></script>
<!-- Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Librería Moment de JS -->
<script src="js/moment.min.js"></script>
</head>
<body>
<!-- Menú principal de la aplicación -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark opacity-100">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/retavid-logo-name-pg-inv.png" class="img-fluid" alt="Logo">
Expand All @@ -82,31 +82,25 @@
<a class="nav-link active" aria-current="page" id="inicio" href="#"><i class="bi bi-house-door show"></i> Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monitoreo" href="#"><i class="bi bi-speedometer"></i> Monitoreo</a>
<a class="nav-link" id="monitoreo" href="#monitoreo-tool-section"><i class="bi bi-speedometer"></i> Monitoreo</a>
</li>
<li class="nav-item">
<a class="nav-link" id="analisis" href="#"><i class="bi bi-graph-up"></i> Análisis</a>
<a class="nav-link" id="analisis" href="#analytics"><i class="bi bi-graph-up"></i> Gráfica del día</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="datos" href="#"><i class="bi bi-table"></i> Datos</a>
<a class="nav-link" id="datos" href="#data"><i class="bi bi-table"></i> Datos históricos</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contacto" href="#"><i class="bi bi-person-lines-fill"></i> Contácto</a>
<a class="nav-link" id="contacto" href="#contacts"><i class="bi bi-person-lines-fill"></i> Acerca de</a>
</li>
</ul>
</div>
<!-- <ul class="collapse navbar-collapse mb-0 d-flex mb-lg-2">
<li class="nav-item"><a href="#" class="nav-link"><i class="bi bi-facebook"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="bi bi-twitter"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="bi bi-instagram"></i></a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="bi bi-github"></i></a></li>
</ul> -->
</div>
</nav>
<!-- Final de menú principal -->

<!-- Info página principal -->
<div class="container-fluid mt-2 collapse show" id="home-section">
<div class="container-fluid mt-3" id="home-section">
<div class="row">
<div class="" id="info-principal">
<div class="card card-body">
Expand All @@ -128,16 +122,16 @@
</div>
</div>
</div>
<h3 class="text-center"><i class="bi bi-info-circle"></i> Ayuda sobre las herramientas</h3>
<h3 class="text-center mt-2"><i class="bi bi-info-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Ayuda" data-bs-content="Haz click sobre el ícono de la herramienta de la que quieres saber más para obtener ayuda"></i> Ayuda sobre las herramientas</h3>

<div class="row text-center">
<!-- Botones OffCanvas -->
<!-- Botón monitoreo -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#monitoring" aria-controls="monitoring"><h1><i class="bi bi-speedometer"></i><p> Monitoreo</p></h1></button>
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#monitoring" aria-controls="monitoring"><h2><i class="bi bi-speedometer"></i><p> Monitoreo</p></h2></button>
<!-- Botón análisis -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-analisis" aria-controls="p-analisis"><h1><i class="bi bi-graph-up"></i><p> Análisis</p></h1></button>
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-analisis" aria-controls="p-analisis"><h2><i class="bi bi-graph-up"></i><p> Gráfica del día</p></h2></button>
<!-- Botón datos -->
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-datos" aria-controls="p-datos"><h1><i class="bi bi-table"></i><p> Datos</p></h1></button>
<button class="btn col-4 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#p-datos" aria-controls="p-datos"><h2><i class="bi bi-table"></i><p> Datos Históricos</p></h2></button>
</div>
<!-- Paneles offcanvas -->
<!-- Panel monitoreo -->
Expand All @@ -148,9 +142,9 @@ <h5 class="offcanvas-title" id="monitoringLabel"><i class="bi bi-speedometer"></
</div>
<div class="offcanvas-body small">
<p>
Esta es la herramienta principal, permite visulizar dos controles que muestran los niveles
tanto de GLP como CO y muestran el uĺtimo registro enviado por el dispositivo IoT, el indicador
de cada uno de los controles tiene tres niveles, con los colores del semáforo, para indicar si
Esta es la herramienta principal, permite visulizar dos tarjetas en las que se muestran los niveles
de PLG como CO, estos corresponden al uĺtimo registro enviado por el dispositivo IoT, el gráfico contenido
de cada uno de las tarjetas posee tres niveles, con los colores del semáforo, que nos indican si
la lectura se encuentra en un nivel aceptable (<i class="bi bi-question-diamond-fill text-success"></i>
color verde), un nivel de alerta (<i class="bi bi-question-diamond-fill text-warning"></i> color naranja)
o si la lectura se ubica en un nivel muy peligroso (<i class="bi bi-question-diamond-fill text-danger"></i> color rojo).
Expand All @@ -165,9 +159,12 @@ <h5 class="offcanvas-title" id="p-analisisLabel"><i class="bi bi-graph-up"></i>
</div>
<div class="offcanvas-body small">
<p>
Esta herramienta muestra un gráfico de líneas, en una de ellas se muestran los registros diarios
de GLP y CO debidamente ubicados en el tiempo de acuerdo a las lecturas enviadas por el dispositivo
IoT, de esta forma puede evaluarse como hoscila la lectura de los mismos durante el día.
Esta herramienta, muestra un gráfico de líneas, en cada una de ellas se muestran los registros diarios
de PLG y CO debidamente ubicados en el tiempo, de acuerdo a las lecturas enviadas por el dispositivo
IoT, de esta forma puede evaluarse como hoscila la lectura de los mismos durante el día, la gráfica es
dinámica y aunque se presentan ambas lecturas al inicio puede separarse presionando sobre la leyenda
de la gráfica y así ver solo los datos de PLG o CO según sea el caso. Hay una tercera tarjeta invisible
que aparece cuando se presenta una lectura que indique peligro.
</p>
</div>
</div>
Expand All @@ -179,9 +176,15 @@ <h5 class="offcanvas-title" id="p-datosLabel"><i class="bi bi-table"></i> Datos<
</div>
<div class="offcanvas-body small">
<p>
Esta herramienta presenta la totalidad de los datos históricos enviados por el dispositivo IoT
en forma de una tabla que permite hacer búsquedas,ordenar resultados y exportar la información
a diferentes formatos.
Esta herramienta presenta la totalidad de los datos históricos en el momento en el que carga la página,
estos constituyen la totalidad de los datos que han sido enviados por el dispositivo IoT y que se encuentran
en la base de datos, estos se presentan en forma de una tabla, en ella, se pueden hacer búsquedas, ordenar el resultado
por colummnas y exportar toda la información a diferentes formatos, entre ellos: CSV, JSON e incluso como hoja
de cálculo de Microsoft Excel, también puede copiarse toda la información e imprimirla.
</p>
<p>
<strong>Nota:</strong> Si ya se lleva tiempo con la aplicación cargada, es recomentable recargarla
en el navegador para tener acceso a los últimos registros.
</p>
</div>
</div>
Expand All @@ -190,54 +193,57 @@ <h5 class="offcanvas-title" id="p-datosLabel"><i class="bi bi-table"></i> Datos<
<!-- Fin sección Info página principal -->

<!-- Inicio sección de monitoreo -->
<div class="container-fluid collapse" id="monitoreo-tool-section">
<div class="container-fluid" id="monitoreo-tool-section">
<div class="row">
<h1 class="text-center col-12">Monitoreo en tiempo real</h1>
<hr><br>
<!-- Lectura de GPL -->
<div class="card col-4 p-1">
<div id="graph-gpl" class="card-img-top">
<div class="card col-md-12 col-lg-4">
<div id="graph-plg" class="card-img-top">

</div>
<div class="card-body">
<h5 class="card-title text-center">GPL</h5>
<h5 class="card-title text-center">Última lectura</h5>
<h6 id="plg-ultimate" class="card-title text-center"></h6>
<p class="card-text">
Nivel de GPL en estación, lectura en PPA (partes por millón).
Nivel de GPL en estación, lectura en PPA (partes por millón). <i class="bi bi-question-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Importante" data-bs-content="Una lectura de más de 1000 PPM en PLG ya se considera de alto riesgo para la salud"></i>
</p>
</div>
</div>
<!-- Section de alertas -->
<div class="card col-4 p-1 invisible">
<div id="card-alert" class="card col-md-12 col-lg-4 p-1 border-danger invisible">
<div id="alertas" class="card-img-top">

<img id="img-card-alert" src="img/A8tv.gif" alt="alerta" class="img-fluid w-100">
</div>
<div class="card-body">
<h5 class="card-title text-center">Alerta</h5>
<p class="card-text">
ms.
<h5 class="card-title text-center text-danger"><strong><i id="card-title-alert" class="bi bi-radioactive"></i></strong></h5>
<p class="card-text text-danger text-center">
<strong id="message-alert"></strong>
</p>
</div>
</div>
<!-- Lectura de CO -->
<div class="card col-4 p-1">
<div class="card col-md-12 col-lg-4 p-1">
<div id="graph-co" class="card-img-top">

</div>
<div class="card-body">
<h5 class="card-title text-center">CO</h5>
<h5 class="card-title text-center">Última lectura</h5>
<h6 id="co-ultimate" class="card-title text-center"></h6>
<p class="card-text">
Nivel de CO en estación, lectura en PPA (partes por millón).
Nivel de CO en estación, lectura en PPA (partes por millón). <i class="bi bi-question-circle ahi" data-bs-toggle="popover" data-bs-animation="true" title="Importante" data-bs-content="Una lectura de más de 100 PPA en CO ya se considera de alto riesgo para la salud"></i>
</p>
</div>
</div>
</div>
<br>
</div>
<!-- Fin Sección monitoreo -->

<!-- Inicio sección análisis -->
<div class="container-fluid collapse" id="analytics">
<div class="container-fluid" id="analytics">
<div class="row card">
<h1 class="text-center col-12">Herramienta de análisis</h1>
<h1 class="text-center col-12">Gráfica del día</h1>
<hr><br>
<div class="card-body">
<div id="graph-lines">
Expand All @@ -249,27 +255,39 @@ <h1 class="text-center col-12">Herramienta de análisis</h1>
<!-- Fin Sección análisis -->

<!-- Inicio sección datos -->
<div class="container-fluid collapse" id="data">
<div class="container-fluid mt-2" id="data">
<div class="row card">
<h1 class="text-center col-12">Herramienta de datos</h1>
<h1 class="text-center col-12">Datos históricos</h1>
<hr><br>
<div class="card-body">
<div class="card-body table-responsive">
<div id="table">

<table class="table table-striped table-over p-sm-0" id="historico"></table>
</div>
</div>
</div>
</div>
<!-- Fin Sección datos -->

<!-- Inicio sección contactos -->
<div class="container-fluid collapse" id="contacts">
<div class="container-fluid mt-2" id="contacts">
<div class="row card">
<h1 class="text-center col-12">Contáctos</h1>
<h1 class="text-center col-12">Acerca de</h1>
<hr><br>
<div class="card-body">
<div id="">

<h5 class="text-center">RETAVID es un proyecto desarrollado para la Universidad Tecnológica de El Salvador</h5>
<p class="text-center">
<a class="btn border-0 btn-lg" href="https://www.facebook.com/universidadtecnologica" data-bs-toggle="tooltip" data-bs-placement="left" title="Facebook de la UTEC"><i class="bi bi-facebook"></i></a>
<a class="btn border-0 btn-lg" href="https://twitter.com/utecedusv" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter de la UTEC"><i class="bi bi-twitter"></i></a>
<a class="btn border-0 btn-lg" href="https://www.instagram.com/utecelsalvador/" data-bs-toggle="tooltip" data-bs-placement="top" title="Instagram de la UTEC"><i class="bi bi-instagram"></i></a>
<a class="btn border-0 btn-lg" href="https://www.youtube.com/user/UTECedusv" data-bs-toggle="tooltip" data-bs-placement="right" title="Canal de YouTube de la UTEC"><i class="bi bi-youtube"></i></a>
</p>
<p class="text-center">
Desarrollada por: Gustavo Enrique Tovar Ramos <br>
Contacta con el desarrollador para más información <a href="mailto:lintavo@gmail.com?subject=Información sobre aplicación RETAVID" data-bs-toggle="tooltip" data-bs-placement="right" title="Envía un correo al desarrollador"><i class="bi bi-envelope-exclamation"></i> lintavo@gmail.com</a><br>
Disponible en GitHub <a href="https://github.com/lintavo/Retavid.git" target="_blank" data-bs-toggle="tooltip" data-bs-placement="right" title="Repositorio de RETAVID en GitHub"><i class="bi bi-github"></i> </a>

</p>
</div>
</div>
</div>
Expand All @@ -280,12 +298,24 @@ <h1 class="text-center col-12">Contáctos</h1>
<br>
<div class="container-fluid">
<div class="row">
<h4 class="text-center">Universidad Tecnológica de El Salvador - &copy; Copyright 2022</h4>
<h4 class="text-center">Universidad Tecnológica de El Salvador - &copy; Copyright <span id="año"></span></h4>
</div>
</div>
<!-- Fin de footer -->

<!-- JavaScript personalizado de la aplicación -->
<script src="js/app.script.js"></script>
<!-- Firebase -->
<script type="module" src="js/firebase.js"></script>
<!-- Habilitar popovers -->
<script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
<!-- Habilita tooltips de bootstrap -->
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Loading

0 comments on commit c2191ee

Please sign in to comment.