ilab_transporte_frontend/src/pages/mapas/FormParadero.svelte

<script>
    // servicios
    import {
        getParadero,
        updateParadero,
        getParaderoImagenes,
        createParaderoImagen,
        deleteParaderoImagen,
    } from "$/services/paraderos";
    import IconLoading from "../../components/IconLoading.svelte";

    export let parada = null;
    export let escritura = false;
    let form = {};
    let imagenes = [];
    let loading = false;

    $: init(!!parada);

    async function init(show) {
        try {
            if (parada) {
                loading = true;
                form = await getParadero(parada.id_paradero);
                imagenes = await getParaderoImagenes(parada.id_paradero);
            }
        } catch (error) {
            alert(error);
        } finally {
            loading = false;
        }
    }

    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);
        }
    }
</script>

{#if loading}
    <IconLoading />
{/if}

<div>
    Coordenadas:
    <div class="input-group mb-3">
        <div class="input-group-text">Latitud</div>
        <div class="form-control">{form.stop_lat || "..."}</div>
    </div>
    <div class="input-group mb-3">
        <div class="input-group-text">Longitud</div>
        <div class="form-control">{form.stop_lon || "..."}</div>
    </div>

    Propiedades:
    <form on:submit|preventDefault={onSave} class={escritura ? '' : 'disabled'}>
        <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
                type="text"
                bind:value={form.stop_name}
                class="form-control"
            />
        </div>
        <div class="input-group mb-3">
            <div class="input-group-text">Descripción</div>
            <input
                type="text"
                bind:value={form.stop_desc}
                class="form-control"
            />
        </div>
        <hr />
        {#if escritura}
            <div class="text-center">
                <button type="submit" class="btn btn-primary"
                    ><i class="bi bi-save" /> Guardar</button
                >
            </div>
        {/if}
    </form>
    <div class="my-3" />

    <!-- imagenes -->
    {#each imagenes as imagen}
        <div class="seccion-imagen mb-3">
            <img src={imagen.url} alt="imagen paradero" class="img-fluid" />
            <a
                href={"#"}
                class="btn btn-danger"
                on:click|preventDefault={() => onDeleteImagen(imagen)}
            >
                <i class="bi bi-trash" /> Eliminar
            </a>
        </div>
    {/each}

    <!-- agregar imagen -->
    {#if escritura}
        <form action="" on:submit|preventDefault={onSaveImagen}>
            <div class="card">
                <div class="card-body">
                    <div class="form-control" style="overflow: hidden">
                        <input
                            type="file"
                            name="file1"
                            accept="*.png,*.jpg,*.jpeg"
                        />
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-primary" type="submit">
                        <i class="bi bi-plus-lg" /> Agregar imagen
                    </button>
                </div>
            </div>
        </form>
    {/if}
</div>

<style>
    .seccion-imagen {
        position: relative;
    }
    .seccion-imagen > a {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
    }
    .disabled {
        pointer-events: none !important;
    }
</style>