viewer: Improved the Gallery type definitions. Basic display of the images and thumbnails

example: "thumbnails" instead of "thumbs"

6 files changed, 54 insertions, 16 deletions

diff --git a/example/.gitignore b/example/.gitignore
index fbded57..f1212bc 100644
--- a/example/.gitignore
+++ b/example/.gitignore
@@ -1,2 +1,2 @@
 items
-thumbs
+thumbnails
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 2dd11fb..b47c812 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -1,4 +1,10 @@
 declare namespace Gallery {
+    interface Image extends Item {
+        properties: ImageProperties,
+    }
+    interface Directory extends Item {
+        properties: DirectoryProperties,
+    }
     interface Item {
         title: string,
         date: string,
@@ -8,9 +14,9 @@ declare namespace Gallery {
         thumbnail: {
             path: string,
         },
-        properties: Image | Directory,
+        properties: ImageProperties | DirectoryProperties,
     }
-    interface Image {
+    interface ImageProperties {
         type: "image",
         filesize: number,
         resolution: {
@@ -18,7 +24,7 @@ declare namespace Gallery {
             height: number,
         }
     }
-    interface Directory {
+    interface DirectoryProperties {
         type: "directory",
         items: Item[]
     }
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 10ff323..954903a 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="test-flex-col">
+  <div>
     <gallery-directory v-if="isDirectory" :directory="currentItem" />
     <gallery-image v-if="isImage" :image="currentItem" />
   </div>
@@ -50,10 +50,4 @@ export default class Root extends Vue {
 </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/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index bed1664..1dda027 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,20 +1,30 @@
 <template>
   <div>
     <strong>Directory: {{directory.path}}</strong>
-    <div v-for="(item, index) in directory.properties.items" :key="item.path">
-      <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+    <div class="flex-thumbnails">
+      <div v-for="(item) in directory.properties.items" :key="item.path">
+        <router-link :to="item.path">
+          <gallery-thumbnail :item="item" />
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryThumbnail from "./GalleryThumbnail.vue";
 
-@Component
+@Component({
+  components: { GalleryThumbnail },
+})
 export default class GalleryDirectory extends Vue {
-  @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
+  @Prop({ required: true }) readonly directory!: Gallery.Directory;
 }
 </script>
 
 <style lang="scss">
+.flex-thumbnails {
+  display: flex;
+}
 </style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index daaa504..07f8cc8 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <strong>Image: {{image.path}}</strong>
+    <img :src="imageSrc" />
   </div>
 </template>
 
@@ -8,8 +9,12 @@
 import { Component, Vue, Prop } from "vue-property-decorator";
 
 @Component
-export default class GalleryDirectory extends Vue {
+export default class GalleryImage extends Vue {
   @Prop({ required: true }) readonly image!: Gallery.Image;
+
+  get imageSrc() {
+    return `/gallery${this.image.path}`;
+  }
 }
 </script>
 
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
new file mode 100644
index 0000000..8e3e826
--- /dev/null
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -0,0 +1,23 @@
+<template>
+  <img class="thumbnail" :src="imageSrc" :title="item.path" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryThumbnail extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Item;
+
+  get imageSrc() {
+    return `/gallery${this.item.thumbnail.path}`;
+  }
+}
+</script>
+
+<style lang="scss">
+.thumbnail {
+  max-width: 250px;
+  max-height: 250px;
+}
+</style>