aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/Gallery.vue31
-rw-r--r--viewer/src/views/GalleryDirectory.vue5
-rw-r--r--viewer/src/views/GalleryImage.vue2
-rw-r--r--viewer/src/views/GallerySearch.vue25
-rw-r--r--viewer/src/views/GalleryThumbnail.vue10
-rw-r--r--viewer/src/views/MainLayout.vue2
-rw-r--r--viewer/src/views/PanelLeft.vue9
7 files changed, 57 insertions, 27 deletions
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 2020280..38199b9 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,17 +1,20 @@
1<template> 1<template>
2 <div> 2 <div>
3 <gallery-directory v-if="isDirectory" :directory="currentItem" /> 3 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
4 <gallery-image v-if="isImage" :image="currentItem" /> 4 <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
5 <gallery-image v-else-if="isImage" :image="currentItem" />
5 </div> 6 </div>
6</template> 7</template>
7 8
8<script lang="ts"> 9<script lang="ts">
9import { Component, Vue, Prop } from "vue-property-decorator"; 10import { Component, Vue, Prop } from "vue-property-decorator";
11import GallerySearch from "./GallerySearch.vue";
10import GalleryDirectory from "./GalleryDirectory.vue"; 12import GalleryDirectory from "./GalleryDirectory.vue";
11import GalleryImage from "./GalleryImage.vue"; 13import GalleryImage from "./GalleryImage.vue";
14import GalleryStore from "../store/galleryStore";
12 15
13@Component({ 16@Component({
14 components: { GalleryDirectory, GalleryImage }, 17 components: { GallerySearch, GalleryDirectory, GalleryImage },
15}) 18})
16export default class Gallery extends Vue { 19export default class Gallery extends Vue {
17 @Prop(String) readonly pathMatch!: string; 20 @Prop(String) readonly pathMatch!: string;
@@ -24,25 +27,23 @@ export default class Gallery extends Vue {
24 return this.checkType("image"); 27 return this.checkType("image");
25 } 28 }
26 29
30 // Results of the search (by tags)
31 get currentSearch(): Gallery.Item[] {
32 const currentTags = this.$uiStore.currentTags;
33 let items = new Set<Gallery.Item>();
34 currentTags.flatMap(tag => tag.items).forEach(item => items.add(item));
35 return [...items];
36 }
37
38 // Item pointed by the URL (navigation)
27 get currentItem(): Gallery.Item | null { 39 get currentItem(): Gallery.Item | null {
28 const galleryItemsRoot = this.$galleryStore.galleryItemsRoot; 40 const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
29 if (galleryItemsRoot) return this.searchCurrentItem(galleryItemsRoot, this.pathMatch); 41 if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
30 return null; 42 return null;
31 } 43 }
32 44
33 // --- 45 // ---
34 46
35 private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
36 if (currentPath === item.path) return item;
37 if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
38 const itemFound = item.properties.items
39 .map(item => this.searchCurrentItem(item, currentPath))
40 .find(item => Boolean(item));
41 return itemFound || null;
42 }
43 return null;
44 }
45
46 private checkType(type: string): boolean { 47 private checkType(type: string): boolean {
47 return (this.currentItem && this.currentItem.properties.type === type) || false; 48 return (this.currentItem && this.currentItem.properties.type === type) || false;
48 } 49 }
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index 1dda027..d464a07 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,7 +1,7 @@
1<template> 1<template>
2 <div> 2 <div>
3 <strong>Directory: {{directory.path}}</strong> 3 <strong>Directory: {{directory.path}}</strong>
4 <div class="flex-thumbnails"> 4 <div class="flex">
5 <div v-for="(item) in directory.properties.items" :key="item.path"> 5 <div v-for="(item) in directory.properties.items" :key="item.path">
6 <router-link :to="item.path"> 6 <router-link :to="item.path">
7 <gallery-thumbnail :item="item" /> 7 <gallery-thumbnail :item="item" />
@@ -24,7 +24,4 @@ export default class GalleryDirectory extends Vue {
24</script> 24</script>
25 25
26<style lang="scss"> 26<style lang="scss">
27.flex-thumbnails {
28 display: flex;
29}
30</style> 27</style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index 07f8cc8..04d29d9 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -13,7 +13,7 @@ export default class GalleryImage extends Vue {
13 @Prop({ required: true }) readonly image!: Gallery.Image; 13 @Prop({ required: true }) readonly image!: Gallery.Image;
14 14
15 get imageSrc() { 15 get imageSrc() {
16 return `/gallery${this.image.path}`; 16 return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
17 } 17 }
18} 18}
19</script> 19</script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
new file mode 100644
index 0000000..887c1a3
--- /dev/null
+++ b/viewer/src/views/GallerySearch.vue
@@ -0,0 +1,25 @@
1<template>
2 <div class="flex">
3 <div v-for="(item) in items" :key="item.path">
4 <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
5 <gallery-thumbnail :item="item" />
6 </router-link>
7 </div>
8 <div v-if="items.length===0">{{$t('search.no-results')}}</div>
9 </div>
10</template>
11
12<script lang="ts">
13import { Component, Vue, Prop } from "vue-property-decorator";
14import GalleryThumbnail from "./GalleryThumbnail.vue";
15
16@Component({
17 components: { GalleryThumbnail },
18})
19export default class GalleryImage extends Vue {
20 @Prop({ required: true }) readonly items!: Gallery.Item[];
21}
22</script>
23
24<style lang="scss">
25</style>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 8e3e826..fdfd9d3 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,5 +1,11 @@
1<template> 1<template>
2 <img class="thumbnail" :src="imageSrc" :title="item.path" /> 2 <div>
3 <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" />
4 <div v-else class="flex-column flex-center">
5 <fa-icon icon="folder" class="fa-4x" />
6 {{item.path}}
7 </div>
8 </div>
3</template> 9</template>
4 10
5<script lang="ts"> 11<script lang="ts">
@@ -10,7 +16,7 @@ export default class GalleryThumbnail extends Vue {
10 @Prop({ required: true }) readonly item!: Gallery.Item; 16 @Prop({ required: true }) readonly item!: Gallery.Item;
11 17
12 get imageSrc() { 18 get imageSrc() {
13 return `/gallery${this.item.thumbnail.path}`; 19 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
14 } 20 }
15} 21}
16</script> 22</script>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2afd4b9..2a87ff1 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -25,7 +25,7 @@ export default class MainLayout extends Vue {
25 fetchGalleryItems() { 25 fetchGalleryItems() {
26 this.isLoading = true; 26 this.isLoading = true;
27 this.$galleryStore 27 this.$galleryStore
28 .fetchGalleryItems("/gallery/index.json") 28 .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}/index.json`)
29 .finally(() => (this.isLoading = false)) 29 .finally(() => (this.isLoading = false))
30 .catch(this.displayError); 30 .catch(this.displayError);
31 } 31 }
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 4b5bce0..c187ce6 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -1,8 +1,9 @@
1<template> 1<template>
2 <div> 2 <div class="flex-column">
3 <b-field :label="$t('panelLeft.title')"> 3 <h1>{{$t('panelLeft.mode')}}</h1>
4 <ld-tag-input /> 4 <ld-mode-radio />
5 </b-field> 5 <h1>{{$t('panelLeft.filters')}}</h1>
6 <ld-tag-input />
6 </div> 7 </div>
7</template> 8</template>
8 9