build fixes

front/js/svelte/build/Report.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {getContext} from "svelte";
+    import {getContext, onMount} from "svelte";
     import SpinnerButton from "../common/SpinnerButton.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
     import MemberSettingsCard from "../members/MemberSettingsCard.svelte";
@@ -10,26 +10,39 @@
     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 => {
-            const eventSource = new EventSource(channel.lucentUrl + "/build-report-source");
-
-            eventSource.onmessage = function(event) {
-                const data = JSON.parse(event.data);
-                date =  data.date;
-                logs =  data.logs;
-            }
-            eventSource.onerror = (e)=>{
-                console.log(e)
-            }
+            connect()
         })
 
     }
 
+    onMount(() => {
+        connect()
+    })
+
 </script>
 
 <div class="wrapper-tiny transparent mb-5">
@@ -37,9 +50,26 @@
 
         <h3 class="header-small mb-5">{title}</h3>
 
-        <button on:click={buildWebsite} class="btn btn-outline-primary btn-sm mb-3">Start Build</button>
+        <button on:click={buildWebsite} class="btn btn-outline-primary btn-sm mb-3" disabled={inProgress}>Start Build
+        </button>
 
-        <div class="mb-3">{date}</div>
+
+
+        <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 at
+                    </span>
+            {/if}
+            <span class="badge text-bg-light"> {date}</span>
+
+
+        </div>
 
         <pre>{logs}</pre>
     </div>