From 5db2414d052af629e2848f53ce9c2e0e686eefaf Mon Sep 17 00:00:00 2001
From: Aryess <yoann.celton@gmail.com>
Date: Tue, 12 Oct 2021 11:28:41 +1100
Subject: [PATCH 01/42] Fix #121 - Change default theme and layout from config

---
 docs/configuration.md            |  5 +++++
 src/App.vue                      |  6 +++++-
 src/assets/defaults.yml          |  6 ++++++
 src/components/DarkMode.vue      | 14 ++++++++++++++
 src/components/SettingToggle.vue |  3 +++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 50b5bd5..65fd018 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -29,6 +29,11 @@ proxy:
   # NOT All custom services implements this new option YET. Support will be extended very soon.
   useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 
 
+# Set the default layout and color scheme
+defaults:
+  layout: columns # Either 'columns', or 'list'
+  colorTheme: auto # One of 'auto', 'light', or 'dark'
+
 # Optional theming
 theme: default # 'default' or one of the themes available in 'src/assets/themes'.
 
diff --git a/src/App.vue b/src/App.vue
index c263c8a..1f1791c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,13 +30,17 @@
         :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
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
index ed1fbc9..85f2698 100644
--- a/src/assets/defaults.yml
+++ b/src/assets/defaults.yml
@@ -10,6 +10,12 @@ footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a hre
 columns: 3
 connectivityCheck: true
 
+defaults:
+  # columns, list
+  layout: columns
+  # auto, light, dark
+  colorTheme: auto
+
 theme: default
 colors:
   light:
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 80491fa..677238a 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -15,6 +15,9 @@
 <script>
 export default {
   name: "Darkmode",
+  props: {
+    defaultValue: String,
+  },
   data: function () {
     return {
       isDark: null,
@@ -30,6 +33,17 @@ export default {
     if ("overrideDark" in localStorage) {
       // Light theme is 1 and Dark theme is 2
       this.mode = JSON.parse(localStorage.overrideDark) ? 2 : 1;
+    } else {
+      switch (this.defaultValue) {
+        case "light":
+          this.mode = 1;
+          break;
+        case "dark":
+          this.mode = 2;
+          break;
+        default:
+          this.mode = 0;
+      }
     }
     this.isDark = this.getIsDark();
     this.$emit("updated", this.isDark);
diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
index 985ca84..6c8a10f 100644
--- a/src/components/SettingToggle.vue
+++ b/src/components/SettingToggle.vue
@@ -12,6 +12,7 @@ export default {
     name: String,
     icon: String,
     iconAlt: String,
+    defaultValue: Boolean,
   },
   data: function () {
     return {
@@ -24,6 +25,8 @@ export default {
 
     if (this.name in localStorage) {
       this.value = JSON.parse(localStorage[this.name]);
+    } else {
+      this.value = this.defaultValue;
     }
 
     this.$emit("updated", this.value);

From 754372579e1e048fb524413ba22dba4237d0c48c Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 2 Nov 2021 18:26:33 +0100
Subject: [PATCH 02/42] feat: add Lidarr service

---
 src/components/services/Lidarr.vue | 150 +++++++++++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 src/components/services/Lidarr.vue

diff --git a/src/components/services/Lidarr.vue b/src/components/services/Lidarr.vue
new file mode 100644
index 0000000..f5d3434
--- /dev/null
+++ b/src/components/services/Lidarr.vue
@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <div class="card" :class="item.class">
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div class="media">
+            <div v-if="item.logo" class="media-left">
+              <figure class="image is-48x48">
+                <img :src="item.logo" :alt="`${item.name} logo`" />
+              </figure>
+            </div>
+            <div v-if="item.icon" class="media-left">
+              <figure class="image is-48x48">
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ item.name }}</p>
+              <p class="subtitle is-6">{{ item.subtitle }}</p>
+            </div>
+            <div class="notifs">
+              <strong
+                v-if="activity > 0"
+                class="notif activity"
+                title="Activity"
+                >{{ activity }}</strong
+              >
+              <strong
+                v-if="warnings > 0"
+                class="notif warnings"
+                title="Warning"
+                >{{ warnings }}</strong
+              >
+              <strong v-if="errors > 0" class="notif errors" title="Error">{{
+                errors
+              }}</strong>
+              <strong
+                v-if="serverError"
+                class="notif errors"
+                title="Connection error to Lidarr API, check url and apikey in config.yml"
+                >?</strong
+              >
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Lidarr",
+  props: {
+    item: Object,
+  },
+  data: () => {
+    return {
+      activity: null,
+      warnings: null,
+      errors: null,
+      serverError: false,
+    };
+  },
+  created: function () {
+    this.fetchConfig();
+  },
+  methods: {
+    fetchConfig: function () {
+      fetch(`${this.item.url}/api/v1/health?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
+        .then((response) => {
+          if (response.status != 200) {
+            throw new Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((health) => {
+          this.warnings = 0;
+          this.errors = 0;
+          for (var i = 0; i < health.length; i++) {
+            if (health[i].type == "warning") {
+              this.warnings++;
+            } else if (health[i].type == "error") {
+              this.errors++;
+            }
+          }
+        })
+        .catch((e) => {
+          console.error(e);
+          this.serverError = true;
+        });
+      fetch(`${this.item.url}/api/v1/queue/status?apikey=${this.item.apikey}`, {
+        credentials: "include",
+      })
+        .then((response) => {
+          if (response.status != 200) {
+            throw new Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((queue) => {
+          this.activity = queue.totalCount;
+        })
+        .catch((e) => {
+          console.error(e);
+          this.serverError = true;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+.notifs {
+  position: absolute;
+  color: white;
+  font-family: sans-serif;
+  top: 0.3em;
+  right: 0.5em;
+}
+.notif {
+  padding-right: 0.35em;
+  padding-left: 0.35em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  border-radius: 0.25em;
+  position: relative;
+  margin-left: 0.3em;
+  font-size: 0.8em;
+}
+.activity {
+  background-color: #4fb5d6;
+}
+
+.warnings {
+  background-color: #d08d2e;
+}
+
+.errors {
+  background-color: #e51111;
+}
+</style>

From 0121fa8036caaa1f7136564a06da0e5aab697813 Mon Sep 17 00:00:00 2001
From: Paul Hagedorn <panzer1119@gmail.com>
Date: Tue, 2 Nov 2021 18:28:47 +0100
Subject: [PATCH 03/42] docs: add Lidarr service to customservices.md

---
 docs/customservices.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 3b3320d..311a4f2 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -65,18 +65,18 @@ Two lines are needed in the config.yml :
 The url must be the root url of Medusa application.
 The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API.
 
-## Sonarr/Radarr
+## Lidarr, Sonarr and Radarr
 
-This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Radarr/Sonarr application.
+This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Lidarr, Radarr or Sonarr application.
 Two lines are needed in the config.yml :
 
 ```yaml
-  type: "Radarr" or "Sonarr"
+  type: "Lidarr", "Radarr" or "Sonarr"
   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.
+The url must be the root url of Lidarr, Radarr or Sonarr application.
+The Lidarr, Radarr or Sonarr API key can be found in Settings > General. It is needed to access the API.
 
 ## PaperlessNG
 

From e961af82552dd8fd23dd2f34d191c5beb6b9ca94 Mon Sep 17 00:00:00 2001
From: Adrian Joian <ajoian@microsoft.com>
Date: Sat, 4 Dec 2021 01:35:55 +0100
Subject: [PATCH 04/42] Using a newer version of alpine

Signed-off-by: Adrian Joian <ajoian@microsoft.com>
---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index e31d97d..0a43027 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,7 +10,7 @@ COPY . .
 RUN yarn build
 
 # production stage
-FROM alpine:3.11
+FROM alpine:3.15
 
 ENV USER darkhttpd
 ENV GROUP darkhttpd

From e6ba84d35a8f2761e849b9c2cdc09984e8390035 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 12 Dec 2021 09:45:54 +0100
Subject: [PATCH 05/42] Upgrade dependancies

---
 .github/workflows/integration.yml |  2 +-
 package.json                      | 14 ++---
 yarn.lock                         | 90 +++++++++++++++----------------
 3 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
index 196113d..8d1a7ad 100644
--- a/.github/workflows/integration.yml
+++ b/.github/workflows/integration.yml
@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Integration
 
 on:
   push:
diff --git a/package.json b/package.json
index c5486bb..8c8f219 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "homer",
   "version": "21.09.1",
-  "license": "Apache-2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -10,17 +9,17 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "bulma": "^0.9.3",
-    "core-js": "^3.17.3",
+    "core-js": "^3.19.3",
     "js-yaml": "^4.1.0",
     "lodash.merge": "^4.6.2",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-pwa": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
@@ -31,5 +30,6 @@
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.12"
-  }
+  },
+  "license": "Apache-2.0"
 }
diff --git a/yarn.lock b/yarn.lock
index 18906e1..ca36eb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1173,10 +1173,10 @@
     lodash.kebabcase "^4.1.1"
     svg-tags "^1.0.0"
 
-"@vue/babel-preset-app@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.13.tgz#cb475321e4c73f7f110dac29a48c2a9cb80afeb6"
-  integrity sha512-pM7CR3yXB6L8Gfn6EmX7FLNE3+V/15I3o33GkSNsWvgsMp6HVGXKkXgojrcfUUauyL1LZOdvTmu4enU2RePGHw==
+"@vue/babel-preset-app@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.15.tgz#f6bc08f8f674e98a260004234cde18b966d72eb0"
+  integrity sha512-J+YttzvwRfV1BPczf8r3qCevznYk+jh531agVF+5EYlHF4Sgh/cGXTz9qkkiux3LQgvhEGXgmCteg1n38WuuKg==
   dependencies:
     "@babel/core" "^7.11.0"
     "@babel/helper-compilation-targets" "^7.9.6"
@@ -1258,61 +1258,61 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
     camelcase "^5.0.0"
 
-"@vue/cli-overlay@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.5.13.tgz#4f1fd2161be8f69d6cba8079f3f0d7dc4dee47a7"
-  integrity sha512-jhUIg3klgi5Cxhs8dnat5hi/W2tQJvsqCxR0u6hgfSob0ORODgUBlN+F/uwq7cKIe/pzedVUk1y07F13GQvPqg==
+"@vue/cli-overlay@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.5.15.tgz#0700fd6bad39336d4189ba3ff7d25e638e818c9c"
+  integrity sha512-0zI0kANAVmjFO2LWGUIzdGPMeE3+9k+KeRDXsUqB30YfRF7abjfiiRPq5BU9pOzlJbVdpRkisschBrvdJqDuDg==
 
-"@vue/cli-plugin-babel@~4.5.0":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.13.tgz#a89c482edcc4ea1d135645cec502a7f5fd4c30e7"
-  integrity sha512-ykvEAfD8PgGs+dGMGqr7l/nRmIS39NRzWLhMluPLTvDV1L+IxcoB73HNLGA/aENDpl8CuWrTE+1VgydcOhp+wg==
+"@vue/cli-plugin-babel@~4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.5.15.tgz#ae4fb2ed54255fe3d84df381dab68509641179ed"
+  integrity sha512-hBLrwYfFkHldEe34op/YNgPhpOWI5n5DB2Qt9I/1Epeif4M4iFaayrgjvOR9AVM6WbD3Yx7WCFszYpWrQZpBzQ==
   dependencies:
     "@babel/core" "^7.11.0"
-    "@vue/babel-preset-app" "^4.5.13"
-    "@vue/cli-shared-utils" "^4.5.13"
+    "@vue/babel-preset-app" "^4.5.15"
+    "@vue/cli-shared-utils" "^4.5.15"
     babel-loader "^8.1.0"
     cache-loader "^4.1.0"
     thread-loader "^2.1.3"
     webpack "^4.0.0"
 
-"@vue/cli-plugin-eslint@~4.5.0":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.13.tgz#8baf22d0d96d76720c7506646b96f4f62c05bdfa"
-  integrity sha512-yc2uXX6aBiy3vEf5TwaueaDqQbdIXIhk0x0KzEtpPo23jBdLkpOSoU5NCgE06g/ZiGAcettpmBSv73Hfp4wHEw==
+"@vue/cli-plugin-eslint@~4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.15.tgz#5781824a941f34c26336a67b1f6584a06c6a24ff"
+  integrity sha512-/2Fl6wY/5bz3HD035oSnFRMsKNxDxU396KqBdpCQdwdvqk4mm6JAbXqihpcBRTNPeTO6w+LwGe6FE56PVbJdbg==
   dependencies:
-    "@vue/cli-shared-utils" "^4.5.13"
+    "@vue/cli-shared-utils" "^4.5.15"
     eslint-loader "^2.2.1"
     globby "^9.2.0"
     inquirer "^7.1.0"
     webpack "^4.0.0"
     yorkie "^2.0.0"
 
-"@vue/cli-plugin-pwa@~4.5.0":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-4.5.13.tgz#a800639814b6f62a38f04198c340cfaee7295c3f"
-  integrity sha512-uU5pp94VU0YscfKq/mNRsKOdxG+CTqVlZWaYkRc+HCcwkJ/m/CnxgaEqQFr0QpHC8zmlX4gILO1RVYygJoR9tw==
+"@vue/cli-plugin-pwa@~4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-4.5.15.tgz#eb800c418d96b496deec9d063a1798fe6e9c2db8"
+  integrity sha512-yQzsspaIkjeQyN6btF8ATgbJFU023q1HC8uUpmiBa4QE9EyBlR8fSrKFhcJ0EmT6KnU7PMwlnOJ/OqjguFnufA==
   dependencies:
-    "@vue/cli-shared-utils" "^4.5.13"
+    "@vue/cli-shared-utils" "^4.5.15"
     webpack "^4.0.0"
     workbox-webpack-plugin "^4.3.1"
 
-"@vue/cli-plugin-router@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.13.tgz#0b67c8898a2bf132941919a2a2e5f3aacbd9ffbe"
-  integrity sha512-tgtMDjchB/M1z8BcfV4jSOY9fZSMDTPgF9lsJIiqBWMxvBIsk9uIZHxp62DibYME4CCKb/nNK61XHaikFp+83w==
+"@vue/cli-plugin-router@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.5.15.tgz#1e75c8c89df42c694f143b9f1028de3cf5d61e1e"
+  integrity sha512-q7Y6kP9b3k55Ca2j59xJ7XPA6x+iSRB+N4ac0ZbcL1TbInVQ4j5wCzyE+uqid40hLy4fUdlpl4X9fHJEwuVxPA==
   dependencies:
-    "@vue/cli-shared-utils" "^4.5.13"
+    "@vue/cli-shared-utils" "^4.5.15"
 
-"@vue/cli-plugin-vuex@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz#98646d8bc1e69cf6c6a6cba2fed3eace0356c360"
-  integrity sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==
+"@vue/cli-plugin-vuex@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz#466c1f02777d02fef53a9bb49a36cc3a3bcfec4e"
+  integrity sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==
 
-"@vue/cli-service@~4.5.0":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.5.13.tgz#a09e684a801684b6e24e5414ad30650970eec9ed"
-  integrity sha512-CKAZN4iokMMsaUyJRU22oUAz3oS/X9sVBSKAF2/shFBV5xh3jqAlKl8OXZYz4cXGFLA6djNuYrniuLAo7Ku97A==
+"@vue/cli-service@~4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.5.15.tgz#0e9a186d51550027d0e68e95042077eb4d115b45"
+  integrity sha512-sFWnLYVCn4zRfu45IcsIE9eXM0YpDV3S11vlM2/DVbIPAGoYo5ySpSof6aHcIvkeGsIsrHFpPHzNvDZ/efs7jA==
   dependencies:
     "@intervolga/optimize-cssnano-plugin" "^1.0.5"
     "@soda/friendly-errors-webpack-plugin" "^1.7.1"
@@ -1320,10 +1320,10 @@
     "@types/minimist" "^1.2.0"
     "@types/webpack" "^4.0.0"
     "@types/webpack-dev-server" "^3.11.0"
-    "@vue/cli-overlay" "^4.5.13"
-    "@vue/cli-plugin-router" "^4.5.13"
-    "@vue/cli-plugin-vuex" "^4.5.13"
-    "@vue/cli-shared-utils" "^4.5.13"
+    "@vue/cli-overlay" "^4.5.15"
+    "@vue/cli-plugin-router" "^4.5.15"
+    "@vue/cli-plugin-vuex" "^4.5.15"
+    "@vue/cli-shared-utils" "^4.5.15"
     "@vue/component-compiler-utils" "^3.1.2"
     "@vue/preload-webpack-plugin" "^1.1.0"
     "@vue/web-component-wrapper" "^1.2.0"
@@ -1372,10 +1372,10 @@
   optionalDependencies:
     vue-loader-v16 "npm:vue-loader@^16.1.0"
 
-"@vue/cli-shared-utils@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.13.tgz#acd40f31b4790f1634292bdaa5fca95dc1e0ff50"
-  integrity sha512-HpnOrkLg42RFUsQGMJv26oTG3J3FmKtO2WSRhKIIL+1ok3w9OjGCtA3nMMXN27f9eX14TqO64M36DaiSZ1fSiw==
+"@vue/cli-shared-utils@^4.5.15":
+  version "4.5.15"
+  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.5.15.tgz#dba3858165dbe3465755f256a4890e69084532d6"
+  integrity sha512-SKaej9hHzzjKSOw1NlFmc6BSE0vcqUQMQiv1cxQ2DhVyy4QxZXBmzmiLBUBe+hYZZs1neXW7n//udeN9bCAY+Q==
   dependencies:
     "@hapi/joi" "^15.0.1"
     chalk "^2.4.2"

From b4a2db6e37859abfa5477685b7547bb78e71a76b Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 12 Dec 2021 16:28:20 +0100
Subject: [PATCH 06/42] Services refactoring

---
 src/App.vue                             |   2 +-
 src/components/SearchInput.vue          |   4 +-
 src/components/services/Mealie.vue      | 106 ++++++------------
 src/components/services/Medusa.vue      | 142 ++++++++++--------------
 src/components/services/PaperlessNG.vue |  79 +++++--------
 src/components/services/PiHole.vue      |  85 ++++++--------
 6 files changed, 153 insertions(+), 265 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5c62a7f..4eb112d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,7 @@
 
         <SearchInput
           class="navbar-item is-inline-block-mobile"
-          :hotkey=searchHotkey()
+          :hotkey="searchHotkey()"
           @input="filterServices"
           @search-focus="showMenu = true"
           @search-open="navigateToFirstService"
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 586ff71..165c992 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -19,8 +19,8 @@ export default {
     value: String,
     hotkey: {
       type: String,
-      default: "/"
-    }
+      default: "/",
+    },
   },
   mounted() {
     this._keyListener = function (event) {
diff --git a/src/components/services/Mealie.vue b/src/components/services/Mealie.vue
index 790a9b1..b5b2255 100644
--- a/src/components/services/Mealie.vue
+++ b/src/components/services/Mealie.vue
@@ -1,47 +1,33 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-                <template v-else-if="meal"> Today: {{ meal.name }} </template>
-                <template v-else-if="stats">
-                  happily keeping {{ stats.totalRecipes }} recipes organized
-                </template>
-              </p>
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="meal"> Today: {{ meal.name }} </template>
+        <template v-else-if="stats">
+          happily keeping {{ stats.totalRecipes }} recipes organized
+        </template>
+      </p>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Mealie",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => ({
     stats: null,
     meal: null,
@@ -51,44 +37,20 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
-      this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
-        headers: {
-          Authorization: "Bearer " + this.item.apikey,
-          Accept: "application/json",
-        },
-      })
-        .then(function (response) {
-          if (!response.ok) {
-            throw new Error("Not 2xx response");
-          } else {
-            if (response != null) {
-              return response.json();
-            }
-          }
-        })
-        .catch((e) => console.log(e));
-      this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
-        headers: {
-          Authorization: "Bearer " + this.item.apikey,
-          Accept: "application/json",
-        },
-      })
-        .then(function (response) {
-          if (!response.ok) {
-            throw new Error("Not 2xx response");
-          } else {
-            return response.json();
-          }
-        })
-        .catch((e) => console.log(e));
+      const headers = {
+        Authorization: "Bearer " + this.item.apikey,
+        Accept: "application/json",
+      };
+
+      if (this.item.subtitle != null) return;
+
+      this.meal = await this.fetch("/api/meal-plans/today/", { headers }).catch(
+        (e) => console.log(e)
+      );
+      this.stats = await this.fetch("/api/debug/statistics/", {
+        headers,
+      }).catch((e) => console.log(e));
     },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
-</style>
diff --git a/src/components/services/Medusa.vue b/src/components/services/Medusa.vue
index 5720649..43b5651 100644
--- a/src/components/services/Medusa.vue
+++ b/src/components/services/Medusa.vue
@@ -1,65 +1,49 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">{{ item.subtitle }}</p>
-            </div>
-            <div class="notifs">
-              <strong
-                v-if="config !== null && config.system.news.unread > 0"
-                class="notif news"
-                title="News"
-                >{{ config.system.news.unread }}</strong
-              >
-              <strong
-                v-if="config !== null && config.main.logs.numWarnings > 0"
-                class="notif warnings"
-                title="Warning"
-                >{{ config.main.logs.numWarnings }}</strong
-              >
-              <strong
-                v-if="config !== null && config.main.logs.numErrors > 0"
-                class="notif errors"
-                title="Error"
-                >{{ config.main.logs.numErrors }}</strong
-              >
-              <strong
-                v-if="serverError"
-                class="notif errors"
-                title="Connection error to Medusa API, check url and apikey in config.yml"
-                >?</strong
-              >
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong
+          v-if="config !== null && config.system.news.unread > 0"
+          class="notif news"
+          title="News"
+          >{{ config.system.news.unread }}</strong
+        >
+        <strong
+          v-if="config !== null && config.main.logs.numWarnings > 0"
+          class="notif warnings"
+          title="Warning"
+          >{{ config.main.logs.numWarnings }}</strong
+        >
+        <strong
+          v-if="config !== null && config.main.logs.numErrors > 0"
+          class="notif errors"
+          title="Error"
+          >{{ config.main.logs.numErrors }}</strong
+        >
+        <strong
+          v-if="serverError"
+          class="notif errors"
+          title="Connection error to Medusa API, check url and apikey in config.yml"
+          >?</strong
+        >
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Medusa",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => {
     return {
       config: null,
@@ -71,16 +55,9 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/v2/config`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
+      this.fetch("/api/v2/config", {
+        headers: { "X-Api-Key": this.item.apikey },
       })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
         .then((conf) => {
           this.config = conf;
         })
@@ -94,35 +71,32 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .notifs {
   position: absolute;
   color: white;
   font-family: sans-serif;
   top: 0.3em;
   right: 0.5em;
-}
-.notif {
-  padding-right: 0.35em;
-  padding-left: 0.35em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  border-radius: 0.25em;
-  position: relative;
-  margin-left: 0.3em;
-  font-size: 0.8em;
-}
-.news {
-  background-color: #777777;
-}
+  .notif {
+    padding-right: 0.35em;
+    padding-left: 0.35em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+    &.news {
+      background-color: #777777;
+    }
 
-.warnings {
-  background-color: #d08d2e;
-}
+    &.warnings {
+      background-color: #d08d2e;
+    }
 
-.errors {
-  background-color: #e51111;
+    &.errors {
+      background-color: #e51111;
+    }
+  }
 }
 </style>
diff --git a/src/components/services/PaperlessNG.vue b/src/components/services/PaperlessNG.vue
index af13317..69f2437 100644
--- a/src/components/services/PaperlessNG.vue
+++ b/src/components/services/PaperlessNG.vue
@@ -1,46 +1,32 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-                <template v-else-if="api">
-                  happily storing {{ api.count }} documents
-                </template>
-              </p>
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="api">
+          happily storing {{ api.count }} documents
+        </template>
+      </p>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Paperless",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => ({
     api: null,
   }),
@@ -49,36 +35,21 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
-      var apikey = this.item.apikey;
+      if (this.item.subtitle != null) return;
+
+      const apikey = this.item.apikey;
       if (!apikey) {
         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, {
-        credentials: "include",
+      this.api = await this.fetch("/api/documents/", {
         headers: {
           Authorization: "Token " + this.item.apikey,
         },
-      })
-        .then(function (response) {
-          if (!response.ok) {
-            throw new Error("Not 2xx response");
-          } else {
-            return response.json();
-          }
-        })
-        .catch((e) => console.log(e));
+      }).catch((e) => console.log(e));
     },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
-</style>
diff --git a/src/components/services/PiHole.vue b/src/components/services/PiHole.vue
index 87f7090..9aac016 100644
--- a/src/components/services/PiHole.vue
+++ b/src/components/services/PiHole.vue
@@ -1,59 +1,45 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ item.subtitle }}
-                </template>
-                <template v-else-if="api">
-                  {{ percentage }}&percnt; blocked
-                </template>
-              </p>
-            </div>
-            <div v-if="api" class="status" :class="api.status">
-              {{ api.status }}
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="percentage">
+          {{ percentage }}&percnt; blocked
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "PiHole",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => ({
-    api: {
-      status: "",
-      ads_percentage_today: 0,
-    },
+    status: "",
+    ads_percentage_today: 0,
   }),
   computed: {
     percentage: function () {
-      if (this.api) {
-        return this.api.ads_percentage_today.toFixed(1);
+      if (this.ads_percentage_today) {
+        return this.ads_percentage_today.toFixed(1);
       }
       return "";
     },
@@ -63,21 +49,16 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      const url = `${this.item.url}/api.php`;
-      this.api = await fetch(url, {
-        credentials: "include",
-      })
-        .then((response) => response.json())
-        .catch((e) => console.log(e));
+      const result = await this.fetch("/api.php").catch((e) => console.log(e));
+
+      this.status = result.status;
+      this.ads_percentage_today = result.ads_percentage_today;
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .status {
   font-size: 0.8rem;
   color: var(--text-title);

From 9c77651692468ba68f631e03b22a6227b5759240 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 12 Dec 2021 22:20:10 +0100
Subject: [PATCH 07/42] Last batch of custom services refacto.

---
 docs/configuration.md                   |   1 -
 docs/customservices.md                  |   2 -
 src/components/services/AdGuardHome.vue |   3 -
 src/components/services/Radarr.vue      | 137 ++++++++---------------
 src/components/services/Sonarr.vue      | 140 +++++++++---------------
 5 files changed, 97 insertions(+), 186 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index e2b5506..552b22a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -29,7 +29,6 @@ connectivityCheck: true # whether you want to display a message when the apps ar
 
 # Optional: Proxy / hosting option
 proxy:
-  # NOT All custom services implements this new option YET. Support will be extended very soon.
   useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 
 
 # Optional theming
diff --git a/docs/customservices.md b/docs/customservices.md
index 3b3320d..6850bbb 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -18,8 +18,6 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
   type: "<type>"
 ```
 
-⚠️🚧 `endpoint` & `useCredentials` new options are not yet supported by all custom services (but will be very soon).
-
 ## PiHole
 
 Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index b01f0f4..4c53398 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -76,9 +76,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .status {
   font-size: 0.8rem;
   color: var(--text-title);
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index a9cdedf..a57c895 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -1,62 +1,40 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">{{ item.subtitle }}</p>
-            </div>
-            <div class="notifs">
-              <strong
-                v-if="activity > 0"
-                class="notif activity"
-                title="Activity"
-                >{{ activity }}</strong
-              >
-              <strong
-                v-if="warnings > 0"
-                class="notif warnings"
-                title="Warning"
-                >{{ warnings }}</strong
-              >
-              <strong v-if="errors > 0" class="notif errors" title="Error">{{
-                errors
-              }}</strong>
-              <strong
-                v-if="serverError"
-                class="notif errors"
-                title="Connection error to Radarr API, check url and apikey in config.yml"
-                >?</strong
-              >
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="activity > 0" class="notif activity" title="Activity">
+          {{ activity }}
+        </strong>
+        <strong v-if="warnings > 0" class="notif warnings" title="Warning">
+          {{ warnings }}
+        </strong>
+        <strong v-if="errors > 0" class="notif errors" title="Error">
+          {{ errors }}
+        </strong>
+        <strong
+          v-if="serverError"
+          class="notif errors"
+          title="Connection error to Radarr API, check url and apikey in config.yml"
+          >?</strong
+        >
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Radarr",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => {
     return {
       activity: null,
@@ -70,15 +48,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -94,15 +64,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {
@@ -121,35 +83,30 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .notifs {
   position: absolute;
   color: white;
   font-family: sans-serif;
   top: 0.3em;
   right: 0.5em;
-}
-.notif {
-  padding-right: 0.35em;
-  padding-left: 0.35em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  border-radius: 0.25em;
-  position: relative;
-  margin-left: 0.3em;
-  font-size: 0.8em;
-}
-.activity {
-  background-color: #4fb5d6;
-}
+  .notif {
+    display: inline-block;
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+    &.activity {
+      background-color: #4fb5d6;
+    }
 
-.warnings {
-  background-color: #d08d2e;
-}
+    &.warnings {
+      background-color: #d08d2e;
+    }
 
-.errors {
-  background-color: #e51111;
+    &.errors {
+      background-color: #e51111;
+    }
+  }
 }
 </style>
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 0270255..f8dd0d1 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -1,62 +1,41 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">{{ item.subtitle }}</p>
-            </div>
-            <div class="notifs">
-              <strong
-                v-if="activity > 0"
-                class="notif activity"
-                title="Activity"
-                >{{ activity }}</strong
-              >
-              <strong
-                v-if="warnings > 0"
-                class="notif warnings"
-                title="Warning"
-                >{{ warnings }}</strong
-              >
-              <strong v-if="errors > 0" class="notif errors" title="Error">{{
-                errors
-              }}</strong>
-              <strong
-                v-if="serverError"
-                class="notif errors"
-                title="Connection error to Sonarr API, check url and apikey in config.yml"
-                >?</strong
-              >
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="activity > 0" class="notif activity" title="Activity">
+          {{ activity }}
+        </strong>
+        <strong v-if="warnings > 0" class="notif warnings" title="Warning">
+          {{ warnings }}
+        </strong>
+        <strong v-if="errors > 0" class="notif errors" title="Error">
+          {{ errors }}
+        </strong>
+        <strong
+          v-if="serverError"
+          class="notif errors"
+          title="Connection error to Sonarr API, check url and apikey in config.yml"
+        >
+          ?
+        </strong>
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Sonarr",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => {
     return {
       activity: null,
@@ -70,15 +49,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -94,15 +65,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {
@@ -121,35 +84,32 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .notifs {
   position: absolute;
   color: white;
   font-family: sans-serif;
   top: 0.3em;
   right: 0.5em;
-}
-.notif {
-  padding-right: 0.35em;
-  padding-left: 0.35em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  border-radius: 0.25em;
-  position: relative;
-  margin-left: 0.3em;
-  font-size: 0.8em;
-}
-.activity {
-  background-color: #4fb5d6;
-}
 
-.warnings {
-  background-color: #d08d2e;
-}
+  .notif {
+    display: inline-block;
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
 
-.errors {
-  background-color: #e51111;
+    &.activity {
+      background-color: #4fb5d6;
+    }
+
+    &.warnings {
+      background-color: #d08d2e;
+    }
+
+    &.errors {
+      background-color: #e51111;
+    }
+  }
 }
 </style>

From 8283b8da5a93c1141a247c3835678b4e2a2eba16 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 13 Dec 2021 21:07:30 +0100
Subject: [PATCH 08/42] Make Lidaar component use the Generic base component

---
 src/components/services/Lidarr.vue | 140 +++++++++++------------------
 1 file changed, 50 insertions(+), 90 deletions(-)

diff --git a/src/components/services/Lidarr.vue b/src/components/services/Lidarr.vue
index f5d3434..cbe5516 100644
--- a/src/components/services/Lidarr.vue
+++ b/src/components/services/Lidarr.vue
@@ -1,62 +1,40 @@
 <template>
-  <div>
-    <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
-        <div class="card-content">
-          <div class="media">
-            <div v-if="item.logo" class="media-left">
-              <figure class="image is-48x48">
-                <img :src="item.logo" :alt="`${item.name} logo`" />
-              </figure>
-            </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
-            <div class="media-content">
-              <p class="title is-4">{{ item.name }}</p>
-              <p class="subtitle is-6">{{ item.subtitle }}</p>
-            </div>
-            <div class="notifs">
-              <strong
-                v-if="activity > 0"
-                class="notif activity"
-                title="Activity"
-                >{{ activity }}</strong
-              >
-              <strong
-                v-if="warnings > 0"
-                class="notif warnings"
-                title="Warning"
-                >{{ warnings }}</strong
-              >
-              <strong v-if="errors > 0" class="notif errors" title="Error">{{
-                errors
-              }}</strong>
-              <strong
-                v-if="serverError"
-                class="notif errors"
-                title="Connection error to Lidarr API, check url and apikey in config.yml"
-                >?</strong
-              >
-            </div>
-          </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="activity > 0" class="notif activity" title="Activity">
+          {{ activity }}
+        </strong>
+        <strong v-if="warnings > 0" class="notif warnings" title="Warning">
+          {{ warnings }}
+        </strong>
+        <strong v-if="errors > 0" class="notif errors" title="Error">
+          {{ errors }}
+        </strong>
+        <strong
+          v-if="serverError"
+          class="notif errors"
+          title="Connection error to Lidarr API, check url and apikey in config.yml"
+          >?</strong
+        >
+      </div>
+    </template>
+  </Generic>
 </template>
 
 <script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
 export default {
   name: "Lidarr",
+  mixins: [service],
   props: {
     item: Object,
   },
+  components: {
+    Generic,
+  },
   data: () => {
     return {
       activity: null,
@@ -70,15 +48,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/v1/health?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/v1/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -94,15 +64,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/v1/queue/status?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
-        .then((response) => {
-          if (response.status != 200) {
-            throw new Error(response.statusText);
-          }
-          return response.json();
-        })
+      this.fetch(`/api/v1/queue/status?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = queue.totalCount;
         })
@@ -116,35 +78,33 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
-}
 .notifs {
   position: absolute;
   color: white;
   font-family: sans-serif;
   top: 0.3em;
   right: 0.5em;
-}
-.notif {
-  padding-right: 0.35em;
-  padding-left: 0.35em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  border-radius: 0.25em;
-  position: relative;
-  margin-left: 0.3em;
-  font-size: 0.8em;
-}
-.activity {
-  background-color: #4fb5d6;
-}
+  .notif {
+    display: inline-block;
+    padding-right: 0.35em;
+    padding-left: 0.35em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+    &.activity {
+      background-color: #4fb5d6;
+    }
 
-.warnings {
-  background-color: #d08d2e;
-}
+    &.warnings {
+      background-color: #d08d2e;
+    }
 
-.errors {
-  background-color: #e51111;
+    &.errors {
+      background-color: #e51111;
+    }
+  }
 }
 </style>

From a9cdf5704383888e641947982902b0768a934fdb Mon Sep 17 00:00:00 2001
From: BTK <45247934+b-t-k@users.noreply.github.com>
Date: Wed, 15 Dec 2021 12:58:56 -0700
Subject: [PATCH 09/42] Typo: should have "s" in alias

---
 docs/tips-and-tricks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md
index 17bba9a..6f1b995 100644
--- a/docs/tips-and-tricks.md
+++ b/docs/tips-and-tricks.md
@@ -51,7 +51,7 @@ and then simply reference these pre-defined (anchored) tags in each item like so
 - name: "VS Code"
   logo: "/assets/vscode.png"
   subtitle: "Develop Code Anywhere, On Anything!"
-  <<: *App # Reference to the predefined "App" Tag
+  <<: *Apps # Reference to the predefined "App" Tag
   url: "https://vscode.example.com/"
   target: "_blank" # optional html tag target attribute
 ````

From ad8efdc799fb066a50aeb4ee28a388239f7b9fc8 Mon Sep 17 00:00:00 2001
From: Michael Krieger <phyre@phyre.me>
Date: Mon, 20 Dec 2021 16:11:15 -0500
Subject: [PATCH 10/42] Warn about exposed apikeys

---
 docs/customservices.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 7d47542..77109b7 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -1,7 +1,11 @@
 # Custom Services
 
 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
+configuration and, where applicable, an apikey. Note that config.yml is exposed at /assets/config.yml via HTTP and any
+apikey included in the configuration file is exposed to anyone who can access the homer instance. Only include an apikey
+if your homer instance is secured behind some form of authentication or access restriction.
+
+Available services are in `src/components/`. Here is an overview of all custom services that are available
 within Homer.
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.

From 26dbed936a350000e3d6b97bca1b81dc18bb7a60 Mon Sep 17 00:00:00 2001
From: spaceneb <spaceneb@tutanota.com>
Date: Fri, 14 Jan 2022 00:45:26 -0500
Subject: [PATCH 11/42] Fix Possible Typo (Heath -> Health)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2dd2b42..5ea80fb 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@
 - Search
 - Grouping
 - Theme customization
-- Offline heath check
+- Offline health check
 - keyboard shortcuts:
   - `/` Start searching.
   - `Escape` Stop searching.

From 0aa343d744288162c6592ff4d635a00c62ecfcc9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 14 Jan 2022 10:47:08 +0000
Subject: [PATCH 12/42] Bump follow-redirects from 1.14.1 to 1.14.7

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.1 to 1.14.7.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.1...v1.14.7)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index ca36eb7..f3a16d9 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.17.3:
-  version "3.17.3"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.17.3.tgz#8e8bd20e91df9951e903cabe91f9af4a0895bc1e"
-  integrity sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw==
+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.6.5:
   version "3.15.2"
@@ -3999,9 +3999,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
-  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
 
 for-in@^1.0.2:
   version "1.0.2"

From 990606a38a56445a7e6e29cbc0560b05abbe7ee8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Catarino?= <raphcatarino@gmail.com>
Date: Mon, 31 Jan 2022 13:13:28 +0100
Subject: [PATCH 13/42] Added Prowlarr custom service

---
 src/components/services/Prowlarr.vue | 94 ++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/components/services/Prowlarr.vue

diff --git a/src/components/services/Prowlarr.vue b/src/components/services/Prowlarr.vue
new file mode 100644
index 0000000..c122ca0
--- /dev/null
+++ b/src/components/services/Prowlarr.vue
@@ -0,0 +1,94 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="warnings > 0" class="notif warnings" title="Warning">
+          {{ warnings }}
+        </strong>
+        <strong v-if="errors > 0" class="notif errors" title="Error">
+          {{ errors }}
+        </strong>
+        <strong
+          v-if="serverError"
+          class="notif errors"
+          title="Connection error to Prowlarr API, check url and apikey in config.yml"
+        >
+          ?
+        </strong>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js"
+import Generic from "./Generic.vue"
+
+export default {
+  name: "Prowlarr",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => {
+    return {
+      warnings: null,
+      errors: null,
+      serverError: false,
+    }
+  },
+  created: function () {
+    this.fetchConfig()
+  },
+  methods: {
+    fetchConfig: function () {
+      this.fetch(`/api/v1/health?apikey=${this.item.apikey}`)
+        .then((health) => {
+          this.warnings = 0
+          this.errors = 0
+          for (var i = 0; i < health.length; i++) {
+            if (health[i].type == "warning") {
+              this.warnings++
+            } else if (health[i].type == "error") {
+              this.errors++
+            }
+          }
+        })
+        .catch((e) => {
+          console.error(e)
+          this.serverError = true
+        })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.notifs {
+  position: absolute;
+  color: white;
+  font-family: sans-serif;
+  top: 0.3em;
+  right: 0.5em;
+
+  .notif {
+    display: inline-block;
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+
+    &.warnings {
+      background-color: #d08d2e;
+    }
+
+    &.errors {
+      background-color: #e51111;
+    }
+  }
+}
+</style>

From 50b3bddff1545d800cc4deeaa6e73b6eb278460d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Catarino?= <raphcatarino@gmail.com>
Date: Mon, 31 Jan 2022 13:14:40 +0100
Subject: [PATCH 14/42] Added Prowlarr doc

---
 docs/customservices.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 77109b7..747d7a4 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -67,18 +67,18 @@ Two lines are needed in the config.yml :
 The url must be the root url of Medusa application.
 The Medusa API key can be found in General configuration > Interface. It is needed to access Medusa API.
 
-## Lidarr, Sonarr and Radarr
+## Lidarr, Prowlarr, Sonarr and Radarr
 
 This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Lidarr, Radarr or Sonarr application.
 Two lines are needed in the config.yml :
 
 ```yaml
-  type: "Lidarr", "Radarr" or "Sonarr"
+  type: "Lidarr", "Prowlarr", "Radarr" or "Sonarr"
   apikey: "01234deb70424befb1f4ef6a23456789"
 ```
 
-The url must be the root url of Lidarr, Radarr or Sonarr application.
-The Lidarr, Radarr or Sonarr API key can be found in Settings > General. It is needed to access the API.
+The url must be the root url of Lidarr, Prowlarr, Radarr or Sonarr application.
+The Lidarr, Prowlarr, Radarr or Sonarr API key can be found in Settings > General. It is needed to access the API.
 
 ## PaperlessNG
 

From cb154a6818cd25a36298e307cb415b11e9bd2247 Mon Sep 17 00:00:00 2001
From: Duy NGUYEN <duynguyen@deevotech.com>
Date: Tue, 1 Feb 2022 16:39:15 +0100
Subject: [PATCH 15/42] Update Sonarr and Radarr API

---
 src/components/services/Radarr.vue | 4 ++--
 src/components/services/Sonarr.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index a57c895..a8c97c1 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      this.fetch(`/api/health?apikey=${this.item.apikey}`)
+      this.fetch(`/api/v3/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -64,7 +64,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      this.fetch(`/api/queue?apikey=${this.item.apikey}`)
+      this.fetch(`/api/v3/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index f8dd0d1..972a1c9 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      this.fetch(`/api/health?apikey=${this.item.apikey}`)
+      this.fetch(`/api/v3/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -65,7 +65,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      this.fetch(`/api/queue?apikey=${this.item.apikey}`)
+      this.fetch(`/api/v3/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {

From 8ede30411ed1726ed3885fd617364924e677abc2 Mon Sep 17 00:00:00 2001
From: Duy NGUYEN <duynguyen@deevotech.com>
Date: Tue, 1 Feb 2022 17:05:23 +0100
Subject: [PATCH 16/42] Radarr and Sonarr V3 api support optional

---
 docs/customservices.md             | 10 ++++++++++
 src/components/services/Radarr.vue | 12 ++++++++++--
 src/components/services/Sonarr.vue | 12 ++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 77109b7..91c4051 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -79,6 +79,16 @@ Two lines are needed in the config.yml :
 
 The url must be the root url of Lidarr, Radarr or Sonarr application.
 The Lidarr, Radarr or Sonarr API key can be found in Settings > General. It is needed to access the API.
+If you are using an older version of Radarr or Sonarr which don't support the new V3 api endpoints, add the following line to your service config "legacyApi: true", example: 
+
+```yaml
+- name: "Radarr"
+  type: "Radarr"
+  url: "http://localhost:8989/"
+  apikey: "MY-SUPER-SECRET-API-KEY"
+  target: "_blank" # optional html tag target attribute
+  legacyApi: true
+```
 
 ## PaperlessNG
 
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index a8c97c1..13f6d68 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -26,6 +26,9 @@
 import service from "@/mixins/service.js";
 import Generic from "./Generic.vue";
 
+const V3_API = "/api/v3";
+const LEGACY_API = "/api";
+
 export default {
   name: "Radarr",
   mixins: [service],
@@ -46,9 +49,14 @@ export default {
   created: function () {
     this.fetchConfig();
   },
+  computed: {
+    apiPath() {
+      return this.item.legacyApi ? LEGACY_API : V3_API;
+    },
+  },
   methods: {
     fetchConfig: function () {
-      this.fetch(`/api/v3/health?apikey=${this.item.apikey}`)
+      this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -64,7 +72,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      this.fetch(`/api/v3/queue?apikey=${this.item.apikey}`)
+      this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 972a1c9..3e5c49f 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -27,6 +27,9 @@
 import service from "@/mixins/service.js";
 import Generic from "./Generic.vue";
 
+const V3_API = "/api/v3";
+const LEGACY_API = "/api";
+
 export default {
   name: "Sonarr",
   mixins: [service],
@@ -36,6 +39,11 @@ export default {
   components: {
     Generic,
   },
+  computed: {
+    apiPath() {
+      return this.item.legacyApi ? LEGACY_API : V3_API;
+    },
+  },
   data: () => {
     return {
       activity: null,
@@ -49,7 +57,7 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      this.fetch(`/api/v3/health?apikey=${this.item.apikey}`)
+      this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
         .then((health) => {
           this.warnings = 0;
           this.errors = 0;
@@ -65,7 +73,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      this.fetch(`/api/v3/queue?apikey=${this.item.apikey}`)
+      this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
           for (var i = 0; i < queue.length; i++) {

From f7f4ebdf667db848509f93d470cd46c648bb2439 Mon Sep 17 00:00:00 2001
From: Duy NGUYEN <duynguyen@deevotech.com>
Date: Tue, 1 Feb 2022 18:32:25 +0100
Subject: [PATCH 17/42] Parse new V3 api response

---
 docs/customservices.md             |  4 ++--
 src/components/services/Radarr.vue | 15 ++++++++++++---
 src/components/services/Sonarr.vue | 14 +++++++++++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index 91c4051..9317907 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -84,9 +84,9 @@ If you are using an older version of Radarr or Sonarr which don't support the ne
 ```yaml
 - name: "Radarr"
   type: "Radarr"
-  url: "http://localhost:8989/"
+  url: "http://localhost:7878/"
   apikey: "MY-SUPER-SECRET-API-KEY"
-  target: "_blank" # optional html tag target attribute
+  target: "_blank"
   legacyApi: true
 ```
 
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index 13f6d68..55896f5 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -75,9 +75,18 @@ export default {
       this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
-          for (var i = 0; i < queue.length; i++) {
-            if (queue[i].movie) {
-              this.activity++;
+
+          if (this.item.legacyApi) {
+            for (var i = 0; i < queue.length; i++) {
+              if (queue[i].series) {
+                this.activity++;
+              }
+            }
+          } else {
+            for (const record of queue.records) {
+              if (record.movieId) {
+                this.activity++;
+              }
             }
           }
         })
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 3e5c49f..55df437 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -76,9 +76,17 @@ export default {
       this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = 0;
-          for (var i = 0; i < queue.length; i++) {
-            if (queue[i].series) {
-              this.activity++;
+          if (this.item.legacyApi) {
+            for (var i = 0; i < queue.length; i++) {
+              if (queue[i].series) {
+                this.activity++;
+              }
+            }
+          } else {
+            for (const record of queue.records) {
+              if (record.seriesId) {
+                this.activity++;
+              }
             }
           }
         })

From 6c8f9f1c5b440e9cf837a9ecaf9fd4b52815387c Mon Sep 17 00:00:00 2001
From: Duy NGUYEN <duynguyen@deevotech.com>
Date: Tue, 1 Feb 2022 23:01:09 +0100
Subject: [PATCH 18/42] Fix radarr legacy api call

---
 src/components/services/Radarr.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index 55896f5..7573667 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -78,7 +78,7 @@ export default {
 
           if (this.item.legacyApi) {
             for (var i = 0; i < queue.length; i++) {
-              if (queue[i].series) {
+              if (queue[i].movie) {
                 this.activity++;
               }
             }

From 51829a85c42106b0e1b907db659b2749c26d241b Mon Sep 17 00:00:00 2001
From: Wurzelmann <Wurzelmann@users.noreply.github.com>
Date: Sat, 5 Feb 2022 20:50:46 +0100
Subject: [PATCH 19/42] fixed typo: "additionnal" -> "additional"

Fixed all occurrences of a typo (additionnal).
---
 public/assets/config.yml.dist | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist
index acdd32c..63d022a 100644
--- a/public/assets/config.yml.dist
+++ b/public/assets/config.yml.dist
@@ -58,11 +58,11 @@ links:
   - name: "Wiki"
     icon: "fas fa-book"
     url: "https://www.wikipedia.org/"
-  # this will link to a second homer page that will load config from additionnal-page.yml and keep default config values as in config.yml file
-  # see url field and assets/additionnal-page.yml.dist used in this example:
+  # this will link to a second homer page that will load config from additional-page.yml and keep default config values as in config.yml file
+  # see url field and assets/additional-page.yml.dist used in this example:
   - name: "another page!"
     icon: "fas fa-file-alt"
-    url: "#additionnal-page" 
+    url: "#additional-page" 
 
 # Services
 # First level array represent a group.

From 893690cf95eda1233a094e0d1b63011ff740989e Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Thu, 10 Feb 2022 22:07:00 +0100
Subject: [PATCH 20/42] Lint fixes

---
 src/App.vue                          |  1 +
 src/components/services/Prowlarr.vue | 24 ++++++++++++------------
 yarn.lock                            |  6 +++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4eb112d..9a67a33 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -211,6 +211,7 @@ export default {
           window.location.href = response.url;
           return;
         }
+
         if (!response.ok) {
           throw Error(`${response.statusText}: ${response.body}`);
         }
diff --git a/src/components/services/Prowlarr.vue b/src/components/services/Prowlarr.vue
index c122ca0..abaa0f0 100644
--- a/src/components/services/Prowlarr.vue
+++ b/src/components/services/Prowlarr.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script>
-import service from "@/mixins/service.js"
-import Generic from "./Generic.vue"
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
 
 export default {
   name: "Prowlarr",
@@ -38,32 +38,32 @@ export default {
       warnings: null,
       errors: null,
       serverError: false,
-    }
+    };
   },
   created: function () {
-    this.fetchConfig()
+    this.fetchConfig();
   },
   methods: {
     fetchConfig: function () {
       this.fetch(`/api/v1/health?apikey=${this.item.apikey}`)
         .then((health) => {
-          this.warnings = 0
-          this.errors = 0
+          this.warnings = 0;
+          this.errors = 0;
           for (var i = 0; i < health.length; i++) {
             if (health[i].type == "warning") {
-              this.warnings++
+              this.warnings++;
             } else if (health[i].type == "error") {
-              this.errors++
+              this.errors++;
             }
           }
         })
         .catch((e) => {
-          console.error(e)
-          this.serverError = true
-        })
+          console.error(e);
+          this.serverError = true;
+        });
     },
   },
-}
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/yarn.lock b/yarn.lock
index f3a16d9..e02ab82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2339,9 +2339,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
-  version "1.0.30001245"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz#45b941bbd833cb0fa53861ff2bae746b3c6ca5d4"
-  integrity sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==
+  version "1.0.30001311"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001311.tgz"
+  integrity sha512-mleTFtFKfykEeW34EyfhGIFjGCqzhh38Y0LhdQ9aWF+HorZTtdgKV/1hEE0NlFkG2ubvisPV6l400tlbPys98A==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"

From 8b9ec8465f061e02c1d2babf957e7de65c82396c Mon Sep 17 00:00:00 2001
From: Wurzelmann <Wurzelmann@users.noreply.github.com>
Date: Fri, 11 Feb 2022 11:44:32 +0100
Subject: [PATCH 21/42] fixed typos: "Additionnal" -> "Additional"

Fixed all occurrences of typo "Additionnal" (including file name)
---
 .../{additionnal-page.yml.dist => additional-page.yml.dist}   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename public/assets/{additionnal-page.yml.dist => additional-page.yml.dist} (87%)

diff --git a/public/assets/additionnal-page.yml.dist b/public/assets/additional-page.yml.dist
similarity index 87%
rename from public/assets/additionnal-page.yml.dist
rename to public/assets/additional-page.yml.dist
index f918dc1..5d377ee 100644
--- a/public/assets/additionnal-page.yml.dist
+++ b/public/assets/additional-page.yml.dist
@@ -1,7 +1,7 @@
 ---
-# Additionnal page configuration
+# Additional page configuration
 
-# Additionnal configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>). 
+# Additional configurations are loaded using its file name, minus the extension, as an anchor (https://<mydashboad>#<config>). 
 # `config.yml` is still used as a base configuration, and all values here will overwrite it, so you don't have to re-defined everything
 
 

From 9bfa95963da90a578afa78e308de9d3b850193e8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 15 Feb 2022 13:19:33 +0000
Subject: [PATCH 22/42] Bump follow-redirects from 1.14.7 to 1.14.8

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.7...v1.14.8)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e02ab82..c01b636 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3999,9 +3999,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
-  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
 for-in@^1.0.2:
   version "1.0.2"

From c6ec28f1c52ef529cfda508b3ce3d972591d50b6 Mon Sep 17 00:00:00 2001
From: FinalDoom <7464170-FinalDoom@users.noreply.gitlab.com>
Date: Fri, 18 Feb 2022 06:39:27 -0700
Subject: [PATCH 23/42] Change Radarr/Sonarr v3 to use totalRecords as counting
 paged records is wrong number

---
 src/components/services/Radarr.vue | 6 +-----
 src/components/services/Sonarr.vue | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index 7573667..5c40aaa 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -83,11 +83,7 @@ export default {
               }
             }
           } else {
-            for (const record of queue.records) {
-              if (record.movieId) {
-                this.activity++;
-              }
-            }
+            this.activity = queue.totalRecords;
           }
         })
         .catch((e) => {
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 55df437..bb83b6b 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -83,11 +83,7 @@ export default {
               }
             }
           } else {
-            for (const record of queue.records) {
-              if (record.seriesId) {
-                this.activity++;
-              }
-            }
+            this.activity = queue.totalRecords;
           }
         })
         .catch((e) => {

From dabcc0bae10509928473786f82ce50a6a9cde36e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 19 Feb 2022 02:57:57 +0000
Subject: [PATCH 24/42] Bump url-parse from 1.5.3 to 1.5.7

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.7.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.5.3...1.5.7)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e02ab82..2d7e628 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8227,9 +8227,9 @@ url-loader@^2.2.0:
     schema-utils "^2.5.0"
 
 url-parse@^1.4.3, url-parse@^1.5.1:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
-  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
+  version "1.5.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.7.tgz#00780f60dbdae90181f51ed85fb24109422c932a"
+  integrity sha512-HxWkieX+STA38EDk7CE9MEryFeHCKzgagxlGvsdS7WBImq9Mk+PGwiT56w82WI3aicwJA8REp42Cxo98c8FZMA==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"

From e4b077843caac86d161b095173fd804abf194bef Mon Sep 17 00:00:00 2001
From: Sascha Brockel <info@sascha-brockel.de>
Date: Mon, 21 Feb 2022 22:04:51 +0100
Subject: [PATCH 25/42] Fix typos in troubleshooting

---
 docs/troubleshooting.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index ed1f85d..649e5a6 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -6,7 +6,7 @@ You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/C
 It happens when the targeted service is hosted on a different domain or port.
 Web browsers will not allow to fetch information from a different site without explicit permissions (the targeted service
 must include a special `Access-Control-Allow-Origin: *` HTTP headers).
-If this happens your web console (`ctrl+shit+i` or `F12`) will be filled with this kind of errors:
+If this happens your web console (`ctrl+shift+i` or `F12`) will be filled with this kind of errors:
 
 ```text
 Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
@@ -15,5 +15,5 @@ Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has
 To resolve this, you can either:
 
 * Host all your target service under the same domain & port.
-* Modify the target sever configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
-* Use a cors proxy sever like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
+* Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
+* Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.

From 1acdbe4920d6139373431b41075b67341d6c60e4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 28 Feb 2022 04:27:15 +0000
Subject: [PATCH 26/42] Bump url-parse from 1.5.7 to 1.5.10

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.7 to 1.5.10.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.5.7...1.5.10)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index f645ab1..4c1d140 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8227,9 +8227,9 @@ url-loader@^2.2.0:
     schema-utils "^2.5.0"
 
 url-parse@^1.4.3, url-parse@^1.5.1:
-  version "1.5.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.7.tgz#00780f60dbdae90181f51ed85fb24109422c932a"
-  integrity sha512-HxWkieX+STA38EDk7CE9MEryFeHCKzgagxlGvsdS7WBImq9Mk+PGwiT56w82WI3aicwJA8REp42Cxo98c8FZMA==
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"

From a1a70d4a3c6a8314dd2ad35344d440e4ba8e86e8 Mon Sep 17 00:00:00 2001
From: Evan Steinkerchner <esteinkerchner@gmail.com>
Date: Tue, 1 Mar 2022 20:55:45 -0500
Subject: [PATCH 27/42] Added Portainer custom service

---
 docs/customservices.md                |  16 ++++
 src/components/services/Portainer.vue | 122 ++++++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 src/components/services/Portainer.vue

diff --git a/docs/customservices.md b/docs/customservices.md
index 7e3e6b3..cb68e1d 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -125,3 +125,19 @@ For Prometheus you need to set the type to Prometheus and provide a url.
   url: "http://192.168.0.151/"
   # subtitle: "Monitor data server"
 ```
+
+## Portainer
+
+This service displays info about the total number of containers managed by your Portainer instance.
+In order to use it, you must be using Portainer version 1.11 or later. Generate an access token from the UI and pass
+it to the apikey field.
+
+See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
+
+```yaml
+- name: "Portainer"
+  logo: "assets/tools/sample.png"
+  url: "http://192.168.0.151/"
+  type: "Portainer"
+  apikey: "MY-SUPER-SECRET-API-KEY"
+```
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
new file mode 100644
index 0000000..0af30eb
--- /dev/null
+++ b/src/components/services/Portainer.vue
@@ -0,0 +1,122 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="running > 0" class="notif running" title="Running">
+          {{ running }}
+        </strong>
+        <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.)">
+          {{ misc }}
+        </strong>
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Portainer",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    endpoints: null,
+    containers: null,
+  }),
+  computed: {
+    running: function () {
+      if (!this.containers) {
+        return "";
+      }
+      return this.containers.filter((container) => {
+        return container.State.toLowerCase() === "running";
+      }).length;
+    },
+    dead: function () {
+      if (!this.containers) {
+        return "";
+      }
+      return this.containers.filter((container) => {
+        return container.State.toLowerCase() === "dead";
+      }).length || 1;
+    },
+    misc: function () {
+      if (!this.containers) {
+        return "";
+      }
+      return this.containers.filter((container) => {
+        return container.State.toLowerCase() !== "running" && container.State.toLowerCase() !== "dead";
+      }).length;
+    },
+  },
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      const headers = {
+        "X-Api-Key": this.item.apikey,
+      };
+
+      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) => {
+            console.error(e);
+          });
+
+        containers = containers.concat(endpointContainers);
+      }
+
+      this.containers = containers;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.notifs {
+  position: absolute;
+  color: white;
+  font-family: sans-serif;
+  top: 0.3em;
+  right: 0.5em;
+
+  .notif {
+    display: inline-block;
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    position: relative;
+    margin-left: 0.3em;
+    font-size: 0.8em;
+
+    &.running {
+      background-color: #4fd671;
+    }
+
+    &.dead {
+      background-color: #e51111;
+    }
+
+    &.misc {
+      background-color: #2ed0c8;
+    }
+  }
+}
+</style>

From edd2c9ce2dc2d6aaf8e125434ed386de7056ab1d Mon Sep 17 00:00:00 2001
From: Evan Steinkerchner <esteinkerchner@gmail.com>
Date: Tue, 1 Mar 2022 21:05:14 -0500
Subject: [PATCH 28/42] Removed number fudging used for testing

---
 src/components/services/Portainer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 0af30eb..176d92e 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -48,7 +48,7 @@ export default {
       }
       return this.containers.filter((container) => {
         return container.State.toLowerCase() === "dead";
-      }).length || 1;
+      }).length;
     },
     misc: function () {
       if (!this.containers) {

From 1340a8e6d024ee0460a4fd3c218397251e2ac86b Mon Sep 17 00:00:00 2001
From: James White <james@jmwhite.co.uk>
Date: Sat, 5 Mar 2022 18:13:43 +0000
Subject: [PATCH 29/42] Check if path has data before adding /

---
 src/mixins/service.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/mixins/service.js b/src/mixins/service.js
index 17fa6fc..abc708c 100644
--- a/src/mixins/service.js
+++ b/src/mixins/service.js
@@ -31,7 +31,13 @@ export default {
         path = path.slice(1);
       }
 
-      return fetch(`${this.endpoint}/${path}`, options).then((response) => {
+      let url = this.endpoint;
+
+      if (path) {
+        url = `${this.endpoint}/${path}`;
+      }
+
+      return fetch(url, options).then((response) => {
         if (!response.ok) {
           throw new Error("Not 2xx response");
         }

From f3980069351ec91bea1999e5efff5c343a808706 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Fri, 11 Mar 2022 22:47:26 +0100
Subject: [PATCH 30/42] Add a get started link when no configuration is found

---
 package.json                          |  2 +-
 src/App.vue                           |  8 ++++++
 src/components/GetStarted.vue         | 35 +++++++++++++++++++++++++++
 src/components/services/Portainer.vue | 25 +++++++++++++------
 yarn.lock                             |  8 +++---
 5 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 src/components/GetStarted.vue

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"

From a7cbcc7700990dbdfbfe61374e14a700ff0d4714 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Catarino?= <raphcatarino@gmail.com>
Date: Sat, 19 Mar 2022 12:59:05 +0100
Subject: [PATCH 31/42] fix if endpoint not up

---
 src/components/services/Portainer.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index c7e9962..2490959 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -90,7 +90,9 @@ export default {
           }
         );
 
-        containers = containers.concat(endpointContainers);
+        if(endpointContainers){
+          containers = containers.concat(endpointContainers);
+        }
       }
 
       this.containers = containers;

From e2ebf9973bec9884154093d6bd7a9688261e6fed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Catarino?= <raphcatarino@gmail.com>
Date: Sat, 19 Mar 2022 13:52:41 +0100
Subject: [PATCH 32/42] select environments

---
 docs/customservices.md                | 4 ++++
 src/components/services/Portainer.vue | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/docs/customservices.md b/docs/customservices.md
index cb68e1d..2e65f19 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -131,6 +131,7 @@ For Prometheus you need to set the type to Prometheus and provide a url.
 This service displays info about the total number of containers managed by your Portainer instance.
 In order to use it, you must be using Portainer version 1.11 or later. Generate an access token from the UI and pass
 it to the apikey field.
+By default, every connected environments will be checked. To select specific ones,add an "environments" entry which can be a simple string or an array containing all the selected environments name.
 
 See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
 
@@ -140,4 +141,7 @@ See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
   url: "http://192.168.0.151/"
   type: "Portainer"
   apikey: "MY-SUPER-SECRET-API-KEY"
+  # environments:
+  #   - "raspberry"
+  #   - "local"
 ```
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index c7e9962..2e0d1e2 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -83,6 +83,12 @@ export default {
 
       let containers = [];
       for (let endpoint of this.endpoints) {
+        if (
+          this.item.environments &&
+          !this.item.environments.includes(endpoint.Name)
+        ) {
+          continue;
+        }
         const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`;
         const endpointContainers = await this.fetch(uri, { headers }).catch(
           (e) => {

From 4e953d7c81f98bb36ffd8a025eab16de66d02acf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Catarino?= <raphcatarino@gmail.com>
Date: Sat, 19 Mar 2022 14:12:30 +0100
Subject: [PATCH 33/42] prettier

---
 src/components/services/Portainer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 2490959..5f3954f 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -90,7 +90,7 @@ export default {
           }
         );
 
-        if(endpointContainers){
+        if (endpointContainers) {
           containers = containers.concat(endpointContainers);
         }
       }

From 775d0a8e862247bc78a53d6cf0ceef5651d4f98c Mon Sep 17 00:00:00 2001
From: Little-Karl <ltek0@outlook.com>
Date: Sun, 20 Mar 2022 07:34:16 +0800
Subject: [PATCH 34/42] FA note chages for new users (#404)

Update link to Font Awesome to reference v5 directly
---
 docs/configuration.md                    | 2 +-
 public/assets/config.yml.dist            | 2 +-
 public/assets/config.yml.dist.sample-sui | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 2083be3..84a7ea7 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -5,7 +5,7 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
 ```yaml
 ---
 # Homepage configuration
-# See https://fontawesome.com/icons for icons options
+# See https://fontawesome.com/v5/search for icons options
 
 # Optional: Use external configuration file.
 # Using this will ignore remaining config in this file
diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist
index 63d022a..03a8682 100644
--- a/public/assets/config.yml.dist
+++ b/public/assets/config.yml.dist
@@ -1,6 +1,6 @@
 ---
 # Homepage configuration
-# See https://fontawesome.com/icons for icons options
+# See https://fontawesome.com/v5/search for icons options
 
 title: "Demo dashboard"
 subtitle: "Homer"
diff --git a/public/assets/config.yml.dist.sample-sui b/public/assets/config.yml.dist.sample-sui
index ff7f80a..4ebf4a4 100644
--- a/public/assets/config.yml.dist.sample-sui
+++ b/public/assets/config.yml.dist.sample-sui
@@ -1,6 +1,6 @@
 ---
 # Homepage configuration
-# See https://fontawesome.com/icons for icons options
+# See https://fontawesome.com/v5/search for icons options
 
 title: "Hello beautiful!"
 subtitle: "App dashboard"

From a25f317bee3bdea8f2f4e681f256b0da95a995e5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 26 Mar 2022 19:46:32 +0000
Subject: [PATCH 35/42] Bump minimist from 1.2.5 to 1.2.6

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a5e1e00..8139450 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5590,9 +5590,9 @@ minimatch@^3.0.4:
     brace-expansion "^1.1.7"
 
 minimist@^1.2.0, minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 minipass@^3.1.1:
   version "3.1.3"

From 585844394d7a4cc4a58e30fd42cb1f8e83ac02f7 Mon Sep 17 00:00:00 2001
From: unknown <espilioto@gmail.com>
Date: Mon, 28 Mar 2022 20:00:17 +0300
Subject: [PATCH 36/42] Initial Emby service commit

---
 src/components/services/Emby.vue | 121 +++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/services/Emby.vue

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
new file mode 100644
index 0000000..da8a020
--- /dev/null
+++ b/src/components/services/Emby.vue
@@ -0,0 +1,121 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else>
+          {{ embyCount }} 
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Emby",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    status: "",
+    albumCount: 0,
+    songCount: 0,
+    movieCount: 0,
+    seriesCount: 0,
+    episodeCount: 0,
+  }),
+  computed: {
+    embyCount: function () {
+      if(this.item.libraryType === 'music')
+        return `${this.songCount} songs, ${this.albumCount} albums`
+      if(this.item.libraryType === 'movies')
+        return `${this.movieCount} movies`
+      if(this.item.libraryType === 'series')
+        return `${this.episodeCount} eps, ${this.seriesCount} series`
+    },
+  },
+  created() {
+    this.fetchServerStatus();
+
+    if(!this.item.subtitle && this.status !== "dead")
+      this.fetchServerMediaStats();
+  },
+  methods: {
+    fetchServerStatus: async function () {
+      const headers = {
+        "X-Emby-Token": this.item.apikey,
+      };
+      
+     await this.fetch("/System/info/public", { headers })
+                .then(response => {
+                  if(response.Id)
+                    this.status = "running";
+                  else  
+                    this.status = "dead";
+                })
+                .catch((e) => { 
+                  console.log(e);
+                  this.status = "dead";
+                });
+    },
+    fetchServerMediaStats: async function () {
+      const headers = {
+        "X-Emby-Token": this.item.apikey,
+      };
+
+      var data = await this.fetch("/items/counts", { headers }).catch((e) => { console.log(e); });    
+
+      this.albumCount = data.AlbumCount;
+      this.songCount = data.SongCount;
+      this.movieCount = data.MovieCount;
+      this.seriesCount = data.SeriesCount;
+      this.episodeCount = data.EpisodeCount;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+
+  &.running:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.dead:before {
+    background-color: #c9404d;
+    border-color: #c42c3b;
+    box-shadow: 0 0 5px 1px #c9404d;
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 7px;
+  }
+}
+</style>

From 345dd6c194a588ab038a8cb46846f74f4b96650e Mon Sep 17 00:00:00 2001
From: SouLSLayeR <espilioto@users.noreply.github.com>
Date: Mon, 28 Mar 2022 20:41:19 +0300
Subject: [PATCH 37/42] Update customservices.md

---
 docs/customservices.md | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index cb68e1d..dead8ce 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -6,7 +6,16 @@ apikey included in the configuration file is exposed to anyone who can access th
 if your homer instance is secured behind some form of authentication or access restriction.
 
 Available services are in `src/components/`. Here is an overview of all custom services that are available
-within Homer.
+within Homer:
++ [PiHole](#pihole)
++ [OpenWeatherMap](#openweathermap)
++ [Medusa](#medusa)
++ [Lidarr, Prowlarr, Sonarr and Radarr](#lidarr-prowlarr-sonarr-and-radarr)
++ [PaperlessNG](#paperlessng)
++ [Ping](#ping)
++ [Prometheus](#prometheus)
++ [Portainer](#portainer)
++ [Emby](#emby)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -141,3 +150,16 @@ See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
   type: "Portainer"
   apikey: "MY-SUPER-SECRET-API-KEY"
 ```
+
+## Emby
+
+You need to set the type to Emby, provide an api key and choose which stats to show if the subtitle is disabled.
+
+```yaml
+- name: "Emby"
+  logo: "assets/tools/sample.png"
+  url: "http://192.168.0.151/"
+  type: "Portainer"
+  apikey: "MY-SUPER-SECRET-API-KEY"
+  libraryType: "music" #Choose which stats to show. Can be one of: music, series or movies.
+```

From 6dc8fa20260535aafba16242d36cd053222b5d3f Mon Sep 17 00:00:00 2001
From: SouLSLayeR <espilioto@users.noreply.github.com>
Date: Mon, 28 Mar 2022 20:42:06 +0300
Subject: [PATCH 38/42] Update customservices.md

---
 docs/customservices.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/customservices.md b/docs/customservices.md
index dead8ce..49798a8 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -159,7 +159,7 @@ You need to set the type to Emby, provide an api key and choose which stats to s
 - name: "Emby"
   logo: "assets/tools/sample.png"
   url: "http://192.168.0.151/"
-  type: "Portainer"
+  type: "Emby"
   apikey: "MY-SUPER-SECRET-API-KEY"
   libraryType: "music" #Choose which stats to show. Can be one of: music, series or movies.
 ```

From abfe72b9cfc0a4fde3f5e5948dd516bda0e2a2ff Mon Sep 17 00:00:00 2001
From: unknown <espilioto@gmail.com>
Date: Tue, 29 Mar 2022 11:39:15 +0300
Subject: [PATCH 39/42] Fixed yarn lint errors

---
 src/components/services/Emby.vue | 43 ++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
index da8a020..4d54344 100644
--- a/src/components/services/Emby.vue
+++ b/src/components/services/Emby.vue
@@ -7,7 +7,7 @@
           {{ item.subtitle }}
         </template>
         <template v-else>
-          {{ embyCount }} 
+          {{ embyCount }}
         </template>
       </p>
     </template>
@@ -42,18 +42,19 @@ export default {
   }),
   computed: {
     embyCount: function () {
-      if(this.item.libraryType === 'music')
-        return `${this.songCount} songs, ${this.albumCount} albums`
-      if(this.item.libraryType === 'movies')
-        return `${this.movieCount} movies`
-      if(this.item.libraryType === 'series')
-        return `${this.episodeCount} eps, ${this.seriesCount} series`
+      if (this.item.libraryType === "music")
+        return `${this.songCount} songs, ${this.albumCount} albums`;
+      else if (this.item.libraryType === "movies")
+        return `${this.movieCount} movies`;
+      else if (this.item.libraryType === "series")
+        return `${this.episodeCount} eps, ${this.seriesCount} series`;
+      else return `wrong library type 💀`;
     },
   },
   created() {
     this.fetchServerStatus();
 
-    if(!this.item.subtitle && this.status !== "dead")
+    if (!this.item.subtitle && this.status !== "dead")
       this.fetchServerMediaStats();
   },
   methods: {
@@ -61,25 +62,25 @@ export default {
       const headers = {
         "X-Emby-Token": this.item.apikey,
       };
-      
-     await this.fetch("/System/info/public", { headers })
-                .then(response => {
-                  if(response.Id)
-                    this.status = "running";
-                  else  
-                    this.status = "dead";
-                })
-                .catch((e) => { 
-                  console.log(e);
-                  this.status = "dead";
-                });
+
+      await this.fetch("/System/info/public", { headers })
+        .then((response) => {
+          if (response.Id) this.status = "running";
+          else this.status = "dead";
+        })
+        .catch((e) => {
+          console.log(e);
+          this.status = "dead";
+        });
     },
     fetchServerMediaStats: async function () {
       const headers = {
         "X-Emby-Token": this.item.apikey,
       };
 
-      var data = await this.fetch("/items/counts", { headers }).catch((e) => { console.log(e); });    
+      var data = await this.fetch("/items/counts", { headers }).catch((e) => {
+        console.log(e);
+      });
 
       this.albumCount = data.AlbumCount;
       this.songCount = data.SongCount;

From 5c42d50d4719fafb910685ac85b84be5980e6761 Mon Sep 17 00:00:00 2001
From: unknown <espilioto@gmail.com>
Date: Thu, 31 Mar 2022 23:54:26 +0300
Subject: [PATCH 40/42] No authentication required for public endpoint

---
 src/components/services/Emby.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
index 4d54344..98b7ed3 100644
--- a/src/components/services/Emby.vue
+++ b/src/components/services/Emby.vue
@@ -59,11 +59,7 @@ export default {
   },
   methods: {
     fetchServerStatus: async function () {
-      const headers = {
-        "X-Emby-Token": this.item.apikey,
-      };
-
-      await this.fetch("/System/info/public", { headers })
+      await this.fetch("/System/info/public")
         .then((response) => {
           if (response.Id) this.status = "running";
           else this.status = "dead";

From cd1fc28f515e17956668e5bda5f39c1d250e3475 Mon Sep 17 00:00:00 2001
From: unknown <espilioto@gmail.com>
Date: Thu, 31 Mar 2022 23:55:32 +0300
Subject: [PATCH 41/42] Removed await from api call

---
 src/components/services/Emby.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
index 98b7ed3..8f2790b 100644
--- a/src/components/services/Emby.vue
+++ b/src/components/services/Emby.vue
@@ -59,7 +59,7 @@ export default {
   },
   methods: {
     fetchServerStatus: async function () {
-      await this.fetch("/System/info/public")
+      this.fetch("/System/info/public")
         .then((response) => {
           if (response.Id) this.status = "running";
           else this.status = "dead";

From 1275a8cce527fa02e32d9b490a12bafb38d95942 Mon Sep 17 00:00:00 2001
From: SouLSLayeR <espilioto@users.noreply.github.com>
Date: Fri, 1 Apr 2022 00:07:02 +0300
Subject: [PATCH 42/42] Update src/components/services/Emby.vue

Co-authored-by: Bastien Wirtz <bastien.wirtz@gmail.com>
---
 src/components/services/Emby.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
index 8f2790b..25a2612 100644
--- a/src/components/services/Emby.vue
+++ b/src/components/services/Emby.vue
@@ -62,7 +62,7 @@ export default {
       this.fetch("/System/info/public")
         .then((response) => {
           if (response.Id) this.status = "running";
-          else this.status = "dead";
+          else  throw new Error();
         })
         .catch((e) => {
           console.log(e);