]>
Commit | Line | Data |
---|---|---|
16d3f4f5 | 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> | |
29 | import service from "@/mixins/service.js"; | |
30 | import Generic from "./Generic.vue"; | |
31 | ||
32 | const API = "/api/v1"; | |
33 | ||
34 | export 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 | }, | |
16d3f4f5 | 55 | methods: { |
56 | fetchConfig: function () { | |
57 | const handleError = (e) => { | |
58 | console.error(e); | |
59 | this.serverError = true; | |
018344d9 | 60 | }; |
61 | this.fetch(`${API}/health?apikey=${this.item.apikey}`) | |
16d3f4f5 | 62 | .then((health) => { |
018344d9 | 63 | this.warnings = health.filter((h) => h.type === "warning").length; |
64 | this.errors = health.filter((h) => h.type === "errors").length; | |
16d3f4f5 | 65 | }) |
66 | .catch(handleError); | |
018344d9 | 67 | this.fetch(`${API}/queue?apikey=${this.item.apikey}`) |
16d3f4f5 | 68 | .then((queue) => { |
69 | this.activity = queue.totalRecords; | |
70 | }) | |
71 | .catch(handleError); | |
018344d9 | 72 | this.fetch(`${API}/wanted/missing?apikey=${this.item.apikey}`) |
16d3f4f5 | 73 | .then((missing) => { |
74 | this.missing = missing.totalRecords; | |
75 | }) | |
76 | .catch(handleError); | |
77 | }, | |
78 | }, | |
79 | }; | |
80 | </script> | |
81 | ||
82 | <style scoped lang="scss"> | |
83 | .notifs { | |
84 | position: absolute; | |
85 | color: white; | |
86 | font-family: sans-serif; | |
87 | top: 0.3em; | |
88 | right: 0.5em; | |
89 | display: flex; | |
90 | gap: 0.2rem; | |
91 | .notif { | |
92 | padding: 0.2em 0.35em; | |
93 | border-radius: 0.25em; | |
94 | font-size: 0.8em; | |
95 | &.activity { | |
96 | background-color: #4fb5d6; | |
97 | } | |
98 | ||
99 | &.missing { | |
100 | background-color: #9d00ff; | |
101 | } | |
102 | ||
103 | &.warnings { | |
104 | background-color: #d08d2e; | |
105 | } | |
106 | ||
107 | &.errors { | |
108 | background-color: #e51111; | |
109 | } | |
110 | } | |
111 | } | |
112 | </style> |