Display parsing error

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

diff --git a/src/App.vue b/src/App.vue
index f7fd34adc30729e6b40790cb6141aea2fe427d52..fddc5853a6f20acbbf961a520313192b9ba8f057 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
     :class="[
       `theme-${config.theme}`,
       isDark ? 'is-dark' : 'is-light',
-      !config.footer ? 'no-footer' : ''
+      !config.footer ? 'no-footer' : '',
     ]"
   >
     <DynamicTheme :themes="config.colors" />
@@ -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">
@@ -132,7 +132,7 @@ export default {
     SearchInput,
     SettingToggle,
     DarkMode,
-    DynamicTheme
+    DynamicTheme,
   },
   data: function () {
     return {
@@ -142,33 +142,30 @@ export default {
       filter: "",
       vlayout: true,
       isDark: null,
-      showMenu: false
+      showMenu: false,
     };
   },
   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 (
@@ -205,10 +202,19 @@ export default {
         {
           name: filter,
           icon: "fas fa-search",
-          items: searchResultItems
-        }
+          items: searchResultItems,
+        },
       ];
-    }
-  }
+    },
+    handleErrors: function (title, content) {
+      return {
+        message: {
+          title: title,
+          style: "is-danger",
+          content: content,
+        },
+      };
+    },
+  },
 };
 </script>