Sistema_Gestion_Transporte/src/pages/mapas/Paraderos.svelte

<script>
    import { onMount } from 'svelte';
    import PageTitle from "$/components/PageTitle.svelte";
    import { getMarcasParaderos } from "$/services/mapas";
    import { storeParaderos } from "$/stores/global";
    import GoogleMap from '$/components/MyMap.svelte'
    import IconLoading from "$/components/IconLoading.svelte";
    import ModalParadero from "./ModalParadero.svelte";
    import { getRegiones } from "$/services/regiones";
    import { getComunas } from "$/services/comunas";

    let google_api_key = null
    let google_marks = []
    let google_window = null
    let google_map = null
    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

    $: onSearch(search)

    cargar_regiones_comunas()

    onMount(() => {
        cargar_paraderos_todos($storeParaderos)
    })

    async function cargar_regiones_comunas() {
        try {
            regiones = await getRegiones()
            comunas = await getComunas()
        } catch (error) {
            alert(error)
        }
    }

    async function cargar_paraderos_todos(data_default) {
        try {
            loading = true
            const paraderos = data_default || await getMarcasParaderos()
            storeParaderos.set(paraderos);
            data_map = paraderos;
            google_api_key = paraderos.google_api_key;
            runSearch()
        } catch (error) {
            alert(error)
        } finally {
            loading = false
        }
    }

    function onChangeRegion() {
        comunas_region = comunas.filter(el => el.id_region === Number(id_region))
        runSearch()
    }

    function onSearch(search) {
        if (!data_map) return;
        search_time && clearTimeout(search_time)
        search_time = setTimeout(runSearch, 1000)
    }

    function runSearch() {
        console.log('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;
        })

        onMostrarParaderos(google_map)
    }


    function onMostrarParaderos(map) {
        const google = globalThis.google;
        if (!google) return;

        console.log('onMostrarParaderos', map)
        if (!google_map) google_map = map;
        
        // elimina las marcas anteriores en el mapa
        google_marks.forEach(mark => mark.setMap(null))
        
        if (!google_window) google_window = new google.maps.InfoWindow();

        google_marks = [];
        for (const nuevaMarca of search_paraderos) {
            const { position, title, location, url_image, id_paradero } = nuevaMarca;
            const marker = new google.maps.Marker({ position, map: map, title });

            marker.addListener("click", () => {
                google_window.close();
                const imagen = url_image ? `<img alt="Imagen" src="${url_image}" width="200">` : ''
                const html = `
                    <h1>${title}</h1>
                    <p>${location}</p>
                    <button class="btn btn-primary" onclick="onEditaParada(${id_paradero})">Editar</button>
                    <hr>
                    ${imagen}
                `
                google_window.setContent(html);
                google_window.open(marker.getMap(), marker);
            });
            
            google_marks.push(marker)
        }

        map && map.setCenter(search_paraderos[0].position)

        // aplicar zoom en base a las coordenadas
        const bounds = new google.maps.LatLngBounds();
        search_paraderos.forEach(el => bounds.extend(el.position))
        google_map && google_map.fitBounds(bounds);
    }

    globalThis.onEditaParada = function(id_paradero) {
        paradero = { id_paradero }
    }
</script>

<PageTitle>Paraderos</PageTitle>

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-md-auto">
                <button class="btn btn-outline-secondary" on:click|preventDefault={() => cargar_paraderos_todos(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}
                    <IconLoading />
                    <span>Cargando ubicaciones...</span>
                {/if}
            </div>
        </div>
    </div>
    <div class="card-body">
        {#if google_api_key}
            <GoogleMap
                {google_api_key}
                on:start={ev => onMostrarParaderos(ev.detail)}
            />
        {/if}
    </div>
</div>


{#if paradero}
    <ModalParadero {paradero} on:close={() => paradero = null} />
{/if}