aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2019-12-21 10:33:21 +0100
committerZero~Informatique2019-12-21 10:33:21 +0100
commit3f21d10338afe8eab699aaaea060556579e4b3c3 (patch)
treee6c9a51116b1cab9d6e44e21617bb7a1701ab463
parent9e4fdd6f38853d8a4a959901ab7902569de75484 (diff)
downloadldgallery-3f21d10338afe8eab699aaaea060556579e4b3c3.tar.gz
viewer:
Some renaming for better clarity Implemented a basic display of filenames with basic navigation
-rw-r--r--viewer/src/main.ts4
-rw-r--r--viewer/src/router/index.ts10
-rw-r--r--viewer/src/store/galleryStore.ts5
-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
6 files changed, 73 insertions, 26 deletions
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 06fe8f8..736e6c7 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -6,7 +6,7 @@ import "@/plugins/buefy";
6import store from '@/store' 6import store from '@/store'
7import i18n from "@/plugins/i18n"; 7import i18n from "@/plugins/i18n";
8import router from "@/router"; 8import router from "@/router";
9import LdGallery from "@/views/LdGallery.vue"; 9import MainLayout from "@/views/MainLayout.vue";
10 10
11Vue.config.productionTip = false; 11Vue.config.productionTip = false;
12 12
@@ -14,5 +14,5 @@ new Vue({
14 router, 14 router,
15 i18n, 15 i18n,
16 store, 16 store,
17 render: h => h(LdGallery) 17 render: h => h(MainLayout)
18}).$mount("#ldgallery"); 18}).$mount("#ldgallery");
diff --git a/viewer/src/router/index.ts b/viewer/src/router/index.ts
index 03ae1cd..f228422 100644
--- a/viewer/src/router/index.ts
+++ b/viewer/src/router/index.ts
@@ -1,13 +1,17 @@
1import Vue from "vue"; 1import Vue from "vue";
2import VueRouter from "vue-router"; 2import VueRouter from "vue-router";
3import Gallery from "@/views/Gallery.vue";
3 4
4Vue.use(VueRouter); 5Vue.use(VueRouter);
5 6
7// async way : component: () => import(/* webpackChunkName: "Gallery" */ "@/views/Gallery.vue"),
8
6const routes = [ 9const routes = [
7 { 10 {
8 path: "/", 11 path: "*",
9 name: "root", 12 name: "Gallery",
10 component: () => import(/* webpackChunkName: "root" */ "@/views/Root.vue"), 13 component: Gallery,
14 props: true
11 }, 15 },
12]; 16];
13 17
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 63e5109..4751561 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -7,9 +7,9 @@ const VuexModule = createModule({
7 7
8export default class GalleryStore extends VuexModule { 8export default class GalleryStore extends VuexModule {
9 9
10 galleryItems: Gallery.Item[] = []; 10 galleryItems: Gallery.Item | null = null;
11 11
12 @mutation setGalleryItems(galleryItems: Gallery.Item[]) { 12 @mutation setGalleryItems(galleryItems: Gallery.Item) {
13 this.galleryItems = galleryItems; 13 this.galleryItems = galleryItems;
14 } 14 }
15 15
@@ -18,4 +18,5 @@ export default class GalleryStore extends VuexModule {
18 .then(response => response.json()) 18 .then(response => response.json())
19 .then(this.setGalleryItems); 19 .then(this.setGalleryItems);
20 } 20 }
21
21} \ No newline at end of file 22} \ No newline at end of file
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>