forked from TDTP/admin_transporte_frontend
105 lines
3.8 KiB
Svelte
105 lines
3.8 KiB
Svelte
|
<script>
|
||
|
|
import { getLineas } from "$/services/lineas";
|
||
|
|
import { getOperadores } from "$/services/operadores";
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
export let id_operador;
|
||
|
|
export let id_linea;
|
||
|
|
export let codigo;
|
||
|
|
export let ver_buses;
|
||
|
|
export let ver_paraderos;
|
||
|
|
export let loading = false;
|
||
|
|
|
||
|
|
let operadores = []
|
||
|
|
let lineas = []
|
||
|
|
let lineas_operador = []
|
||
|
|
onMount(() => {
|
||
|
|
getOperadores({ vigente: 1 })
|
||
|
|
.then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
|
||
|
|
//.then(data => operadores = data)
|
||
|
|
.then(data => {
|
||
|
|
operadores = data;
|
||
|
|
if (operadores.length > 0) {
|
||
|
|
id_operador = operadores[0].id_operador;
|
||
|
|
onChangeOperador();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => globalThis.toast.error(error))
|
||
|
|
|
||
|
|
getLineas({ vigente: 1 })
|
||
|
|
.then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1))
|
||
|
|
.then(data => lineas = data)
|
||
|
|
.catch(error => globalThis.toast.error(error))
|
||
|
|
});
|
||
|
|
|
||
|
|
function onChangeOperador() {
|
||
|
|
id_linea = ''
|
||
|
|
ver_paraderos = false
|
||
|
|
ver_buses = false
|
||
|
|
if (!id_operador) {
|
||
|
|
lineas_operador = []
|
||
|
|
} else {
|
||
|
|
const lineas_filtradas = lineas.filter(el => el.id_operador === id_operador);
|
||
|
|
lineas_operador = lineas_filtradas.sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1);
|
||
|
|
if (lineas_operador.length > 0) {
|
||
|
|
id_linea = lineas_operador[0].id_linea;
|
||
|
|
onChangeLinea();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onChangeLinea() {
|
||
|
|
codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null
|
||
|
|
ver_paraderos = false
|
||
|
|
ver_buses = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md">
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-text">Operador</div>
|
||
|
|
<select bind:value={id_operador} class="form-select" on:change={onChangeOperador}>
|
||
|
|
<option value=""></option>
|
||
|
|
{#each operadores as operador}
|
||
|
|
<option value={operador.id_operador}>{operador.nombre_operador}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-text">Linea</div>
|
||
|
|
<select bind:value={id_linea} class="form-select" style="font-family: monospace;" on:change={onChangeLinea}>
|
||
|
|
<option value=""></option>
|
||
|
|
{#each lineas_operador as linea}
|
||
|
|
<option value={linea.id_linea}>{@html linea.route_short_name.padEnd(6).replace(/ /g,' ')} {linea.route_long_name}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="col-md-auto">
|
||
|
|
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input class="form-check-input" type="checkbox" role="switch" id="check-ver-buses-recorrido"
|
||
|
|
disabled={!id_linea}
|
||
|
|
bind:checked={ver_buses}>
|
||
|
|
<label class="form-check-label" for="check-ver-buses-recorrido">Ver Buses del Recorrido</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-check form-switch mb-3">
|
||
|
|
<input class="form-check-input" type="checkbox" role="switch" id="check-ver-paraderos"
|
||
|
|
disabled={!id_linea}
|
||
|
|
bind:checked={ver_paraderos}>
|
||
|
|
<label class="form-check-label" for="check-ver-paraderos">Ver Paraderos</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if loading}
|
||
|
|
<div class="spinner-grow spinner-grow-sm text-danger" role="status">
|
||
|
|
<span class="visually-hidden">Loading...</span>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|