aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/services/Readarr.vue117
1 files changed, 117 insertions, 0 deletions
diff --git a/src/components/services/Readarr.vue b/src/components/services/Readarr.vue
new file mode 100644
index 0000000..d921c29
--- /dev/null
+++ b/src/components/services/Readarr.vue
@@ -0,0 +1,117 @@
1<template>
2 <Generic :item="item">
3 <template #indicator>
4 <div class="notifs">
5 <strong v-if="activity > 0" class="notif activity" title="Activity">
6 {{ activity }}
7 </strong>
8 <strong v-if="missing > 0" class="notif missing" title="Missing">
9 {{ missing }}
10 </strong>
11 <strong v-if="warnings > 0" class="notif warnings" title="Warning">
12 {{ warnings }}
13 </strong>
14 <strong v-if="errors > 0" class="notif errors" title="Error">
15 {{ errors }}
16 </strong>
17 <strong
18 v-if="serverError"
19 class="notif errors"
20 title="Connection error to Readarr API, check url and apikey in config.yml"
21 >?</strong
22 >
23 </div>
24 </template>
25 </Generic>
26</template>
27
28<script>
29import service from "@/mixins/service.js";
30import Generic from "./Generic.vue";
31
32const API = "/api/v1";
33
34export default {
35 name: "Readarr",
36 mixins: [service],
37 props: {
38 item: Object,
39 },
40 components: {
41 Generic,
42 },
43 data: () => {
44 return {
45 activity: null,
46 missing: null,
47 warnings: null,
48 errors: null,
49 serverError: false,
50 };
51 },
52 created: function () {
53 this.fetchConfig();
54 },
55 computed: {
56 apiPath() {
57 return API;
58 },
59 },
60 methods: {
61 fetchConfig: function () {
62 const handleError = (e) => {
63 console.error(e);
64 this.serverError = true;
65 }
66 this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`)
67 .then((health) => {
68 this.warnings = health.filter(h => h.type === 'warning').length;
69 this.errors = health.filter(h => h.type === 'errors').length;
70 })
71 .catch(handleError);
72 this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`)
73 .then((queue) => {
74 this.activity = queue.totalRecords;
75 })
76 .catch(handleError);
77 this.fetch(`${this.apiPath}/wanted/missing?apikey=${this.item.apikey}`)
78 .then((missing) => {
79 this.missing = missing.totalRecords;
80 })
81 .catch(handleError);
82 },
83 },
84};
85</script>
86
87<style scoped lang="scss">
88.notifs {
89 position: absolute;
90 color: white;
91 font-family: sans-serif;
92 top: 0.3em;
93 right: 0.5em;
94 display: flex;
95 gap: 0.2rem;
96 .notif {
97 padding: 0.2em 0.35em;
98 border-radius: 0.25em;
99 font-size: 0.8em;
100 &.activity {
101 background-color: #4fb5d6;
102 }
103
104 &.missing {
105 background-color: #9d00ff;
106 }
107
108 &.warnings {
109 background-color: #d08d2e;
110 }
111
112 &.errors {
113 background-color: #e51111;
114 }
115 }
116}
117</style>