ilab_transporte_frontend/src/pages/reportes/Itinerario.svelte

<script>
    import { getOperadores } from "$/services/operadores";

    export let id_operador;
    export let loading = false;

    let operadores = [];
    let  baseUrl = window.location.origin;
    getOperadores({ vigente: 1 })
        .then(data => data.sort((a, b) => a.nombre_operador < b.nombre_operador ? -1 : 1))
        .then(data => operadores = data)
        .catch(error => globalThis.toast.error(error));

    function validarOperadorSeleccionado() {
        if (!id_operador) {
            globalThis.toast.error('Debe seleccionar un operador');
            return false;
        }
        return true;
    }

    function abrirReporteItinerario() {
        if (!validarOperadorSeleccionado()) return;        
        const url = new URL(`reporte/itinerarios/${id_operador}.pdf`, baseUrl);
        window.open(url.href, '_blank');
    }

    function abrirReporteExpediciones() {
        if (!validarOperadorSeleccionado()) return;
        const fecha = new Date().toISOString().slice(0, 10).replace(/-/g, '');
        //const url = `${window.location.href}reporte/expediciones/${id_operador}_${fecha}.pdf`;
        const url = new URL(`reporte/expediciones/${id_operador}_${fecha}.pdf`, baseUrl);
        window.open(url.href, '_blank');
    }
</script>

<div class="row">
    <div class="col-md">
        <div class="input-group mb-3">
            <div class="input-group-text">Operador</div>
            <select bind:value={id_operador} class="form-select">
                {#each operadores as operador}
                    <option value={operador.id_operador}>{operador.nombre_operador}</option>
                {/each}
            </select>
        </div>
    </div>
    <div class="col-md-auto">
        {#if loading}
            <div class="spinner-grow spinner-grow-sm text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        {/if}
    </div>
</div>

<div class="btn-group" role="group">
    <button on:click={abrirReporteItinerario} class="btn btn-primary">Reporte Itinerario</button>
    
</div>
<div class="btn-group" role="group">
    
    <button on:click={abrirReporteExpediciones} class="btn btn-secondary">Reporte Expediciones</button>
</div>