app operador - asociacion de lineas
Ronald Morales
parent
4829634194
commit
e83bde6c69
|
|
@ -3,6 +3,7 @@
|
|||
import { getOperadores } from "$/services/operadores";
|
||||
import PageTitle from "$/components/PageTitle.svelte";
|
||||
import ModalOperador from "./ModalOperador.svelte";
|
||||
import ModalOperadorLineas from "./ModalOperadorLineas.svelte";
|
||||
import { useLocation } from "svelte-navigator";
|
||||
import { getPermisosPath } from "$/services/usuarios";
|
||||
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
let ordering = 'id_operador'
|
||||
let operadores = []
|
||||
let operador = null
|
||||
let verLineas =null
|
||||
let loading = false;
|
||||
let escritura = false;
|
||||
let location = useLocation()
|
||||
|
|
@ -21,12 +23,11 @@
|
|||
.then(data => escritura = data.escritura)
|
||||
.catch(error => console.log({ error }))
|
||||
|
||||
$: onPage(page)
|
||||
|
||||
$: onPage(page)
|
||||
async function onPage(p) {
|
||||
try {
|
||||
loading = true
|
||||
offset = (p - 1) * limit;
|
||||
offset = (p - 1) * limit;
|
||||
const data = await getOperadores({ offset, limit, ordering })
|
||||
operadores = data.results;
|
||||
count = data.count;
|
||||
|
|
@ -41,6 +42,11 @@
|
|||
operador = item;
|
||||
}
|
||||
|
||||
function onVerLineas(item){
|
||||
verLineas = item;
|
||||
operador = item;
|
||||
}
|
||||
|
||||
function onNuevo() {
|
||||
operador = {}
|
||||
}
|
||||
|
|
@ -83,6 +89,7 @@
|
|||
{#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>
|
||||
<th><a href={"#"}>Lineas</a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -92,6 +99,8 @@
|
|||
<td>{app.id_operador}</td>
|
||||
<td><a href={"#"} on:click|preventDefault={() => onEdita(app)}>{app.nombre_operador}</a></td>
|
||||
<td>{app.vigente ? '✅':'🚫'}</td>
|
||||
<td align="center"><a href={"#"} on:click|preventDefault={() => onVerLineas(app)}><i class="bi bi-bus-front-fill"></i></a></td>
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
|
@ -111,12 +120,22 @@
|
|||
</div>
|
||||
|
||||
|
||||
{#if operador}
|
||||
<ModalOperador
|
||||
{operador}
|
||||
{escritura}
|
||||
on:close={() => operador = null}
|
||||
on:refresh={() => onPage(page)}
|
||||
{#if verLineas}
|
||||
{#if operador}
|
||||
<ModalOperadorLineas
|
||||
{operador}
|
||||
{escritura}
|
||||
on:close={() => operador = null}
|
||||
on:close={() => verLineas = null}
|
||||
on:refresh={() => onPage(page)}
|
||||
/>
|
||||
{/if}
|
||||
{:else if operador}
|
||||
<ModalOperador
|
||||
{operador}
|
||||
{escritura}
|
||||
on:close={() => operador = null}
|
||||
on:refresh={() => onPage(page)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
<script>
|
||||
import Modal from "../../components/Modal.svelte";
|
||||
import { getOperador } from "$/services/operadores";
|
||||
import { getLinea, getLineas, updateLinea } from "$/services/lineas";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import TableResponsive from "$/components/TableResponsive.svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let operador = {};
|
||||
export let escritura = false;
|
||||
|
||||
let form = {}
|
||||
let loading = false;
|
||||
let lineas=[];
|
||||
let lineasNull=[];
|
||||
|
||||
//console.log({ operador })
|
||||
$: begin(operador.id_operador )
|
||||
|
||||
async function begin(id) {
|
||||
try {
|
||||
|
||||
if (!id) return;
|
||||
form = await getOperador(id) || {}
|
||||
|
||||
} catch (error) {
|
||||
globalThis.toast.success(error.detail || error)
|
||||
}
|
||||
}
|
||||
|
||||
getLineas()
|
||||
.then(data => {
|
||||
lineas = data.filter(linea =>
|
||||
linea.id_operador === operador.id_operador || linea.id_operador === null
|
||||
);
|
||||
lineas = lineas.map(linea => ({
|
||||
...linea,
|
||||
activo: linea.id_operador !== null,
|
||||
modificado: false ,
|
||||
}));
|
||||
// Ordenar las líneas por route_long_name
|
||||
lineas = lineas.sort((a, b) => {
|
||||
if (a.route_long_name < b.route_long_name) return -1;
|
||||
if (a.route_long_name > b.route_long_name) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => globalThis.toast.error(error));
|
||||
|
||||
|
||||
|
||||
|
||||
function toggleCheckbox(linea, event) {
|
||||
const newState = event.target.checked;
|
||||
linea.activo = newState;
|
||||
linea.modificado = true;
|
||||
lineas = lineas; // Asignar el array a sí mismo para asegurar la reactividad en Svelte
|
||||
//console.log({ linea })
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
async function onSave() {
|
||||
const lineasModificadas = lineas
|
||||
.filter(linea => linea.modificado)
|
||||
.map(linea => ({
|
||||
id_linea: linea.id_linea,
|
||||
id_operador: linea.activo ? operador.id_operador : null // Establece id_operador basado en 'activo'.
|
||||
}));
|
||||
|
||||
try {
|
||||
loading = true;
|
||||
if (operador.id_operador)
|
||||
{
|
||||
|
||||
for (let ln of lineasModificadas)
|
||||
{
|
||||
//console.log({ ln })
|
||||
form = await updateLinea(ln)
|
||||
}
|
||||
|
||||
}
|
||||
globalThis.toast.success('Se han guardado las lineas asociadas ')
|
||||
dispatch('refresh')
|
||||
dispatch('close')
|
||||
} catch (error) {
|
||||
if (error.detail) {
|
||||
globalThis.toast.success(error.detail)
|
||||
} else {
|
||||
globalThis.toast.success(JSON.stringify(error))
|
||||
}
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<form action="" on:submit|preventDefault={onSave}>
|
||||
<Modal title={'Lineas Asociadas a ' + (operador.nombre_operador )}
|
||||
size="lg"
|
||||
on:close={() => dispatch('close')} >
|
||||
|
||||
<div class={"form" + (escritura ? '' : ' disabled')}>
|
||||
<TableResponsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Linea</th>
|
||||
<th>Asociada</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each lineas as linea}
|
||||
<tr>
|
||||
<td>{linea.route_long_name}</td>
|
||||
<td>
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
bind:checked = {linea.activo}
|
||||
on:change={(event) => toggleCheckbox(linea, event)}
|
||||
id={`check-linea-${linea.id_linea}`}>
|
||||
<label class="form-check-label" for={`check-linea-${linea.id_linea}`}> </label>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</TableResponsive>
|
||||
</div>
|
||||
|
||||
<svelte:fragment slot="buttons">
|
||||
{#if escritura}
|
||||
<button class="btn btn-primary" type="submit" disabled={loading}>Guardar</button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.disabled { pointer-events: none !important; }
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
import { base, getToken } from './_config'
|
||||
|
||||
export async function getLineas(params) {
|
||||
export async function getLineas(params) {
|
||||
const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
|
||||
const res = await fetch(`${base}/lineas/${query}`, {
|
||||
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
|
||||
|
|
@ -9,6 +9,8 @@ export async function getLineas(params) {
|
|||
if (!res.ok) throw await res.text()
|
||||
return res.json()
|
||||
}
|
||||
|
||||
|
||||
|
||||
export async function getLinea(id) {
|
||||
const res = await fetch(`${base}/lineas/${id}/`, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue