Make Lidaar component use the Generic base component

src/components/services/Lidarr.vue

@@ -1,39 +1,16 @@
 <template>
-  <div>
+  <Generic :item="item">
-    <div class="card" :class="item.class">
+    <template #indicator>
-      <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
+        <strong v-if="activity > 0" class="notif activity" title="Activity">
-                v-if="activity > 0"
+          {{ activity }}
-                class="notif activity"
+        </strong>
-                title="Activity"
+        <strong v-if="warnings > 0" class="notif warnings" title="Warning">
-                >{{ activity }}</strong
+          {{ warnings }}
-              >
+        </strong>
-              <strong
+        <strong v-if="errors > 0" class="notif errors" title="Error">
-                v-if="warnings > 0"
+          {{ errors }}
-                class="notif warnings"
+        </strong>
-                title="Warning"
-                >{{ warnings }}</strong
-              >
-              <strong v-if="errors > 0" class="notif errors" title="Error">{{
-                errors
-              }}</strong>
         <strong
           v-if="serverError"
           class="notif errors"
@@ -41,22 +18,23 @@
           >?</strong
         >
       </div>
-          </div>
+    </template>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+  </Generic>
-            <strong class="tag-text">#{{ item.tag }}</strong>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
 </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}`, {
+      this.fetch(`/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;
@@ -94,15 +64,7 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/v1/queue/status?apikey=${this.item.apikey}`, {
+      this.fetch(`/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;
         })
@@ -116,17 +78,14 @@ 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 {
-.notif {
+    display: inline-block;
     padding-right: 0.35em;
     padding-left: 0.35em;
     padding-top: 0.2em;
@@ -135,16 +94,17 @@ export default {
     position: relative;
     margin-left: 0.3em;
     font-size: 0.8em;
-}
+    &.activity {
-.activity {
       background-color: #4fb5d6;
-}
+    }
 
-.warnings {
+    &.warnings {
       background-color: #d08d2e;
-}
+    }
 
-.errors {
+    &.errors {
       background-color: #e51111;
+    }
+  }
 }
 </style>