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/package-lock.json | 578 +----------------------------------
viewer/package.json | 4 +-
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 +-
viewer/vue.config.js | 13 +-
9 files changed, 116 insertions(+), 605 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
diff --git a/viewer/package-lock.json b/viewer/package-lock.json
index 0b287d9..8cf086a 100644
--- a/viewer/package-lock.json
+++ b/viewer/package-lock.json
@@ -2454,16 +2454,6 @@
"integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
"dev": true
},
- "bindings": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
- "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "file-uri-to-path": "1.0.0"
- }
- },
"block-stream": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -2997,7 +2987,6 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
- "fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@@ -5132,13 +5121,6 @@
"schema-utils": "^2.5.0"
}
},
- "file-uri-to-path": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
- "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
- "dev": true,
- "optional": true
- },
"filesize": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -5402,564 +5384,6 @@
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
- "fsevents": {
- "version": "1.2.11",
- "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz",
- "integrity": "sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==",
- "dev": true,
- "optional": true,
- "requires": {
- "bindings": "^1.5.0",
- "nan": "^2.12.1",
- "node-pre-gyp": "*"
- },
- "dependencies": {
- "abbrev": {
- "version": "1.1.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "ansi-regex": {
- "version": "2.1.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "aproba": {
- "version": "1.2.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "are-we-there-yet": {
- "version": "1.1.5",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "delegates": "^1.0.0",
- "readable-stream": "^2.0.6"
- }
- },
- "balanced-match": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "brace-expansion": {
- "version": "1.1.11",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "balanced-match": "^1.0.0",
- "concat-map": "0.0.1"
- }
- },
- "chownr": {
- "version": "1.1.3",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "code-point-at": {
- "version": "1.1.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "concat-map": {
- "version": "0.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "console-control-strings": {
- "version": "1.1.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "core-util-is": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "debug": {
- "version": "3.2.6",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "ms": "^2.1.1"
- }
- },
- "deep-extend": {
- "version": "0.6.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "delegates": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "detect-libc": {
- "version": "1.0.3",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "fs-minipass": {
- "version": "1.2.7",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "minipass": "^2.6.0"
- }
- },
- "fs.realpath": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "gauge": {
- "version": "2.7.4",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "aproba": "^1.0.3",
- "console-control-strings": "^1.0.0",
- "has-unicode": "^2.0.0",
- "object-assign": "^4.1.0",
- "signal-exit": "^3.0.0",
- "string-width": "^1.0.1",
- "strip-ansi": "^3.0.1",
- "wide-align": "^1.1.0"
- }
- },
- "glob": {
- "version": "7.1.6",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "fs.realpath": "^1.0.0",
- "inflight": "^1.0.4",
- "inherits": "2",
- "minimatch": "^3.0.4",
- "once": "^1.3.0",
- "path-is-absolute": "^1.0.0"
- }
- },
- "has-unicode": {
- "version": "2.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "iconv-lite": {
- "version": "0.4.24",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "safer-buffer": ">= 2.1.2 < 3"
- }
- },
- "ignore-walk": {
- "version": "3.0.3",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "minimatch": "^3.0.4"
- }
- },
- "inflight": {
- "version": "1.0.6",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "once": "^1.3.0",
- "wrappy": "1"
- }
- },
- "inherits": {
- "version": "2.0.4",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "ini": {
- "version": "1.3.5",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "is-fullwidth-code-point": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "number-is-nan": "^1.0.0"
- }
- },
- "isarray": {
- "version": "1.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "minimatch": {
- "version": "3.0.4",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "brace-expansion": "^1.1.7"
- }
- },
- "minimist": {
- "version": "0.0.8",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "minipass": {
- "version": "2.9.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "safe-buffer": "^5.1.2",
- "yallist": "^3.0.0"
- }
- },
- "minizlib": {
- "version": "1.3.3",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "minipass": "^2.9.0"
- }
- },
- "mkdirp": {
- "version": "0.5.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "minimist": "0.0.8"
- }
- },
- "ms": {
- "version": "2.1.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "needle": {
- "version": "2.4.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "debug": "^3.2.6",
- "iconv-lite": "^0.4.4",
- "sax": "^1.2.4"
- }
- },
- "node-pre-gyp": {
- "version": "0.14.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "detect-libc": "^1.0.2",
- "mkdirp": "^0.5.1",
- "needle": "^2.2.1",
- "nopt": "^4.0.1",
- "npm-packlist": "^1.1.6",
- "npmlog": "^4.0.2",
- "rc": "^1.2.7",
- "rimraf": "^2.6.1",
- "semver": "^5.3.0",
- "tar": "^4.4.2"
- }
- },
- "nopt": {
- "version": "4.0.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "abbrev": "1",
- "osenv": "^0.1.4"
- }
- },
- "npm-bundled": {
- "version": "1.1.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "npm-normalize-package-bin": "^1.0.1"
- }
- },
- "npm-normalize-package-bin": {
- "version": "1.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "npm-packlist": {
- "version": "1.4.7",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "ignore-walk": "^3.0.1",
- "npm-bundled": "^1.0.1"
- }
- },
- "npmlog": {
- "version": "4.1.2",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "are-we-there-yet": "~1.1.2",
- "console-control-strings": "~1.1.0",
- "gauge": "~2.7.3",
- "set-blocking": "~2.0.0"
- }
- },
- "number-is-nan": {
- "version": "1.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "object-assign": {
- "version": "4.1.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "once": {
- "version": "1.4.0",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "wrappy": "1"
- }
- },
- "os-homedir": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "os-tmpdir": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "osenv": {
- "version": "0.1.5",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "os-homedir": "^1.0.0",
- "os-tmpdir": "^1.0.0"
- }
- },
- "path-is-absolute": {
- "version": "1.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "process-nextick-args": {
- "version": "2.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "rc": {
- "version": "1.2.8",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "deep-extend": "^0.6.0",
- "ini": "~1.3.0",
- "minimist": "^1.2.0",
- "strip-json-comments": "~2.0.1"
- },
- "dependencies": {
- "minimist": {
- "version": "1.2.0",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
- },
- "readable-stream": {
- "version": "2.3.6",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "core-util-is": "~1.0.0",
- "inherits": "~2.0.3",
- "isarray": "~1.0.0",
- "process-nextick-args": "~2.0.0",
- "safe-buffer": "~5.1.1",
- "string_decoder": "~1.1.1",
- "util-deprecate": "~1.0.1"
- }
- },
- "rimraf": {
- "version": "2.7.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "glob": "^7.1.3"
- }
- },
- "safe-buffer": {
- "version": "5.1.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "safer-buffer": {
- "version": "2.1.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "sax": {
- "version": "1.2.4",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "semver": {
- "version": "5.7.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "set-blocking": {
- "version": "2.0.0",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "signal-exit": {
- "version": "3.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "string-width": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "code-point-at": "^1.0.0",
- "is-fullwidth-code-point": "^1.0.0",
- "strip-ansi": "^3.0.0"
- }
- },
- "string_decoder": {
- "version": "1.1.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "safe-buffer": "~5.1.0"
- }
- },
- "strip-ansi": {
- "version": "3.0.1",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "ansi-regex": "^2.0.0"
- }
- },
- "strip-json-comments": {
- "version": "2.0.1",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "tar": {
- "version": "4.4.13",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "chownr": "^1.1.1",
- "fs-minipass": "^1.2.5",
- "minipass": "^2.8.6",
- "minizlib": "^1.2.1",
- "mkdirp": "^0.5.0",
- "safe-buffer": "^5.1.2",
- "yallist": "^3.0.3"
- }
- },
- "util-deprecate": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "wide-align": {
- "version": "1.1.3",
- "bundled": true,
- "dev": true,
- "optional": true,
- "requires": {
- "string-width": "^1.0.2 || 2"
- }
- },
- "wrappy": {
- "version": "1.0.2",
- "bundled": true,
- "dev": true,
- "optional": true
- },
- "yallist": {
- "version": "3.1.1",
- "bundled": true,
- "dev": true,
- "optional": true
- }
- }
- },
"fstream": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -12993,4 +12417,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/viewer/package.json b/viewer/package.json
index 0431c27..dda1eb4 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
- "serve": "vue-cli-service serve --port 8085",
+ "serve": "vue-cli-service serve",
"build": "vue-cli-service build --modern",
"lint": "vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue|ts)' --locales './src/locales/**/*.json'"
@@ -43,4 +43,4 @@
"vue-cli-plugin-i18n": "^0.6.0",
"vue-template-compiler": "^2.6.10"
}
-}
\ No newline at end of file
+}
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 @@
panel
+
@@ -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,
+ });
+ }
+}