Display parsing error

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

diff --git a/src/App.vue b/src/App.vue
index a35699785df88cd9ebf2903e6118d64555c0f245..fddc5853a6f20acbbf961a520313192b9ba8f057 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
       <section v-if="config.header" class="first-line">
         <div v-cloak class="container">
           <div class="logo">
-            <img v-if="config.logo" :src="config.logo" />
+            <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
             <i v-if="config.icon" :class="config.icon"></i>
           </div>
           <div class="dashboard-title">
@@ -146,29 +146,26 @@ export default {
     };
   },
   created: async function () {
-    try {
-      const defaults = jsyaml.load(defaultConfig);
-      let config = await this.getConfig();
-
-      this.config = merge(defaults, config);
-
-      console.log(this.config);
-      this.services = this.config.services;
-      document.title = `${this.config.title} | ${this.config.subtitle}`;
-    } catch (error) {
-      this.offline = true;
-    }
+    const defaults = jsyaml.load(defaultConfig);
+    let config = await this.getConfig();
+    this.config = merge(defaults, config);
+    this.services = this.config.services;
+    document.title = `${this.config.title} | ${this.config.subtitle}`;
   },
   methods: {
     getConfig: function () {
-      return fetch("config.yml").then(function (response) {
-        if (response.status != 200) {
-          return;
-        }
-        return response.text().then(function (body) {
-          return jsyaml.load(body);
+      return fetch("config.yml")
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          return response.text().then((body) => {
+            return jsyaml.load(body);
+          });
+        })
+        .catch((error) => {
+          return this.handleErrors("⚠️ Error loading configuration", error);
         });
-      });
     },
     matchesFilter: function (item) {
       return (
@@ -209,6 +206,15 @@ export default {
         },
       ];
     },
+    handleErrors: function (title, content) {
+      return {
+        message: {
+          title: title,
+          style: "is-danger",
+          content: content,
+        },
+      };
+    },
   },
 };
 </script>