6 files changed, 73 insertions, 26 deletions

diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 06fe8f8..736e6c7 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -6,7 +6,7 @@ import "@/plugins/buefy";
 import store from '@/store'
 import i18n from "@/plugins/i18n";
 import router from "@/router";
-import LdGallery from "@/views/LdGallery.vue";
+import MainLayout from "@/views/MainLayout.vue";
 
 Vue.config.productionTip = false;
 
@@ -14,5 +14,5 @@ new Vue({
   router,
   i18n,
   store,
-  render: h => h(LdGallery)
+  render: h => h(MainLayout)
 }).$mount("#ldgallery");
diff --git a/viewer/src/router/index.ts b/viewer/src/router/index.ts
index 03ae1cd..f228422 100644
--- a/viewer/src/router/index.ts
+++ b/viewer/src/router/index.ts
@@ -1,13 +1,17 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import Gallery from "@/views/Gallery.vue";
 
 Vue.use(VueRouter);
 
+// async way : component: () => import(/* webpackChunkName: "Gallery" */ "@/views/Gallery.vue"),
+
 const routes = [
   {
-    path: "/",
-    name: "root",
-    component: () => import(/* webpackChunkName: "root" */ "@/views/Root.vue"),
+    path: "*",
+    name: "Gallery",
+    component: Gallery,
+    props: true
   },
 ];
 
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 63e5109..4751561 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -7,9 +7,9 @@ const VuexModule = createModule({
 
 export default class GalleryStore extends VuexModule {
 
-    galleryItems: Gallery.Item[] = [];
+    galleryItems: Gallery.Item | null = null;
 
-    @mutation setGalleryItems(galleryItems: Gallery.Item[]) {
+    @mutation setGalleryItems(galleryItems: Gallery.Item) {
         this.galleryItems = galleryItems;
     }
 
@@ -18,4 +18,5 @@ export default class GalleryStore extends VuexModule {
             .then(response => response.json())
             .then(this.setGalleryItems);
     }
+
 }
\ No newline at end of file
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>