From 9616a663b6cda4db825761f169045083dabdf4ce Mon Sep 17 00:00:00 2001
From: Josua Frank <frank.josua@gmail.com>
Date: Fri, 23 Feb 2024 22:46:05 +0100
Subject: [PATCH] added informations about individual plates

---
 package-lock.json                       | 34 ++++++++---------
 package.json                            |  2 +-
 src/components/common/TileThumbnail.vue |  4 +-
 src/components/templates/TileList.vue   | 51 +++++++++++++++++++++++--
 src/stores/progress.ts                  | 10 ++---
 5 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7c282d..d40f34e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/tsconfig": "^0.5.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.22.0",
         "npm-run-all2": "^6.1.2",
         "prettier": "^3.2.5",
@@ -472,22 +472,22 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
-      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.1",
-        "debug": "^4.1.1",
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
       "engines": {
@@ -508,9 +508,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
+      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
     "node_modules/@intlify/bundle-utils": {
@@ -1830,16 +1830,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
diff --git a/package.json b/package.json
index 2790676..bb75adf 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.22.0",
     "npm-run-all2": "^6.1.2",
     "prettier": "^3.2.5",
diff --git a/src/components/common/TileThumbnail.vue b/src/components/common/TileThumbnail.vue
index ba476e3..847edc5 100644
--- a/src/components/common/TileThumbnail.vue
+++ b/src/components/common/TileThumbnail.vue
@@ -7,13 +7,13 @@
       width="75"
       class="img-pixelated rounded"
     />
-    <div class="position-absolute top-0 end-0">
+    <div class="position-absolute top-0 end-0 d-flex gap-1">
       <slot name="top-end"></slot>
     </div>
     <div class="thumbnail-footer position-absolute bottom-0 text-dark w-100 fw-bold rounded-bottom">
       {{ tile?.title }}
     </div>
-    <div class="position-absolute bottom-0 end-0">
+    <div class="position-absolute bottom-0 end-0 d-flex gap-1">
       <slot name="bottom-end"></slot>
     </div>
   </div>
diff --git a/src/components/templates/TileList.vue b/src/components/templates/TileList.vue
index d06d140..2cc5d81 100644
--- a/src/components/templates/TileList.vue
+++ b/src/components/templates/TileList.vue
@@ -4,9 +4,50 @@
       <div v-for="tile in tiles" :key="tile" class="position-relative m-2" @click="openTile(tile)">
         <TileThumbnail :number="tile">
           <template #bottom-end>
+            <div>
+              <svg
+                v-if="progressStore.finished.includes(tile)"
+                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>
+              <svg
+                v-else-if="progressStore.inProgress.includes(tile)"
+                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>
+              <svg
+                v-else-if="progressStore.reserved.includes(tile)"
+                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>
             <div class="favorite-button" @click.stop="toggleTileFavorite(tile)">
               <svg
-                v-if="store.favoriteTiles.includes(tile)"
+                v-if="favoriteTileStore.favoriteTiles.includes(tile)"
                 xmlns="http://www.w3.org/2000/svg"
                 class="text-warning"
                 style="height: 1.5rem; width: 1.5rem"
@@ -44,10 +85,12 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoriteTilesStore } from '@/stores/favorite-tiles'
+import { useProgressStore } from '@/stores/progress'
 import TileThumbnail from '@/components/common/TileThumbnail.vue'
 
 const router = useRouter()
-const store = useFavoriteTilesStore()
+const favoriteTileStore = useFavoriteTilesStore()
+const progressStore = useProgressStore()
 
 const props = defineProps({
   filter: {
@@ -61,7 +104,7 @@ const props = defineProps({
 
 const tiles = computed(() => {
   if (props.filter === 'favorites') {
-    return store.favoriteTiles
+    return favoriteTileStore.favoriteTiles
       .concat() // basically copies the array
       .sort(function (tileA, tileB) {
         return tileA - tileB
@@ -76,7 +119,7 @@ const tiles = computed(() => {
 })
 
 function toggleTileFavorite(number: number) {
-  store.toggleFavoriteTile(number)
+  favoriteTileStore.toggleFavoriteTile(number)
 }
 
 function openTile(number: number) {
diff --git a/src/stores/progress.ts b/src/stores/progress.ts
index 165398e..94a3d3c 100644
--- a/src/stores/progress.ts
+++ b/src/stores/progress.ts
@@ -4,11 +4,11 @@ export const useProgressStore = defineStore('progress', {
   state: () => {
     return {
       error: false,
-      finished: [],
-      inProgress: [],
-      reserved: [],
-      availableInStock: [],
-      availableOutOfStock: []
+      finished: [] as number[],
+      inProgress: [] as number[],
+      reserved: [] as number[],
+      availableInStock: [] as number[],
+      availableOutOfStock: [] as number[]
     }
   },
   getters: {