From d1059eade638f8e74d3450ec4d6cf532cd1731b9 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Mon, 5 Feb 2024 15:34:29 +0100
Subject: [PATCH] Frontend: fixed issue with description crashing popup
 component. Popup does not show description if null, updated time locale
 depending on language. Popup is now multi-language.

---
 .../src/lib/components/projects-popup.svelte  | 74 +++++++++++--------
 frontend/src/lib/css/project-popup.css        | 10 +++
 frontend/src/lib/js/date.js                   | 40 ++++++----
 frontend/src/lib/lang/en.json                 | 11 ++-
 frontend/src/lib/lang/fr.json                 | 11 ++-
 frontend/src/routes/lang=[lang]/+page.js      |  9 ++-
 frontend/src/routes/lang=[lang]/+page.svelte  |  4 +-
 7 files changed, 106 insertions(+), 53 deletions(-)

diff --git a/frontend/src/lib/components/projects-popup.svelte b/frontend/src/lib/components/projects-popup.svelte
index 7d34ef1..783c391 100644
--- a/frontend/src/lib/components/projects-popup.svelte
+++ b/frontend/src/lib/components/projects-popup.svelte
@@ -31,6 +31,8 @@
 
   // Informations
   export let tags;
+  // Lang text
+  export let text;
 
   // Not exported but still Informations
   let filteredTags = [];
@@ -38,7 +40,7 @@
   let date = "Date";
   let type_project = "Type of project";
   let picture;
-  let description = "Description";
+  $: description = null;
   let report_link;
   let github_link;
   let archive_link;
@@ -102,7 +104,11 @@
 
 <svelte:window on:click={hidePopup} />
 
-<div id="project-popup-main" bind:this={popupMain}>
+<div
+  id="project-popup-main"
+  class={description != null ? "" : "project-popup-main-min"}
+  bind:this={popupMain}
+>
   <!--Closing button-->
   <button
     class="project-popup-close"
@@ -116,7 +122,7 @@
 
   <div class="project-popup-container">
     <!-- Information -->
-    <div>
+    <div class={description != null ? "" : "project-popup-nodescription"}>
       <h1 class="slide-title">{title}</h1>
       <div class="project-popup-img-container">
         <img class="project-popup-img" src={picture} alt="Project Popup" />
@@ -133,26 +139,28 @@
             path={type_project == "School" ? mdiSchool : mdiAccount}
             type="mdi"
           />
-          <p class="project-popup-subtitle slide-aftericon">{type_project}</p>
+          <p class="project-popup-subtitle slide-aftericon">{type_project == "School" ? text.popup_school : text.popup_personal}</p>
         </div>
       </div>
-      <div class="popup-mobile">
-        <div class="popup-subtitle-container">
-          <SvgIcon size="35" path={mdiTextBox} type="mdi" />
-          <p class="slide-subtitle slide-aftericon">Description</p>
+      {#if description != null}
+        <div class="popup-mobile">
+          <div class="popup-subtitle-container">
+            <SvgIcon size="35" path={mdiTextBox} type="mdi" />
+            <p class="slide-subtitle slide-aftericon">{text.popup_description}</p>
+          </div>
+          <div class="markdown">
+            <SvelteMarkdown
+              source={description}
+              renderers={{ code: MarkdownHighlight }}
+            />
+          </div>
         </div>
-        <div class="markdown">
-          <SvelteMarkdown
-            source={description}
-            renderers={{ code: MarkdownHighlight }}
-          />
-        </div>
-      </div>
+      {/if}
       <!-- Links -->
       {#if report_link != null || github_link != null || archive_link != null || application_link != null}
         <div class="popup-subtitle-container">
           <SvgIcon size="35" path={mdiLink} type="mdi" />
-          <p class="slide-subtitle slide-aftericon">Links</p>
+          <p class="slide-subtitle slide-aftericon">{text.popup_links}</p>
         </div>
         <div class="project-popup-link-container">
           {#if report_link != null}
@@ -162,7 +170,7 @@
               target="_blank"
             >
               <SvgIcon size="20" path={mdiFileDocumentOutline} type="mdi" />
-              <p>See Report</p>
+              <p>{text.popup_dl_rep}</p>
             </a>
           {/if}
           {#if github_link != null}
@@ -172,7 +180,7 @@
               target="_blank"
             >
               <SvgIcon size="20" path={mdiGithub} type="mdi" />
-              <p>Github Repository</p>
+              <p>{text.github}</p>
             </a>
           {/if}
           {#if archive_link != null}
@@ -182,7 +190,7 @@
               target="_blank"
             >
               <SvgIcon size="20" path={mdiBookMultiple} type="mdi" />
-              <p>Download Archive</p>
+              <p>{text.popup_dl_arc}</p>
             </a>
           {/if}
           {#if application_link != null}
@@ -192,7 +200,7 @@
               target="_blank"
             >
               <SvgIcon size="20" path={mdiDownload} type="mdi" />
-              <p>Download Application</p>
+              <p>{text.popup_dl_app}</p>
             </a>
           {/if}
         </div>
@@ -201,7 +209,7 @@
       {#if filteredTags.length != 0}
         <div class="popup-subtitle-container">
           <SvgIcon size="35" path={mdiTag} type="mdi" />
-          <p class="slide-subtitle slide-aftericon">Tags</p>
+          <p class="slide-subtitle slide-aftericon">{text.popup_tags}</p>
         </div>
         <div class="project-popup-link-container project-popup-tag-container">
           {#each filteredTags as tag}
@@ -217,18 +225,20 @@
       {/if}
     </div>
     <!-- Text -->
-    <div class="popup-desktop">
-      <div class="popup-subtitle-container">
-        <SvgIcon size="35" path={mdiTextBox} type="mdi" />
-        <p class="slide-subtitle slide-aftericon">Description</p>
+    {#if description != null}
+      <div class="popup-desktop">
+        <div class="popup-subtitle-container">
+          <SvgIcon size="35" path={mdiTextBox} type="mdi" />
+          <p class="slide-subtitle slide-aftericon">{text.popup_description}</p>
+        </div>
+        <div class="markdown">
+          <SvelteMarkdown
+            source={description}
+            renderers={{ code: MarkdownHighlight }}
+          />
+        </div>
       </div>
-      <div class="markdown">
-        <SvelteMarkdown
-          source={description}
-          renderers={{ code: MarkdownHighlight }}
-        />
-      </div>
-    </div>
+    {/if}
   </div>
 </div>
 <div id="project-popup-background"></div>
diff --git a/frontend/src/lib/css/project-popup.css b/frontend/src/lib/css/project-popup.css
index 56585bf..7fec82a 100644
--- a/frontend/src/lib/css/project-popup.css
+++ b/frontend/src/lib/css/project-popup.css
@@ -15,6 +15,12 @@
         visibility: hidden;
     }
 
+    .project-popup-main-min {
+        width: 40dvw !important;
+        /* 100-width/2 */
+        left: calc(30vw - 1.5rem) !important;
+    }
+
     .project-popup-container {
         display: flex;
         flex-direction: row;
@@ -31,6 +37,10 @@
         height: 80dvh;
     }
 
+    .project-popup-nodescription {
+        width: 100% !important;
+    }
+
     .project-popup-img {
         max-height: 16rem;
         max-width: 40dvh;
diff --git a/frontend/src/lib/js/date.js b/frontend/src/lib/js/date.js
index d72aa5b..ec9fea8 100644
--- a/frontend/src/lib/js/date.js
+++ b/frontend/src/lib/js/date.js
@@ -1,27 +1,41 @@
-export function formatDate(date) {
-    const options = { day: 'numeric', month: 'long', year: 'numeric' };
+import { writable } from "svelte/store";
+
+export let locale_lang = writable("en");
+
+function getLocale(date)
+{
+    let locale;
+    const unsubscribe = locale_lang.subscribe(value => {
+        locale = value
+    });
+    unsubscribe();
     const cool_date = new Date(date);
-    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
-    return formattedDate;
+    return {
+        locale: locale,
+        date: cool_date
+    }
+}
+
+export function formatDate(date) {
+    let data = getLocale(date);
+    const options = { day: 'numeric', month: 'long', year: 'numeric' };
+    return data.date.toLocaleDateString(data.locale, options);
 }
 
 export function formatDateMobile(date) {
+    let data = getLocale(date);
     const options = { month: 'numeric', year: 'numeric' };
-    const cool_date = new Date(date);
-    const formattedDate = cool_date.toLocaleString('fr-FR', options);
-    return formattedDate;
+    return data.date.toLocaleDateString(data.locale, options);
 }
 
 export function formatMonth(date) {
+    let data = getLocale(date);
     const options = { month: 'long', year: 'numeric' };
-    const cool_date = new Date(date);
-    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
-    return formattedDate;
+    return data.date.toLocaleDateString(data.locale, options);
 }
 
 export function formatYear(date) {
+    let data = getLocale(date);
     const options = { year: 'numeric' };
-    const cool_date = new Date(date);
-    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
-    return formattedDate;
+    return data.date.toLocaleDateString(data.locale, options);
 }
\ No newline at end of file
diff --git a/frontend/src/lib/lang/en.json b/frontend/src/lib/lang/en.json
index 73937ba..6970b31 100644
--- a/frontend/src/lib/lang/en.json
+++ b/frontend/src/lib/lang/en.json
@@ -14,5 +14,14 @@
     "madewith": "Made with",
     "usingsvelte": "using Svelte",
     "copyright": "All rights reserved, Yohan Boujon",
-    "github": "Github Repo"
+    "github": "Github Repo",
+
+    "popup_school": "School",
+    "popup_personal": "Personal",
+    "popup_links": "Links",
+    "popup_tags": "Tags",
+    "popup_description": "Description",
+    "popup_dl_app": "Download App",
+    "popup_dl_arc": "Download Archive",
+    "popup_dl_rep": "See Report"
   }
\ No newline at end of file
diff --git a/frontend/src/lib/lang/fr.json b/frontend/src/lib/lang/fr.json
index 43b6abc..48d9067 100644
--- a/frontend/src/lib/lang/fr.json
+++ b/frontend/src/lib/lang/fr.json
@@ -14,5 +14,14 @@
     "madewith": "Fait avec",
     "usingsvelte": "à l'aide de Svelte",
     "copyright": "Tous droits réservés, Yohan Boujon",
-    "github": "Lien Github"
+    "github": "Lien Github",
+
+    "popup_school": "École",
+    "popup_personal": "Personnel",
+    "popup_links": "Liens",
+    "popup_tags": "Compétences",
+    "popup_description": "Description",
+    "popup_dl_app": "Application",
+    "popup_dl_arc": "Archive ZIP",
+    "popup_dl_rep": "Voir le Rapport"
   }
\ No newline at end of file
diff --git a/frontend/src/routes/lang=[lang]/+page.js b/frontend/src/routes/lang=[lang]/+page.js
index b1fef0e..70e351b 100644
--- a/frontend/src/routes/lang=[lang]/+page.js
+++ b/frontend/src/routes/lang=[lang]/+page.js
@@ -1,4 +1,4 @@
-import { json } from '@sveltejs/kit';
+import { locale_lang } from "$lib/js/date.js"
 
 export async function load(context) {
   async function fetchData(data) {
@@ -35,8 +35,10 @@ export async function load(context) {
     }
   }
 
-  // Gathering the language
+  // Updating locale
   const lang = context.params.lang;
+  locale_lang.set(lang);
+  // Gathering language id
   let lang_id;
   const res = (await fetchData(`get_lang_id/${lang}`));
   if (res.status == 500) return {
@@ -45,8 +47,7 @@ export async function load(context) {
   else {
     lang_id = res.data.id;
   }
-
-  // Gathering texts for languages
+  // Updating json for locale text
   let text;
   const jsonData = await fetchJSON(lang);
   if (jsonData.status == 0) text = jsonData.data;
diff --git a/frontend/src/routes/lang=[lang]/+page.svelte b/frontend/src/routes/lang=[lang]/+page.svelte
index 23f56ab..be4b098 100644
--- a/frontend/src/routes/lang=[lang]/+page.svelte
+++ b/frontend/src/routes/lang=[lang]/+page.svelte
@@ -47,7 +47,7 @@
   // Sidebar
   let containerCv;
   let footer;
-  let sidebarLoaded = false;
+  $: sidebarLoaded = false;
   let Sidebar;
 
   // Mobile top bar
@@ -91,7 +91,7 @@
 />
 
 {#if data.status == 0}
-  <ProjectsPopup tags={cv.tags} />
+  <ProjectsPopup tags={cv.tags} {text} />
   <!-- TOPBAR DIV (POPUP: mobile) -->
   {#if innerWidth < 1200 && sidebarLoaded}
     <Sidebar info={cv.info} bind:sidebarContainer {text} />