diff options
Diffstat (limited to 'viewer/src/views')
-rw-r--r-- | viewer/src/views/Gallery.vue | 31 | ||||
-rw-r--r-- | viewer/src/views/GalleryDirectory.vue | 5 | ||||
-rw-r--r-- | viewer/src/views/GalleryImage.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/GallerySearch.vue | 25 | ||||
-rw-r--r-- | viewer/src/views/GalleryThumbnail.vue | 10 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 9 |
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"> |
9 | import { Component, Vue, Prop } from "vue-property-decorator"; | 10 | import { Component, Vue, Prop } from "vue-property-decorator"; |
11 | import GallerySearch from "./GallerySearch.vue"; | ||
10 | import GalleryDirectory from "./GalleryDirectory.vue"; | 12 | import GalleryDirectory from "./GalleryDirectory.vue"; |
11 | import GalleryImage from "./GalleryImage.vue"; | 13 | import GalleryImage from "./GalleryImage.vue"; |
14 | import GalleryStore from "../store/galleryStore"; | ||
12 | 15 | ||
13 | @Component({ | 16 | @Component({ |
14 | components: { GalleryDirectory, GalleryImage }, | 17 | components: { GallerySearch, GalleryDirectory, GalleryImage }, |
15 | }) | 18 | }) |
16 | export default class Gallery extends Vue { | 19 | export 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"> | ||
13 | import { Component, Vue, Prop } from "vue-property-decorator"; | ||
14 | import GalleryThumbnail from "./GalleryThumbnail.vue"; | ||
15 | |||
16 | @Component({ | ||
17 | components: { GalleryThumbnail }, | ||
18 | }) | ||
19 | export 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 | ||