From a3d09bde97754a808d17e8b9b61cdc92d9ce1b56 Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <francisco.sandoval@holdconet.cl>
Date: Sat, 2 Mar 2024 19:09:35 -0300
Subject: [PATCH] correccion de tiempo llegada

---
 src/routes/ParaderoInfo.svelte | 538 ++++++++++++++++-----------------
 1 file changed, 253 insertions(+), 285 deletions(-)

diff --git a/src/routes/ParaderoInfo.svelte b/src/routes/ParaderoInfo.svelte
index 1c3cf97..ce7219b 100644
--- a/src/routes/ParaderoInfo.svelte
+++ b/src/routes/ParaderoInfo.svelte
@@ -1,319 +1,287 @@
 <!-- frontend/src/ParaderoInfo.svelte -->
 <script>
-  import { onMount } from 'svelte';
-  import { getAplicacion } from "../services/getinfodevice";
-  import ImagenBus from '../assets/zyro-image.png'
-  
+    import { onMount } from "svelte";
+    import { getAplicacion } from "../services/getinfodevice";
+    import ImagenBus from "../assets/zyro-image.png";
 
-  let paraderoData = null;
+    let paraderoData = null;
+    let nombreParadero = 'Cargando información'
 
-  onMount(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const id = urlParams.get('id');
-    
+    onMount(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const id = urlParams.get("id");
 
-    if (id) {
-      fetchParaderoData(id);
-    } else {
-      console.error('ID no encontrado en la URL.');
+        if (id) {
+            fetchParaderoData(id);
+        } else {
+            console.error("ID no encontrado en la URL.");
+        }
+    });
+
+    async function fetchParaderoData(id) {
+        try {
+            const response = await getAplicacion(id);
+            paraderoData = response;
+            nombreParadero = response.NombreParadero
+            console.log({ nombreParadero })
+        } catch (error) {
+            console.error("Error de red: ", error);
+        }
     }
-  });
 
-  async function fetchParaderoData(id) {
-    try {
-      
-      const response = await getAplicacion(id);
-      console.log(response)
-     
-      paraderoData = response;
-      
-    } catch (error) {
-      console.error('Error de red: ', error);
+    let buses = [
+        { numero: 10, color: "green" },
+        { numero: 10, color: "turquoise" },
+        { numero: 10, color: "violet" },
+        { numero: 10, color: "orange" },
+        { numero: 10, color: "blue" },
+        { numero: 10, color: "red" },
+    ];
+
+    function getCircleColor(numero) {
+        // Puedes personalizar esta función para asignar colores según tus preferencias
+        switch (numero) {
+            case 10:
+                return "darkorange";
+            default:
+                return "gray";
+        }
     }
-  }
 
-  
-  let buses = [
-    { numero: 10, color: 'green' },
-    { numero: 10, color: 'turquoise' },
-    { numero: 10, color: 'violet' },
-    { numero: 10, color: 'orange' },
-    { numero: 10, color: 'blue' },
-    { numero: 10, color: 'red' },
-    
-  ];
+    const colores = [
+        "#5fbabe",
+        "#f05eb1",
+        "#5fab88",
+        "#f7646c",
+        "#5e66b5",
+        "#73776e",
+    ];
 
-  function getCircleColor(numero) {
-    // Puedes personalizar esta función para asignar colores según tus preferencias
-    switch (numero) {
-      case 10:
-        return 'darkorange';
-      default:
-        return 'gray';
+    // Función para obtener un color aleatorio de la lista
+    function getColorAleatorio(index) {
+        return colores[index % 6];
     }
-  }
 
-  const colores = ["#5fbabe", "#f05eb1", " #5fab88", "#f7646c", "#5e66b5", "#73776e"];
+    // Función para calcular la diferencia en minutos entre la hora actual y la hora planificada
+    function calcularDiferenciaMinutos(horaPlanificada) {
+        const horaActual = new Date();
 
-  // Función para obtener un color aleatorio de la lista
-  function getColorAleatorio(index) {
-    return colores[index%6];
-  }
+        const horaPlanificadaArray = horaPlanificada.split(":");
+        const horaPlanificadaDate = new Date(
+            horaActual.getFullYear(),
+            horaActual.getMonth(),
+            horaActual.getDate(),
+            horaPlanificadaArray[0],
+            horaPlanificadaArray[1],
+        );
 
-  // Función para calcular la diferencia en minutos entre la hora actual y la hora planificada
-  function calcularDiferenciaMinutos(horaPlanificada) {
-    const horaActual = new Date();
-    
-    const horaPlanificadaArray = horaPlanificada.split(':');
-    const horaPlanificadaDate = new Date(
-      horaActual.getFullYear(),
-      horaActual.getMonth(),
-      horaActual.getDate(),
-      horaPlanificadaArray[0],
-      horaPlanificadaArray[1]
-    );
+        const diferenciaMilisegundos =
+            horaPlanificadaDate.getTime() - horaActual.getTime();
+        const diferenciaMinutos = Math.abs(
+            Math.floor(diferenciaMilisegundos / (1000 * 60)),
+        );
 
-    const diferenciaMilisegundos = horaPlanificadaDate.getTime() - horaActual.getTime();
-    const diferenciaMinutos = Math.abs(Math.floor(diferenciaMilisegundos / (1000 * 60)));
-    console.log(diferenciaMinutos)
-    
-    return diferenciaMinutos;
-  }
-
-  // Función para determinar el texto de la hora según la diferencia en minutos
-  function obtenerTextoHora(horaPlanificada) {
-    const diferenciaMinutos = calcularDiferenciaMinutos(horaPlanificada);
-
-    if (diferenciaMinutos <= 3) {
-      return "< a 3 Minutos";
-    } else if (diferenciaMinutos <= 5) {
-      return "3-5 Minutos";
-    } else if (diferenciaMinutos <= 10) {
-      return "Menos de 10 minutos";
-    } else {
-      return "Más de 10 minutos";
+        return diferenciaMinutos;
     }
-  }
-  function LetraoNumeroMicro(cadena, flag) {
-  if (!cadena || (flag !== 0 && flag !== 1)) {
-    return "Error: Entrada no válida";
-  }
 
-  // Extraer el número y la letra
-  let numero = "";
-  let letra = "";
-  let i = 0;
-  // Caso en el que la cadena tenga un numero primero
-  if(!isNaN(parseInt(cadena[i]))) {
+    // Función para determinar el texto de la hora según la diferencia en minutos
+    function formatTimeMinutes({ EstimadaGPS: horaPlanificada, patente }) {
+        // const diferenciaMinutos = calcularDiferenciaMinutos(horaPlanificada);
+        const horaActual = new Date();
+        const horaUtc = horaActual.toISOString().substring(0,10) + 'T' + horaPlanificada + 'Z'
+        const horaTrayecto = new Date(horaUtc);
 
-  // Obtener el número
-  while (i < cadena.length && !isNaN(parseInt(cadena[i]))) {
-    numero += cadena[i];
-    i++;
-  }
+        const diferenciaMinutos = (horaTrayecto.getTime() - horaActual.getTime()) / (1000 * 60)
 
-  // Obtener la letra (si hay)
-  while (i < cadena.length) {
-    letra += cadena[i];
-    i++;
-  }
+        console.log({ patente, horaActual, horaTrayecto, horaPlanificada, diferenciaMinutos })
 
-  if (flag === 0) {
-    return numero ? numero : "Error: No se encontró un número";
-  } else if (flag === 1) {
-    return letra ? letra : "Error: No se encontró una letra";
-  }
-}
-else {
-  // Obtener la letra (si hay)
-  while (i < cadena.length && isNaN(parseInt(cadena[i]))) {
-    letra += cadena[i];
-    i++;
-  }
+        if (diferenciaMinutos <= 3) {
+            return "< a 3 Minutos";
+        } else if (diferenciaMinutos <= 5) {
+            return "3-5 Minutos";
+        } else if (diferenciaMinutos <= 10) {
+            return "Menos de 10 minutos";
+        } else {
+            return "Más de 10 minutos";
+        }
+    }
+    function LetraoNumeroMicro(cadena, flag) {
+        if (!cadena || (flag !== 0 && flag !== 1)) {
+            return "Error: Entrada no válida";
+        }
 
-  // Obtener el número
-  while (i < cadena.length ) {
-    numero += cadena[i];
-    i++;
-  }
+        // Extraer el número y la letra
+        let numero = "";
+        let letra = "";
+        let i = 0;
+        // Caso en el que la cadena tenga un numero primero
+        if (!isNaN(parseInt(cadena[i]))) {
+            // Obtener el número
+            while (i < cadena.length && !isNaN(parseInt(cadena[i]))) {
+                numero += cadena[i];
+                i++;
+            }
 
-  if (flag === 1) {
-    return numero ? numero : "Error: No se encontró un número";
-  } else if (flag === 0) {
-    return letra ? letra : "Error: No se encontró una letra";
-  }
+            // Obtener la letra (si hay)
+            while (i < cadena.length) {
+                letra += cadena[i];
+                i++;
+            }
 
-}
-}
+            if (flag === 0) {
+                return numero ? numero : "Error: No se encontró un número";
+            } else if (flag === 1) {
+                return letra ? letra : "Error: No se encontró una letra";
+            }
+        } else {
+            // Obtener la letra (si hay)
+            while (i < cadena.length && isNaN(parseInt(cadena[i]))) {
+                letra += cadena[i];
+                i++;
+            }
 
+            // Obtener el número
+            while (i < cadena.length) {
+                numero += cadena[i];
+                i++;
+            }
 
-
-  
-
+            if (flag === 1) {
+                return numero ? numero : "Error: No se encontró un número";
+            } else if (flag === 0) {
+                return letra ? letra : "Error: No se encontró una letra";
+            }
+        }
+    }
 </script>
 
-<!-- Resto del componente para mostrar los datos -->
-<!-- 
-<main>
-  <h1>Información del Paradero</h1>
-  <p>Detalles del paradero:</p>
-  {#if paraderoData}
-    <pre>{JSON.stringify(paraderoData, null, 2)}</pre>
-  {:else}
-    <p>Cargando datos...</p>
-  {/if}
-</main> -->
-
-
-
-
-
-<style>
-  /* Estilos generales */
-  .contenedor {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 800px;
-    
-    margin: 0 auto; /* Centra el contenedor en la pantalla */
-  }
-
-  .rectangulo-naranja {
-     /* Ancho máximo para que no se vea excesivamente ancho */
-    width: 800px;
-    height: 200px;
-    background-color: #ffa976;
-    border-radius: 20px 20px 0 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-  }
-
-  .nombre-paradero {
-    font-size: 28px;
-    font-weight: bold;
-    color:#fff;
-    margin-right: 10px;
-    margin-left: 120px;
-    
-  }
-
-  .rectangulo-gris {
-   
-     /* Ancho máximo */
-    width: 820px;
-    height: 40px;
-    background-color:   #8c8b8d;
-    display: flex;
-    align-items: center;
-    padding-left:20px;
-    color:#fff
-
-  }
-
-  .cuadricula {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    gap: 5px;
-    margin-top: 10px;
-    
-    /* Ancho máximo */
-  }
-
-  .rectangulo-pequeno {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 266px;
-    height: 120px;
-    border: 1px solid #000000;
-    overflow: hidden;
-  }
-
-  .numero-micro {
-    font-size: 60px;
-    font-weight: bold;
-    margin-right: 80px;
-    color: #8c8b8d;
-  }
-
-  .circulo-letra {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    margin-bottom: 35px;
-    margin-right: 60px;
-  }
-
-  .hora {
-    margin-top: 5px;
-    background-color: #2196f3;
-    color: #fff;
-    width: 266px;
-    
-  }
-</style>
-
-
-
-
 <div class="contenedor">
-  <div class="rectangulo-naranja">
-    <img src={ImagenBus} alt="Bus" width="200" />
-    <div class="nombre-paradero">Nombre de Paradero</div>
-  </div>
-  <div class="rectangulo-gris">Buses que se detienen en esta parada</div>
-  <div class="cuadricula">
-    {#if paraderoData}
-    
-    <!--  
-    {#each paraderoData.DetalleLineas as linea}
-      {#each linea.Llegadas as llegada,index}
-      <div class="rectangulo-pequeno" >
-        <div class="numero-micro">{llegada.Patente.split('-')[1]}</div>
-        <div class="circulo-letra" style="background-color: {getColorAleatorio(index)}">{llegada.Patente.charAt(0)}</div>
-        <div class="hora" style="background-color: {getColorAleatorio(index)}">{obtenerTextoHora(llegada.Planificada)} </div>
-      </div>
-      {/each}colorFondo
-    {/each}
-    -->
-    {#each paraderoData.DetalleLineas as linea,index}
-      <div class="rectangulo-pequeno" >
-        <div class="numero-micro">{LetraoNumeroMicro(linea.Descripcion,0)}</div>
-        {#if linea.colorFondo}
-        <div class="circulo-letra" style="background-color: #{linea.colorFondo}">{LetraoNumeroMicro(linea.Descripcion,1)}</div>
-        <div class="hora" style="background-color: #{linea.colorFondo}">{obtenerTextoHora(linea.Llegadas[0].EstimadaGPS)} </div>
+    <div class="rectangulo-naranja">
+        <img src={ImagenBus} alt="Bus" width="200" />
+        <div class="nombre-paradero">{nombreParadero}</div>
+    </div>
+    <div class="rectangulo-gris">Buses que se detienen en esta parada</div>
+    <div class="cuadricula">
+        {#if paraderoData}
+            {#each paraderoData.DetalleLineas as linea, index}
+                <div class="rectangulo-pequeno">
+                    <div style="position: relative;">
+                        <div class="numero-micro">
+                            {LetraoNumeroMicro(linea.Descripcion, 0)}
+                        </div>
+                        <div class="circulo-letra" style="background-color: #{linea.colorFondo || '#5fbabe'}">
+                            {LetraoNumeroMicro(linea.Descripcion, 1)}
+                        </div>
+                    </div>
+                    <div class="hora" style="background-color: #{linea.colorFondo || '#5fbabe'}">
+                        <div>{linea.Linea}</div>
+                        {#if linea.Llegadas[0]?.EstimadaGPS}
+                            {formatTimeMinutes(linea.Llegadas[0])}
+                            ({linea.Llegadas[0].patente})
+                        {:else}
+                            Sin información
+                        {/if}
+                    </div>
+                </div>
+            {/each}
         {:else}
-        <div class="circulo-letra" style="background-color: #5fbabe">{LetraoNumeroMicro(linea.Descripcion,1)}</div>
-        <div class="hora" style="background-color: #5fbabe">{obtenerTextoHora(linea.Llegadas[0].EstimadaGPS)} </div>
-      {/if} 
-      </div>
-         
-    {/each}
-
-    {:else}
-    <p>Cargando datos...</p>
-  {/if}
-
-  </div>
+            <p>Cargando datos...</p>
+        {/if}
+    </div>
 </div>
 
 
+<style>
+    /* Estilos generales */
+    .contenedor {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 800px;
 
+        margin: 0 auto; /* Centra el contenedor en la pantalla */
+    }
 
-  
+    .rectangulo-naranja {
+        /* Ancho máximo para que no se vea excesivamente ancho */
+        width: 800px;
+        height: 200px;
+        background-color: #ffa976;
+        border-radius: 20px 20px 0 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+    }
+
+    .nombre-paradero {
+        font-size: 28px;
+        font-weight: bold;
+        color: #fff;
+        margin-right: 10px;
+        margin-left: 120px;
+    }
+
+    .rectangulo-gris {
+        /* Ancho máximo */
+        width: 820px;
+        height: 40px;
+        background-color: #8c8b8d;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        color: #fff;
+    }
+
+    .cuadricula {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        gap: 5px;
+        margin-top: 10px;
+
+        /* Ancho máximo */
+    }
+
+    .rectangulo-pequeno {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        width: 266px;
+        min-height: 120px;
+        border: 1px solid #000000;
+        overflow: hidden;
+    }
+
+    .numero-micro {
+        font-size: 60px;
+        font-weight: bold;
+        margin-right: 100px;
+        color: #8c8b8d;
+    }
+
+    .circulo-letra {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+        position: absolute;
+        top: 25px;
+        right: 10px;
+    }
+
+    .hora {
+        margin-top: 5px;
+        background-color: #2196f3;
+        color: #fff;
+        width: 266px;
+    }
+</style>