Implemented VueX and a basic UIStore with the fullscreen mutation

Some renaming

5 files changed, 48 insertions, 10 deletions

diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 352b565..3a3593c 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -2,6 +2,7 @@ import Vue from "vue";
 import "@/assets/scss/global.scss";
 import "@/plugins/fontawesome";
 import "@/plugins/buefy";
+import store from '@/plugins/vuex'
 import i18n from "@/plugins/i18n";
 import router from "@/router";
 import LdGallery from "@/views/LdGallery.vue";
@@ -11,5 +12,6 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   i18n,
-  render: h => h(LdGallery),
+  store,
+  render: h => h(LdGallery)
 }).$mount("#ldgallery");
diff --git a/viewer/src/plugins/fontawesome.js b/viewer/src/plugins/fontawesome.ts
index 9bf4dba..9bf4dba 100644
--- a/viewer/src/plugins/fontawesome.js
+++ b/viewer/src/plugins/fontawesome.ts
diff --git a/viewer/src/plugins/vuex.ts b/viewer/src/plugins/vuex.ts
new file mode 100644
index 0000000..9b2fa46
--- /dev/null
+++ b/viewer/src/plugins/vuex.ts
@@ -0,0 +1,23 @@
+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/uiStore.ts b/viewer/src/store/uiStore.ts
new file mode 100644
index 0000000..c4143a1
--- /dev/null
+++ b/viewer/src/store/uiStore.ts
@@ -0,0 +1,15 @@
+import { createModule, mutation, action } from "vuex-class-component";
+
+const VuexModule = createModule({
+    namespaced: "uiStore",
+    strict: true
+})
+
+export default class UIStore extends VuexModule {
+
+    fullscreen: boolean = false;
+
+    @mutation toggleFullscreen() {
+        this.fullscreen = !this.fullscreen;
+    }
+}
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index 98f083f..d22bfa6 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,9 +1,13 @@
 <template>
-  <div :class="{fullscreen}">
+  <div :class="{fullscreen: $uiStore.fullscreen}">
     <div class="layout top">header</div>
     <div class="layout left">panel</div>
     <router-view class="layout content" />
-    <fa-icon icon="expand-arrows-alt" class="layout button-fullscreen" @click="toggleFullscreen" />
+    <fa-icon
+      icon="expand-arrows-alt"
+      class="layout button-fullscreen"
+      @click="$uiStore.toggleFullscreen()"
+    />
   </div>
 </template>
 
@@ -11,13 +15,7 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {
-  fullscreen: boolean = false;
-
-  toggleFullscreen() {
-    this.fullscreen = !this.fullscreen;
-  }
-}
+export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">