121 lines
3.5 KiB
Svelte
121 lines
3.5 KiB
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 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)}>
|
|
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}
|
|
<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}
|