From dc095f7fa7e18c6ac4cac44c03bcd7e9a6069788 Mon Sep 17 00:00:00 2001
From: NotXia <35894453+NotXia@users.noreply.github.com>
Date: Sun, 29 Dec 2024 17:55:59 +0100
Subject: [PATCH] Fix timeline

---
 components/Timeline.vue                  | 39 ++++++++++++++++--------
 components/resume/ExperienceTimeline.vue |  5 +--
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/components/Timeline.vue b/components/Timeline.vue
index f27263d..2c0c3b2 100644
--- a/components/Timeline.vue
+++ b/components/Timeline.vue
@@ -11,10 +11,10 @@
                 <li class="mr-4 absolute right-0" v-for="event in left_events" :key="props.left[event.index].title" :style="`top: ${event.offset*month_offset}px`">
                     <div class="relative">
                         <!-- Start point -->
-                        <div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div>
+                        <div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div>
                         <div v-if="monthDifference(props.left[event.index].start, props.left[event.index].end) > 0" >
                             <!-- End point -->
-                            <div v-if="!props.left[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div>
+                            <div v-if="props.left[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div>
                             <!-- Interval line -->
                             <div class="absolute rounded-full border-l-2 border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; right: -1.12rem"></div>
                         </div>
@@ -40,7 +40,7 @@
                         <div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem; bottom: 0"></div>
                         <div v-if="monthDifference(props.right[event.index].start, props.right[event.index].end) > 0">
                             <!-- End point -->
-                            <div v-if="!props.right[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div>
+                            <div v-if="props.right[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div>
                             <!-- Interval line -->
                             <div class="absolute rounded-full border-l-2 border-we border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; left: -1.12rem"></div>
                         </div>
@@ -64,7 +64,7 @@
 <script setup lang="ts">
     interface Event {
         title: string, description: string, time_label: string,
-        start: Date, end: Date, current?: boolean
+        start: Date, end: Date
     };
     
     const props = defineProps({
@@ -92,6 +92,10 @@
         return end_date.getMonth() - start_date.getMonth() + (12 * (end_date.getFullYear() - start_date.getFullYear()));
     }
 
+    function dateClip(date: Date): Date {
+        return date > new Date() ? new Date() : date
+    }
+
     function updateTimelineSize():void {
         const available_space:number = container_timeline.value?.clientHeight ?? 0;
         let events_min_date:Date = new Date(), 
@@ -104,7 +108,7 @@
         });
 
         min_date.value = events_min_date;
-        max_date.value = events_max_date;
+        max_date.value = dateClip(events_max_date);
         month_offset.value = Math.floor( available_space / (monthDifference(events_min_date, events_max_date)) );
     }
 
@@ -113,14 +117,23 @@
         updateTimelineSize();
 
         // Computes the offset w.r.t. the end of the time interval
-        right_events.value = props.right.map((event, index) => ({
-            offset: monthDifference(event.end, max_date.value),
-            index: index
-        }));
-        left_events.value = props.left.map((event, index) => ({
-            offset: monthDifference(event.end, max_date.value),
-            index: index
-        }));
+        right_events.value = props.right
+            .map((event, index) => ({
+                offset: monthDifference(dateClip(event.end), max_date.value),
+                index: index,
+            }))
+            .filter((event) => (
+                props.right[event.index].start <= new Date()
+            ));
+
+        left_events.value = props.left
+            .map((event, index) => ({
+                offset: monthDifference(dateClip(event.end), max_date.value),
+                index: index,
+            }))
+            .filter((event) => (
+                props.left[event.index].start <= new Date()
+            ));
 
         new ResizeObserver(updateTimelineSize).observe(document.querySelector("html") as Element)
     })
diff --git a/components/resume/ExperienceTimeline.vue b/components/resume/ExperienceTimeline.vue
index c6fcbb3..416f3db 100644
--- a/components/resume/ExperienceTimeline.vue
+++ b/components/resume/ExperienceTimeline.vue
@@ -20,12 +20,12 @@
                     { 
                         title: $t('bs in cs'), time_label: '2020 - 2023',
                         description: $t('unibo'), 
-                        start: new Date(2020, september, 21), end: new Date(2023, october, 11), current: false
+                        start: new Date(2020, september, 21), end: new Date(2023, october, 11)
                     },
                     { 
                         title: $t('ms in ai'), time_label: '2023 - 2025',
                         description: $t('unibo'), 
-                        start: new Date(2023, september, 18), end: new Date(), current: true
+                        start: new Date(2023, september, 18), end: current
                     }
                 ]"
                 :left="[
@@ -55,6 +55,7 @@
     import { initTooltips } from "flowbite";
 
     const january = 0, february = 1, march = 2, april = 3, may = 4, june = 5, july = 6, august = 7, september = 8, october = 9, november = 10, december = 11;
+    const current = new Date(Date.now() + 24*60*60*1000)
 
     onMounted(() => {
         initTooltips();