correccion de tiempo llegada
Francisco Sandoval
parent
e28bc5fb7e
commit
a3d09bde97
|
|
@ -1,319 +1,287 @@
|
||||||
<!-- frontend/src/ParaderoInfo.svelte -->
|
<!-- frontend/src/ParaderoInfo.svelte -->
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
import { getAplicacion } from "../services/getinfodevice";
|
import { getAplicacion } from "../services/getinfodevice";
|
||||||
import ImagenBus from '../assets/zyro-image.png'
|
import ImagenBus from "../assets/zyro-image.png";
|
||||||
|
|
||||||
|
|
||||||
let paraderoData = null;
|
let paraderoData = null;
|
||||||
|
let nombreParadero = 'Cargando información'
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
const id = urlParams.get('id');
|
const id = urlParams.get("id");
|
||||||
|
|
||||||
|
|
||||||
if (id) {
|
if (id) {
|
||||||
fetchParaderoData(id);
|
fetchParaderoData(id);
|
||||||
} else {
|
} else {
|
||||||
console.error('ID no encontrado en la URL.');
|
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) {
|
let buses = [
|
||||||
try {
|
{ numero: 10, color: "green" },
|
||||||
|
{ numero: 10, color: "turquoise" },
|
||||||
const response = await getAplicacion(id);
|
{ numero: 10, color: "violet" },
|
||||||
console.log(response)
|
{ numero: 10, color: "orange" },
|
||||||
|
{ numero: 10, color: "blue" },
|
||||||
paraderoData = response;
|
{ numero: 10, color: "red" },
|
||||||
|
];
|
||||||
} catch (error) {
|
|
||||||
console.error('Error de red: ', error);
|
function getCircleColor(numero) {
|
||||||
|
// Puedes personalizar esta función para asignar colores según tus preferencias
|
||||||
|
switch (numero) {
|
||||||
|
case 10:
|
||||||
|
return "darkorange";
|
||||||
|
default:
|
||||||
|
return "gray";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
const colores = [
|
||||||
let buses = [
|
"#5fbabe",
|
||||||
{ numero: 10, color: 'green' },
|
"#f05eb1",
|
||||||
{ numero: 10, color: 'turquoise' },
|
"#5fab88",
|
||||||
{ numero: 10, color: 'violet' },
|
"#f7646c",
|
||||||
{ numero: 10, color: 'orange' },
|
"#5e66b5",
|
||||||
{ numero: 10, color: 'blue' },
|
"#73776e",
|
||||||
{ numero: 10, color: 'red' },
|
];
|
||||||
|
|
||||||
];
|
|
||||||
|
|
||||||
function getCircleColor(numero) {
|
// Función para obtener un color aleatorio de la lista
|
||||||
// Puedes personalizar esta función para asignar colores según tus preferencias
|
function getColorAleatorio(index) {
|
||||||
switch (numero) {
|
return colores[index % 6];
|
||||||
case 10:
|
|
||||||
return 'darkorange';
|
|
||||||
default:
|
|
||||||
return 'gray';
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
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
|
const horaPlanificadaArray = horaPlanificada.split(":");
|
||||||
function getColorAleatorio(index) {
|
const horaPlanificadaDate = new Date(
|
||||||
return colores[index%6];
|
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
|
const diferenciaMilisegundos =
|
||||||
function calcularDiferenciaMinutos(horaPlanificada) {
|
horaPlanificadaDate.getTime() - horaActual.getTime();
|
||||||
const horaActual = new Date();
|
const diferenciaMinutos = Math.abs(
|
||||||
|
Math.floor(diferenciaMilisegundos / (1000 * 60)),
|
||||||
const horaPlanificadaArray = horaPlanificada.split(':');
|
);
|
||||||
const horaPlanificadaDate = new Date(
|
|
||||||
horaActual.getFullYear(),
|
|
||||||
horaActual.getMonth(),
|
|
||||||
horaActual.getDate(),
|
|
||||||
horaPlanificadaArray[0],
|
|
||||||
horaPlanificadaArray[1]
|
|
||||||
);
|
|
||||||
|
|
||||||
const diferenciaMilisegundos = horaPlanificadaDate.getTime() - horaActual.getTime();
|
return diferenciaMinutos;
|
||||||
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";
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
function LetraoNumeroMicro(cadena, flag) {
|
|
||||||
if (!cadena || (flag !== 0 && flag !== 1)) {
|
|
||||||
return "Error: Entrada no válida";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extraer el número y la letra
|
// Función para determinar el texto de la hora según la diferencia en minutos
|
||||||
let numero = "";
|
function formatTimeMinutes({ EstimadaGPS: horaPlanificada, patente }) {
|
||||||
let letra = "";
|
// const diferenciaMinutos = calcularDiferenciaMinutos(horaPlanificada);
|
||||||
let i = 0;
|
const horaActual = new Date();
|
||||||
// Caso en el que la cadena tenga un numero primero
|
const horaUtc = horaActual.toISOString().substring(0,10) + 'T' + horaPlanificada + 'Z'
|
||||||
if(!isNaN(parseInt(cadena[i]))) {
|
const horaTrayecto = new Date(horaUtc);
|
||||||
|
|
||||||
// Obtener el número
|
const diferenciaMinutos = (horaTrayecto.getTime() - horaActual.getTime()) / (1000 * 60)
|
||||||
while (i < cadena.length && !isNaN(parseInt(cadena[i]))) {
|
|
||||||
numero += cadena[i];
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Obtener la letra (si hay)
|
console.log({ patente, horaActual, horaTrayecto, horaPlanificada, diferenciaMinutos })
|
||||||
while (i < cadena.length) {
|
|
||||||
letra += cadena[i];
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (flag === 0) {
|
if (diferenciaMinutos <= 3) {
|
||||||
return numero ? numero : "Error: No se encontró un número";
|
return "< a 3 Minutos";
|
||||||
} else if (flag === 1) {
|
} else if (diferenciaMinutos <= 5) {
|
||||||
return letra ? letra : "Error: No se encontró una letra";
|
return "3-5 Minutos";
|
||||||
}
|
} else if (diferenciaMinutos <= 10) {
|
||||||
}
|
return "Menos de 10 minutos";
|
||||||
else {
|
} else {
|
||||||
// Obtener la letra (si hay)
|
return "Más de 10 minutos";
|
||||||
while (i < cadena.length && isNaN(parseInt(cadena[i]))) {
|
}
|
||||||
letra += cadena[i];
|
}
|
||||||
i++;
|
function LetraoNumeroMicro(cadena, flag) {
|
||||||
}
|
if (!cadena || (flag !== 0 && flag !== 1)) {
|
||||||
|
return "Error: Entrada no válida";
|
||||||
|
}
|
||||||
|
|
||||||
// Obtener el número
|
// Extraer el número y la letra
|
||||||
while (i < cadena.length ) {
|
let numero = "";
|
||||||
numero += cadena[i];
|
let letra = "";
|
||||||
i++;
|
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) {
|
// Obtener la letra (si hay)
|
||||||
return numero ? numero : "Error: No se encontró un número";
|
while (i < cadena.length) {
|
||||||
} else if (flag === 0) {
|
letra += cadena[i];
|
||||||
return letra ? letra : "Error: No se encontró una letra";
|
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>
|
</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="contenedor">
|
||||||
<div class="rectangulo-naranja">
|
<div class="rectangulo-naranja">
|
||||||
<img src={ImagenBus} alt="Bus" width="200" />
|
<img src={ImagenBus} alt="Bus" width="200" />
|
||||||
<div class="nombre-paradero">Nombre de Paradero</div>
|
<div class="nombre-paradero">{nombreParadero}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rectangulo-gris">Buses que se detienen en esta parada</div>
|
<div class="rectangulo-gris">Buses que se detienen en esta parada</div>
|
||||||
<div class="cuadricula">
|
<div class="cuadricula">
|
||||||
{#if paraderoData}
|
{#if paraderoData}
|
||||||
|
{#each paraderoData.DetalleLineas as linea, index}
|
||||||
<!--
|
<div class="rectangulo-pequeno">
|
||||||
{#each paraderoData.DetalleLineas as linea}
|
<div style="position: relative;">
|
||||||
{#each linea.Llegadas as llegada,index}
|
<div class="numero-micro">
|
||||||
<div class="rectangulo-pequeno" >
|
{LetraoNumeroMicro(linea.Descripcion, 0)}
|
||||||
<div class="numero-micro">{llegada.Patente.split('-')[1]}</div>
|
</div>
|
||||||
<div class="circulo-letra" style="background-color: {getColorAleatorio(index)}">{llegada.Patente.charAt(0)}</div>
|
<div class="circulo-letra" style="background-color: #{linea.colorFondo || '#5fbabe'}">
|
||||||
<div class="hora" style="background-color: {getColorAleatorio(index)}">{obtenerTextoHora(llegada.Planificada)} </div>
|
{LetraoNumeroMicro(linea.Descripcion, 1)}
|
||||||
</div>
|
</div>
|
||||||
{/each}colorFondo
|
</div>
|
||||||
{/each}
|
<div class="hora" style="background-color: #{linea.colorFondo || '#5fbabe'}">
|
||||||
-->
|
<div>{linea.Linea}</div>
|
||||||
{#each paraderoData.DetalleLineas as linea,index}
|
{#if linea.Llegadas[0]?.EstimadaGPS}
|
||||||
<div class="rectangulo-pequeno" >
|
{formatTimeMinutes(linea.Llegadas[0])}
|
||||||
<div class="numero-micro">{LetraoNumeroMicro(linea.Descripcion,0)}</div>
|
({linea.Llegadas[0].patente})
|
||||||
{#if linea.colorFondo}
|
{:else}
|
||||||
<div class="circulo-letra" style="background-color: #{linea.colorFondo}">{LetraoNumeroMicro(linea.Descripcion,1)}</div>
|
Sin información
|
||||||
<div class="hora" style="background-color: #{linea.colorFondo}">{obtenerTextoHora(linea.Llegadas[0].EstimadaGPS)} </div>
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="circulo-letra" style="background-color: #5fbabe">{LetraoNumeroMicro(linea.Descripcion,1)}</div>
|
<p>Cargando datos...</p>
|
||||||
<div class="hora" style="background-color: #5fbabe">{obtenerTextoHora(linea.Llegadas[0].EstimadaGPS)} </div>
|
{/if}
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{:else}
|
|
||||||
<p>Cargando datos...</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue