Improve frontend

1 files changed, 42 insertions, 1 deletions

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 755f200..9366696 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
+import { formatDistanceToNow } from "date-fns";
+import { LucideClock, LucideRadio } from "lucide-vue-next";
+
 const scheduleStore = useScheduleStore();
+const errorStore = useErrorStore();
+
+const timeUntilConferenceStart = computed(() => {
+  if (!scheduleStore.schedule) {
+    return 0;
+  }
+
+  const now = new Date();
+  const conferenceStart = new Date(scheduleStore.schedule.conference.start);
+  const diff = conferenceStart.getTime() - now.getTime();
+
+  return diff;
+});
 </script>
 
 <template>
@@ -8,6 +24,21 @@ const scheduleStore = useScheduleStore();
       <span class="conference-title">{{ scheduleStore.schedule?.conference.title }}</span>
       <span class="conference-venue">{{ scheduleStore.schedule?.conference.venue }}</span>
       <span class="conference-city">{{ scheduleStore.schedule?.conference.city }}</span>
+      
+      <Button kind="secondary" @click="errorStore.setError('This doesn\'t do anything yet :-)')">Change conference</Button>
+    </Panel>
+    
+    <Panel kind="success" class="ongoing" v-if="scheduleStore.isConferenceOngoing()">
+      <span class="text-icon"><LucideRadio size="var(--text-small)"/> <span>This conference is ongoing</span></span>
+      <Button kind="primary" @click="navigateTo('/live')">View live</Button>
+    </Panel> 
+
+    <Panel kind="error" class="finished" v-else-if="scheduleStore.isConferenceFinished()">
+      <span>This conference has finished</span>
+    </Panel> 
+    
+    <Panel class="upcoming" v-else>
+      <span class="text-icon"><LucideClock size="var(--text-small)" /> <span>Starts in {{ formatDistanceToNow(scheduleStore.getStartDate()) }}</span></span>
     </Panel>
     
     <Nav />
@@ -18,13 +49,23 @@ const scheduleStore = useScheduleStore();
   </div>
 </template>
 
-<style>
+<style scoped>
 .sidebar {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
+.finished, .ongoing, .upcoming {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  font-size: var(--text-small);
+  font-style: oblique;
+  text-align: center;
+}
+
 .conference {
   display: flex;
   flex-direction: column;