se agrega create y delete dispositivo de paradero

src/pages/mapas/FormParaderoDispositivos.svelte

@@ -1,14 +1,17 @@
 <script>
     import QrCode from 'svelte-qrcode'
     import IconLoading from "../../components/IconLoading.svelte";
-    import { getDispositivos } from "../../services/dispositivos";
+    import { createDispositivo, deleteDispositivo, getDispositivos } from "../../services/dispositivos";
+    import { getTiposDispositivo } from "../../services/tipos_dispositivo";
     import { url_base } from "../../services/_config";
     import { getInfoPublic } from '../../services/paraderos';
 
-    export let parada = null
+    export let parada = null;
     let loading = false;
-    let dispositivos = []
+    let tipos_dispositivos = [];
+    let dispositivos = [];
     let url_qrcode = null;
+    let nuevoDispositivo = null;
 
     async function fetchDispositivos({ id_paradero = null }) {
         try {
@@ -33,28 +36,91 @@
         }
     }
 
-    $: Promise.all([fetchDispositivos(parada), fetchInfoPublico(parada)])
+    async function fetchTiposDispositivos() {
+        try {
+            tipos_dispositivos = await getTiposDispositivo()
+        } catch (error) {
+            console.log({ error })
+        }
+    }
+
+    $: Promise.all([fetchDispositivos(parada), fetchInfoPublico(parada), fetchTiposDispositivos()])
+
+    async function onSave() {
+        try {
+            loading = true
+            await createDispositivo(nuevoDispositivo)
+            const tipo_dispositivo = tipos_dispositivos.find(el => el.id_tipo_dispositivo === nuevoDispositivo.id_tipo_dispositivo) || {}
+            dispositivos = [ ...dispositivos, { ...nuevoDispositivo, tipo_dispositivo }]
+            nuevoDispositivo = null
+        } catch (error) {
+            alert(error)
+        } finally {
+            loading = false
+        }
+    }
+
+    async function onDelete({ id_dispositivo }) {
+        try {
+            if (!confirm(`Desea eliminar el dispositivo ${id_dispositivo} ?`)) return;
+            loading = true
+            await deleteDispositivo(id_dispositivo)
+            dispositivos = dispositivos.filter(el => el.id_dispositivo !== id_dispositivo)
+        } catch (error) {
+            alert(error)
+        } finally {
+            loading = false
+        }
+    }
 
 </script>
 
 <div>
     <h4 class="mb-3">Dispositivos</h4>
-    <table class="table table-bordered">
-        <thead>
-            <tr>
-                <th>ID Dipositivo</th>
-                <th>Tipo</th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each dispositivos as disp}
-            <tr>
-                <td>{disp.id_dispositivo}</td>
-                <td>{disp.tipo_dispositivo?.descripcion || '--'}</td>
-            </tr>
-            {/each}
-        </tbody>
-    </table>
+    {#if !nuevoDispositivo}
+        <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>ID Dipositivo</th>
+                    <th>Tipo</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each dispositivos as disp}
+                <tr>
+                    <td>{disp.id_dispositivo}</td>
+                    <td>{disp.tipo_dispositivo?.descripcion || '--'}</td>
+                    <td><a href={"#"} on:click|preventDefault={() => onDelete(disp)}><i class="bi bi-trash text-danger"></i></a></td>
+                </tr>
+                {/each}
+            </tbody>
+        </table>
+
+        <div class="my-3 text-center">
+            <button class="btn btn-outline-primary" on:click|preventDefault={() => nuevoDispositivo = {}}>Nuevo Dispositivo</button>
+        </div>
+    {:else}
+        <form action="" on:submit|preventDefault={onSave}>
+            <div class="input-group">
+                <div class="input-group-text">ID Dispositivo</div>
+                <input type="text" class="form-control" bind:value={nuevoDispositivo.id_dispositivo}>
+            </div>
+            <div class="input-group">
+                <div class="input-group-text">Tipo Dispositivo</div>
+                <select class="form-select" bind:value={nuevoDispositivo.id_tipo_dispositivo}>
+                    {#each tipos_dispositivos as tipo}
+                    <option value={tipo.id_tipo_dispositivo}>{ tipo.descripcion }</option>
+                    {/each}
+                </select>
+            </div>
+
+            <div class="d-flex justify-content-between my-3">
+                <button type="submit" class="btn btn-primary">Guardar</button>
+                <button class="btn btn-outline-secondary" on:click|preventDefault={() => nuevoDispositivo = null}>Cancelar</button>
+            </div>
+        </form>
+    {/if}
 
     {#if loading}
         <div>
@@ -63,6 +129,8 @@
         </div>
     {/if}
 
+    <div class="m-6"></div>
+
     <div class="text-center mb-3">
         {#if url_qrcode}
             <QrCode value={url_qrcode} />

src/services/dispositivos.js

@@ -21,7 +21,7 @@ export async function createDispositivo(data) {
     return res.json()
 }
 
-export async function updateDispositivo({ id_comuna: id, ...data }) {
+export async function updateDispositivo({ id_dispositivo: id, ...data }) {
     const res = await fetch(`${base}/dispositivos/${id}/`, {
         method: 'PATCH',
         body: JSON.stringify(data),