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.

2024-02-05 15:34:29 +01:00 · 2024-02-05 15:34:29 +01:00 · d1059eade6
commit d1059eade6
parent bcc2ee7e7f
7 changed files with 106 additions and 53 deletions
--- 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>
--- 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;
--- 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);
 }
--- 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"
  }
--- 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"
  }
--- 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;
--- 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} />