102 lines
3.3 KiB
Svelte
102 lines
3.3 KiB
Svelte
|
<script>
|
||
|
|
import Paginate from "../../components/Paginate.svelte";
|
||
|
|
import TableResponsive from "../../components/TableResponsive.svelte";
|
||
|
|
import { getLineas } from "../../services/lineas";
|
||
|
|
import { getOperador, getOperadores } from "../../services/operadores";
|
||
|
|
import { createEventDispatcher } from "svelte";
|
||
|
|
const dispatch = createEventDispatcher()
|
||
|
|
|
||
|
|
let loading = false;
|
||
|
|
let offset = 0;
|
||
|
|
const limit = 10;
|
||
|
|
let lineas = { results: [], count: 0 };
|
||
|
|
let operadores = [];
|
||
|
|
let filtro = {}
|
||
|
|
|
||
|
|
async function fetchOperadores() {
|
||
|
|
try {
|
||
|
|
operadores = await getOperadores({ ordering: 'nombre_operador' })
|
||
|
|
} catch (error) {
|
||
|
|
alert(error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function fetchData(offset, { id_operador = null }) {
|
||
|
|
try {
|
||
|
|
loading = true;
|
||
|
|
const conditions = { offset, limit, ordering: 'route_short_name' };
|
||
|
|
if (id_operador) conditions.id_operador = id_operador;
|
||
|
|
lineas = await getLineas(conditions)
|
||
|
|
} catch (error) {
|
||
|
|
alert(error)
|
||
|
|
} finally {
|
||
|
|
loading = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getNombreOperador(id) {
|
||
|
|
const operador = operadores.find(el => el.id_operador === id) || {}
|
||
|
|
return operador.nombre_operador || ''
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSelect(linea) {
|
||
|
|
const operador = operadores.find(el => el.id_operador === linea.id_operador) || {}
|
||
|
|
const data = { linea, operador }
|
||
|
|
dispatch('select', data)
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchOperadores()
|
||
|
|
$: fetchData(offset, filtro)
|
||
|
|
$: dispatch('loading',loading)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<slot name="buttons" />
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<div class="input-group">
|
||
|
|
<div class="input-group-text">Operador</div>
|
||
|
|
<select class="form-select" bind:value={filtro.id_operador}>
|
||
|
|
<option value=""></option>
|
||
|
|
{#each operadores as operador}
|
||
|
|
<option value={operador.id_operador}>{operador.nombre_operador}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<TableResponsive>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>ID</th>
|
||
|
|
<th>Operador</th>
|
||
|
|
<th>LUR</th>
|
||
|
|
<th>Dirección</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{#each lineas.results as linea}
|
||
|
|
<tr>
|
||
|
|
<td><a href={"#"} on:click|preventDefault={() => onSelect(linea)}>{linea.id_linea}</a></td>
|
||
|
|
<td>{getNombreOperador(linea.id_operador)}</td>
|
||
|
|
<td>{linea.route_short_name}</td>
|
||
|
|
<td>{linea.route_long_name}</td>
|
||
|
|
</tr>
|
||
|
|
{/each}
|
||
|
|
</tbody>
|
||
|
|
</TableResponsive>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer">
|
||
|
|
<Paginate
|
||
|
|
forcePage={offset / limit}
|
||
|
|
count={lineas.count}
|
||
|
|
{limit}
|
||
|
|
on:page={ev => offset = (ev.detail - 1) * limit}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|