Update docs/configuration.md

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

diff --git a/src/App.vue b/src/App.vue
index fda13c31e07ef4cb7bcf5f1e50365d29f8fe4e65..c58fca1096726f8f8d13196def444547b983dccb 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,10 @@
             </a>
             <i v-if="config.icon" :class="config.icon"></i>
           </div>
-          <div class="dashboard-title">
+          <div
+            class="dashboard-title"
+            :class="{ 'no-logo': !config.icon || !config.logo }"
+          >
             <span class="headline">{{ config.subtitle }}</span>
             <h1>{{ config.title }}</h1>
           </div>
@@ -61,7 +64,7 @@
           @network-status-update="offline = $event"
         />
 
-        <GetStarted v-if="loaded && !services" />
+        <GetStarted v-if="configurationNeeded" />
 
         <div v-if="!offline">
           <!-- Optional messages -->
@@ -69,8 +72,12 @@
 
           <!-- Horizontal layout -->
           <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">
+            <template v-for="(group, groupIndex) in services">
+              <h2
+                v-if="group.name"
+                class="column is-full group-title"
+                :key="`header-${groupIndex}`"
+              >
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 <div v-else-if="group.logo" class="group-logo media-left">
                   <figure class="image is-48x48">
@@ -81,7 +88,7 @@
               </h2>
               <Service
                 v-for="(item, index) in group.items"
-                :key="index"
+                :key="`service-${groupIndex}-${index}`"
                 :item="item"
                 :proxy="config.proxy"
                 :class="['column', `is-${12 / config.columns}`]"
@@ -96,8 +103,8 @@
           >
             <div
               :class="['column', `is-${12 / config.columns}`]"
-              v-for="group in services"
-              :key="group.name"
+              v-for="(group, groupIndex) in services"
+              :key="groupIndex"
             >
               <h2 v-if="group.name" class="group-title">
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
@@ -164,6 +171,7 @@ export default {
   data: function () {
     return {
       loaded: false,
+      configNotFound: false,
       config: null,
       services: null,
       offline: false,
@@ -173,6 +181,11 @@ export default {
       showMenu: false,
     };
   },
+  computed: {
+    configurationNeeded: function () {
+      return (this.loaded && !this.services) || this.configNotFound;
+    },
+  },
   created: async function () {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
@@ -224,6 +237,11 @@ export default {
           return;
         }
 
+        if (response.status == 404) {
+          this.configNotFound = true;
+          return {};
+        }
+
         if (!response.ok) {
           throw Error(`${response.statusText}: ${response.body}`);
         }
@@ -246,7 +264,8 @@ export default {
       return (
         item.name.toLowerCase().includes(this.filter) ||
         (item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||
-        (item.tag && item.tag.toLowerCase().includes(this.filter))
+        (item.tag && item.tag.toLowerCase().includes(this.filter)) ||
+        (item.keywords && item.keywords.toLowerCase().includes(this.filter))
       );
     },
     navigateToFirstService: function (target) {