From 057d2c7955e852e55f421212659f499831d8d05c Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Thu, 16 Nov 2023 19:54:05 +0100
Subject: [PATCH] FrontEnd: Added Timeline below the slideshow.

---
 frontend/src/lib/components/education.svelte | 57 ++++++++++++--------
 frontend/src/lib/components/slideshow.svelte | 51 +++++++++++++++---
 frontend/src/lib/css/education.css           | 43 +++++++++++++++
 frontend/src/lib/js/date.js                  |  7 +++
 frontend/src/lib/js/processdata.js           | 34 +++++++-----
 frontend/src/lib/js/timeline.js              | 18 +++++++
 6 files changed, 166 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/lib/js/timeline.js

diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte
index 8bd3dfb..4bbb91a 100644
--- a/frontend/src/lib/components/education.svelte
+++ b/frontend/src/lib/components/education.svelte
@@ -2,39 +2,50 @@
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiMapMarker, mdiCog } from "@mdi/js";
     import "$lib/css/education.css";
+    import { formatYear } from "$lib/js/date.js"
 
     export let active = false;
     export let data;
-    
+
     const title = data.school;
     const location = data.school_location;
     const speciality = data.speciality;
     const option = data.school_options;
     const picture = data.picture_url;
+    const end_year = data.end_year === null ? '' : formatYear(data.end_year);
+    const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year));
 </script>
 
-<div class="education-main {active ? '' : 'education-unactive'}">
-    <div class="education-img-container">
-        <img class="education-img" src={picture} alt="Education" />
+<div class="education-container">
+    <div class="education-main {active ? '' : 'education-unactive'}">
+        <div class="education-img-container">
+            <img class="education-img" src={picture} alt="Education" />
+        </div>
+        <div class="education-text-container">
+            <h1 class="education-title">{title}</h1>
+            {#if location}
+                <div class="education-subtitle-container">
+                    <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
+                    <p class="education-subtitle education-aftericon">
+                        {location}
+                    </p>
+                </div>
+            {/if}
+            {#if speciality}
+                <div class="education-subtitle-container">
+                    <SvgIcon size="35" path={mdiCog} type="mdi" />
+                    <p class="education-subtitle education-aftericon">
+                        {speciality}
+                    </p>
+                </div>
+            {/if}
+            {#if option}
+                <p class="education-subtitle">{option}</p>
+            {/if}
+        </div>
     </div>
-    <div class="education-text-container">
-        <h1 class="education-title">{title}</h1>
-        {#if location}
-            <div class="education-subtitle-container">
-                <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
-                <p class="education-subtitle education-aftericon">{location}</p>
-            </div>
-        {/if}
-        {#if speciality}
-            <div class="education-subtitle-container">
-                <SvgIcon size="35" path={mdiCog} type="mdi" />
-                <p class="education-subtitle education-aftericon">
-                    {speciality}
-                </p>
-            </div>
-        {/if}
-        {#if option}
-            <p class="education-subtitle">{option}</p>
-        {/if}
+    <div class="education-time">
+        <div class="education-bubble" />
+        <h2 class="education-date">{`${end_year}${start_year}`}</h2>
     </div>
 </div>
diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte
index 41c3818..b06937c 100644
--- a/frontend/src/lib/components/slideshow.svelte
+++ b/frontend/src/lib/components/slideshow.svelte
@@ -1,37 +1,74 @@
 <script>
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
-    import "$lib/css/slideshow.css"
+    import "$lib/css/slideshow.css";
+    import { onMount } from "svelte";
+    import { createTimeLine } from "$lib/js/timeline.js";
 
+    // Exported values
     export let data = [];
     export let type;
 
+    // Slideshow global variables
     let slideshow_index = 0;
     let slideshow_hidden = [];
+
+    // Timeline global variables
+    let slideshow;
+    let bubbles = [];
+    onMount(() => {
+        for (const element of document.getElementsByClassName(
+            "education-bubble"
+        )) {
+            bubbles.push({
+                left: element.offsetLeft,
+                top: element.offsetTop,
+            });
+        }
+        for (const div of createTimeLine(bubbles)) {
+            slideshow.appendChild(div);
+        }
+    });
+
     function slideEducation() {
-        const slideshowElements = document.querySelectorAll(".education-main");
+        const slideshowElements = document.querySelectorAll(
+            ".education-container"
+        );
+        const slideshowTimeline =
+            document.querySelectorAll(".education-string");
+
         if (slideshow_index >= data.length - 1) {
             slideshow_hidden = [];
             slideshow_index = 0;
+            for(const timeline of slideshowTimeline) {
+                timeline.style.backgroundColor = '';
+            }
         } else {
             slideshow_hidden.push(slideshow_index);
             slideshow_index++;
         }
         let transformValue = 0;
         for (const id of slideshow_hidden) {
-                transformValue += (slideshowElements[id].clientWidth+(5*16));
-            }
+            transformValue += slideshowElements[id].clientWidth;
+        }
         slideshowElements.forEach((element, id) => {
             let newtransformValue = transformValue;
-            if(slideshow_hidden.includes(id)) {
-                newtransformValue*=1.1;
+            if (slideshow_hidden.includes(id)) {
+                // 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
+                newtransformValue *= 1.1;
             }
             element.style.transform = `translateX(-${newtransformValue}px)`;
+            if(slideshowTimeline[id] != undefined) {
+                slideshowTimeline[id].style.transform = `translateX(-${transformValue}px)`;
+                if (slideshow_hidden.includes(id)) {
+                    slideshowTimeline[id].style.backgroundColor = 'var(--color-background)';
+                }
+            }
         });
     }
 </script>
 
-<div class="slideshow">
+<div class="slideshow" bind:this={slideshow}>
     <button class="slideshow_btn" on:click={slideEducation}>
         <div>
             <SvgIcon
diff --git a/frontend/src/lib/css/education.css b/frontend/src/lib/css/education.css
index 475ba2d..969d217 100644
--- a/frontend/src/lib/css/education.css
+++ b/frontend/src/lib/css/education.css
@@ -1,3 +1,9 @@
+.education-container {
+    display: flex;
+    flex-direction: column;
+    transition: all .3s ease 0s;
+}
+
 .education-main {
     display: flex;
     border-radius: 0.4rem;
@@ -55,5 +61,42 @@
 
 .education-unactive {
     scale: 0.9;
+    margin-left: 2.25rem !important;
+    margin-right: 2.25rem !important;
     box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
+}
+
+.education-time {
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.education-bubble {
+    z-index: 2;
+    width: 5rem;
+    height: 5rem;
+    background-color: var(--color-special);
+    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    transition: all .3s ease 0s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.education-date {
+    color: var(--color-special);
+    font-weight: 700;
+}
+
+.education-string {
+    z-index: -1;
+    position: absolute;
+    height: 3rem;
+    background-color: var(--color-special);
+    opacity: 0.5;
+    transition: all .3s ease 0s;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/js/date.js b/frontend/src/lib/js/date.js
index df78b3d..77664aa 100644
--- a/frontend/src/lib/js/date.js
+++ b/frontend/src/lib/js/date.js
@@ -3,4 +3,11 @@ export function formatDate(date) {
     const cool_date = new Date(date);
     const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
     return formattedDate;
+}
+
+export function formatYear(date) {
+    const options = { year: 'numeric' };
+    const cool_date = new Date(date);
+    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
+    return formattedDate;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/js/processdata.js b/frontend/src/lib/js/processdata.js
index 63d2dcd..c47b1dc 100644
--- a/frontend/src/lib/js/processdata.js
+++ b/frontend/src/lib/js/processdata.js
@@ -1,15 +1,21 @@
-// processdata.js
-export function processData(data) {
-    if (data.status === 0) {
-      const info = data.info[0];
-      const experiences = data.experience;
-      const education = data.education;
-      const skills = data.skills[1];
-      const projects = data.skills[0];
-  
-      return { info, experiences, education, skills, projects };
-    } else {
-      return null; // Indicates an error
-    }
+function arrangeById(array) {
+  let newArray = new Array(array.length);
+  for (const value of array) {
+    newArray[value.id-1] = value;
   }
-  
\ No newline at end of file
+  return newArray;
+}
+
+export function processData(data) {
+  if (data.status === 0) {
+    const info = data.info[0];
+    const experiences = data.experience;
+    const education = arrangeById(data.education);
+    const skills = data.skills[1];
+    const projects = data.skills[0];
+
+    return {info, experiences, education, skills, projects};
+  } else {
+    return null;  // Indicates an error
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/lib/js/timeline.js b/frontend/src/lib/js/timeline.js
new file mode 100644
index 0000000..1f1fe52
--- /dev/null
+++ b/frontend/src/lib/js/timeline.js
@@ -0,0 +1,18 @@
+export function createTimeLine(positionsArray) {
+    let divArray = []
+    console.log(positionsArray);
+    for(let i=0; i<positionsArray.length-1; i++)
+    {
+        var newDiv = document.createElement('div');
+        newDiv.className = 'education-string';
+        const left = positionsArray[i].left + (2.5*16);
+        newDiv.style.left = `${left}px`;
+        const top = positionsArray[i].top + 16;
+        newDiv.style.top = `${top}px`;
+        const width = ((positionsArray[i+1].left)-(positionsArray[i].left));
+        console.log(width);
+        newDiv.style.width = `${width}px`;
+        divArray.push(newDiv);
+    }
+    return divArray;
+}
\ No newline at end of file