From a8159cf1e4bc11a7530fe93b0b1af8e10be8c990 Mon Sep 17 00:00:00 2001 From: DiegoGDPR <106365170+diochos@users.noreply.github.com> Date: Tue, 25 Jun 2024 00:24:07 -0600 Subject: [PATCH] Barra de seguimiento funcional con MySQL --- .DS_Store | Bin 6148 -> 6148 bytes index.js | 21 +- src/.DS_Store | Bin 6148 -> 8196 bytes src/{empleadoTest.html => colaborador.html} | 26 -- src/public/bill.svg | 13 +- src/public/brush.svg | 13 +- src/seguimiento.css | 140 ++++++- src/views/seguimiento.ejs | 413 ++++++++++---------- 8 files changed, 365 insertions(+), 261 deletions(-) rename src/{empleadoTest.html => colaborador.html} (64%) diff --git a/.DS_Store b/.DS_Store index b64aba4d3d92cd73edb5603908eced7e1dc59a63..c9c43e3c0c85aadc5fb0ff5086af4102cff0deef 100644 GIT binary patch delta 34 pcmZoMXffC@jYZVhz(_~I#K5RlN1@u##MoR%!NSyd^J97ytkO diff --git a/index.js b/index.js index 222543b..13b8186 100644 --- 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 index 239a2a492011743ace10a309d238ed37ba984b3c..ebb5f9b3564cb7b58394762a2557c591cf1215a0 100644 GIT binary patch delta 649 zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMA$hI+HH}hr%jz7$c**Q2SHn1?V zP3B>dX52YhgQd_zvbx&Xz(_~I#K5RlN1@u##MoR%!NSzIww9AaR9W9TC_XzUH!r^% zXd)0WGD2tuUMLNtdL}<&ab*&do~+4wM><}Bzc?em+%q{pFQ6#3EHkw{A`{3C&a6tE ztiUGE)bL`mBbyQzr?NvFME~SmHbq9s$^C4ijA@gXve}EXGL$i7GNdw;GZZJ47Z)Vu zx`I8d)0ZC>WcW)aocy8yZ^}=_r_+o7L8Ga)>JHTL;Bw=j7()_e?%0AkWx4`JsR- zla$zG4Z%Co5t+&PdBK@gsqq5*#TohKo!%}N?ghgaX=>k z0q5i#Aw_WkMkPjVMiWLeMtepNMo-2l#uUa>#=OZ(gzPsj6IEth%+A3f$PCdTzzw8b eLGIsJ_?>w&zl
- -
@@ -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)); - }); diff --git a/src/public/bill.svg b/src/public/bill.svg index 08f15b8..5929c13 100644 --- a/src/public/bill.svg +++ b/src/public/bill.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/src/public/brush.svg b/src/public/brush.svg index ad38fc7..6c3e054 100644 --- a/src/public/brush.svg +++ b/src/public/brush.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/src/seguimiento.css b/src/seguimiento.css index e2a5c54..6d8975d 100644 --- 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,6 +926,7 @@ flex-direction: column; align-items: center; justify-content: center; + } } @@ -932,23 +934,133 @@ /* 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; +} \ No newline at end of file diff --git a/src/views/seguimiento.ejs b/src/views/seguimiento.ejs index 16fe17d..bf7ec00 100644 --- a/src/views/seguimiento.ejs +++ b/src/views/seguimiento.ejs @@ -1,242 +1,223 @@ - + - - - - - + + + + +
- + -
- +
+ -
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
COMPANY
-
-

Profile

-

About us

-

Contact

-

Address

-
-
RETURNS
-
-

FAQs

-

Size Guide

-

Contact us

-
-
-

Lorem ipsum dolor sit amet,

-

consetetur sadipscing elitr,

-

sed diam nonumy

-
-
Caribbean House Studio
-
-
-
-
- Dirección de Envio -
-

Nombre: Juan Quintana

-

Calle: Av. Siempre Viva 742

-

Ciudad: Springfield

-

Estado: IL

-

Código Postal: 62704

+
+
- -
-
- Tiempo Estimado - - - - - 2 -
- - - - - Días +
+
-
-
- Detalles de la Etapa Actual -
- El mueble ha sido empaquetado y enviado a la dirección indicada. - Se espera que llegue en los próximos días. -
- -
-
-
-
- <% for (let i = 1; i <= 7; i++) { %> -
- -

- <%= i === 1 ? 'Pedido Confirmado' : i === 2 ? 'Insumos Listos' : i === 3 ? 'Maquila en Proceso' : i === 4 ? 'Barniz' : i === 5 ? 'Armado' : i === 6 ? 'En Camino' : 'Entrega' %> -

-
- <% } %> -
-
-
-
-
- - -
- Información del pedido -
-

Mueble: Credenza

-

Material: Madera

-

Dimensiones: 180 x 90 x 40 cm

-

Acabado: Barnizado

-

Color: Natural

+
+
+
+
+
-
-
Credenza
-
ID de Envío:
-
12345678
-
-
-
- +
+
+
+
-
-
- +
COMPANY
+
+

Profile

+

About us

+

Contact

+

Address

-
-
- +
RETURNS
+
+

FAQs

+

Size Guide

+

Contact us

-
-
- +
+

Lorem ipsum dolor sit amet,

+

consetetur sadipscing elitr,

+

sed diam nonumy

-
-
-
-
-
-
- +
Caribbean House Studio
-
INICIO
-
CATÁLOGO
-
BLOG
-
- NUESTRA HISTORIA -
- SEGUIMIENTO - - - +
+
+
+ Dirección de Envio +
+

Nombre: Juan Quintana

+

Calle: Av. Siempre Viva 742

+

Ciudad: Springfield

+

Estado: IL

+

Código Postal: 62704

+
+ +
+
+ Tiempo Estimado + + + 2 +
+ + + Días +
+
+
+ Detalles de la Etapa Actual +
+ El mueble ha sido empaquetado y enviado a la dirección indicada. Se espera que llegue en los próximos días. +
+ +
+
+ +
+
Estado del Pedido
+
+
+ <% for (let i = 1; i <= 7; i++) { %> +
+ + +
+ <% } %> +
+
+
+
+
+ +
+
Pedido
Confirmado
+
Insumos
Listos
+
Maquila
en Proceso
+
Barniz
+
Armado
+
En Camino
+
Entrega
+
+ +
+
+
+
+
+ -
- - -
1
- -
+
+
+
+ +
+
INICIO
+
CATÁLOGO
+
BLOG
+
NUESTRA HISTORIA
+ SEGUIMIENTO + + + + +
1
+ +
- + +