se filtra resultado de paraderos
Francisco Sandoval
parent
d440df819f
commit
8bf7c13ccc
|
|
@ -8,33 +8,47 @@
|
|||
export let marks = [];
|
||||
|
||||
let mapEl = null;
|
||||
let infoWindow;
|
||||
let google = null;
|
||||
let google_window = null;
|
||||
let google_map = null;
|
||||
let google_marks = []
|
||||
|
||||
$: cargarMarcadores(marks)
|
||||
|
||||
onMount(() => {
|
||||
if (!globalThis.google) {
|
||||
const el = document.createElement('script')
|
||||
el.src = "https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&callback=initMap&v=weekly"
|
||||
el.async = true;
|
||||
el.onload = globalThis.initMap;
|
||||
document.body.appendChild(el)
|
||||
}
|
||||
|
||||
globalThis.initMap()
|
||||
})
|
||||
|
||||
globalThis.initMap = function () {
|
||||
const google = globalThis.google;
|
||||
if (!google || !mapEl) return;
|
||||
globalThis.initMap = function() {
|
||||
google = globalThis.google;
|
||||
google_window = new google.maps.InfoWindow();
|
||||
google_map = new google.maps.Map(mapEl, { zoom, center });
|
||||
cargarMarcadores(marks)
|
||||
}
|
||||
|
||||
const map = new google.maps.Map(mapEl, { zoom, center });
|
||||
infoWindow = new google.maps.InfoWindow();
|
||||
function cargarMarcadores(marks) {
|
||||
if (!google_map) return;
|
||||
|
||||
dispatch('loading', true)
|
||||
|
||||
for (const mark of google_marks) {
|
||||
mark.setMap(null)
|
||||
}
|
||||
|
||||
if (marks.length) google_map.setCenter(marks[0].position)
|
||||
|
||||
google_marks = []
|
||||
for (const mark of marks) {
|
||||
const { position, title, location, url_image, id_paradero } = mark;
|
||||
const marker = new google.maps.Marker({ position, map, title });
|
||||
const marker = new google.maps.Marker({ position, map: google_map, title });
|
||||
|
||||
marker.addListener("click", () => {
|
||||
infoWindow.close();
|
||||
google_window.close();
|
||||
const imagen = url_image ? `<img alt="Imagen" src="${url_image}" width="200">` : ''
|
||||
const html = `
|
||||
<h1>${title}</h1>
|
||||
|
|
@ -43,17 +57,22 @@
|
|||
<hr>
|
||||
${imagen}
|
||||
`
|
||||
infoWindow.setContent(html);
|
||||
infoWindow.open(marker.getMap(), marker);
|
||||
google_window.setContent(html);
|
||||
google_window.open(marker.getMap(), marker);
|
||||
});
|
||||
|
||||
google_marks.push(marker)
|
||||
}
|
||||
google.maps.event.addListener(map, "zoom_changed", function () {
|
||||
console.log({ zoom: map.zoom });
|
||||
});
|
||||
|
||||
// google.maps.event.addListener(google_map, "zoom_changed", function () {
|
||||
// console.log({ zoom: google_map.zoom });
|
||||
// });
|
||||
|
||||
dispatch('loading', false)
|
||||
};
|
||||
|
||||
globalThis.onEdita = function(id_paradero) {
|
||||
infoWindow.close();
|
||||
google_window.close();
|
||||
dispatch('edita', id_paradero)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,28 +5,111 @@
|
|||
import GoogleMap from '$/components/GoogleMap.svelte'
|
||||
import IconLoading from "$/components/IconLoading.svelte";
|
||||
import ModalParadero from "./ModalParadero.svelte";
|
||||
import { getRegiones } from "$/services/regiones";
|
||||
import { getComunas } from "$/services/comunas";
|
||||
|
||||
let data_map = null
|
||||
let paradero = null
|
||||
let id_comuna = ''
|
||||
let id_region = ''
|
||||
let regiones = []
|
||||
let comunas = []
|
||||
let comunas_region = []
|
||||
let search = ''
|
||||
let search_time = null;
|
||||
let search_paraderos = []
|
||||
let loading = false
|
||||
|
||||
$: init_google_map($storeParaderos)
|
||||
$: onSearch(search)
|
||||
|
||||
cargar_regiones_comunas()
|
||||
|
||||
async function cargar_regiones_comunas() {
|
||||
try {
|
||||
regiones = await getRegiones()
|
||||
comunas = await getComunas()
|
||||
} catch (error) {
|
||||
alert(error)
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeRegion() {
|
||||
comunas_region = comunas.filter(el => el.id_region === Number(id_region))
|
||||
runSearch()
|
||||
}
|
||||
|
||||
async function init_google_map(data_inicial) {
|
||||
const paraderos = data_inicial || await getMarcasParaderos()
|
||||
storeParaderos.set(paraderos);
|
||||
data_map = paraderos;
|
||||
runSearch()
|
||||
}
|
||||
|
||||
function onEdita(id_paradero) {
|
||||
paradero = { id_paradero }
|
||||
}
|
||||
|
||||
function onSearch(search) {
|
||||
if (!data_map) return;
|
||||
search_time && clearTimeout(search_time)
|
||||
search_time = setTimeout(runSearch, 1000)
|
||||
}
|
||||
|
||||
function runSearch() {
|
||||
search_paraderos = data_map.marks.filter(el => {
|
||||
if (id_region && !id_comuna) {
|
||||
const existe = comunas_region.findIndex(com => com.id_comuna === el.id_comuna) !== -1;
|
||||
if (!existe) return false;
|
||||
}
|
||||
if (id_comuna && el.id_comuna !== Number(id_comuna)) return false;
|
||||
return !search || el.location.toUpperCase().indexOf(search.toUpperCase()) !== -1;
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageTitle>Paraderos</PageTitle>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<button class="btn btn-outline-secondary" on:click|preventDefault={() => init_google_map(null)}><i class="bi bi-arrow-repeat"></i> Refrescar</button>
|
||||
<div class="row">
|
||||
<div class="col-md-auto">
|
||||
<button class="btn btn-outline-secondary" on:click|preventDefault={() => init_google_map(null)}><i class="bi bi-arrow-repeat"></i> Refrescar</button>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">Región</div>
|
||||
<select bind:value={id_region} class="form-select" on:change={onChangeRegion}>
|
||||
<option value=""></option>
|
||||
{#each regiones as region}
|
||||
<option value={region.id_region}>{region.nombre_region}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">Comuna</div>
|
||||
<select bind:value={id_comuna} class="form-select" on:change={runSearch}>
|
||||
<option value=""></option>
|
||||
{#each comunas_region as comuna}
|
||||
<option value={comuna.id_comuna}>{comuna.nombre_comuna}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
<div class="input-group">
|
||||
<input type="search" bind:value={search} placeholder="busqueda..." class="form-control">
|
||||
<div class="input-group-text"><i class="bi bi-search"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
{#if loading}
|
||||
<span>Cargando ubicaciones...</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{#if data_map}
|
||||
|
|
@ -34,8 +117,9 @@
|
|||
google_api_key={data_map.google_api_key}
|
||||
center={data_map.center}
|
||||
zoom={data_map.zoom}
|
||||
marks={data_map.marks}
|
||||
marks={search_paraderos}
|
||||
on:edita={ev => onEdita(ev.detail)}
|
||||
on:loading={ev => loading = ev.detail}
|
||||
/>
|
||||
{:else}
|
||||
<IconLoading />
|
||||
|
|
|
|||
Loading…
Reference in New Issue