Customizable number of columns

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

diff --git a/src/App.vue b/src/App.vue
index be16234d4d2b08c45dc89309d0f8b14799b8fd77..17c32143b44cc93d4740f2cd6fdb547e00f2e0f4 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,7 +49,10 @@
 
     <section id="main-section" class="section">
       <div v-cloak class="container">
-        <ConnectivityChecker @network:status-update="offline = $event" />
+        <ConnectivityChecker
+          v-if="config.connectivityCheck"
+          @network:status-update="offline = $event"
+        />
         <div v-if="!offline">
           <!-- Optional messages -->
           <Message :item="config.message" />
@@ -63,9 +66,9 @@
               </h2>
               <Service
                 v-for="item in group.items"
-                :key="item.url"
+                :key="item.name"
                 v-bind:item="item"
-                class="column is-one-third-widescreen"
+                :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
           </div>
@@ -76,7 +79,7 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              class="column is-one-third-widescreen"
+              :class="['column', `is-${12 / config.columns}`]"
               v-for="group in services"
               :key="group.name"
             >
@@ -146,28 +149,34 @@ 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;
+    getConfig: function (path = "config.yml") {
+      return fetch(path).then((response) => {
+        if (!response.ok) {
+          throw Error(response.statusText);
         }
-        return response.text().then(function (body) {
-          return jsyaml.load(body);
-        });
+
+        const that = this;
+        return response
+          .text()
+          .then((body) => {
+            return jsyaml.load(body);
+          })
+          .then(function (config) {
+            if (config.externalConfig) {
+              return that.getConfig(config.externalConfig);
+            }
+            return config;
+          })
+          .catch((error) => {
+            return this.handleErrors("⚠️ Error loading configuration", error);
+          });
       });
     },
     matchesFilter: function (item) {
@@ -209,6 +218,15 @@ export default {
         },
       ];
     },
+    handleErrors: function (title, content) {
+      return {
+        message: {
+          title: title,
+          style: "is-danger",
+          content: content,
+        },
+      };
+    },
   },
 };
 </script>