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

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

    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;
        axios.post(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>