Sistema_Gestion_Transporte/src/pages/mapas/OffcanvasParadero.svelte

<script>
    // imagenes
    import IconParada from "$/assets/parada-de-autobus.png";
    // libs
    import { createEventDispatcher } from "svelte";
    import FormParadero from "./FormParadero.svelte";
    import FormParaderoDispositivos from "./FormParaderoDispositivos.svelte";
    import FormParaderoDetalle from "./FormParaderoDetalle.svelte";
    import FormParaderoServicios from "./FormParaderoServicios.svelte";
    const dispatch = createEventDispatcher();
    export let parada = null;
    let canvas = null;
    let tab = 0;

    $: init(!!parada);

    function init(show) {
        if (!canvas) return;
        if (show) {
            canvas.classList.add("show");
        } else {
            canvas.classList.remove("show");
            tab = 0;
        }
    }
</script>

<div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    bind:this={canvas}
    aria-labelledby="offcanvasParaderoLabel"
    style="visibility: inherit;"
>
    <div class="offcanvas-header d-block pb-0">
        <div class="d-flex justify-content-between">
            <h5 class="offcanvas-title text-info" id="offcanvasParaderoLabel">
                <img src={IconParada} alt="Icono de Paradero" width="64" />
                Paradero
            </h5>
            <button
                type="button"
                class="btn-close"
                aria-label="Close"
                on:click|preventDefault={() => dispatch("close")}
            />
        </div>

        <nav class="mb-0" style="--bs-nav-tabs-link-active-border-color: var(--bs-dark)">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a
                        class={"nav-link" + (tab === 0 ? " active" : "")}
                        href={"#"}
                        on:click|preventDefault={() => (tab = 0)}>
                        General
                    </a>
                </li>
                <li class="nav-item">
                    <a
                        class={"nav-link" + (tab === 1 ? " active" : "")}
                        href={"#"}
                        on:click|preventDefault={() => (tab = 1)}>
                        Dispositivos
                    </a>
                </li>
                <li class="nav-item">
                    <a
                        class={"nav-link" + (tab === 2 ? " active" : "")}
                        href={"#"}
                        on:click|preventDefault={() => (tab = 2)}>
                        Detalle
                    </a>
                </li>
                <li class="nav-item">
                    <a
                        class={"nav-link" + (tab === 3 ? " active" : "")}
                        href={"#"}
                        on:click|preventDefault={() => (tab = 3)}>
                        Servicios
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="offcanvas-body bg-white py-3">
        {#if tab === 0}
            <FormParadero {parada} />
        {/if}
        {#if tab === 1}
            <FormParaderoDispositivos {parada} />
        {/if}
        {#if tab === 2}
            <FormParaderoDetalle {parada} />
        {/if}
        {#if tab === 3}
            <FormParaderoServicios {parada} />
        {/if}
    </div>
</div>

{#if parada}
    <div
        class="offcanvas-backdrop fade show"
        on:click|preventDefault={() => dispatch("close")}
        on:keydown={() => {}}
    />
{/if}

{#if parada}
    <style>
        html {
            overflow-y: hidden;
        }
        
        .offcanvas {
            --bs-offcanvas-width: 500px;
            --bs-offcanvas-bg: var(--bs-gray-200);
        }

        .nav-tabs {
            --bs-nav-tabs-border-color: var(--bs-white);
            --bs-nav-tabs-border-width: 0;
        }
        
        .nav-tabs .nav-link.active {
            --bs-nav-tabs-link-active-bg: var(--bs-white);
            --bs-nav-tabs-link-active-color: var(--bs-secondary);
            --bs-nav-tabs-link-active-border-color: var(--bs-white);
        }
    </style>
{/if}