Merge remote-tracking branch 'upstream/main' into mealie-service

README.md

@@ -43,8 +43,8 @@
 - [Features](#features)
 - [Getting started](#getting-started)
 - [Configuration](docs/configuration.md)
+- [Custom services](docs/customservices.md)
 - [Tips & tricks](docs/tips-and-tricks.md)
-- [Roadmap](#roadmap)
 - [Development](docs/development.md)
 
 
@@ -134,9 +134,3 @@ npm run build
 ```
 
 Then your dashboard is ready to use in the `/dist` directory.
-
-
-## Roadmap
-
-- [ ] Add new themes.
-- [ ] Add support for custom service card (add custom feature to some service / app link)

docs/customservices.md

@@ -1,6 +1,8 @@
 # Custom Services
 
-Here is an overview of all custom services that are available within Homer.
+Some service can use a specific a component that provides some extra features by adding a `type` key to the service yaml
+configuration. Available services are in `src/components/`. Here is an overview of all custom services that are available 
+within Homer.
 
 ## PiHole
 
@@ -39,3 +41,13 @@ apikey: "01234deb70424befb1f4ef6a23456789"
 ```
 The url must be the root url of Radarr/Sonarr application.
 The Radarr/Sonarr API key can be found in Settings > General. It is needed to access the API.
+
+
+## PaperlessNG
+
+For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
+
+
+## Ping
+
+For Paperless you need an API-Key which you have to store at the item in the field `apikey`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homer",
-  "version": "21.03.2",
+  "version": "21.07.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "bulma": "^0.9.2",
-    "core-js": "^3.10.1",
-    "js-yaml": "^4.0.0",
+    "bulma": "^0.9.3",
+    "core-js": "^3.15.2",
+    "js-yaml": "^4.1.0",
     "lodash.merge": "^4.6.2",
     "register-service-worker": "^1.7.2",
-    "vue": "^2.6.12"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/ConnectivityChecker.vue

@@ -37,8 +37,8 @@ export default {
         method: "HEAD",
         cache: "no-store",
       })
-        .then(function () {
-          that.offline = false;
+        .then(function (response) {
+          that.offline = !response.ok;
         })
         .catch(function () {
           that.offline = true;

src/components/services/AdGuardHome.vue

@@ -51,9 +51,9 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(
-        `${this.item.url}/control/status`
-      ).then((response) => response.json());
+      this.status = await fetch(`${this.item.url}/control/status`).then(
+        (response) => response.json()
+      );
     },
   },
 };

src/components/services/PaperlessNG.vue

@@ -52,20 +52,22 @@ export default {
       if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
       var apikey = this.item.apikey;
       if (!apikey) {
-        console.error("apikey is not present in config.yml for the paperless entry!");
+        console.error(
+          "apikey is not present in config.yml for the paperless entry!"
+        );
         return;
       }
       const url = `${this.item.url}/api/documents/`;
       this.api = await fetch(url, {
         headers: {
-            "Authorization": "Token " + this.item.apikey
-          }
+          Authorization: "Token " + this.item.apikey,
+        },
       })
-        .then(function(response) {
+        .then(function (response) {
           if (!response.ok) {
-            throw new Error("Not 2xx response")
+            throw new Error("Not 2xx response");
           } else {
-            return response.json()
+            return response.json();
           }
         })
         .catch((e) => console.log(e));

src/components/services/PiHole.vue

@@ -83,13 +83,13 @@ export default {
   &.enabled:before {
     background-color: #94e185;
     border-color: #78d965;
-    box-shadow: 0 0 4px 1px #94e185;
+    box-shadow: 0 0 5px 1px #94e185;
   }
 
   &.disabled:before {
     background-color: #c9404d;
     border-color: #c42c3b;
-    box-shadow: 0 0 4px 1px #c9404d;
+    box-shadow: 0 0 5px 1px #c9404d;
   }
 
   &:before {

src/components/services/Ping.vue

@@ -22,8 +22,8 @@
                 </template>
               </p>
             </div>
-            <div v-if="api" class="status" :class="api.status">
-              {{ api.status }}
+            <div v-if="status" class="status" :class="status">
+              {{ status }}
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -42,9 +42,7 @@ export default {
     item: Object,
   },
   data: () => ({
-    api: {
-      status: "",
-    },
+    status: null,
   }),
   created() {
     this.fetchStatus();
@@ -52,9 +50,16 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
-      this.api.status = await fetch(url)
-        .then((response) => "enabled")
-        .catch((e) => "disabled");
+      fetch(url, { method: "HEAD", cache: "no-cache" })
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          this.status = "online";
+        })
+        .catch(() => {
+          this.status = "offline";
+        });
     },
   },
 };
@@ -68,16 +73,16 @@ export default {
   font-size: 0.8rem;
   color: var(--text-title);
 
-  &.enabled:before {
+  &.online:before {
     background-color: #94e185;
     border-color: #78d965;
-    box-shadow: 0 0 4px 1px #94e185;
+    box-shadow: 0 0 5px 1px #94e185;
   }
 
-  &.disabled:before {
+  &.offline:before {
     background-color: #c9404d;
     border-color: #c42c3b;
-    box-shadow: 0 0 4px 1px #c9404d;
+    box-shadow: 0 0 5px 1px #c9404d;
   }
 
   &:before {