Simplify the container starting process to allow it to run with a

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

diff --git a/src/App.vue b/src/App.vue
index a0de3386b6ebaa0e9fa4fe20d3f4e5e2140ee60e..81f92f788f6bd63f4818b60b50c8525933a95ceb 100644 (file)
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,18 +30,22 @@
         :links="config.links"
         @navbar-toggle="showMenu = !showMenu"
       >
-        <DarkMode @updated="isDark = $event" />
+        <DarkMode
+          @updated="isDark = $event"
+          :defaultValue="this.config.defaults.colorTheme"
+        />
 
         <SettingToggle
           @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
           iconAlt="fa-columns"
+          :defaultValue="this.config.defaults.layout == 'columns'"
         />
 
         <SearchInput
           class="navbar-item is-inline-block-mobile"
-          :hotkey="config.hotkey.search"
+          :hotkey="searchHotkey()"
           @input="filterServices"
           @search-focus="showMenu = true"
           @search-open="navigateToFirstService"
@@ -56,14 +60,21 @@
           v-if="config.connectivityCheck"
           @network-status-update="offline = $event"
         />
+
+        <GetStarted v-if="loaded && !services" />
+
         <div v-if="!offline">
           <!-- Optional messages -->
           <Message :item="config.message" />
 
           <!-- 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">
@@ -74,7 +85,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}`]"
@@ -89,8 +100,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>
@@ -130,6 +141,7 @@ const jsyaml = require("js-yaml");
 const merge = require("lodash.merge");
 
 import Navbar from "./components/Navbar.vue";
+import GetStarted from "./components/GetStarted.vue";
 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 import Service from "./components/Service.vue";
 import Message from "./components/Message.vue";
@@ -144,6 +156,7 @@ export default {
   name: "App",
   components: {
     Navbar,
+    GetStarted,
     ConnectivityChecker,
     Service,
     Message,
@@ -154,6 +167,7 @@ export default {
   },
   data: function () {
     return {
+      loaded: false,
       config: null,
       services: null,
       offline: false,
@@ -166,8 +180,14 @@ export default {
   created: async function () {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
+    this.loaded = true;
   },
   methods: {
+    searchHotkey() {
+      if (this.config.hotkey && this.config.hotkey.search) {
+        return this.config.hotkey.search;
+      }
+    },
     buildDashboard: async function () {
       const defaults = jsyaml.load(defaultConfig);
       let config;
@@ -188,6 +208,7 @@ export default {
       }
       this.config = merge(defaults, config);
       this.services = this.config.services;
+
       document.title =
         this.config.documentTitle ||
         `${this.config.title} | ${this.config.subtitle}`;
@@ -206,6 +227,7 @@ export default {
           window.location.href = response.url;
           return;
         }
+
         if (!response.ok) {
           throw Error(`${response.statusText}: ${response.body}`);
         }