From 49f8c84bdfb2c4b2fb6e90d6fad571d78d2695c8 Mon Sep 17 00:00:00 2001 From: Francisco Sandoval Date: Thu, 7 Sep 2023 10:59:19 -0300 Subject: [PATCH] se guarda paradero e imagenes --- src/assets/partida.png | Bin 0 -> 1909 bytes src/assets/termino.png | Bin 0 -> 3272 bytes src/pages/mapas/FormParadero.svelte | 104 ++++++++++++++++++---------- src/pages/mapas/Rutas.svelte | 34 ++++++--- src/services/paraderos.js | 29 ++++++-- 5 files changed, 115 insertions(+), 52 deletions(-) create mode 100644 src/assets/partida.png create mode 100644 src/assets/termino.png diff --git a/src/assets/partida.png b/src/assets/partida.png new file mode 100644 index 0000000000000000000000000000000000000000..15de2895ed5f2a11b5da42bb3a65c093f46b87f1 GIT binary patch literal 1909 zcmV-*2a5QKP)FzjJSO^<%nc#vVWC;f#a9jvXOo6%tt> z3y=^Cq!0uPBo-{lCK3n*7VNS?ELgJ0#>#>P5(ouI1V~7cEDTo6!d^IbYza^7nep2_ zkM?v=Kkhj!YNm11Hm-5TE=TTvQ(aZ}@t^U&xx&Bg5~$?QegMT_Rx$aZ_NEa`xS+o^?>f;eFf` zAJs(sO>xm&WpwgS5*06dqiRYuK9Fe#!_;3mPQ5T;Nj z5t{>J#8z7#iM9d34XcUaf#tF;^9#YET8Mno)I*s+z4L1g8XZ1e9Pxa7I7~ z*1bA4A$TR=P0g%i;wq?B5GoGJm{m-q0#q<6B)`jG$uk)KU*pmsRfT%(2BqO~oa-w- z1TutJkBTB-27-Wr31EPLuy#*!pOm-cxmzoTAV~wzeI$2v(0%%ektzt91?tOJH>JZT z4XIawdhHsa(|nX%GC^tq%#_-~CFp?F<-rvmClqW!2s56}=?Gg)&o6z@2o8B?oRyEt ziTg$1MwR$mP5l0VEeM@cIfx7?7&HW#P^4%`*^rS9_-q^Oj$kbT4{nQs|L<$73$6EJ z?3zQX4qNIq*gqF2{GgGltJDI-A50US+XY^c3Rumdw;X!S;r9pH$70&Ya`&yD|4x(W z3vDn6XCvAtB6QB<_jicD(L#n2fow%+{JhjN%cNrDzqg9t7XZ*Jj?RhRz9cr>v?5!S z=*3Q2v(gLT=SKl(eDgHXXN}Qq`>~cF`Gk1xNDHYLwjzWJ9-Vi%9STJQ6=bIZ(D_%6 z=5O-db~`6?=ygZ&hYb+0TP`s^2Dek833|iP`a_=L8})?CzCiKEb#R~yj^@ztg@$P#WF>+r{@}kyzF*+X;z1$}ErFKs{?c>SF z6<%xLwi}IK712u`z2tGzp>Ny% z!T5t|N^ieR^SIJ#)Hc+a-4S%wA)|&r5Rfs&A4sOF-uyp?tmz_t^EYo&&j1~5Q2*{p z^8fe@{^K$7e>*_)!)4r$8brBbx<=OdH=+H049?JNYhw_41<)&w)uRQd3*n;2O(<@U zrlp%28%iB@M~%iSr*XH-6#je&cV(ERQ>PhuVIrLfYa?k5q4jRu+xCq_2)iTQGT}@@ zPlk>7l}D3d;FgL=tw0!G#LB&X zsoG)j=6QyO1d)k^_}z#BPtPd!8L*ZRt-At1?ns;F@AF99Z={=03g2JFO@+R9X^?6^ z;9(HiFryQD`&=T-c%*DypSMPmI7QEQx^AGCJu;@<>@cZFpPOt39+?1;>@Jl@rzn

{+qQCuRIE8%k` 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 + // imagenes import IconParada from '$/assets/parada-de-autobus.png' - import ImagenParadero from '$/assets/imagen.png' - import { getParadero } from '$/services/paraderos' + // servicios + import { getParadero, updateParadero, getParaderoImagenes, createParaderoImagen, deleteParaderoImagen } from '$/services/paraderos' + // libs import { createEventDispatcher } from "svelte" const dispatch = createEventDispatcher() export let parada = null let canvas = null let form = {} + let imagenes = [] $: init(!!parada) @@ -19,11 +22,42 @@ try { if (parada) { form = await getParadero(parada.id_paradero) + imagenes = await getParaderoImagenes(parada.id_paradero) } } catch(error) { alert(error) } } + + async function onSave() { + try { + await updateParadero(form) + alert('Información guardada') + } catch(error) { + alert(error) + } + } + + async function onSaveImagen({ target: form }) { + try { + const [ file = null ] = form.file1.files; + await createParaderoImagen(parada.id_paradero, file) + imagenes = await getParaderoImagenes(parada.id_paradero) + form.file1.value = '' + } catch (error) { + alert(error) + } + } + + async function onDeleteImagen({ id_paradero_imagen }) { + try { + if (!confirm('Estás seguro de eliminar la imagen?')) return; + await deleteParaderoImagen(id_paradero_imagen) + imagenes = imagenes.filter(imagen => imagen.id_paradero_imagen !== id_paradero_imagen) + } catch (error) { + alert(error) + } + }

@@ -46,53 +80,47 @@
Propiedades: -
-
Nombre
- -
-
-
Descripción
- -
-
-
- -
+
+
+
Nombre
+ +
+
+
Descripción
+ +
+
+
+ +
+
+ {#each imagenes as imagen}
- imagen paradero - - Eliminar - -
-
- imagen paradero - - Eliminar - -
-
- imagen paradero - + imagen paradero + onDeleteImagen(imagen)}> Eliminar
+ {/each} -
-
-
- +
+
+
+
+ +
+
+
+
-
- -
-
+
diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte index 0726542..83ab5fb 100644 --- a/src/pages/mapas/Rutas.svelte +++ b/src/pages/mapas/Rutas.svelte @@ -3,7 +3,8 @@ import PageTitle from "$/components/PageTitle.svelte"; import IconLoading from "$/components/IconLoading.svelte"; - import imagenParada from '$/assets/parada-de-autobus.png' + import imagenPartida from '$/assets/partida.png' + import imagenTermino from '$/assets/termino.png' import { onMount } from "svelte"; // servicios @@ -19,13 +20,20 @@ let id_linea = '' let loading = false let polyline = null - let iconParada = null + let iconPartida = null + let iconTermino = null let L = null let marker1 = null let marker2 = null - getOperadores().then(data => operadores = data).catch(error => alert(error)) - getLineas().then(data => lineas = data).catch(error => alert(error)) + getOperadores() + .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1)) + .then(data => operadores = data) + .catch(error => alert(error)) + getLineas() + .then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1)) + .then(data => lineas = data) + .catch(error => alert(error)) $: cargar_coordenadas(id_operador, id_linea) @@ -36,9 +44,17 @@ function create_map() { if (!elMap) return; if (!L) L = globalThis.L; - if (!iconParada) { - iconParada = L.icon({ - iconUrl: imagenParada, + if (!iconPartida) { + iconPartida = L.icon({ + iconUrl: imagenPartida, + iconSize: [64, 64], + iconAnchor: [32, 64], + popupAnchor: [0, -32] + }) + } + if (!iconTermino) { + iconTermino = L.icon({ + iconUrl: imagenTermino, iconSize: [64, 64], iconAnchor: [32, 64], popupAnchor: [0, -32] @@ -78,8 +94,8 @@ myMap.fitBounds(polyline.getBounds()); if (coordenadas) { - marker1 = L.marker(coordenadas[0], { icon: iconParada }).addTo(myMap) - marker2 = L.marker(coordenadas[coordenadas.length -1], { icon: iconParada }).addTo(myMap) + marker1 = L.marker(coordenadas[0], { icon: iconPartida }).addTo(myMap) + marker2 = L.marker(coordenadas[coordenadas.length -1], { icon: iconTermino }).addTo(myMap) } } catch (error) { diff --git a/src/services/paraderos.js b/src/services/paraderos.js index f60768c..600f607 100644 --- a/src/services/paraderos.js +++ b/src/services/paraderos.js @@ -2,7 +2,7 @@ import { base, getToken } from './_config' export function getUrlImagen(id_paradero) { - return `${base}/paraderos/image/${id_paradero}` + return `${base}/paraderos-image/${id_paradero}` } export async function getParaderos(params) { @@ -51,15 +51,34 @@ export async function deleteParadero(id) { return res.json() } -export async function saveImageParadero(id = null, file) { - const form = new FormData() - form.append('imagen', file) +export async function getParaderoImagenes(id_paradero) { + const res = await fetch(`${base}/paraderos-image/?id_paradero=${id_paradero}`, { + headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" } + }) + if (!res.ok) throw await res.text() + return res.json() +} - const res = await fetch(`${base}/paraderos/image/${id}/`, { +export async function createParaderoImagen(id_paradero, file) { + const form = new FormData() + form.append('id_paradero', id_paradero) + form.append('imagen', file) + form.append('content_type', file.type) + + const res = await fetch(`${base}/paraderos-image/`, { method: 'POST', body: form, headers: { "Authorization": `Bearer ${getToken()}` } }) if (!res.ok) throw await res.text() return res.json() +} + +export async function deleteParaderoImagen(id_paradero_imagen) { + const res = await fetch(`${base}/paraderos-image/${id_paradero_imagen}/`, { + method: 'DELETE', + headers: { "Authorization": `Bearer ${getToken()}` } + }) + if (!res.ok) throw await res.text() + return res.text() } \ No newline at end of file