aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
authorZero~Informatique2020-01-09 02:10:35 +0100
committerZero~Informatique2020-01-09 02:10:35 +0100
commit89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4 (patch)
tree8eb2c100707123f77ff6980c94e161d6214c648f /viewer/src/views
parentc1e334b883e28381851fca077ff36aee0387b1db (diff)
downloadldgallery-89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4.tar.gz
viewer: Changed "image" type to "picture". Adapted the code to the current compiler output format. The currentItem and currentPath are calculated in the store for easier multi-component access. Breadcrumb for current's position and navigation.
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/Gallery.vue36
-rw-r--r--viewer/src/views/GalleryDirectory.vue1
-rw-r--r--viewer/src/views/GalleryImage.vue22
-rw-r--r--viewer/src/views/GalleryPicture.vue21
-rw-r--r--viewer/src/views/GallerySearch.vue2
-rw-r--r--viewer/src/views/GalleryThumbnail.vue4
-rw-r--r--viewer/src/views/MainLayout.vue19
-rw-r--r--viewer/src/views/PanelTop.vue67
8 files changed, 119 insertions, 53 deletions
<
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 4deb937..a53df3d 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,32 +1,41 @@
1<template> 1<template>
2 <div> 2 <div>
3 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" /> 3 <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
4 <gallery-directory v-else-if="isDirectory" :directory="currentItem" /> 4 <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
5 <gallery-image v-else-if="isImage" :image="currentItem" /> 5 <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
6 <div v-else>Unknown type</div> 6 <div v-else>{{$t("gallery.unknowntype")}}</div>
7 </div> 7 </div>
8</template> 8</template>
9 9
10<script lang="ts"> 10<script lang="ts">
11import { Component, Vue, Prop } from "vue-property-decorator"; 11import { Component, Vue, Prop, Watch } from "vue-property-decorator";
12import { Operation } from '@/@types/tag/Operation'; 12import { Operation } from '@/@types/tag/Operation';
13import GallerySearch from "./GallerySearch.vue"; 13import GallerySearch from "./GallerySearch.vue";
14import GalleryDirectory from "./GalleryDirectory.vue"; 14import GalleryDirectory from "./GalleryDirectory.vue";
15import GalleryImage from "./GalleryImage.vue"; 15import GalleryPicture from "./GalleryPicture.vue";
16import GalleryStore from "../store/galleryStore";
17 16
18@Component({ 17@Component({
19 components: { GallerySearch, GalleryDirectory, GalleryImage }, 18 components: { GallerySearch, GalleryDirectory, GalleryPicture },
20}) 19})
21export default class Gallery extends Vue { 20export default class Gallery extends Vue {
22 @Prop(String) readonly pathMatch!: string; 21 @Prop(String) readonly pathMatch!: string;
23 22
23 mounted() {
24 this.pathChanged()
25 }
26
27 @Watch("pathMatch")
28 pathChanged() {
29 console.log("Path: ", this.pathMatch);
30 this.$galleryStore.setCurrentPath(this.pathMatch);
31 }
32
24 get isDirectory(): boolean { 33 get isDirectory(): boolean {
25 return this.checkType("directory"); 34 return this.checkType("directory");
26 } 35 }
27 36
28 get isImage(): boolean { 37 get isPicture(): boolean {
29 return this.checkType("image"); 38 return this.checkType("picture");
30 } 39 }
31 40
32 // Results of the search (by tags) 41 // Results of the search (by tags)
@@ -37,17 +46,10 @@ export default class Gallery extends Vue {
37 return this.aggregateAll(byOperation, intersection, substraction); 46 return this.aggregateAll(byOperation, intersection, substraction);
38 } 47 }
39 48
40 // Item pointed by the URL (navigation)
41 get currentItem(): Gallery.Item | null {
42 const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
43 if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
44 return null;
45 }
46
47 // --- 49 // ---
48 50
49 private checkType(type: string): boolean { 51 private checkType(type: string): boolean {
50 return this.currentItem?.properties.type === type ?? false; 52 return this.$galleryStore.currentItem?.properties.type === type ?? false;
51 } 53 }
52 54
53 private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation { 55 private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation {
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index d464a07..ada22c0 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,6 +1,5 @@
1<template> 1<template>
2 <div> 2 <div>
3 <strong>Directory: {{directory.path}}</strong>
4 <div class="flex"> 3 <div class="flex">
5 <div v-for="(item) in directory.properties.items" :key="item.path"> 4 <div v-for="(item) in directory.properties.items" :key="item.path">
6 <router-link :to="item.path"> 5 <router-link :to="item.path">
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
deleted file mode 100644
index 04d29d9..0000000
--- a/viewer/src/views/GalleryImage.vue
+++ /dev/null
@@ -1,22 +0,0 @@
1<template>
2 <div>
3 <strong>Image: {{image.path}}</strong>
4 <img :src="imageSrc" />
5 </div>
6</template>
7
8<script lang="ts">
9import { Component, Vue, Prop } from "vue-property-decorator";
10
11@Component
12export default class GalleryImage extends Vue {
13 @Prop({ required: true }) readonly image!: Gallery.Image;
14
15 get imageSrc() {
16 return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
17 }
18}
19</script>
20
21<style lang="scss">
22</style>
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue
new file mode 100644
index 0000000..b655162
--- /dev/null
+++ b/viewer/src/views/GalleryPicture.vue
@@ -0,0 +1,21 @@
1<template>
2 <div>
3 <img :src="pictureSrc" />
4 </div>
5</template>
6
7<script lang="ts">
8import { Component, Vue, Prop } from "vue-property-decorator";
9
10@Component
11export default class GalleryPicture extends Vue {
12 @Prop({ required: true }) readonly picture!: Gallery.Picture;
13
14 get pictureSrc() {
15 return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
16 }
17}
18</script>
19
20<style lang="scss">
21</style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 887c1a3..44f312b 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -16,7 +16,7 @@ import GalleryThumbnail from "./GalleryThumbnail.vue";
16@Component({ 16@Component({
17 components: { GalleryThumbnail }, 17 components: { GalleryThumbnail },
18}) 18})
19export default class GalleryImage extends Vue { 19export default class GalleryPicture extends Vue {
20 @Prop({ required: true }) readonly items!: Gallery.Item[]; 20 @Prop({ required: true }) readonly items!: Gallery.Item[];
21} 21}
22</script> 22</script>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index fdfd9d3..d7ef44c 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
1<template> 1<template>
2 <div> 2 <div>
3 <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" /> 3 <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
4 <div v-else class="flex-column flex-center"> 4 <div v-else class="flex-column flex-center">
5 <fa-icon icon="folder" class="fa-4x" /> 5 <fa-icon icon="folder" class="fa-4x" />
6 {{item.path}} 6 {{item.path}}
@@ -15,7 +15,7 @@ import { Component, Vue, Prop } from "vue-property-decorator";
15export default class GalleryThumbnail extends Vue { 15export default class GalleryThumbnail extends Vue {
16 @Prop({ required: true }) readonly item!: Gallery.Item; 16 @Prop({ required: true }) readonly item!: Gallery.Item;
17 17
18 get imageSrc() { 18 get pictureSrc() {
19 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`; 19 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
20 } 20 }
21} 21}
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2a87ff1..d643e66 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,6 +1,6 @@
1<template> 1<template>
2 <div :class="{fullscreen: $uiStore.fullscreen}"> 2 <div :class="{fullscreen: $uiStore.fullscreen}">
3 <div class="layout layout-top">header</div> 3 <panel-top class="layout layout-top" />
4 <panel-left class="layout layout-left" /> 4 <panel-left class="layout layout-left" />
5 <router-view class="layout layout-content" /> 5 <router-view class="layout layout-content" />
6 <ld-button-fullscreen /> 6 <ld-button-fullscreen />
@@ -11,9 +11,10 @@
11<script lang="ts"> 11<script lang="ts">
12import { Component, Vue } from "vue-property-decorator"; 12import { Component, Vue } from "vue-property-decorator";
13import PanelLeft from "./PanelLeft.vue"; 13import PanelLeft from "./PanelLeft.vue";
14import PanelTop from "./PanelTop.vue";
14 15
15@Component({ 16@Component({
16 components: { PanelLeft }, 17 components: { PanelLeft, PanelTop },
17}) 18})
18export default class MainLayout extends Vue { 19export default class MainLayout extends Vue {
19 isLoading: boolean = false; 20 isLoading: boolean = false;
@@ -44,8 +45,7 @@ export default class MainLayout extends Vue {
44</script> 45</script>
45 46
46<style lang="scss"> 47<style lang="scss">
47$layout-top: 30px; 48@import "@/assets/scss/theme.scss";
48$layout-left: 250px;
49 49
50body, 50body,
51html { 51html {
@@ -86,18 +86,17 @@ html {
86 } 86 }