aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/Gallery.vue60
-rw-r--r--viewer/src/views/MainLayout.vue (renamed from viewer/src/views/LdGallery.vue)2
-rw-r--r--viewer/src/views/Root.vue18
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 @@
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>
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 @@
12import { Component, Vue } from "vue-property-decorator"; 12import { Component, Vue } from "vue-property-decorator";
13 13
14@Component 14@Component
15export default class LdGallery extends Vue { 15export default class MainLayout extends Vue {
16 isLoading: boolean = false; 16 isLoading: boolean = false;
17 17
18 mounted() { 18 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 @@
1<template>
2 <div>Hello World!</div>
3</template>
4
5<script lang="ts">
6import { Component, Vue } from "vue-property-decorator";
7
8@Component
9export default class Root extends Vue {}
10</script>
11
12<style scoped lang="scss">
13div {
14 display: flex;
15 align-items: center;
16 justify-content: center;
17}
18</style>