frontend: add countdown on home page

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/components/Countdown.vue

@@ -0,0 +1,37 @@
+<script setup>
+const props = defineProps(['date', 'class'])
+
+import { ref } from 'vue'
+
+const countdownDisplay = ref('')
+const countdownDate = props.date.getTime()
+
+const countdownInterval = setInterval(() => {
+  const now = new Date().getTime()
+  const distance = countdownDate - now
+  if (distance < 0) {
+    countdownDisplay.value = 'c\'est parti !'
+    clearInterval(countdownInterval)
+    return
+  }
+
+  const days = Math.floor(distance / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
+  const seconds = Math.floor((distance % (1000 * 60)) / 1000)
+
+  countdownDisplay.value = `${days} jour` + (days > 1 ? 's' : '') +
+    ` ${hours} heure` + (hours > 1 ? 's' : '') +
+    ` ${minutes} minute` + (minutes > 1 ? 's' : '') +
+    ` ${seconds} seconde` + (seconds > 1 ? 's' : '')
+}, 1000)
+
+</script>
+
+<template>
+  <p :class="props.class">{{ countdownDisplay }}</p>
+</template>
+
+<style scoped>
+
+</style>

summer2024-frontend/src/components/WelcomeComponent.vue

@@ -1,5 +1,18 @@
 <script setup>
 import { usePostsStore } from '@/stores/posts.js'
+import Countdown from '@/components/Countdown.vue'
+import { onMounted, ref } from 'vue'
+
+const enableCountdown = ref(false)
+const countdownDate = ref(new Date('2024-07-28 07:00:00'))
+
+onMounted(() => {
+  const now = new Date().getTime()
+  const distance = countdownDate.value.getTime() - now
+  if (distance > 0) {
+    enableCountdown.value = true
+  }
+})
 
 const postsStore = usePostsStore()
 </script>
@@ -16,6 +29,10 @@ const postsStore = usePostsStore()
       </div>
       <div v-else>
         <p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
+        <div class="mt-16 mx-4" v-if="enableCountdown">
+          <p>ça commence dans...</p>
+          <Countdown class="text-3xl font-extrabold" :date="countdownDate" />
+        </div>
       </div>
     </div>
   </div>