From 9e4fdd6f38853d8a4a959901ab7902569de75484 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 08:08:54 +0100
Subject: viewer: Implemented the "example" project in devServer Display loader
 and error messages (not translated yet) Created a "GalleryStore" to fetch the
 JSon data from the gallery (currently from example)

---
 viewer/src/@types/gallery/index.d.ts | 25 +++++++++++++++++++++++++
 viewer/src/main.ts                   |  2 +-
 viewer/src/plugins/vuex.ts           | 23 -----------------------
 viewer/src/store/galleryStore.ts     | 21 +++++++++++++++++++++
 viewer/src/store/index.ts            | 27 +++++++++++++++++++++++++++
 viewer/src/views/LdGallery.vue       | 28 +++++++++++++++++++++++++++-
 6 files changed, 101 insertions(+), 25 deletions(-)
 create mode 100644 viewer/src/@types/gallery/index.d.ts
 delete mode 100644 viewer/src/plugins/vuex.ts
 create mode 100644 viewer/src/store/galleryStore.ts
 create mode 100644 viewer/src/store/index.ts

(limited to 'viewer/src')

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 @@
+declare namespace Gallery {
+    interface Item {
+        title: string,
+        date: string,
+        description: string,
+        tags: string[],
+        path: string,
+        thumbnail: {
+            path: string,
+        },
+        properties: Image | Directory,
+    }
+    interface Image {
+        type: "image",
+        filesize: number,
+        resolution: {
+            width: number,
+            height: number,
+        }
+    }
+    interface Directory {
+        type: "directory",
+        items: Item[]
+    }
+}
\ 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";
 import "@/components"
 import "@/plugins/fontawesome";
 import "@/plugins/buefy";
-import store from '@/plugins/vuex'
+import store from '@/store'
 import i18n from "@/plugins/i18n";
 import router from "@/router";
 import LdGallery from "@/views/LdGallery.vue";
diff --git a/viewer/src/plugins/vuex.ts b/viewer/src/plugins/vuex.ts
deleted file mode 100644
index 9b2fa46..0000000
--- a/viewer/src/plugins/vuex.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import { extractVuexModule } from "vuex-class-component";
-import { createProxy } from "vuex-class-component";
-import UIStore from '@/store/uiStore';
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  modules: {
-    ...extractVuexModule(UIStore)
-  }
-});
-
-Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $uiStore: UIStore
-  }
-}
-
-export default store;
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 @@
+import { createModule, mutation, action } from "vuex-class-component";
+
+const VuexModule = createModule({
+    namespaced: "galleryStore",
+    strict: true
+})
+
+export default class GalleryStore extends VuexModule {
+
+    galleryItems: Gallery.Item[] = [];
+
+    @mutation setGalleryItems(galleryItems: Gallery.Item[]) {
+        this.galleryItems = galleryItems;
+    }
+
+    @action async fetchGalleryItems(url: string) {
+        fetch(url)
+            .then(response => response.json())
+            .then(this.setGalleryItems);
+    }
+}
\ No newline at end of file
diff --git a/viewer/src/store/index.ts b/viewer/src/store/index.ts
new file mode 100644
index 0000000..cadd8e3
--- /dev/null
+++ b/viewer/src/store/index.ts
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { extractVuexModule } from "vuex-class-component";
+import { createProxy } from "vuex-class-component";
+import UIStore from '@/store/uiStore';
+import GalleryStore from '@/store/galleryStore';
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    ...extractVuexModule(UIStore),
+    ...extractVuexModule(GalleryStore)
+  }
+});
+
+Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
+Vue.use((vue) => vue.prototype.$galleryStore = createProxy(store, GalleryStore));
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $uiStore: UIStore,
+    $galleryStore: GalleryStore
+  }
+}
+
+export default store;
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 @@
     <div class="layout layout-left">panel</div>
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
+    <b-loading :active="isLoading" is-full-page />
   </div>
 </template>
 
@@ -11,7 +12,32 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {}
+export default class LdGallery extends Vue {
+  isLoading: boolean = false;
+
+  mounted() {
+    this.fetchGalleryItems();
+  }
+
+  fetchGalleryItems() {
+    this.isLoading = true;
+    this.$galleryStore
+      .fetchGalleryItems("/gallery/index.json")
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `Error ${reason}`,
+      actionText: "Retry",
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchGalleryItems,
+    });
+  }
+}
 </script>
 
 <style lang="scss">
-- 
cgit v1.2.3