aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/@types/gallery/index.d.ts25
-rw-r--r--viewer/src/main.ts2
-rw-r--r--viewer/src/store/galleryStore.ts21
-rw-r--r--viewer/src/store/index.ts (renamed from viewer/src/plugins/vuex.ts)8
-rw-r--r--viewer/src/views/LdGallery.vue28
5 files changed, 80 insertions, 4 deletions
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
new file mode 100644
index 0000000..2dd11fb
--- /dev/null
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -0,0 +1,25 @@
1declare namespace Gallery {
2 interface Item {
3 title: string,
4 date: string,
5 description: string,
6 tags: string[],
7 path: string,
8 thumbnail: {
9 path: string,
10 },
11 properties: Image | Directory,
12 }
13 interface Image {
14 type: "image",
15 filesize: number,
16 resolution: {
17 width: number,
18 height: number,
19 }
20 }
21 interface Directory {
22 type: "directory",
23 items: Item[]
24 }
25} \ No newline at end of file
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index ca439bc..06fe8f8 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -3,7 +3,7 @@ import "@/assets/scss/global.scss";
3import "@/components" 3import "@/components"
4import "@/plugins/fontawesome"; 4import "@/plugins/fontawesome";
5import "@/plugins/buefy"; 5import "@/plugins/buefy";
6import store from '@/plugins/vuex' 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 LdGallery from "@/views/LdGallery.vue";
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
new file mode 100644
index 0000000..63e5109
--- /dev/null
+++ b/viewer/src/store/galleryStore.ts
@@ -0,0 +1,21 @@
1import { createModule, mutation, action } from "vuex-class-component";
2
3const VuexModule = createModule({
4 namespaced: "galleryStore",
5 strict: true
6})
7
8export default class GalleryStore extends VuexModule {
9
10 galleryItems: Gallery.Item[] = [];
11
12 @mutation setGalleryItems(galleryItems: Gallery.Item[]) {
13 this.galleryItems = galleryItems;
14 }
15
16 @action async fetchGalleryItems(url: string) {
17 fetch(url)
18 .then(response => response.json())
19 .then(this.setGalleryItems);
20 }
21} \ No newline at end of file
diff --git a/viewer/src/plugins/vuex.ts b/viewer/src/store/index.ts
index 9b2fa46..cadd8e3 100644
--- a/viewer/src/plugins/vuex.ts
+++ b/viewer/src/store/index.ts
@@ -3,20 +3,24 @@ import Vuex from 'vuex'
3import { extractVuexModule } from "vuex-class-component"; 3import { extractVuexModule } from "vuex-class-component";
4import { createProxy } from "vuex-class-component"; 4import { createProxy } from "vuex-class-component";
5import UIStore from '@/store/uiStore'; 5import UIStore from '@/store/uiStore';
6import GalleryStore from '@/store/galleryStore';
6 7
7Vue.use(Vuex) 8Vue.use(Vuex)
8 9
9const store = new Vuex.Store({ 10const store = new Vuex.Store({
10 modules: { 11 modules: {
11 ...extractVuexModule(UIStore) 12 ...extractVuexModule(UIStore),
13 ...extractVuexModule(GalleryStore)
12 } 14 }
13}); 15});
14 16
15Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore)); 17Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
18Vue.use((vue) => vue.prototype.$galleryStore = createProxy(store, GalleryStore));
16 19
17declare module 'vue/types/vue' { 20declare module 'vue/types/vue' {
18 interface Vue { 21 interface Vue {
19 $uiStore: UIStore 22 $uiStore: UIStore,
23 $galleryStore: GalleryStore
20 } 24 }
21} 25}
22 26
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index ecdfa1b..04474c3 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -4,6 +4,7 @@
4 <div class="layout layout-left">panel</div> 4 <div class="layout layout-left">panel</div>
5 <router-view class="layout layout-content" /> 5 <router-view class="layout layout-content" />
6 <ld-button-fullscreen /> 6 <ld-button-fullscreen />
7 <b-loading :active="isLoading" is-full-page />
7 </div> 8 </div>
8</template> 9</template>
9 10
@@ -11,7 +12,32 @@
11import { Component, Vue } from "vue-property-decorator"; 12import { Component, Vue } from "vue-property-decorator";
12 13
13@Component 14@Component
14export default class LdGallery extends Vue {} 15export default class LdGallery extends Vue {
16 isLoading: boolean = false;
17
18 mounted() {
19 this.fetchGalleryItems();
20 }
21
22 fetchGalleryItems() {
23 this.isLoading = true;
24 this.$galleryStore
25 .fetchGalleryItems("/gallery/index.json")
26 .finally(() => (this.isLoading = false))
27 .catch(this.displayError);
28 }
29
30 displayError(reason: any) {
31 this.$buefy.snackbar.open({
32 message: `Error ${reason}`,
33 actionText: "Retry",
34 position: "is-top",
35 type: "is-danger",
36 indefinite: true,
37 onAction: this.fetchGalleryItems,
38 });
39 }
40}
15</script> 41</script>
16 42
17<style lang="scss"> 43<style lang="scss">