From 3f21d10338afe8eab699aaaea060556579e4b3c3 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 10:33:21 +0100
Subject: viewer: Some renaming for better clarity Implemented a basic display
 of filenames with basic navigation

---
 viewer/src/main.ts               |   4 +-
 viewer/src/router/index.ts       |  10 ++--
 viewer/src/store/galleryStore.ts |   5 +-
 viewer/src/views/Gallery.vue     |  60 +++++++++++++++++++++++
 viewer/src/views/LdGallery.vue   | 100 ---------------------------------------
 viewer/src/views/MainLayout.vue  | 100 +++++++++++++++++++++++++++++++++++++++
 viewer/src/views/Root.vue        |  18 -------
 7 files changed, 172 insertions(+), 125 deletions(-)
 create mode 100644 viewer/src/views/Gallery.vue
 delete mode 100644 viewer/src/views/LdGallery.vue
 create mode 100644 viewer/src/views/MainLayout.vue
 delete mode 100644 viewer/src/views/Root.vue

(limited to 'viewer')

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/LdGallery.vue
deleted file mode 100644
index 04474c3..0000000
--- a/viewer/src/views/LdGallery.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout layout-top">header</div>
-    <div class="layout layout-left">panel</div>
-    <router-view class="layout layout-content" />
-    <ld-button-fullscreen />
-    <b-loading :active="isLoading" is-full-page />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class LdGallery extends Vue {
-  isLoading: boolean = false;
-
-  mounted() {
-    this.fetchGalleryItems();
-  }
-
-  fetchGalleryItems() {
-    this.isLoading = true;
-    this.$galleryStore
-      .fetchGalleryItems("/gallery/index.json")
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
-
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `Error ${reason}`,
-      actionText: "Retry",
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchGalleryItems,
-    });
-  }
-}
-</script>
-
-<style lang="scss">
-$layout-top: 30px;
-$layout-left: 250px;
-
-body,
-html {
-  height: 100%;
-  overflow: hidden;
-  --layout-top: #{$layout-top};
-  --layout-left: #{$layout-left};
-}
-.layout {
-  position: fixed;
-  transition: all 0.1s linear;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  &.layout-top {
-    height: $layout-top;
-    z-index: 1;
-  }
-  &.layout-left {
-    top: $layout-top;
-    width: $layout-left;
-    z-index: 2;
-  }
-  &.layout-content {
-    top: var(--layout-top);
-    left: var(--layout-left);
-    z-index: 3;
-  }
-}
-.fullscreen {
-  --layout-left: 0px;
-  --layout-top: 0px;
-  .layout {
-    &.layout-left {
-      transform: translate(-$layout-left, 0);
-    }
-  }
-}
-
-// temp colors
-.layout {
-  &.layout-top {
-    background-color: darkslategray;
-    color: white;
-  }
-  &.layout-left {
-    background-color: darkblue;
-    color: white;
-  }
-  &.layout-content {
-    background-color: lightcyan;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
new file mode 100644
index 0000000..9f3a17b
--- /dev/null
+++ b/viewer/src/views/MainLayout.vue
@@ -0,0 +1,100 @@
+<template>
+  <div :class="{fullscreen: $uiStore.fullscreen}">
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
+    <b-loading :active="isLoading" is-full-page />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class MainLayout extends Vue {
+  isLoading: boolean = false;
+
+  mounted() {
+    this.fetchGalleryItems();
+  }
+
+  fetchGalleryItems() {
+    this.isLoading = true;
+    this.$galleryStore
+      .fetchGalleryItems("/gallery/index.json")
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `Error ${reason}`,
+      actionText: "Retry",
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchGalleryItems,
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
+}
+.layout {
+  position: fixed;
+  transition: all 0.1s linear;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
+  }
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
+  }
+  &.layout-content {
+    top: var(--layout-top);
+    left: var(--layout-left);
+    z-index: 3;
+  }
+}
+.fullscreen {
+  --layout-left: 0px;
+  --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
+}
+
+// temp colors
+.layout {
+  &.layout-top {
+    background-color: darkslategray;
+    color: white;
+  }
+  &.layout-left {
+    background-color: darkblue;
+    color: white;
+  }
+  &.layout-content {
+    background-color: lightcyan;
+  }
+}
+</style>
\ No newline at end of file
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>
-- 
cgit v1.2.3