Avoid full reload when swithcing page.

[github/bastienwirtz/homer.git] / src / App.vue

diff --git a/src/App.vue b/src/App.vue
index cd1d9ba2755d104d83c4a122d934f19846f65497..aff340cfb4cb1a33450667b2d3f2eab2a1fe591d 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,9 @@
       <section v-if="config.header" class="first-line">
         <div v-cloak class="container">
           <div class="logo">
-            <a href="#"><img v-if="config.logo" :src="config.logo" alt="dashboard logo" /></a>
+            <a href="#">
+              <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
+            </a>
             <i v-if="config.icon" :class="config.icon"></i>
           </div>
           <div class="dashboard-title">
@@ -149,36 +151,41 @@ export default {
     };
   },
   created: async function () {
-    const defaults = jsyaml.load(defaultConfig);
-    let config;
-    window.onhashchange = function() { location.reload(); };
-    try {
-      config = await this.getConfig();
-      const path = (window.location.hash.substring(1) != '') ? window.location.hash.substring(1) : null;
-      if (path) {
-        let pathConfig = await this.getConfig(`assets/${path}.yml`); // the slash (/) is included in the pathname
-        for (const prop in pathConfig) config[prop] = pathConfig[prop];
-      }
-      // config = await this.getConfig(path ? `assets/${path}.yml` : null);
-      //config = await (path ? this.getConfig(`assets/${path}.yml`) : this.getConfig())
-    } catch (error) {
-      console.log(error);
-      config = this.handleErrors("⚠️ Error loading configuration", error);
-    }
-    this.config = merge(defaults, config);
-    this.services = this.config.services;
-    document.title =
-      this.config.documentTitle ||
-      `${this.config.title} | ${this.config.subtitle}`;
-    if (this.config.stylesheet) {
-      let stylesheet = "";
-      for (const file of this.config.stylesheet) {
-        stylesheet += `@import "${file}";`;
-      }
-      this.createStylesheet(stylesheet);
-    }
+    this.buildDashboard();
+    window.onhashchange = this.buildDashboard;
   },
   methods: {
+    buildDashboard: async function () {
+      const defaults = jsyaml.load(defaultConfig);
+      let config;
+      try {
+        config = await this.getConfig();
+        const path =
+          window.location.hash.substring(1) != ""
+            ? window.location.hash.substring(1)
+            : null;
+
+        if (path) {
+          let pathConfig = await this.getConfig(`assets/${path}.yml`); // the slash (/) is included in the pathname
+          config = Object.assign(config, pathConfig);
+        }
+      } catch (error) {
+        console.log(error);
+        config = this.handleErrors("⚠️ Error loading configuration", error);
+      }
+      this.config = merge(defaults, config);
+      this.services = this.config.services;
+      document.title =
+        this.config.documentTitle ||
+        `${this.config.title} | ${this.config.subtitle}`;
+      if (this.config.stylesheet) {
+        let stylesheet = "";
+        for (const file of this.config.stylesheet) {
+          stylesheet += `@import "${file}";`;
+        }
+        this.createStylesheet(stylesheet);
+      }
+    },
     getConfig: function (path = "assets/config.yml") {
       return fetch(path).then((response) => {
         if (response.redirected) {