From 08a9751ed3d06b1de6bd07b03fe3dce3b86b3b35 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 14 Mar 2023 14:12:23 +0100
Subject: [PATCH] add minutes and query params for the home

---
 src/components/ResponsiveTimeUntil.vue | 31 ++++++++++++++++----------
 src/router/router.ts                   | 12 +++++++++-
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/ResponsiveTimeUntil.vue b/src/components/ResponsiveTimeUntil.vue
index 910f40d..68cff35 100644
--- a/src/components/ResponsiveTimeUntil.vue
+++ b/src/components/ResponsiveTimeUntil.vue
@@ -2,13 +2,16 @@
 import { onUnmounted, ref } from "vue"
 import { timeUntil } from "../services/time-until"
 
-const timeUntilTarget = timeUntil("2024-03-13T09:00:00.000Z")
+const props = defineProps<{ project?: string; target?: string }>()
 
-const yearsUntil = ref(timeUntilTarget.years)
-const monthsUntil = ref(timeUntilTarget.months)
-const daysUntil = ref(timeUntilTarget.days)
-const hoursUntil = ref(timeUntilTarget.hours)
-const secondsUntil = ref(timeUntilTarget.seconds)
+const timeUntilTarget = props.target ? timeUntil(props.target) : null
+
+const yearsUntil = ref(timeUntilTarget?.years ?? 0)
+const monthsUntil = ref(timeUntilTarget?.months ?? 0)
+const daysUntil = ref(timeUntilTarget?.days ?? 0)
+const hoursUntil = ref(timeUntilTarget?.hours ?? 0)
+const minutesUntil = ref(timeUntilTarget?.minutes ?? 0)
+const secondsUntil = ref(timeUntilTarget?.seconds ?? 0)
 
 const id = setInterval(() => {
   const timeUntilTarget = timeUntil("2024-03-13T09:00:00.000Z")
@@ -17,6 +20,7 @@ const id = setInterval(() => {
   monthsUntil.value = timeUntilTarget.months
   daysUntil.value = timeUntilTarget.days
   hoursUntil.value = timeUntilTarget.hours
+  minutesUntil.value = timeUntilTarget.minutes
   secondsUntil.value = timeUntilTarget.seconds
 }, 1000)
 
@@ -24,13 +28,16 @@ onUnmounted(() => clearInterval(id))
 </script>
 
 <template>
-  <section>
-    <div>{{ yearsUntil }} years</div>
-    <div>{{ monthsUntil }} months</div>
-    <div>{{ daysUntil }} days</div>
-    <div>{{ hoursUntil }} hours</div>
-    <div>{{ secondsUntil }} seconds</div>
+  <h1 v-if="props.project">{{ props.project }}</h1>
+  <section v-if="timeUntilTarget">
+    <div v-if="yearsUntil > 0" class="count">{{ yearsUntil }} years</div>
+    <div v-if="monthsUntil > 0" class="count">{{ monthsUntil }} months</div>
+    <div v-if="daysUntil > 0" class="count">{{ daysUntil }} days</div>
+    <div v-if="hoursUntil > 0" class="count">{{ hoursUntil }} hours</div>
+    <div v-if="minutesUntil > 0" class="count">{{ minutesUntil }} minutes</div>
+    <div v-if="secondsUntil > 0" class="count">{{ secondsUntil }} seconds</div>
   </section>
+  <section v-else>No target</section>
 </template>
 
 <style scoped>
diff --git a/src/router/router.ts b/src/router/router.ts
index ef628b7..dc284e9 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -3,5 +3,15 @@ import { createRouter, createWebHashHistory } from "vue-router"
 
 export const router = createRouter({
   history: createWebHashHistory(),
-  routes: [{ path: "/", component: Home }],
+  routes: [
+    {
+      path: "/",
+      component: Home,
+      name: "Home",
+      props: (route) => ({
+        project: route.query.project,
+        target: route.query.target,
+      }),
+    },
+  ],
 })