correccion de tiempo llegada
Francisco Sandoval
parent
e28bc5fb7e
commit
a3d09bde97
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue