TDTP
/
ilab_transporte_frontend
forked from TDTP/admin_transporte_frontend
3
0
Fork 0
Code Pull Requests Activity

Modifica mapa, operador, fecha gtfs

develop/Ronald
Ronald Morales 2024-03-24 02:05:19 -03:00
parent d379ff956a
commit 4e2d3c10c9
5 changed files with 156 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/paradaAzul.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

63
src/pages/gtfs_archivo/Admin.svelte
View File

@ -1,5 +1,6 @@
<script>
import Paginate from "$/components/Paginate.svelte";
import { downloadGtfsArchivo, getGtfsArchivo,getGtfsArchivoId,getGtfsBase } from "$/services/gtfs_archivo";
import PageTitle from "$/components/PageTitle.svelte";
import { useLocation } from "svelte-navigator";
@ -15,7 +16,7 @@
let page = 1;
let offset = 0;
let count = 0;
let ordering = 'id_archivo'
let ordering = '-id_gtfs'
let redes = []
let lista_gtfs = []
let location = useLocation()
@ -38,7 +39,7 @@
}
loading = true
offset = (p - 1) * limit;
const data = await getGtfsArchivo({id_red, offset, limit, ordering })
const data = await getGtfsArchivo({id_red, offset, limit, ordering:'-id_gtfs'})
lista_gtfs = data.results;
count = data.count;
} catch (error) {
@ -69,7 +70,31 @@
.finally(() => loading = false)
}
function adjustDateTimeByOffset(isoString) {
// Extraer la fecha, la hora y el desplazamiento de zona horaria
const [datePart, timePart] = isoString.split('T');
const [time, offset] = timePart.split(/(?=[-+])/); // Usa una expresión regular para dividir por el signo más cercano (+ o -)
// Convertir a fecha/hora UTC
const dateTime = new Date(`${datePart}T${time}Z`);
// Extraer las horas y minutos del desplazamiento
const offsetSign = offset[0] === '+' ? 1 : -1; // Determinar si el desplazamiento es positivo o negativo
const [offsetHours, offsetMinutes] = offset.slice(1).split(':').map(Number);
// Ajustar la fecha/hora basándose en el desplazamiento
dateTime.setUTCHours(dateTime.getUTCHours() + offsetSign * offsetHours);
dateTime.setUTCMinutes(dateTime.getUTCMinutes() + offsetSign * offsetMinutes);
// Formatear y retornar la nueva fecha/hora ajustada
const adjustedYear = dateTime.getUTCFullYear();
const adjustedMonth = String(dateTime.getUTCMonth() + 1).padStart(2, '0'); // getUTCMonth() es 0-indexado
const adjustedDate = String(dateTime.getUTCDate()).padStart(2, '0');
const adjustedHours = String(dateTime.getUTCHours()).padStart(2, '0');
const adjustedMinutes = String(dateTime.getUTCMinutes()).padStart(2, '0');
return `${adjustedDate}-${adjustedMonth}-${adjustedYear} ${adjustedHours}:${adjustedMinutes}`;
}
</script>
@ -106,33 +131,39 @@
{#if ordering === '-id_gtfs'}<i class="bi bi-caret-down-fill"></i>{/if}
</th>-->
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('nombre_red')}>Archivo</a>
{#if ordering === 'archivo'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-archivo'}<i class="bi bi-caret-down-fill"></i>{/if}
<a href={"#"} on:click|preventDefault={() => onOrderBy('id_gtfs')}>ID</a>
<!-- {#if ordering === 'id_gtfs'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-id_gtfs'}<i class="bi bi-caret-down-fill"></i>{/if}-->
</th>
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('archivo')}>Archivo</a>
<!-- {#if ordering === 'archivo'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-archivo'}<i class="bi bi-caret-down-fill"></i>{/if}-->
</th>
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('created')}>Creado el</a>
{#if ordering === 'created'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-created'}<i class="bi bi-caret-down-fill"></i>{/if}
<!-- {#if ordering === 'created'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-created'}<i class="bi bi-caret-down-fill"></i>{/if}-->
</th>
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('status')}>Estado</a>
{#if ordering === 'status'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-status'}<i class="bi bi-caret-down-fill"></i>{/if}
<!-- {#if ordering === 'status'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-status'}<i class="bi bi-caret-down-fill"></i>{/if}-->
</th>
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('valid_from')}>Inico Vigencia</a>
{#if ordering === 'status'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-status'}<i class="bi bi-caret-down-fill"></i>{/if}
<!-- {#if ordering === 'valid_from'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-valid_from'}<i class="bi bi-caret-down-fill"></i>{/if}-->
</th>
<th>
<a href={"#"} on:click|preventDefault={() => onOrderBy('vigente')}>Vigente</a>
{#if ordering === 'vigente'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-vigente'}<i class="bi bi-caret-down-fill"></i>{/if}
<!-- {#if ordering === 'vigente'}<i class="bi bi-caret-up-fill"></i>{/if}
{#if ordering === '-vigente'}<i class="bi bi-caret-down-fill"></i>{/if} -->
</th>
</tr>
</thead>
@ -140,7 +171,7 @@
{#each lista_gtfs as app, index}
<tr>
<td class="table-light">{offset + index + 1}</td>
<!--<td>{app.id_gtfs}</td>-->
<td>{app.id_gtfs}</td>
<td>
{#if !loading}
<a href={"#"} on:click|preventDefault={() => onDownload(app)}>{app.archivo}</a>
@ -148,7 +179,7 @@
<span>{app.archivo}</span>
{/if}
</td>
<td>{app.created}</td>
<td>{adjustDateTimeByOffset(app.created)}</td>
<td>{app.status}</td>
<td>{app.valid_from}</td>
<td>{app.vigente ? '✅':'🚫'}</td>

83
src/pages/mapas/Paraderos.svelte
View File

@ -7,12 +7,15 @@
// services
import { getRegiones } from "$/services/regiones"
import { getComunas } from "$/services/comunas"
import { getMarcasParaderos } from "$/services/mapas"
import { getMarcasParaderos, getCoordenadasIniciales } from "$/services/mapas"
// libs
import { storeParaderos } from "$/stores/global"
import imagenParada from '$/assets/parada.png'
import imagenParadaAzul from '$/assets/paradaAzul.png'
import { onMount } from "svelte";
import { getDispositivos } from "../../services/dispositivos";
let myMap = null
let elMap = null
@ -22,6 +25,7 @@
let comunas_x_region = []
let L = null
let iconParada = null
let iconParadaAzul = null
let markers = []
let form = {}
let parada = null
@ -30,10 +34,22 @@
$: myMap && crear_marcadores_por_criterio()
let center = { lat: 0, lng: 0 };
let dispositivosConTotem
//dispositivosConTotem = totemAsignado();
onMount(() => {
if(globalThis.L) create_map();
cargar_paraderos_todos($storeParaderos)
})
obtieneCorrdenadas();
// No es necesario llamar a create_map() , la lógica se maneja a través de la reactividad de center
});
// Reacciona a los cambios en center
$: if(center && globalThis.L) {
create_map();
cargar_paraderos_todos($storeParaderos);
};
function create_map() {
if (!elMap || !globalThis.L) return;
@ -46,6 +62,14 @@
popupAnchor: [0, -16]
})
}
if (!iconParadaAzul) {
iconParadaAzul = L.icon({
iconUrl: imagenParadaAzul,
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -16]
})
}
if (!myMap) {
myMap = L.map(elMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
@ -55,13 +79,19 @@
// obtener coordenadas actuales
// centrar mapa en coordenadas del navegador
navigator.geolocation.getCurrentPosition(
/* navigator.geolocation.getCurrentPosition(
({ coords }) => {
const { latitude, longitude } = coords;
myMap.setView([latitude, longitude], 16)
},
(error) => console.log({ error })
)
)*/
// Configurar la vista del mapa en la ubicación de Concepción con un nivel de zoom, por ejemplo, 16
myMap.setView(center, 15);
}
@ -74,6 +104,20 @@
}
}
async function obtieneCorrdenadas () {
try {
const data = await getCoordenadasIniciales('?');
center.lat = parseFloat(data.initialLat);
center.lng = parseFloat(data.initialLng);
console.log("Coordenadas de inicio:", data);
}
catch (error) {
console.error('Error al obtener las coordenadas iniciales :', error);
}
}
async function cargar_paraderos_todos(data_default) {
try {
loading = true
@ -118,11 +162,18 @@
// filtro coincide a criterio
return true
})
// 3. crear marcadores
for (let mark of paraderos) {
const tieneTotem = false // dispositivosConTotem.some(dispositivo => dispositivo.id_paradero === mark.id_paradero);
const { lat, lng } = mark.position
const marker = L.marker([lat, lng], { icon: iconParada }).addTo(myMap)
const marker = L.marker([lat, lng], {icon: tieneTotem ? iconParadaAzul : iconParada }).addTo(myMap)
const { title, location } = mark;
const html = `${title}<br>${location}`
@ -149,6 +200,22 @@
form.time_search && clearTimeout(form.time_search)
form.time_search = setTimeout(() => crear_marcadores_por_criterio(), 1000)
}
async function totemAsignado( ) {
try {
const dispTotem = await getDispositivos({ id_tipo_dispositivo: 1 });
return dispTotem
} catch (error) {
console.log({ error });
return [];
}
}
</script>
<svelte:head>

31
src/pages/mapas/Rutas.svelte
View File

@ -9,7 +9,7 @@
import { onMount } from "svelte";
// servicios
import { getRutas } from "$/services/mapas";
import { getRutas,getCoordenadasIniciales } from "$/services/mapas";
import ModalLetreroLUR from "./ModalLetreroLUR.svelte";
import FiltroRutas from "./FiltroRutas.svelte";
import { getBusesLinea, getParaderosLinea } from "$/services/lineas";
@ -39,15 +39,22 @@
let timeInterval = null
let fileproto = null
let loading_proto = false
let center = { lat: 0, lng: 0 };
onMount(() => {
create_map()
//create_map()
obtieneCorrdenadas();
return () => {
timeInterval && globalThis.clearInterval(timeInterval)
}
})
// Reacciona a los cambios en center
$: if(center && globalThis.L) {
create_map();
};
function create_map() {
if (!elMap || !globalThis.L) return;
if (!L) L = globalThis.L;
@ -96,15 +103,27 @@
// obtener coordenadas actuales
// centrar mapa en coordenadas del navegador
navigator.geolocation.getCurrentPosition(
/*navigator.geolocation.getCurrentPosition(
({ coords }) => {
const { latitude, longitude } = coords;
myMap.setView([latitude, longitude], 16);
},
(error) => console.log({ error })
)
}
)*/
myMap.setView(center, 14);
}
async function obtieneCorrdenadas () {
try {
const data = await getCoordenadasIniciales('?');
center.lat = parseFloat(data.initialLat);
center.lng = parseFloat(data.initialLng);
console.log("Coordenadas de inicio:", data);
}
catch (error) {
console.error('Error al obtener las coordenadas iniciales :', error);
}
}
async function onMostrarRuta(id_operador, id_linea) {
try {
loading = true

9
src/services/mapas.js
View File

@ -17,4 +17,13 @@ export async function getRutas(params) {
})
if (!res.ok) throw await res.text()
return res.json()
}
export async function getCoordenadasIniciales(params) {
const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
const res = await fetch(`${base}/mapas/coordenadas/${query}`, {
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
})
if (!res.ok) throw await res.text( )
return res.json()
}