feature: create Svelte component for showing status UI

lib/frontend/actions/events.js

@@ -10,10 +10,15 @@ const getEventHTML = async (url) => {
   formData.set('url', url)
 
   try {
-    const request = new Request({ id: uuidv4() })
+    const request = new Request({
+      id: uuidv4(),
+      url,
+    })
     requestStore.set(request)
     const response = await postURL(formData)
     const text = await response.text()
+
+    requestStore.set(null)
     return text
   } catch (error) {
     requestStore.update((prevRequest) => {

lib/frontend/components/AppContainer.svelte

@@ -1,7 +1,8 @@
 <script>
   import Input from './Input.svelte'
-  import TrackingPanel from './TrackingPanel.svelte'
   import EventList from './EventList.svelte'
+  import Status from './Status.svelte'
+  import TrackingPanel from './TrackingPanel.svelte'
 
   import { configStore, eventStore } from '../stores'
 
@@ -13,6 +14,7 @@
   <TrackingPanel />
 {/if}
 
+<Status />
 <Input />
 {#if showEventList}
   <EventList />

lib/frontend/components/Status.svelte

@@ -0,0 +1,34 @@
+<style>
+  #status {
+    flex: 1;
+    height: 1rem;
+    margin: 5px;
+  }
+
+  .status-item {
+    min-width: 200px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>
+
+<script>
+  import { requestStore } from '../stores'
+
+  $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
+  $: pendingRequest = Boolean($requestStore && !$requestStore.error)
+</script>
+
+<div id='status'>
+  {#if error}
+    <div class='status-item'>
+      {error.toString()}
+    </div>
+  {/if}
+  {#if pendingRequest}
+    <div class='status-item'>
+      Fetching event {$requestStore.url}
+    </div>
+  {/if}
+</div>

lib/frontend/records/request.js

@@ -1,9 +1,11 @@
 export default class Request {
   constructor({
     id,
+    url,
     error,
   }) {
     this.id = id
+    this.url = url
     this.error = error
   }
 }

lib/static/index.html

@@ -42,12 +42,6 @@
       </noscript>
 
       <div id="status">
-        <div class="status-item" id="network">
-          Fetching file...
-        </div>
-        <div class="status-item" id="parsing">
-          Parsing data...
-        </div>
         <div class="status-item" id="error">
         </div>
         <div class="status-item" id="service-worker">

lib/static/style.css

@@ -91,20 +91,6 @@ input#url {
   flex: 1;
 }
 
-#status {
-  flex: 1;
-  height: 1rem;
-  margin: 5px;
-}
-
-.status-item {
-  display: none;
-  min-width: 200px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 .show {
   display: block;
 }