aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2021-12-12 22:20:10 +0100
committerBastien Wirtz <bastien.wirtz@gmail.com>2021-12-12 22:20:10 +0100
commit9c77651692468ba68f631e03b22a6227b5759240 (patch)
treefb6c02b467e1b3a0acb66d87d31856e0806321f2
parentb4a2db6e37859abfa5477685b7547bb78e71a76b (diff)
downloadhomer-9c77651692468ba68f631e03b22a6227b5759240.tar.gz
homer-9c77651692468ba68f631e03b22a6227b5759240.tar.zst
homer-9c77651692468ba68f631e03b22a6227b5759240.zip
Last batch of custom services refacto.
Diffstat
-rw-r--r--docs/configuration.md1
-rw-r--r--docs/customservices.md2
-rw-r--r--src/components/services/AdGuardHome.vue3
-rw-r--r--src/components/services/Radarr.vue137
-rw-r--r--src/components/services/Sonarr.vue140
5 files changed, 97 insertions, 186 deletions
diff --git a/docs/configuration.md b/docs/configuration.md
index e2b5506..552b22a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -29,7 +29,6 @@ connectivityCheck: true # whether you want to display a message when the apps ar
29 29
30# Optional: Proxy / hosting option 30# Optional: Proxy / hosting option
31proxy: 31proxy:
32 # NOT All custom services implements this new option YET. Support will be extended very soon.
33 useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 32 useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level.
34 33
35# Optional theming 34# Optional theming
diff --git a/docs/customservices.md b/docs/customservices.md
index 3b3320d..6850bbb 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -18,8 +18,6 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
18 type: "<type>" 18 type: "<type>"
19``` 19```
20 20
21⚠️🚧 `endpoint` & `useCredentials` new options are not yet supported by all custom services (but will be very soon).
22
23## PiHole 21## PiHole
24 22
25Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard. 23Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
diff --git a/src/components/services/AdGuardHome.vue b/src/components/services/AdGuardHome.vue
index b01f0f4..4c53398 100644
--- a/src/components/services/AdGuardHome.vue
+++ b/src/components/services/AdGuardHome.vue
@@ -76,9 +76,6 @@ export default {
76</script> 76</script>
77 77
78<style scoped lang="scss"> 78<style scoped lang="scss">
79.media-left img {
80 max-height: 100%;
81}
82.status { 79.status {
83 font-size: 0.8rem; 80 font-size: 0.8rem;
84 color: var(--text-title); 81 color: var(--text-title);
diff --git a/src/components/services/Radarr.vue b/src/components/services/Radarr.vue
index a9cdedf..a57c895 100644
--- a/src/components/services/Radarr.vue
+++ b/src/components/services/Radarr.vue
@@ -1,62 +1,40 @@
1<template> 1<template>
2 <div> 2 <Generic :item="item">
3 <div class="card" :class="item.class"> 3 <template #indicator>
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <div class="notifs">
5 <div class="card-content"> 5 <strong v-if="activity > 0" class="notif activity" title="Activity">
6 <div class="media"> 6 {{ activity }}
7 <div v-if="item.logo" class="media-left"> 7 </strong>
8 <figure class="image is-48x48"> 8 <strong v-if="warnings > 0" class="notif warnings" title="Warning">
9 <img :src="item.logo" :alt="`${item.name} logo`" /> 9 {{ warnings }}
10 </figure> 10 </strong>
11 </div> 11 <strong v-if="errors > 0" class="notif errors" title="Error">
12 <div v-if="item.icon" class="media-left"> 12 {{ errors }}
13 <figure class="image is-48x48"> 13 </strong>
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> 14 <strong
15 </figure> 15 v-if="serverError"
16 </div> 16 class="notif errors"
17 <div class="media-content"> 17 title="Connection error to Radarr API, check url and apikey in config.yml"
18 <p class="title is-4">{{ item.name }}</p> 18 >?</strong
19 <p class="subtitle is-6">{{ item.subtitle }}</p> 19 >
20 </div> 20 </div>
21 <div class="notifs"> 21 </template>
22 <strong 22 </Generic>
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> 23</template>
53 24
54<script> 25<script>
26import service from "@/mixins/service.js";
27import Generic from "./Generic.vue";
28
55export default { 29export default {
56 name: "Radarr", 30 name: "Radarr",
31 mixins: [service],
57 props: { 32 props: {
58 item: Object, 33 item: Object,
59 }, 34 },
35 components: {
36 Generic,
37 },
60 data: () => { 38 data: () => {
61 return { 39 return {
62 activity: null, 40 activity: null,
@@ -70,15 +48,7 @@ export default {
70 }, 48 },
71 methods: { 49 methods: {
72 fetchConfig: function () { 50 fetchConfig: function () {
73 fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, { 51 this.fetch(`/api/health?apikey=${this.item.apikey}`)
74 credentials: "include",
75 })
76 .then((response) => {
77 if (response.status != 200) {
78 throw new Error(response.statusText);
79 }
80 return response.json();
81 })
82 .then((health) => { 52 .then((health) => {
83 this.warnings = 0; 53 this.warnings = 0;
84 this.errors = 0; 54 this.errors = 0;
@@ -94,15 +64,7 @@ export default {
94 console.error(e); 64 console.error(e);
95 this.serverError = true; 65 this.serverError = true;
96 }); 66 });
97 fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, { 67 this.fetch(`/api/queue?apikey=${this.item.apikey}`)
98 credentials: "include",
99 })
100 .then((response) => {
101 if (response.status != 200) {
102 throw new Error(response.statusText);
103 }
104 return response.json();
105 })
106 .then((queue) => { 68 .then((queue) => {
107 this.activity = 0; 69 this.activity = 0;
108 for (var i = 0; i < queue.length; i++) { 70 for (var i = 0; i < queue.length; i++) {
@@ -121,35 +83,30 @@ export default {
121</script> 83</script>
122 84
123<style scoped lang="scss"> 85<style scoped lang="scss">
124.media-left img {
125 max-height: 100%;
126}
127.notifs { 86.notifs {
128 position: absolute; 87 position: absolute;
129 color: white; 88 color: white;
130 font-family: sans-serif; 89 font-family: sans-serif;
131 top: 0.3em; 90 top: 0.3em;
132 right: 0.5em; 91 right: 0.5em;
133} 92 .notif {
134.notif { 93 display: inline-block;
135 padding-right: 0.35em; 94 padding: 0.2em 0.35em;
136 padding-left: 0.35em; 95 border-radius: 0.25em;
137 padding-top: 0.2em; 96 position: relative;
138 padding-bottom: 0.2em; 97 margin-left: 0.3em;
139 border-radius: 0.25em; 98 font-size: 0.8em;
140 position: relative; 99 &.activity {
141 margin-left: 0.3em; 100 background-color: #4fb5d6;
142 font-size: 0.8em; 101 }
143}
144.activity {
145 background-color: #4fb5d6;
146}
147 102
148.warnings { 103 &.warnings {
149 background-color: #d08d2e; 104 background-color: #d08d2e;
150} 105 }
151 106
152.errors { 107 &.errors {
153 background-color: #e51111; 108 background-color: #e51111;
109 }
110 }
154} 111}
155</style> 112</style>
diff --git a/src/components/services/Sonarr.vue b/src/components/services/Sonarr.vue
index 0270255..f8dd0d1 100644
--- a/src/components/services/Sonarr.vue
+++ b/src/components/services/Sonarr.vue
@@ -1,62 +1,41 @@
1<template> 1<template>
2 <div> 2 <Generic :item="item">
3 <div class="card" :class="item.class"> 3 <template #indicator>
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <div class="notifs">
5 <div class="card-content"> 5 <strong v-if="activity > 0" class="notif activity" title="Activity">
6 <div class="media"> 6 {{ activity }}
7 <div v-if="item.logo" class="media-left"> 7 </strong>
8 <figure class="image is-48x48"> 8 <strong v-if="warnings > 0" class="notif warnings" title="Warning">
9 <img :src="item.logo" :alt="`${item.name} logo`" /> 9 {{ warnings }}
10 </figure> 10 </strong>
11 </div> 11 <strong v-if="errors > 0" class="notif errors" title="Error">
12 <div v-if="item.icon" class="media-left"> 12 {{ errors }}
13 <figure class="image is-48x48"> 13 </strong>
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> 14 <strong
15 </figure> 15 v-if="serverError"
16 </div> 16 class="notif errors"
17 <div class="media-content"> 17 title="Connection error to Sonarr API, check url and apikey in config.yml"
18 <p class="title is-4">{{ item.name }}</p> 18 >
19 <p class="subtitle is-6">{{ item.subtitle }}</p> 19 ?
20 </div> 20 </strong>
21 <div class="notifs"> 21 </div>
22 <strong 22 </template>
23 v-if="activity > 0" 23 </Generic>
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> 24</template>
53 25
54<script> 26<script>
27import service from "@/mixins/service.js";
28import Generic from "./Generic.vue";
29
55export default { 30export default {
56 name: "Sonarr", 31 name: "Sonarr",
32 mixins: [service],
57 props: { 33 props: {
58 item: Object, 34 item: Object,
59 }, 35 },
36 components: {
37 Generic,
38 },
60 data: () => { 39 data: () => {
61 return { 40 return {
62 activity: null, 41 activity: null,
@@ -70,15 +49,7 @@ export default {
70 }, 49 },
71 methods: { 50 methods: {
72 fetchConfig: function () { 51 fetchConfig: function () {
73 fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, { 52 this.fetch(`/api/health?apikey=${this.item.apikey}`)
74 credentials: "include",
75 })
76 .then((response) => {
77 if (response.status != 200) {
78 throw new Error(response.statusText);
79 }
80 return response.json();
81 })
82 .then((health) => { 53 .then((health) => {
83 this.warnings = 0; 54 this.warnings = 0;
84 this.errors = 0; 55 this.errors = 0;
@@ -94,15 +65,7 @@ export default {
94 console.error(e); 65 console.error(e);
95 this.serverError = true; 66 this.serverError = true;
96 }); 67 });
97 fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, { 68 this.fetch(`/api/queue?apikey=${this.item.apikey}`)
98 credentials: "include",
99 })
100 .then((response) => {
101 if (response.status != 200) {
102 throw new Error(response.statusText);
103 }
104 return response.json();
105 })
106 .then((queue) => { 69 .then((queue) => {
107 this.activity = 0; 70 this.activity = 0;
108 for (var i = 0; i < queue.length; i++) { 71 for (var i = 0; i < queue.length; i++) {
@@ -121,35 +84,32 @@ export default {
121</script> 84</script>
122 85
123<style scoped lang="scss"> 86<style scoped lang="scss">
124.media-left img {
125 max-height: 100%;
126}
127.notifs { 87.notifs {
128 position: absolute; 88 position: absolute;
129 color: white; 89 color: white;
130 font-family: sans-serif; 90 font-family: sans-serif;
131 top: 0.3em; 91 top: 0.3em;
132 right: 0.5em; 92 right: 0.5em;
133}
134.notif {
135 padding-right: 0.35em;
136 padding-left: 0.35em;
137 padding-top: 0.2em;
138 padding-bottom: 0.2em;
139 border-radius: 0.25em;
140 position: relative;
141 margin-left: 0.3em;
142 font-size: 0.8em;
143}
144.activity {
145 background-color: #4fb5d6;
146}
147 93
148.warnings { 94 .notif {
149 background-color: #d08d2e; 95 display: inline-block;
150} 96 padding: 0.2em 0.35em;
97 border-radius: 0.25em;
98 position: relative;
99 margin-left: 0.3em;
100 font-size: 0.8em;
101
102 &.activity {
103 background-color: #4fb5d6;
104 }
105
106 &.warnings {
107 background-color: #d08d2e;
108 }
151 109
152.errors { 110 &.errors {
153 background-color: #e51111; 111 background-color: #e51111;
112 }
113 }
154} 114}
155</style> 115</style>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 19:05:18 +0000