From 6d9c4283bd3dbd95b8fa0f0a1d6a06e052294e99 Mon Sep 17 00:00:00 2001
From: Josua Frank <frank.josua@gmail.com>
Date: Thu, 4 Jul 2024 00:05:39 +0200
Subject: [PATCH] fixes and enhancements

---
 components/informations/ProjectProgress.vue | 77 +++++++++---------
 components/templates/LegendComponent.vue    |  6 +-
 pages/templates/[number]/index.vue          | 86 ++++++++++++++++++---
 3 files changed, 123 insertions(+), 46 deletions(-)

diff --git a/components/informations/ProjectProgress.vue b/components/informations/ProjectProgress.vue
index ec3f0a1..1ac3d1f 100644
--- a/components/informations/ProjectProgress.vue
+++ b/components/informations/ProjectProgress.vue
@@ -12,28 +12,28 @@
       <div
         class="progress rounded-pill overflow-visible"
         style="height: 2.5rem"
-        @mouseleave="currentMouseOver = ''"
+        @mouseleave="currentMouseOver = -1"
       >
         <div
-          v-for="(p, i) in tileProgress"
+          v-for="(p, i) of tileProgress"
           :key="i"
           :class="p.classes"
           class="progress-bar position-relative overflow-visible"
           role="progressbar"
-          :style="`width: ${progress[i].length / 5}%; ${p.styles}; overflow-x: clip !important`"
-          :aria-valuenow="progress[i].length"
+          :style="`width: ${p.progress / 5}%; ${p.styles}; overflow-x: clip !important`"
+          :aria-valuenow="p.progress"
           aria-valuemin="0"
           aria-valuemax="100"
           @mouseover="currentMouseOver = i"
         >
-          {{ progress[i].length / 5 }}%
+          {{ p.progress / 5 }}%
           <Transition>
             <div
               v-if="currentMouseOver === i"
               style="z-index: 100; translate: 0 -50%"
               class="position-absolute start-50 translate-middle bg-black text-white px-3 py-1 rounded"
             >
-              {{ progress[i].length }} {{ $t("tiles") }}
+              {{ p.progress }} {{ $t("tiles") }}
               <svg
                 width="1em"
                 height="1em"
@@ -53,7 +53,7 @@
       </div>
 
       <div class="d-flex justify-content-around mt-3">
-        <div v-for="(p, i) in tileProgress" :key="i">
+        <div v-for="(p, i) of tileProgress" :key="i">
           <div
             :class="p.classes"
             class="d-inline-block ratio ratio-1x1"
@@ -77,35 +77,42 @@
 <script setup lang="ts">
 const progress = useProgressStore();
 
-const currentMouseOver = ref<string>();
+const currentMouseOver = ref<number>();
 
-const tileProgress = ref({
-  finished: {
-    classes: "bg-success text-bg-success",
-    styles: "border-radius: 50rem 0 0 50rem;",
-    text: "finished",
-  },
-  inProgress: {
-    classes: "bg-primary text-bg-primary",
-    styles: "",
-    text: "in-progress",
-  },
-  reserved: {
-    classes: "bg-danger text-bg-danger",
-    styles: "",
-    text: "reserved",
-  },
-  availableInStock: {
-    classes: "bg-warning text-bg-warning",
-    styles: "border-radius: 0 50rem 50rem 0;",
-    text: "available-in-stock",
-  },
-  availableOutOfStock: {
-    classes: "bg-info text-bg-info",
-    styles: "border-radius: 0 50rem 50rem 0;",
-    text: "available-out-of-stock",
-  },
-});
+const tileProgress = computed(() =>
+  [
+    {
+      classes: "bg-success text-bg-success",
+      styles: "border-radius: 50rem 0 0 50rem;",
+      text: "finished",
+      progress: progress.finished.length,
+    },
+    {
+      classes: "bg-primary text-bg-primary",
+      styles: "",
+      text: "in-progress",
+      progress: progress.inProgress.length,
+    },
+    {
+      classes: "bg-danger text-bg-danger",
+      styles: "",
+      text: "reserved",
+      progress: progress.reserved.length,
+    },
+    {
+      classes: "bg-warning text-bg-warning",
+      styles: "border-radius: 0 50rem 50rem 0;",
+      text: "available-in-stock",
+      progress: progress.availableInStock.length,
+    },
+    {
+      classes: "bg-info text-bg-info",
+      styles: "border-radius: 0 50rem 50rem 0;",
+      text: "available-out-of-stock",
+      progress: progress.availableOutOfStock.length,
+    },
+  ].filter((p) => p.progress > 0),
+);
 </script>
 <style scoped>
 .v-enter-active,
diff --git a/components/templates/LegendComponent.vue b/components/templates/LegendComponent.vue
index 837cceb..775ab5a 100644
--- a/components/templates/LegendComponent.vue
+++ b/components/templates/LegendComponent.vue
@@ -9,24 +9,28 @@
 </template>
 
 <script setup lang="ts">
+const progressStore = useProgressStore();
 const items = [
   {
     name: "finished",
     icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-flag-fill" viewBox="0 0 16 16">
              <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A20 20 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a20 20 0 0 0 1.349-.476l.019-.007.004-.002h.001" />
            </svg>`,
+    display: progressStore.finished.length > 0,
   },
   {
     name: "in-progress",
     icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock-fill" viewBox="0 0 16 16">
              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
            </svg>`,
+    display: progressStore.inProgress.length > 0,
   },
   {
     name: "reserved",
     icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
              <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2" />
            </svg>`,
+    display: progressStore.reserved.length > 0,
   },
-];
+].filter((item) => item.display);
 </script>
diff --git a/pages/templates/[number]/index.vue b/pages/templates/[number]/index.vue
index ddd6adb..9ff63ce 100644
--- a/pages/templates/[number]/index.vue
+++ b/pages/templates/[number]/index.vue
@@ -1,16 +1,71 @@
 <template>
   <div class="position-fixed top-0 end-0 bottom-0 start-0">
     <div class="d-flex flex-column h-100 bg-dark position-relative">
-      <div class="text-light d-flex justify-content-end p-2 gap-1">
-        <TemplatesNumberFullscreenButton
-          @fullscreen="(s) => (state.isFullscreen = s)"
-        />
-        <TemplatesNumberShareButton :tile-number="number" />
-        <TemplatesNumberDownloadButton :tile-number="number" />
-        <TemplatesNumberColorsButton :tile-number="number" />
-        <TemplatesNumberFavoriteButton :tile-number="number" />
-        <TemplatesNumberPrintButton :tile-number="number" />
-        <TemplatesNumberCloseButton />
+      <div class="text-light d-flex justify-content-between p-2 gap-1">
+        <div class="p-2 d-flex align-items-center gap-3">
+          <svg
+            v-if="progressStore.finished.includes(number)"
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-flag-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A20 20 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a20 20 0 0 0 1.349-.476l.019-.007.004-.002h.001"
+            />
+          </svg>
+          <div v-if="progressStore.finished.includes(number)" class="sm-hidden">
+            {{ $t("finished") }}
+          </div>
+          <svg
+            v-if="progressStore.inProgress.includes(number)"
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-clock-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"
+            />
+          </svg>
+          <div
+            v-if="progressStore.inProgress.includes(number)"
+            class="sm-hidden"
+          >
+            {{ $t("in-progress") }}
+          </div>
+          <svg
+            v-if="progressStore.reserved.includes(number)"
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-lock-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+            />
+          </svg>
+          <div v-if="progressStore.reserved.includes(number)" class="sm-hidden">
+            {{ $t("reserved") }}
+          </div>
+        </div>
+        <div>
+          <TemplatesNumberFullscreenButton
+            @fullscreen="(s) => (state.isFullscreen = s)"
+          />
+          <TemplatesNumberShareButton :tile-number="number" />
+          <TemplatesNumberDownloadButton :tile-number="number" />
+          <TemplatesNumberColorsButton :tile-number="number" />
+          <TemplatesNumberFavoriteButton :tile-number="number" />
+          <TemplatesNumberPrintButton :tile-number="number" />
+          <TemplatesNumberCloseButton />
+        </div>
       </div>
       <CommonZoomWrapper class="flex-grow-1" :src="src" />
       <div v-if="!state.isFullscreen" class="text-light p-2 text-center">
@@ -30,6 +85,7 @@
 <script setup lang="ts">
 const { t } = useI18n();
 const route = useRoute();
+const progressStore = useProgressStore();
 
 const number = computed(() => {
   const paramsNumber = route.params.number;
@@ -49,3 +105,13 @@ const title = computed(() =>
 const src = computed(() => `/images/templates/${number.value}-detailed.webp`);
 const state = reactive({ isFullscreen: false });
 </script>
+<style lang="scss" scoped>
+.sm-hidden {
+  display: none;
+}
+@media (min-width: 450px) {
+  .sm-hidden {
+    display: initial;
+  }
+}
+</style>