Files
lucent-laravel/front/js/svelte/build/Report.svelte
T
2024-10-10 17:40:29 +03:00

82 lines
1.9 KiB
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) => {
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>