82 lines
2.0 KiB
Svelte
82 lines
2.0 KiB
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}> </div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.logs {
|
|
max-height: 70vh;
|
|
overflow: scroll;
|
|
background: var(--p90);
|
|
color: var(--p10);
|
|
padding: 10px;
|
|
}
|
|
</style>
|