From 7955d78e4fb3b0d6a4fecd5e44a5f7b6e1d44196 Mon Sep 17 00:00:00 2001
From: royto <royto81+github@gmail.com>
Date: Sat, 22 Jul 2023 22:55:00 +0200
Subject: [PATCH 1/2] feat: add Readarr custom service

---
 docs/customservices.md              |   9 ++-
 src/components/services/Readarr.vue | 117 ++++++++++++++++++++++++++++
 2 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 src/components/services/Readarr.vue

diff --git a/docs/customservices.md b/docs/customservices.md
index 665c6f59..7cfef8da 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -96,9 +96,10 @@ 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, Prowlarr, Sonarr and Radarr
+## Lidarr, Prowlarr, Sonarr, Readarr and Radarr
 
-This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Lidarr, Radarr or Sonarr application.
+This service displays Activity (blue), Warning (orange) or Error (red) notifications bubbles from the Lidarr, Readarr, Radarr or Sonarr application.
+Readarr display also a Missing (purple) notification bubbles.
 Two lines are needed in the config.yml :
 
 ```yaml
@@ -106,8 +107,8 @@ Two lines are needed in the config.yml :
   apikey: "<---insert-api-key-here--->"
 ```
 
-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.
+The url must be the root url of Lidarr, Prowlarr, Readarr, Radarr or Sonarr application.
+The Lidarr, Prowlarr, Readarr, 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
diff --git a/src/components/services/Readarr.vue b/src/components/services/Readarr.vue
new file mode 100644
index 00000000..d921c29c
--- /dev/null
+++ b/src/components/services/Readarr.vue
@@ -0,0 +1,117 @@
+<template>
+  <Generic :item="item">
+    <template #indicator>
+      <div class="notifs">
+        <strong v-if="activity > 0" class="notif activity" title="Activity">
+          {{ activity }}
+        </strong>
+        <strong v-if="missing > 0" class="notif missing" title="Missing">
+          {{ missing }}
+        </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 Readarr 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";
+
+const API = "/api/v1";
+
+export default {
+  name: "Readarr",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => {
+    return {
+      activity: null,
+      missing: null,
+      warnings: null,
+      errors: null,
+      serverError: false,
+    };
+  },
+  created: function () {
+    this.fetchConfig();
+  },
+  computed: {
+    apiPath() {
+      return API;
+    },
+  },
+  methods: {
+    fetchConfig: function () {
+      const handleError = (e) => {
+        console.error(e);
+        this.serverError = true;
+      }
+      this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
+        .then((health) => {
+          this.warnings = health.filter(h => h.type === 'warning').length;
+          this.errors = health.filter(h => h.type === 'errors').length;
+        })
+        .catch(handleError);
+      this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
+        .then((queue) => {
+          this.activity = queue.totalRecords;
+        })
+        .catch(handleError);
+        this.fetch(`${this.apiPath}/wanted/missing?apikey=${this.item.apikey}`)
+        .then((missing) => {
+          this.missing = missing.totalRecords;
+        })
+        .catch(handleError);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.notifs {
+  position: absolute;
+  color: white;
+  font-family: sans-serif;
+  top: 0.3em;
+  right: 0.5em;
+  display: flex;
+  gap: 0.2rem;
+  .notif {
+    padding: 0.2em 0.35em;
+    border-radius: 0.25em;
+    font-size: 0.8em;
+    &.activity {
+      background-color: #4fb5d6;
+    }
+
+    &.missing {
+      background-color: #9d00ff;
+    }
+
+    &.warnings {
+      background-color: #d08d2e;
+    }
+
+    &.errors {
+      background-color: #e51111;
+    }
+  }
+}
+</style>

From 6c7a5a95ead288332570b089e414ff4131872763 Mon Sep 17 00:00:00 2001
From: royto <royto81+github@gmail.com>
Date: Sun, 6 Aug 2023 22:46:36 +0200
Subject: [PATCH 2/2] PR review: use API const and lint

---
 src/components/services/Readarr.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/services/Readarr.vue b/src/components/services/Readarr.vue
index d921c29c..6ac6be2d 100644
--- a/src/components/services/Readarr.vue
+++ b/src/components/services/Readarr.vue
@@ -52,29 +52,24 @@ export default {
   created: function () {
     this.fetchConfig();
   },
-  computed: {
-    apiPath() {
-      return API;
-    },
-  },
   methods: {
     fetchConfig: function () {
       const handleError = (e) => {
         console.error(e);
         this.serverError = true;
-      }
-      this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
+      };
+      this.fetch(`${API}/health?apikey=${this.item.apikey}`)
         .then((health) => {
-          this.warnings = health.filter(h => h.type === 'warning').length;
-          this.errors = health.filter(h => h.type === 'errors').length;
+          this.warnings = health.filter((h) => h.type === "warning").length;
+          this.errors = health.filter((h) => h.type === "errors").length;
         })
         .catch(handleError);
-      this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
+      this.fetch(`${API}/queue?apikey=${this.item.apikey}`)
         .then((queue) => {
           this.activity = queue.totalRecords;
         })
         .catch(handleError);
-        this.fetch(`${this.apiPath}/wanted/missing?apikey=${this.item.apikey}`)
+      this.fetch(`${API}/wanted/missing?apikey=${this.item.apikey}`)
         .then((missing) => {
           this.missing = missing.totalRecords;
         })