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)

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 @@
+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/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/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'
 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(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
+    $uiStore: UIStore,
+    $galleryStore: GalleryStore
   }
 }
 
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">