diff --git a/package.json b/package.json index 8c8f219..41a96fe 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "dependencies": { "@fortawesome/fontawesome-free": "^5.15.4", "bulma": "^0.9.3", - "core-js": "^3.19.3", + "core-js": "^3.21.1", "js-yaml": "^4.1.0", "lodash.merge": "^4.6.2", "register-service-worker": "^1.7.2", 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); } diff --git a/yarn.lock b/yarn.lock index 4c1d140..a5e1e00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2773,10 +2773,10 @@ core-js@^2.4.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== -core-js@^3.19.3: - version "3.20.2" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.2.tgz#46468d8601eafc8b266bd2dd6bf9dee622779581" - integrity sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw== +core-js@^3.21.1: + version "3.21.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94" + integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig== core-js@^3.6.5: version "3.15.2"