app operador - asociacion de lineas

src/pages/operadores/Admin.svelte

@@ -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()
@@ -22,7 +24,6 @@
         .catch(error => console.log({ error }))
 
     $: onPage(page) 
-
     async function onPage(p) {
         try {
             loading = true
@@ -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,7 +120,17 @@
 </div>
 
 
+{#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}

src/pages/operadores/ModalOperadorLineas.svelte

@@ -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}`}>&nbsp;</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>

src/services/lineas.js

@@ -10,6 +10,8 @@ export async function getLineas(params) {
     return res.json()
 }
  
+ 
+
 export async function getLinea(id) {
     const res = await fetch(`${base}/lineas/${id}/`, {
         headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }