TDTP
/
Sistema_Gestion_Transporte
mirror of https://gitlab.com/m3f_usm/T_digital_Transporte_USM.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

se agrega letrero en mapa de rutas

develop/frontend-parada
Francisco Sandoval 2023-10-27 15:12:17 -03:00
parent 4f11229f3a
commit 18b19902c7
6 changed files with 143 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Modal.svelte
View File

@ -6,6 +6,8 @@
export let className = "";
export let classTitle = "";
export let classHeader = "";
export let classBody = "";
export let classFooter = "";
export let size = "";
</script>
@ -24,10 +26,10 @@
on:click|preventDefault={() => dispatch("close")}>
</button>
</div>
<div class="modal-body">
<div class={"modal-body " + classBody}>
<slot />
</div>
<div class="modal-footer">
<div class={"modal-footer " + classFooter}>
<slot name="buttons" />
<div class="me-auto" />
<button

9
src/pages/mapas/FormParadero.svelte
View File

@ -73,6 +73,15 @@
Propiedades:
<form on:submit|preventDefault={onSave}>
<div class="input-group mb-3">
<div class="input-group-text">Identificador</div>
<input
type="text"
disabled
value={form.id_paradero}
class="form-control"
/>
</div>
<div class="input-group mb-3">
<div class="input-group-text">Nombre</div>
<input

60
src/pages/mapas/ModalLetreroLUR.svelte 100644
View File

@ -0,0 +1,60 @@
<script>
import Modal from "../../components/Modal.svelte";
import { createEventDispatcher } from "svelte";
import { getLetreroLUR } from "../../services/letreros_lur";
const dispatch = createEventDispatcher();
export let codigo = null;
let letrero = {};
let codigo_dividido = []
$: fetchLetreroLUR(codigo)
async function fetchLetreroLUR(codigo) {
try {
letrero = await getLetreroLUR(codigo) || {}
codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi)
} catch (error) {
console.log({ error })
}
}
</script>
<Modal title="Letrero" classBody="bg-white" on:close={() => dispatch('close')}>
<table class="m-auto" cellpadding="10" cellspacing="0"
style="--bgcolor1: {letrero.bgcolor1}; --color1: {letrero.color1}; --bgcolor2: {letrero.bgcolor2}; --color2: {letrero.color2}"
>
<tbody class="color1">
<tr>
<td rowspan="4" width="80" class="color2 text-center">
<h1 class="m-0">{codigo_dividido[0]}</h1>
<h1 class="m-0">{codigo_dividido[1]}</h1>
</td>
<td width="220">{letrero.linea1}</td>
</tr>
<tr>
<td>{letrero.linea2}</td>
</tr>
<tr>
<td>{letrero.linea3}</td>
</tr>
<tr class="color2">
<td>{letrero.linea4}</td>
</tr>
</tbody>
</table>
</Modal>
<style>
.color1 {
background-color: var(--bgcolor1);
color: var(--color1);
}
.color2 {
background-color: var(--bgcolor2);
color: var(--color2);
}
</style>

2
src/pages/mapas/Paraderos.svelte
View File

@ -36,7 +36,7 @@
})
function create_map() {
if (!elMap) return;
if (!elMap || !globalThis.L) return;
if (!L) L = globalThis.L;
if (!iconParada) {
iconParada = L.icon({

26
src/pages/mapas/Rutas.svelte
View File

@ -11,6 +11,7 @@
import { getOperadores } from "$/services/operadores";
import { getLineas } from "$/services/lineas";
import { getRutas } from "$/services/mapas";
import ModalLetreroLUR from "./ModalLetreroLUR.svelte";
let myMap = null
let elMap = null
@ -26,6 +27,11 @@
let marker1 = null
let marker2 = null
let showLetrero = false
let codigo = null
$: codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null
getOperadores()
.then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
.then(data => operadores = data)
@ -42,7 +48,7 @@
})
function create_map() {
if (!elMap) return;
if (!elMap || !globalThis.L) return;
if (!L) L = globalThis.L;
if (!iconPartida) {
iconPartida = L.icon({
@ -119,6 +125,7 @@
Rutas
</PageTitle>
</div>
<div class="col-md-auto">
<div class="input-group">
<div class="input-group-text">Operador</div>
@ -128,10 +135,7 @@
<option value={operador.id_operador}>{operador.nombre_operador}</option>
{/each}
</select>
</div>
</div>
<div class="col-md-auto">
<div class="input-group">
<div class="input-group-text">Linea</div>
<select bind:value={id_linea} class="form-select">
<option value=""></option>
@ -141,6 +145,14 @@
</select>
</div>
</div>
{#if id_operador && codigo}
<div class="col-auto">
<button class="btn btn-secondary"
on:click|preventDefault={() => showLetrero = true}
>Ver Letrero</button>
</div>
{/if}
</div>
<div class="card">
@ -148,3 +160,7 @@
<div bind:this={elMap} style="height: 100vh;"></div>
</div>
</div>
{#if showLetrero}
<ModalLetreroLUR {codigo} on:close={() => showLetrero = false} />
{/if}

48
src/services/letreros_lur.js 100644
View File

@ -0,0 +1,48 @@
import { base, getToken } from './_config'
export async function getLetrerosLUR(params) {
const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
const res = await fetch(`${base}/letreros-lur/${query}`, {
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
})
if (!res.ok) throw await res.text()
return res.json()
}
export async function getLetreroLUR(id) {
const res = await fetch(`${base}/letreros-lur/${id}/`, {
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
})
if (!res.ok) throw await res.text()
return res.json()
}
export async function createLetreroLUR(data) {
const res = await fetch(`${base}/letreros-lur/`, {
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 updateLetreroLUR({ codigo: id = null, ...data }) {
const res = await fetch(`${base}/letreros-lur/${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 deleteLetreroLUR(id) {
const res = await fetch(`${base}/letreros-lur/${id}/`, {
method: 'DELETE',
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
})
if (!res.ok) throw await res.text()
return res.json()
}