viewer: Changed "image" type to "picture". Adapted the code to the current compiler output format. The currentItem and currentPath are calculated in the store for easier multi-component access. Breadcrumb for current's position and navigation.

14 files changed, 165 insertions, 76 deletions

diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 310c865..97cc207 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -1,28 +1,22 @@
 declare namespace Gallery {
-    interface Image extends Item {
-        properties: ImageProperties,
+    interface Picture extends Item {
+        properties: PictureProperties,
     }
     interface Directory extends Item {
         properties: DirectoryProperties,
     }
     interface Item {
         title: string,
-        date: string,
+        datetime: string,
         description: string,
         tags: RawTag[],
         path: string,
-        thumbnail: {
-            path: string,
-        },
-        properties: ImageProperties | DirectoryProperties,
+        thumbnail?: string,
+        properties: PictureProperties | DirectoryProperties,
     }
-    interface ImageProperties {
-        type: "image",
-        filesize: number,
-        resolution: {
-            width: number,
-            height: number,
-        }
+    interface PictureProperties {
+        type: "picture",
+        resource: string,
     }
     interface DirectoryProperties {
         type: "directory",
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
new file mode 100644
index 0000000..a8ee0be
--- /dev/null
+++ b/viewer/src/assets/scss/theme.scss
@@ -0,0 +1,10 @@
+// === Theme
+
+$layout-top: 70px;
+$layout-left: 250px;
+
+$panel-top-bgcolor: #225;
+$panel-top-txtcolor: white;
+$panel-left-bgcolor: $panel-top-bgcolor;
+$panel-left-txtcolor: $panel-top-txtcolor;
+$content-bgcolor: #1e1e1e;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index b23c14a..9e8d9dd 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -13,7 +13,6 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Operation } from "@/@types/tag/Operation";
-import Gallery from '../views/Gallery.vue';
 
 @Component
 export default class LdTagInput extends Vue {
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 4c9f5d4..d44a116 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -6,5 +6,6 @@
   "mode.navigation": "Navigation",
   "mode.search": "Search",
   "search.no-results": "No results",
-  "panelLeft.propositions": "Proposed tags"
+  "panelLeft.propositions": "Proposed tags",
+  "gallery.unknowntype": "Unknown item type"
 }
\ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index 7308afe..3bd7d08 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -9,6 +9,7 @@ import {
     faTag,
     faPlus,
     faMinus,
+    faImage,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -18,6 +19,7 @@ library.add(
     faTag,
     faPlus,
     faMinus,
+    faImage,
 );
 
 Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 179fbe2..2d17fd6 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -9,6 +9,7 @@ export default class GalleryStore extends VuexModule {
 
     galleryItemsRoot: Gallery.Item | null = null;
     tags: Tag.Index = {};
+    currentPath: string = "/";
 
     // ---
 
@@ -20,6 +21,22 @@ export default class GalleryStore extends VuexModule {
         this.tags = tags;
     }
 
+    @mutation setCurrentPath(currentPath: string) {
+        this.currentPath = currentPath;
+    }
+
+    get currentItemPath(): Gallery.Item[] {
+        const galleryItemsRoot = this.galleryItemsRoot;
+        if (galleryItemsRoot)
+            return GalleryStore.searchCurrentItemPath(galleryItemsRoot, this.currentPath);
+        return [];
+    }
+
+    get currentItem(): Gallery.Item | null {
+        const currentItemPath = this.currentItemPath;
+        return currentItemPath.length > 0 ? currentItemPath[currentItemPath.length - 1] : null;
+    }
+
     // ---
 
     // Fetches the gallery's JSON metadata
@@ -61,14 +78,14 @@ export default class GalleryStore extends VuexModule {
     }
 
     // Searches for an item by path from a root item (navigation)
-    static searchCurrentItem(item: Gallery.Item, path: string): Gallery.Item | null {
-        if (path === item.path) return item;
+    private static searchCurrentItemPath(item: Gallery.Item, path: string): Gallery.Item[] {
+        if (path === item.path) return [item];
         if (item.properties.type === "directory" && path.startsWith(item.path)) {
-            const itemFound = item.properties.items
-                .map(item => this.searchCurrentItem(item, path))
-                .find(item => Boolean(item));
-            return itemFound ?? null;
+            const itemChain = item.properties.items
+                .map(item => this.searchCurrentItemPath(item, path))
+                .find(itemChain => itemChain.length > 0);
+            if (itemChain) return [item, ...itemChain];
         }
-        return null;
+        return [];
     }
 }
\ No newline at end of file
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 4deb937..a53df3d 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,32 +1,41 @@
 <template>
   <div>
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
-    <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
-    <gallery-image v-else-if="isImage" :image="currentItem" />
-    <div v-else>Unknown type</div>
+    <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
+    <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
+    <div v-else>{{$t("gallery.unknowntype")}}</div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { Operation } from '@/@types/tag/Operation';
 import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
-import GalleryImage from "./GalleryImage.vue";
-import GalleryStore from "../store/galleryStore";
+import GalleryPicture from "./GalleryPicture.vue";
 
 @Component({
-  components: { GallerySearch, GalleryDirectory, GalleryImage },
+  components: { GallerySearch, GalleryDirectory, GalleryPicture },
 })
 export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
+  mounted() {
+    this.pathChanged()
+  }
+
+  @Watch("pathMatch")
+  pathChanged() {
+    console.log("Path: ", this.pathMatch);
+    this.$galleryStore.setCurrentPath(this.pathMatch);
+  }
+