viewer:

Some renaming for better clarity
Implemented a basic display of filenames with basic navigation

3 files changed, 61 insertions, 19 deletions

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
new file mode 100644
index 0000000..3625838
--- /dev/null
+++ b/viewer/src/views/Gallery.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="test-flex-col">
+    <div v-if="isDirectory">
+      <strong>Directory: {{currentItem.path}}</strong>
+      <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
+        <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+      </div>
+    </div>
+    <div v-if="isImage">Image: {{currentItem.path}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class Root extends Vue {
+  @Prop(String) readonly pathMatch!: string;
+
+  get isDirectory(): boolean {
+    return this.checkType("directory");
+  }
+
+  get isImage(): boolean {
+    return this.checkType("image");
+  }
+
+  get currentItem(): Gallery.Item | null {
+    const galleryItems = this.$galleryStore.galleryItems;
+    if (galleryItems) return this.searchCurrentItem(galleryItems, this.pathMatch);
+    return null;
+  }
+
+  // ---
+
+  private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
+    if (currentPath === item.path) return item;
+    if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
+      const itemFound = item.properties.items
+        .map(item => this.searchCurrentItem(item, currentPath))
+        .find(item => Boolean(item));
+      return itemFound || null;
+    }
+    return null;
+  }
+
+  private checkType(type: string) {
+    return (this.currentItem && this.currentItem.properties.type === type) || false;
+  }
+}
+</script>
+
+<style lang="scss">
+#test-flex-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/MainLayout.vue
index 04474c3..9f3a17b 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -12,7 +12,7 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {
+export default class MainLayout extends Vue {
   isLoading: boolean = false;
 
   mounted() {
diff --git a/viewer/src/views/Root.vue b/viewer/src/views/Root.vue
deleted file mode 100644
index 384dcbe..0000000
--- a/viewer/src/views/Root.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>Hello World!</div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class Root extends Vue {}
-</script>
-
-<style scoped lang="scss">
-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>