From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 13 Dec 2021 20:07:30 +0000 (+0100)
Subject: Make Lidaar component use the Generic base component
X-Git-Tag: v22.02.1~7
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=8283b8da5a93c1141a247c3835678b4e2a2eba16;hp=b1c85864410e5a5515124125e387518d2fbb4c07;p=github%2Fbastienwirtz%2Fhomer.git

Make Lidaar component use the Generic base component
---

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>