se agrega informacion de dispositivos del paradero

package-lock.json

@@ -13,7 +13,8 @@
         "bootstrap-icons": "^1.10.5",
         "history": "^5.3.0",
         "svelte-navigator": "^3.2.2",
-        "svelte-pagination": "^0.0.1"
+        "svelte-pagination": "^0.0.1",
+        "svelte-qrcode": "^1.0.0"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.0.4",
@@ -899,6 +900,11 @@
       "resolved": "https://registry.npmjs.org/svelte-pagination/-/svelte-pagination-0.0.1.tgz",
       "integrity": "sha512-CSGrZmwouUixUTWpRSFjmQB86VnhCemc6Vl/AxAPcuOOHKOQp3GLF1ZNLCK1Ik8Nrnf5osLwwwTHctPHfTtGfw=="
     },
+    "node_modules/svelte-qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-qrcode/-/svelte-qrcode-1.0.0.tgz",
+      "integrity": "sha512-WrOvyyxtUzu32gVIDxcFMy0A7uUpbl/8yHaTNOsUaI8W5V4wa7AmReCjffhNY2aS42CqCLJ6qdwUoj/KxmeZzA=="
+    },
     "node_modules/svelte2tsx": {
       "version": "0.1.193",
       "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.193.tgz",

package.json

@@ -19,6 +19,7 @@
     "bootstrap-icons": "^1.10.5",
     "history": "^5.3.0",
     "svelte-navigator": "^3.2.2",
-    "svelte-pagination": "^0.0.1"
+    "svelte-pagination": "^0.0.1",
+    "svelte-qrcode": "^1.0.0"
   }
 }

src/pages/mapas/FormParaderoDispositivos.svelte

@@ -1,5 +1,40 @@
 <script>
+    import QrCode from 'svelte-qrcode'
+    import IconLoading from "../../components/IconLoading.svelte";
+    import { getDispositivos } from "../../services/dispositivos";
+    import { url_base } from "../../services/_config";
+    import { getInfoPublic } from '../../services/paraderos';
+
     export let parada = null
+    let loading = false;
+    let dispositivos = []
+    let url_qrcode = null;
+
+    async function fetchDispositivos({ id_paradero = null }) {
+        try {
+            if (!id_paradero) return;
+            loading = true
+            dispositivos = await getDispositivos({ id_paradero })
+            url_qrcode = `${url_base}/public/infoStop?codigoParadero=${id_paradero}`;
+        } catch (error) {
+            console.log({ error });
+        } finally {
+            loading = false
+        }
+    }
+
+    async function fetchInfoPublico({ id_paradero = null }) {
+        try {
+            if (!id_paradero) return;
+            const info = await getInfoPublic(id_paradero)
+            url_qrcode = info.url_public
+        } catch (error) {
+            console.log({ error });
+        }
+    }
+
+    $: Promise.all([fetchDispositivos(parada), fetchInfoPublico(parada)])
+
 </script>
 
 <div>
@@ -12,19 +47,26 @@
             </tr>
         </thead>
         <tbody>
+            {#each dispositivos as disp}
             <tr>
-                <td>AAAAAAAAAA</td>
+                <td>{disp.id_dispositivo}</td>
-                <td>Panel Led</td>
+                <td>{disp.tipo_dispositivo?.descripcion || '--'}</td>
-            </tr>
-            <tr>
-                <td>BBBBBBBBBB</td>
-                <td>Totem</td>
             </tr>
+            {/each}
         </tbody>
     </table>
 
+    {#if loading}
+        <div>
+            <IconLoading />
+            Cargando información
+        </div>
+    {/if}
+
     <div class="text-center mb-3">
-        <img loading="lazy" width="300" height="300" src="https://play-lh.googleusercontent.com/lomBq_jOClZ5skh0ELcMx4HMHAMW802kp9Z02_A84JevajkqD87P48--is1rEVPfzGVf=w240-h480-rw" alt="">
+        {#if url_qrcode}
+            <QrCode value={url_qrcode} />
+        {/if}
     </div>
     <div class="text-center">
         <button class="btn btn-secondary">Imprimir QR</button>

src/pages/mapas/FormParaderoServicios.svelte

@@ -1,76 +1,54 @@
 <script>
     import IconLoading from "../../components/IconLoading.svelte";
-import { getLinea } from "../../services/lineas";
+    import { getLinea } from "../../services/lineas";
     import { getOperador } from "../../services/operadores";
     import { getLineasParadero } from "../../services/paraderos";
-    // import { createLineaParadero, deleteLineaParadero, getLineasParadero } from "../../services/paraderos";
-    // import ModalRutas from "../rutas/ModalRutas.svelte";
 
-    export let parada = null
+    export let parada = null;
-    // let showModalRutas = false
+    let servicios = [];
-    let servicios = []
+    let loading = false;
-    let loading = false
 
-    async function fetchData({id_paradero = null}) {
+    async function fetchData({ id_paradero = null }) {
         try {
             if (!id_paradero) return;
-            loading = true
+            loading = true;
-            const resultado = await getLineasParadero(id_paradero)
+            const resultado = await getLineasParadero(id_paradero);
 
             const lineas = await Promise.all(
-                resultado.map(({id_linea}) => getLinea(id_linea))
+                resultado.map(({ id_linea }) => getLinea(id_linea)),
-            )
+            );
-            const id_operadores = [ ...new Set(lineas.map(linea => linea.id_operador)) ]
+            const id_operadores = [
+                ...new Set(lineas.map((linea) => linea.id_operador)),
+            ];
 
             const operadores = await Promise.all(
-                id_operadores.map(id_operador => getOperador(id_operador))
+                id_operadores.map((id_operador) => getOperador(id_operador)),
-            )
+            );
 
-            servicios = resultado.map(el => {
+            servicios = resultado.map((el) => {
-                const { id_paradero_linea, id_linea } = el
+                const { id_paradero_linea, id_linea } = el;
-                const linea = lineas.find(el => id_linea === el.id_linea) || {}
+                const linea =
-                const {nombre_operador} = operadores.find(op => op.id_operador === linea.id_operador) || {}
+                    lineas.find((el) => id_linea === el.id_linea) || {};
-                return { id_paradero_linea, ...linea, nombre_operador }
+                const { nombre_operador } =
-            })
+                    operadores.find(
+                        (op) => op.id_operador === linea.id_operador,
+                    ) || {};
+                return { id_paradero_linea, ...linea, nombre_operador };
+            });
         } catch (error) {
-            console.log({ error })
+            console.log({ error });
         } finally {
-            loading = false
+            loading = false;
         }
     }
 
-    $: fetchData(parada)
+    $: fetchData(parada);
-
-    // async function onAgregarRuta({ linea, operador }) {
-    //     try {
-    //         const { id_paradero_linea} = await createLineaParadero(parada.id_paradero, linea.id_linea)
-    //         const { id_linea, route_short_name, route_long_name } = linea;
-    //         const { nombre_operador } = operador;
-    //         servicios = [ ...servicios, { id_paradero_linea, id_linea, route_short_name, route_long_name, nombre_operador } ]
-    //     } catch (error) {
-    //         console.log({ error })
-    //     }
-    // }
-
-    // async function onEliminarRuta({ id_paradero_linea }) {
-    //     try {
-    //         await deleteLineaParadero(id_paradero_linea)
-    //         servicios = servicios.filter(el => el.id_paradero_linea !== id_paradero_linea)
-    //     } catch (error) {
-    //         console.log({ error })
-    //     }
-    // }
 </script>
 
 <div>
     <h4 class="mb-3">Servicios</h4>
 
     <div class="p-3 bg-white">
-        <!-- <button class="btn btn-secondary" on:click|preventDefault={() => showModalRutas = true}>
-            <i class="bi bi-plus-lg"></i> Agregar Servicio
-        </button>
-        <div class="my-3"></div> -->
-
         {#if loading}
             <div>
                 <IconLoading />
@@ -81,9 +59,6 @@ import { getLinea } from "../../services/lineas";
         <ul class="list-group">
             {#each servicios as servicio}
                 <li class="list-group-item d-flex justify-content-between align-items-start">
-                <!-- <a href={"#"} on:click|preventDefault={() => onEliminarRuta(servicio)}>
-                    <i class="bi bi-trash text-danger"></i>
-                </a> -->
                     <div class="ms-2 me-auto">
                         <div class="fw-bold">{servicio.nombre_operador}</div>
                         Destino: {servicio.route_long_name}
@@ -94,9 +69,3 @@ import { getLinea } from "../../services/lineas";
         </ul>
     </div>
 </div>
-
-<!-- <ModalRutas
-    show={showModalRutas}
-    on:select={ev => onAgregarRuta(ev.detail)}
-    on:close={() => showModalRutas = false}
-/> -->

src/services/_config.js

@@ -1,2 +1,3 @@
+export const url_base = document.location.origin;
 export const base = import.meta.env.VITE_BACKEND || '/api';
 export const getToken = () => sessionStorage.getItem('token') || null;

src/services/dispositivos.js

@@ -0,0 +1,41 @@
+
+import { base, getToken } from './_config'
+
+export async function getDispositivos(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/dispositivos/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+
+export async function createDispositivo(data) {
+    const res = await fetch(`${base}/dispositivos/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function updateDispositivo({ id_comuna: id, ...data }) {
+    const res = await fetch(`${base}/dispositivos/${id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function deleteDispositivo(id) {
+    const res = await fetch(`${base}/dispositivos/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.text()
+}

src/services/paraderos.js

@@ -112,3 +112,12 @@ export async function deleteLineaParadero(id_paradero_linea) {
     if (!res.ok) throw await res.text()
     return res.text()
 }
+
+
+export async function getInfoPublic(id_paradero) {
+    const res = await fetch(`${base}/paraderos/info-public/${id_paradero}`, {
+        headers: { "Authorization": `Bearer ${getToken()}` }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}

src/services/tipos_dispositivo.js

@@ -0,0 +1,11 @@
+
+import { base, getToken } from './_config'
+
+export async function getTiposDispositivo(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/tipos/dispositivo/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}