aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/Gallery.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views/Gallery.vue')
-rw-r--r--viewer/src/views/Gallery.vue60
1 files changed, 60 insertions, 0 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 @@
1<template>
2 <div id="test-flex-col">
3 <div v-if="isDirectory">
4 <strong>Directory: {{currentItem.path}}</strong>
5 <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
6 <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
7 </div>
8 </div>
9 <div v-if="isImage">Image: {{currentItem.path}}</div>
10 </div>
11</template>
12
13<script lang="ts">
14import { Component, Vue, Prop } from "vue-property-decorator";
15
16@Component
17export default class Root extends Vue {
18 @Prop(String) readonly pathMatch!: string;
19
20 get isDirectory(): boolean {
21 return this.checkType("directory");
22 }
23
24 get isImage(): boolean {
25 return this.checkType("image");
26 }
27
28 get currentItem(): Gallery.Item | null {
29 const galleryItems = this.$galleryStore.galleryItems;
30 if (galleryItems) return this.searchCurrentItem(galleryItems, this.pathMatch);
31 return null;
32 }
33
34 // ---
35
36 private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
37 if (currentPath === item.path) return item;
38 if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
39 const itemFound = item.properties.items
40 .map(item => this.searchCurrentItem(item, currentPath))
41 .find(item => Boolean(item));
42 return itemFound || null;
43 }
44 return null;
45 }
46
47 private checkType(type: string) {
48 return (this.currentItem && this.currentItem.properties.type === type) || false;
49 }
50}
51</script>
52
53<style lang="scss">
54#test-flex-col {
55 display: flex;
56 flex-direction: column;
57 align-items: center;
58 justify-content: center;
59}
60</style>