lucent-laravel/front/js/svelte/build/Report.svelte

<script>
    import {getContext, onMount} from "svelte";


    const channel = getContext("channel");
    export let title;
    $: date = "";
    $: logs = "";
    let inProgress = false;

    function connect() {
        const eventSource = new EventSource(channel.lucentUrl + "/build-report-source");

        eventSource.onmessage = function (event) {
            inProgress = true;
            const data = JSON.parse(event.data);
            date = data.date;
            logs = data.logs;

        }
        eventSource.onerror = (e) => {
            console.log(e)
            eventSource.close();
            inProgress = false;
        }
    }

    function buildWebsite(e) {
        e.preventDefault();
        inProgress = true;

        axios.post(channel.lucentUrl + "/build").then(response => {
            connect()
        })

    }

    onMount(() => {
        connect()
    })

</script>

<div class="common-wrapper">
    <div class="lx-card mt-5">

        <h3 class="header-small mb-5">{title}</h3>

        <button on:click={buildWebsite} class="button primary mb-3" disabled={inProgress}>Start Build
        </button>



        <div class="mb-3">
            {#if inProgress}
                <span class="badge text-bg-warning">
                Build in progress
                    </span>
            {/if}
            {#if !inProgress && logs}
                <span class="badge text-bg-info">
               Build completed
                    </span>
            {/if}


        </div>

        <pre>{logs}</pre>
    </div>
</div>