Update README.md

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

diff --git a/src/App.vue b/src/App.vue
index fec020c36c265859a13af423cef9369a434e7c45..d97df0cc18d1f5ad5ff1af3ba5f8c8b1a059619c 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
         <div v-cloak class="container">
           <div class="logo">
             <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
-            <i v-if="config.icon" :class="['fa-fw', config.icon]"></i>
+            <i v-if="config.icon" :class="config.icon"></i>
           </div>
           <div class="dashboard-title">
             <span class="headline">{{ config.subtitle }}</span>
@@ -26,7 +26,7 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -40,9 +40,9 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
+          @search-focus="showMenu = true"
+          @search-open="navigateToFirstService"
+          @search-cancel="filterServices"
         />
       </Navbar>
     </div>
@@ -51,7 +51,7 @@
       <div v-cloak class="container">
         <ConnectivityChecker
           v-if="config.connectivityCheck"
-          @network:status-update="offline = $event"
+          @network-status-update="offline = $event"
         />
         <div v-if="!offline">
           <!-- Optional messages -->
@@ -150,16 +150,36 @@ export default {
   },
   created: async function () {
     const defaults = jsyaml.load(defaultConfig);
-    let config = await this.getConfig();
+    let config;
+    try {
+      config = await 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.title} | ${this.config.subtitle}`;
+    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);
+    }
   },
   methods: {
-    getConfig: function (path = "config.yml") {
+    getConfig: function (path = "assets/config.yml") {
       return fetch(path).then((response) => {
+        if (response.redirected) {
+          // This allows to work with authentication proxies.
+          window.location.href = response.url;
+          return;
+        }
         if (!response.ok) {
-          throw Error(response.statusText);
+          throw Error(`${response.statusText}: ${response.body}`);
         }
 
         const that = this;
@@ -173,9 +193,6 @@ export default {
               return that.getConfig(config.externalConfig);
             }
             return config;
-          })
-          .catch((error) => {
-            return this.handleErrors("⚠️ Error loading configuration", error);
           });
       });
     },
@@ -227,6 +244,11 @@ export default {
         },
       };
     },
+    createStylesheet: function (css) {
+      let style = document.createElement("style");
+      style.appendChild(document.createTextNode(css));
+      document.head.appendChild(style);
+    },
   },
 };
 </script>