diff options
author | twolaw <twolaw@free.fr> | 2021-03-11 15:03:16 +0100 |
---|---|---|
committer | twolaw <twolaw@free.fr> | 2021-03-11 16:12:15 +0100 |
commit | 0211da26c805aa7255f605f28257dc82c5aa0f76 (patch) | |
tree | b3370d2d4de07ec08772b3045194f0db264a6019 | |
parent | b6c667a129867db8c0f8aa29d12013b47e0c6516 (diff) | |
download | homer-0211da26c805aa7255f605f28257dc82c5aa0f76.tar.gz homer-0211da26c805aa7255f605f28257dc82c5aa0f76.tar.zst homer-0211da26c805aa7255f605f28257dc82c5aa0f76.zip |
radarr, sonarr services
-rw-r--r-- | src/components/services/Radarr.vue | 157 | ||||
-rw-r--r-- | src/components/services/Sonarr.vue | 157 |
2 files changed, 314 insertions, 0 deletions
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue new file mode 100644 index 0000000..93831a7 --- /dev/null +++ b/src/components/services/Radarr.vue | |||
@@ -0,0 +1,157 @@ | |||
1 | <template> | ||
2 | <div> | ||
3 | <div class="card" :class="item.class"> | ||
4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | ||
5 | <div class="card-content"> | ||
6 | <div class="media"> | ||
7 | <div v-if="item.logo" class="media-left"> | ||
8 | <figure class="image is-48x48"> | ||
9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | ||
10 | </figure> | ||
11 | </div> | ||
12 | <div v-if="item.icon" class="media-left"> | ||
13 | <figure class="image is-48x48"> | ||
14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | ||
15 | </figure> | ||
16 | </div> | ||
17 | <div class="media-content"> | ||
18 | <p class="title is-4">{{ item.name }}</p> | ||
19 | <p class="subtitle is-6">{{ item.subtitle }}</p> | ||
20 | </div> | ||
21 | <div class="notifs"> | ||
22 | <strong | ||
23 | v-if="activity > 0" | ||
24 | class="notif activity" | ||
25 | title="Activity" | ||
26 | >{{ activity }}</strong | ||
27 | > | ||
28 | <strong | ||
29 | v-if="warnings > 0" | ||
30 | class="notif warnings" | ||
31 | title="Warning" | ||
32 | >{{ warnings }}</strong | ||
33 | > | ||
34 | <strong v-if="errors > 0" class="notif errors" title="Error">{{ | ||
35 | errors | ||
36 | }}</strong> | ||
37 | <strong | ||
38 | v-if="serverError" | ||
39 | class="notif errors" | ||
40 | title="Connection error to Radarr API, check url and apikey in config.yml" | ||
41 | >?</strong | ||
42 | > | ||
43 | </div> | ||
44 | </div> | ||
45 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | ||
46 | <strong class="tag-text">#{{ item.tag }}</strong> | ||
47 | </div> | ||
48 | </div> | ||
49 | </a> | ||
50 | </div> | ||
51 | </div> | ||
52 | </template> | ||
53 | |||
54 | <script> | ||
55 | export default { | ||
56 | name: "Radarr", | ||
57 | props: { | ||
58 | item: Object, | ||
59 | }, | ||
60 | data: () => { | ||
61 | return { | ||
62 | activity: null, | ||
63 | warnings: null, | ||
64 | errors: null, | ||
65 | serverError: false, | ||
66 | }; | ||
67 | }, | ||
68 | created: function () { | ||
69 | this.fetchConfig(); | ||
70 | }, | ||
71 | methods: { | ||
72 | fetchConfig: function () { | ||
73 | fetch(`${this.item.url}/api/health`, { | ||
74 | credentials: "include", | ||
75 | headers: { "X-Api-Key": `${this.item.apikey}` }, | ||
76 | }) | ||
77 | .then((response) => { | ||
78 | if (response.status != 200) { | ||
79 | throw new Error(response.statusText); | ||
80 | } | ||
81 | return response.json(); | ||
82 | }) | ||
83 | .then((health) => { | ||
84 | this.warnings = 0; | ||
85 | this.errors = 0; | ||
86 | for (var i = 0; i < health.length; i++) { | ||
87 | if (health[i].type == "warning") { | ||
88 | this.warnings++; | ||
89 | } else if (health[i].type == "error") { | ||
90 | this.errors++; | ||
91 | } | ||
92 | } | ||
93 | }) | ||
94 | .catch((e) => { | ||
95 | console.error(e); | ||
96 | this.serverError = true; | ||
97 | }); | ||
98 | fetch(`${this.item.url}/api/queue`, { | ||
99 | credentials: "include", | ||
100 | headers: { "X-Api-Key": `${this.item.apikey}` }, | ||
101 | }) | ||
102 | .then((response) => { | ||
103 | if (response.status != 200) { | ||
104 | throw new Error(response.statusText); | ||
105 | } | ||
106 | return response.json(); | ||
107 | }) | ||
108 | .then((queue) => { | ||
109 | this.activity = 0; | ||
110 | for (var i = 0; i < queue.length; i++) { | ||
111 | if (queue[i].movie) { | ||
112 | this.activity++; | ||
113 | } | ||
114 | } | ||
115 | }) | ||
116 | .catch((e) => { | ||
117 | console.error(e); | ||
118 | this.serverError = true; | ||
119 | }); | ||
120 | }, | ||
121 | }, | ||
122 | }; | ||
123 | </script> | ||
124 | |||
125 | <style scoped lang="scss"> | ||
126 | .media-left img { | ||
127 | max-height: 100%; | ||
128 | } | ||
129 | .notifs { | ||
130 | position: absolute; | ||
131 | color: white; | ||
132 | font-family: sans-serif; | ||
133 | top: 0.3em; | ||
134 | right: 0.5em; | ||
135 | } | ||
136 | .notif { | ||
137 | padding-right: 0.35em; | ||
138 | padding-left: 0.35em; | ||
139 | padding-top: 0.2em; | ||
140 | padding-bottom: 0.2em; | ||
141 | border-radius: 0.25em; | ||
142 | position: relative; | ||
143 | margin-left: 0.3em; | ||
144 | font-size: 0.8em; | ||
145 | } | ||
146 | .activity { | ||
147 | background-color: #4fb5d6; | ||
148 | } | ||
149 | |||
150 | .warnings { | ||
151 | background-color: #d08d2e; | ||
152 | } | ||
153 | |||
154 | .errors { | ||
155 | background-color: #e51111; | ||
156 | } | ||
157 | </style> | ||
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue new file mode 100644 index 0000000..8cebac4 --- /dev/null +++ b/src/components/services/Sonarr.vue | |||
@@ -0,0 +1,157 @@ | |||
1 | <template> | ||
2 | <div> | ||
3 | <div class="card" :class="item.class"> | ||
4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | ||
5 | <div class="card-content"> | ||
6 | <div class="media"> | ||
7 | <div v-if="item.logo" class="media-left"> | ||
8 | <figure class="image is-48x48"> | ||
9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | ||
10 | </figure> | ||
11 | </div> | ||
12 | <div v-if="item.icon" class="media-left"> | ||
13 | <figure class="image is-48x48"> | ||
14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | ||
15 | </figure> | ||
16 | </div> | ||
17 | <div class="media-content"> | ||
18 | <p class="title is-4">{{ item.name }}</p> | ||
19 | <p class="subtitle is-6">{{ item.subtitle }}</p> | ||
20 | </div> | ||
21 | <div class="notifs"> | ||
22 | <strong | ||
23 | v-if="activity > 0" | ||
24 | class="notif activity" | ||
25 | title="Activity" | ||
26 | >{{ activity }}</strong | ||
27 | > | ||
28 | <strong | ||
29 | v-if="warnings > 0" | ||
30 | class="notif warnings" | ||
31 | title="Warning" | ||
32 | >{{ warnings }}</strong | ||
33 | > | ||
34 | <strong v-if="errors > 0" class="notif errors" title="Error">{{ | ||
35 | errors | ||
36 | }}</strong> | ||
37 | <strong | ||
38 | v-if="serverError" | ||
39 | class="notif errors" | ||
40 | title="Connection error to Sonarr API, check url and apikey in config.yml" | ||
41 | >?</strong | ||
42 | > | ||
43 | </div> | ||
44 | </div> | ||
45 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | ||
46 | <strong class="tag-text">#{{ item.tag }}</strong> | ||
47 | </div> | ||
48 | </div> | ||
49 | </a> | ||
50 | </div> | ||
51 | </div> | ||
52 | </template> | ||
53 | |||
54 | <script> | ||
55 | export default { | ||
56 | name: "Sonarr", | ||
57 | props: { | ||
58 | item: Object, | ||
59 | }, | ||
60 | data: () => { | ||
61 | return { | ||
62 | activity: null, | ||
63 | warnings: null, | ||
64 | errors: null, | ||
65 | serverError: false, | ||
66 | }; | ||
67 | }, | ||
68 | created: function () { | ||
69 | this.fetchConfig(); | ||
70 | }, | ||
71 | methods: { | ||
72 | fetchConfig: function () { | ||
73 | fetch(`${this.item.url}/api/health`, { | ||
74 | credentials: "include", | ||
75 | headers: { "X-Api-Key": `${this.item.apikey}` }, | ||
76 | }) | ||
77 | .then((response) => { | ||
78 | if (response.status != 200) { | ||
79 | throw new Error(response.statusText); | ||
80 | } | ||
81 | return response.json(); | ||
82 | }) | ||
83 | .then((health) => { | ||
84 | this.warnings = 0; | ||
85 | this.errors = 0; | ||
86 | for (var i = 0; i < health.length; i++) { | ||
87 | if (health[i].type == "warning") { | ||
88 | this.warnings++; | ||
89 | } else if (health[i].type == "error") { | ||
90 | this.errors++; | ||
91 | } | ||
92 | } | ||
93 | }) | ||
94 | .catch((e) => { | ||
95 | console.error(e); | ||
96 | this.serverError = true; | ||
97 | }); | ||
98 | fetch(`${this.item.url}/api/queue`, { | ||
99 | credentials: "include", | ||
100 | headers: { "X-Api-Key": `${this.item.apikey}` }, | ||
101 | }) | ||
102 | .then((response) => { | ||
103 | if (response.status != 200) { | ||
104 | throw new Error(response.statusText); | ||
105 | } | ||
106 | return response.json(); | ||
107 | }) | ||
108 | .then((queue) => { | ||
109 | this.activity = 0; | ||
110 | for (var i = 0; i < queue.length; i++) { | ||
111 | if (queue[i].series) { | ||
112 | this.activity++; | ||
113 | } | ||
114 | } | ||
115 | }) | ||
116 | .catch((e) => { | ||
117 | console.error(e); | ||
118 | this.serverError = true; | ||
119 | }); | ||
120 | }, | ||
121 | }, | ||
122 | }; | ||
123 | </script> | ||
124 | |||
125 | <style scoped lang="scss"> | ||
126 | .media-left img { | ||
127 | max-height: 100%; | ||
128 | } | ||
129 | .notifs { | ||
130 | position: absolute; | ||
131 | color: white; | ||
132 | font-family: sans-serif; | ||
133 | top: 0.3em; | ||
134 | right: 0.5em; | ||
135 | } | ||
136 | .notif { | ||
137 | padding-right: 0.35em; | ||
138 | padding-left: 0.35em; | ||
139 | padding-top: 0.2em; | ||
140 | padding-bottom: 0.2em; | ||
141 | border-radius: 0.25em; | ||
142 | position: relative; | ||
143 | margin-left: 0.3em; | ||
144 | font-size: 0.8em; | ||
145 | } | ||
146 | .activity { | ||
147 | background-color: #4fb5d6; | ||
148 | } | ||
149 | |||
150 | .warnings { | ||
151 | background-color: #d08d2e; | ||
152 | } | ||
153 | |||
154 | .errors { | ||
155 | background-color: #e51111; | ||
156 | } | ||
157 | </style> | ||