feature: use Svelte to render event list

lib/frontend/components/AppContainer.svelte

@@ -1,12 +1,18 @@
 <script>
   import TrackingPanel from './TrackingPanel.svelte'
+  import EventList from './EventList.svelte'
 
-  import { configStore } from '../stores'
+  import { configStore, eventStore } from '../stores'
 
   $: showTrackingPanel = $configStore.track === undefined
+  $: showEventList = $eventStore.length > 0
 </script>
 
 {#if showTrackingPanel}
   <TrackingPanel />
 {/if}
 
+{#if showEventList}
+  <EventList />
+{/if}
+

lib/frontend/components/EventList.svelte

@@ -0,0 +1,83 @@
+<style>
+  .list-wrapper {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
+  #list {
+    width: 100%;
+  }
+
+  thead {
+    font-weight: 800;
+  }
+
+  tbody tr:nth-child(odd) {
+    background-color: whitesmoke;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #e8e8e8;
+  }
+
+  td.actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  td.actions div {
+    margin: 2px;
+    text-decoration: none;
+  }
+
+  .delete-record {
+    font-size: 1.2rem;
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  import { eventStore } from '../stores'
+
+  const handleRecordDelete = (id) => {
+    eventStore.clearCalculation(id)
+  }
+</script>
+
+<div class='list-wrapper'>
+  <table id="list">
+    <thead>
+      <tr>
+        <td>Date</td>
+        <td>Name</td>
+        <td></td>
+      </tr>
+    </thead>
+    <tbody>
+      {#each $eventStore as event (event.id)}
+        <tr>
+          <td>
+            {event.startTime
+              ? new Date(event.startTime).toLocaleString()
+              : 'N/A\xa0\xa0\xa0\xa0\xa0'
+            }
+          </td>
+          <td>
+            <a href={event.link}>{event.title}</a>
+          </td>
+          <td class='actions'>
+            <div
+              class='delete-record'
+              role='button'
+              tabIndex={0}
+              on:click={() => handleRecordDelete(event.id)}
+            >
+              ✖︎
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

lib/frontend/stores/eventStore.js

@@ -30,7 +30,10 @@ const createEventStore = () => {
       return
     }
 
-    set(state.splice(calculationIndex, 1))
+    const nextState = [ ...state ]
+    nextState.splice(calculationIndex, 1)
+
+    set(nextState)
   }
 
   const getState = () => state

lib/frontend/utils.js

@@ -0,0 +1,25 @@
+export const migrateRecord = (record) => {
+  // NOTE: v3 records
+  const id = record.id || record.order
+  const startTime = record.startTime || null
+
+  return {
+    ...record,
+    id,
+    startTime,
+  }
+}
+
+export const sortRecord = (a, b) => {
+  const aDate = new Date(a.createdAt)
+  const bDate = new Date(b.createdAt)
+
+  if (aDate < bDate) {
+    return -1
+  }
+  if (aDate > bDate) {
+    return 1
+  }
+  return 0
+}
+