Update README.md

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

diff --git a/src/App.vue b/src/App.vue
index f7fd34adc30729e6b40790cb6141aea2fe427d52..d97df0cc18d1f5ad5ff1af3ba5f8c8b1a059619c 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">
@@ -26,7 +26,7 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -40,16 +40,19 @@
         <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>
 
     <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" />
@@ -58,14 +61,14 @@
           <div v-if="!vlayout || filter" class="columns is-multiline">
             <template v-for="group in services">
               <h2 v-if="group.name" class="column is-full group-title">
-                <i v-if="group.icon" :class="group.icon"></i>
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 {{ group.name }}
               </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,12 +79,12 @@
             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"
             >
               <h2 v-if="group.name" class="group-title">
-                <i v-if="group.icon" :class="group.icon"></i>
+                <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 {{ group.name }}
               </h2>
               <Service
@@ -132,7 +135,7 @@ export default {
     SearchInput,
     SettingToggle,
     DarkMode,
-    DynamicTheme
+    DynamicTheme,
   },
   data: function () {
     return {
@@ -142,32 +145,55 @@ export default {
       filter: "",
       vlayout: true,
       isDark: null,
-      showMenu: false
+      showMenu: false,
     };
   },
   created: async function () {
+    const defaults = jsyaml.load(defaultConfig);
+    let config;
     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}`;
+      config = await this.getConfig();
     } catch (error) {
-      this.offline = true;
+      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);
     }
   },
   methods: {
-    getConfig: function () {
-      return fetch("config.yml").then(function (response) {
-        if (response.status != 200) {
+    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;
         }
-        return response.text().then(function (body) {
-          return jsyaml.load(body);
-        });
+        if (!response.ok) {
+          throw Error(`${response.statusText}: ${response.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;
+          });
       });
     },
     matchesFilter: function (item) {
@@ -205,10 +231,24 @@ 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,
+        },
+      };
+    },
+    createStylesheet: function (css) {
+      let style = document.createElement("style");
+      style.appendChild(document.createTextNode(css));
+      document.head.appendChild(style);
+    },
+  },
 };
 </script>