Add a get started link when no configuration is found

3 files changed, 60 insertions, 8 deletions

diff --git a/src/App.vue b/src/App.vue
index 9a67a33..d2cb3ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,9 @@
           v-if="config.connectivityCheck"
           @network-status-update="offline = $event"
         />
+
+        <GetStarted v-if="loaded && !services" />
+
         <div v-if="!offline">
           <!-- Optional messages -->
           <Message :item="config.message" />
@@ -130,6 +133,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 +148,7 @@ export default {
   name: "App",
   components: {
     Navbar,
+    GetStarted,
     ConnectivityChecker,
     Service,
     Message,
@@ -154,6 +159,7 @@ export default {
   },
   data: function () {
     return {
+      loaded: false,
       config: null,
       services: null,
       offline: false,
@@ -166,6 +172,7 @@ export default {
   created: async function () {
     this.buildDashboard();
     window.onhashchange = this.buildDashboard;
+    this.loaded = true;
   },
   methods: {
     searchHotkey() {
@@ -193,6 +200,7 @@ export default {
       }
       this.config = merge(defaults, config);
       this.services = this.config.services;
+
       document.title =
         this.config.documentTitle ||
         `${this.config.title} | ${this.config.subtitle}`;
diff --git a/src/components/GetStarted.vue b/src/components/GetStarted.vue
new file mode 100644
index 0000000..dcabc02
--- /dev/null
+++ b/src/components/GetStarted.vue
@@ -0,0 +1,35 @@
+<template>
+  <article>
+    <div class="m-6 has-text-centered py-6">
+      <p class="is-size-5 mb-0">No configured service found!</p>
+      <p>Check out the documentation to start building your Homer dashboard.</p>
+      <p>
+        <a
+          class="button is-primary mt-5 has-text-weight-bold"
+          href="https://github.com/bastienwirtz/homer/blob/main/README.md#getting-started"
+          target="_blank"
+        >
+          Get started
+        </a>
+      </p>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "GetStarted",
+};
+</script>
+
+<style lang="scss" scoped>
+p {
+  color: #4a4a4a;
+}
+
+body #app a {
+  font-weight: 900;
+  color: #ffffff;
+  font-family: "Lato", sans-serif;
+}
+</style>
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 176d92e..c7e9962 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -8,7 +8,11 @@
         <strong v-if="dead > 0" class="notif dead" title="Dead">
           {{ dead }}
         </strong>
-        <strong v-if="misc > 0" class="notif misc" title="Other (creating, paused, exited, etc.)">
+        <strong
+          v-if="misc > 0"
+          class="notif misc"
+          title="Other (creating, paused, exited, etc.)"
+        >
           {{ misc }}
         </strong>
       </div>
@@ -55,7 +59,10 @@ export default {
         return "";
       }
       return this.containers.filter((container) => {
-        return container.State.toLowerCase() !== "running" && container.State.toLowerCase() !== "dead";
+        return (
+          container.State.toLowerCase() !== "running" &&
+          container.State.toLowerCase() !== "dead"
+        );
       }).length;
     },
   },
@@ -68,18 +75,20 @@ export default {
         "X-Api-Key": this.item.apikey,
       };
 
-      this.endpoints = await this.fetch("/api/endpoints", { headers })
-        .catch((e) => {
+      this.endpoints = await this.fetch("/api/endpoints", { headers }).catch(
+        (e) => {
           console.error(e);
-        });
+        }
+      );
 
       let containers = [];
       for (let endpoint of this.endpoints) {
         const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`;
-        const endpointContainers = await this.fetch(uri, { headers })
-          .catch((e) => {
+        const endpointContainers = await this.fetch(uri, { headers }).catch(
+          (e) => {
             console.error(e);
-          });
+          }
+        );
 
         containers = containers.concat(endpointContainers);
       }