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

<script>
    import { getContext, onMount } from "svelte";
    import { apiPost } from "../../helpers";
    const channel = getContext("channel");
    export let title;
    export let command;
    $: date = "";
    $: logs = "";

    let anchorEl;
    let inProgress = false;

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

        eventSource.onmessage = function (event) {
            inProgress = true;
            const data = JSON.parse(event.data);
            date = data.date;
            logs = data.logs;
            anchorEl.scrollIntoView();
        };
        eventSource.onerror = (e) => {
            console.log(e);
            eventSource.close();
            inProgress = false;
        };
    }

    function buildWebsite(e) {
        e.preventDefault();
        inProgress = true;
        apiPost(channel.lucentUrl + "/command/" + command.signature).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
        </button>

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

        <pre class="logs">{logs}
            <div bind:this={anchorEl}>&nbsp;</div>
        </pre>
    </div>
</div>

<style>
    .logs {
        max-height: 70vh;
        overflow: scroll;
        background: var(--p90);
        color: var(--p10);
        padding: 10px;
    }
</style>