fixes

src/components/informations/ProjectProgress.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="!progress.error" class="position-relative">
     <div class="container d-flex flex-column justify-content-center h-100 my-4">
-      <h1 class="display-1 text-center mb-0 lh-1">{{ progress.finished / 5 }}%</h1>
+      <h1 class="display-1 text-center mb-0 lh-1">{{ progress.finished.length / 5 }}%</h1>
       <h5 class="text-center mb-0">{{ t('finished') }}</h5>
-      <small class="text-center mb-4">{{ progress.finished }} / 500 {{ t('tiles') }}</small>
+      <small class="text-center mb-4">{{ progress.finished.length }} / 500 {{ t('tiles') }}</small>
 
       <div
         class="progress rounded-pill overflow-visible"
@@ -16,20 +16,20 @@
           :class="p.classes"
           class="progress-bar position-relative overflow-visible"
           role="progressbar"
-          :style="`width: ${progress[i] / 5}%; ${p.styles};`"
-          :aria-valuenow="progress[i]"
+          :style="`width: ${progress[i].length / 5}%; ${p.styles}; overflow-x: clip !important`"
+          :aria-valuenow="progress[i].length"
           aria-valuemin="0"
           aria-valuemax="100"
           @mouseover="currentMouseOver = i"
         >
-          {{ progress[i] / 5 }}%
+          {{ progress[i].length / 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] }} {{ t('tiles') }}
+              {{ progress[i].length }} {{ t('tiles') }}
               <svg
                 width="1em"
                 height="1em"
@@ -96,10 +96,15 @@ const tileProgress = ref({
     styles: '',
     text: 'reserved'
   },
-  available: {
+  availableInStock: {
     classes: 'bg-warning text-bg-warning',
     styles: 'border-radius: 0 50rem 50rem 0;',
-    text: 'available'
+    text: 'available-in-stock'
+  },
+  availableOutOfStock: {
+    classes: 'bg-info text-bg-info',
+    styles: 'border-radius: 0 50rem 50rem 0;',
+    text: 'available-out-of-stock'
   }
 })
 </script>

src/locales/de-DE.json

@@ -114,6 +114,7 @@
   "finished": "Fertiggestellt",
   "in-progress": "In Arbeit",
   "reserved": "Reserviert",
-  "available": "Frei",
+  "available-in-stock": "Frei",
+  "available-out-of-stock": "Frei (nicht lagernd)",
   "privacy": "Datenschutz"
 }

src/locales/en-US.json

@@ -114,6 +114,7 @@
   "finished": "Finished",
   "in-progress": "In progress",
   "reserved": "Reserved",
-  "available": "Available",
+  "available-in-stock": "Available",
+  "available-out-of-stock": "Available (out of stock)",
   "privacy": "Privacy"
 }

src/stores/progress.ts

@@ -4,15 +4,23 @@ export const useProgressStore = defineStore('progress', {
   state: () => {
     return {
       error: false,
-      finished: 0,
-      inProgress: 0,
-      reserved: 0,
-      available: 0
+      finished: [],
+      inProgress: [],
+      reserved: [],
+      availableInStock: [],
+      availableOutOfStock: []
     }
   },
   getters: {
     isLoaded(state): boolean {
-      return state.finished + state.inProgress + state.reserved + state.available > 0
+      return (
+        state.finished.length +
+          state.inProgress.length +
+          state.reserved.length +
+          state.availableInStock.length +
+          state.availableOutOfStock.length >
+        0
+      )
     }
   }
 })
@@ -28,7 +36,8 @@ fetch('https://pixina.app/api/v1/progress')
           progress.finished = data.finished
           progress.inProgress = data.inProgress
           progress.reserved = data.reserved
-          progress.available = 500 - data.finished - data.inProgress - data.reserved
+          progress.availableInStock = data.availableInStock
+          progress.availableOutOfStock = data.availableOutOfStock
         })
         .catch((error: Error) => {
           progress.error = true