Barra de seguimiento funcional con MySQL

dzechalaz · Jun 25, 2024 · a8159cf · a8159cf
1 parent fd53fde
commit a8159cf
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 261 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.js b/index.js
@@ -2,6 +2,7 @@ const express = require('express');
 const app = express();
 const mysql = require('mysql');
 const path = require('path');
+const bodyParser = require('body-parser');
 
 const port = process.env.PORT || 3000;
 
@@ -21,9 +22,10 @@ app.set('view engine', 'ejs');
 app.set('views', path.join(__dirname, 'src/views'));
 
 app.use(express.static(path.join(__dirname, 'src')));
+app.use(bodyParser.json());
 
 app.get("/", (req, res) => {
-  res.sendFile(path.join(__dirname, 'src', 'index.html'));
+  res.sendFile(path.join(__dirname, 'src/index.html'));
 });
 
 app.get("/seguimiento", (req, res) => {
@@ -34,8 +36,21 @@ app.get("/seguimiento", (req, res) => {
   });
 });
 
-app.get("/empleadoTest", (req, res) => {
-  res.sendFile(path.join(__dirname, 'src', 'empleadoTest.html'));
+app.get("/colaborador", (req, res) => {
+  res.sendFile(path.join(__dirname, 'src/colaborador.html'));
+});
+
+app.post('/actualizar_valor', (req, res) => {
+  const nuevoValor = req.body.valor;
+  const query = 'UPDATE Datos SET valor = ? WHERE id = ?';
+  db.query(query, [nuevoValor, '463912'], (err, result) => {
+    if (err) {
+      console.error('Error al actualizar el valor:', err);
+      res.status(500).send('Error al actualizar el valor');
+      return;
+    }
+    res.send('Valor actualizado correctamente');
+  });
 });
 
 app.listen(port, () => {

diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/empleadoTest.html → src/colaborador.html b/src/empleadoTest.html → src/colaborador.html
@@ -11,8 +11,6 @@
 </head>
 <body>
     <div class="seguimiento-container">
-
-        </div>
         <div class="botones-container">
             <button class="boton" onclick="cambiarValor(1)">Pedido Confirmado</button>
             <button class="boton" onclick="cambiarValor(2)">Insumos Listos</button>
@@ -36,33 +34,9 @@
             .then(response => response.text())
             .then(data => {
                 alert(data);
-                actualizarCirculos(nuevoValor);
             })
             .catch(error => console.error('Error:', error));
         }
-
-        function actualizarCirculos(valor) {
-            for (let i = 1; i <= 7; i++) {
-                const circulo = document.getElementById(`circulo${i}`);
-                if (i < valor) {
-                    circulo.src = "./public/ellipse-22.svg"; // Verde
-                } else if (i === valor) {
-                    circulo.src = "./public/ellipse-28.svg"; // Naranja
-                } else {
-                    circulo.src = "./public/ellipse-29.svg"; // Gris
-                }
-            }
-        }
-
-        // Aquí puedes inicializar el estado de los círculos según el valor actual de la base de datos
-        document.addEventListener('DOMContentLoaded', (event) => {
-            fetch('/obtener_valor')
-            .then(response => response.json())
-            .then(data => {
-                actualizarCirculos(data.valor);
-            })
-            .catch(error => console.error('Error:', error));
-        });
     </script>
 </body>
 </html>
diff --git a/src/public/bill.svg b/src/public/bill.svg
diff --git a/src/public/brush.svg b/src/public/brush.svg
diff --git a/src/seguimiento.css b/src/seguimiento.css
@@ -375,6 +375,7 @@
   bottom: 20px;
   left: 28.65px;
   height: 225px;
+  top: 620px;
 }
 .progressgray-icon,
 .progressgreen-icon {
@@ -410,7 +411,7 @@
   left: -2px;
   border-top: 2px solid var(--color-lightseagreen);
   box-sizing: border-box;
-  height: 4px;
+  height: 40px;
 }
 .estado-del-pedido {
   position: absolute;
@@ -547,14 +548,14 @@
 .entregado-icon,
 .seguimiento4 {
   position: absolute;
-  top: calc(50% + 2px);
+  top: calc(50% + 50px);
   right: 126.8px;
   width: 28.1px;
   height: 29.4px;
 }
 .seguimiento4 {
   width: 97.07%;
-  top: calc(50% - 19.5px);
+
   right: 1.47%;
   left: 1.47%;
   height: 183px;
@@ -568,9 +569,9 @@
   top: 50px;
   right: 0;
   left: -2px;
-  border-top: 2px solid var(--color-lightseagreen);
-  box-sizing: border-box;
-  height: 4px;
+  border: 2px solid var(--unnamed-color-38afa7);
+  border: 2px solid #38AFA7;
+  opacity: 1;
 }
 .imagespace,
 .main-image-icon {
@@ -925,30 +926,141 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
   }
 }
 
 /* TESTEOOOOO */
 /* Add these new styles */
 .etapas-container {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between; /* Opción para distribuir con mayor espacio posible entre ellos */
   align-items: center;
-  margin: 20px 0;
-}
+  margin: 40px 150px;
+  position: relative;
+  } 
 
 .etapa {
+  display: flex;
+  flex-direction: column; /* Coloca los elementos uno debajo del otro */
+  align-items: center; /* Centra los elementos en cada etapa */
   text-align: center;
+  position: relative;
+
 }
 
 .etapa .circulo {
   display: block;
-  margin: 0 auto;
-  width: 40px;
-  height: 40px;
+  margin: -10px 0px;
+  width: 50px;
+  height: 50px;
+  z-index: 3;
+
+}
+
+.textos-container {
+  display: flex;
+  left: -31px;
+  justify-content: space-evenly; /* Justifica los textos uniformemente */
+  align-items: top  ;
+  margin: 45px 10px;
+  position: relative;
+}
+
+.texto {
+  text-align: center; /* Asegura que el texto esté centrado */
+  margin-top: -60px;
+  margin-left: 90px;
+  position: relative;
+  font: normal normal medium 17px/20px Montserrat;
+  letter-spacing: 0px;
+  color: #707070;
+  opacity: 1; 
+}
+
+.texto:nth-child(2) {
+  left: -5px;
+}
+.texto:nth-child(3) {
+  left: -8px;
+}
+.texto:nth-child(4) {
+  left: -1px;
+}
+.texto:nth-child(5) {
+  left: 16px;
+}
+.texto:nth-child(6) {
+  left: 16px;
+}
+.texto:nth-child(7) {
+  left: 15px;
 }
 
-.etapa .texto {
-  margin-top: 10px;
+.etapa img {
+  position: absolute;
+  top: -20px; /* Ajusta este valor para bajar los íconos */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 30px; /* Ajusta el tamaño del ícono según sea necesario */
+  height: 30px;
+  z-index: 4; /* Asegura que el ícono esté encima del círculo */
+}
+/* Título del Estado del Pedido */
+.estado-pedido-titulo {
+  position: absolute;
+  margin-left: 20px;
+  margin-top: -150px;
+  text-align: left;
+  top: 50%;
+  font: normal normal normal 31px/41px Josefin Sans;
+  letter-spacing: 0px;
+  color: #414141;
+  opacity: 1;
 }
+/* Línea de progreso */
+.linea-Segment {
+  position: absolute;
+  top: -10px;
+  left: 0;
+  right: 0;
+  border: 2px solid var(--unnamed-color-38afa7);
+  border: 2px solid #38AFA7;
+  opacity: 1;
+}
+.linea-base {
+  border: 3px solid #B2B2B2;
+  position: absolute;
+  top: 32px;
+  left: 150px;
+  width: 1000px;
+  height: 0px;
+  z-index: 0;
+
+}
+
+
+
+.linea-Proceso {
 
+  border: 3px solid #44AFA7;
+  position: absolute;
+  top: 50%; /* Ajusta la posición vertical según sea necesario */
+  left: 0;
+
+  z-index: 2; /* Asegura que la línea esté detrás de los círculos */
+  transition: width 1s ease; /* Añade una transición suave */
+  top: 32px;
+  left: 130px;
+}
+
+.linea-naranja {
+  border: 3px solid #D8A379;
+  position: absolute;
+  top: 50%; /* Ajusta la posición vertical según sea necesario */
+  left: 0;
+  z-index: 1; /* Asegura que la línea esté detrás de los círculos */
+  transition:  1s ease; /* Añade una transición suave */
+  top: 32px;
+  left: 130px;
+}