holm/homer
1
0
Fork 0
forked from extern/homer
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Last batch of custom services refacto.

Browse Source
This commit is contained in:
Bastien Wirtz 2021-12-12 22:20:10 +01:00
parent b4a2db6e37
commit 9c77651692
5 changed files with 97 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/configuration.md
View File

@ -29,7 +29,6 @@ connectivityCheck: true # whether you want to display a message when the apps ar
# Optional: Proxy / hosting option # Optional: Proxy / hosting option
proxy: proxy:
# NOT All custom services implements this new option YET. Support will be extended very soon.
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. 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.
# Optional theming # Optional theming

2
docs/customservices.md
View File

@ -18,8 +18,6 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
type: "<type>" type: "<type>"
``` ```
⚠️🚧 `endpoint` & `useCredentials` new options are not yet supported by all custom services (but will be very soon).
## PiHole ## PiHole
Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard. Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.

3
src/components/services/AdGuardHome.vue
View File

@ -76,9 +76,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.status { .status {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-title); color: var(--text-title);

137
src/components/services/Radarr.vue
View File

@ -1,62 +1,40 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #indicator>
<a :href="item.url" :target="item.target" rel="noreferrer"> <div class="notifs">
<div class="card-content"> <strong v-if="activity > 0" class="notif activity" title="Activity">
<div class="media"> {{ activity }}
<div v-if="item.logo" class="media-left"> </strong>
<figure class="image is-48x48"> <strong v-if="warnings > 0" class="notif warnings" title="Warning">
<img :src="item.logo" :alt="`${item.name} logo`" /> {{ warnings }}
</figure> </strong>
</div> <strong v-if="errors > 0" class="notif errors" title="Error">
<div v-if="item.icon" class="media-left"> {{ errors }}
<figure class="image is-48x48"> </strong>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> <strong
</figure> v-if="serverError"
</div> class="notif errors"
<div class="media-content"> title="Connection error to Radarr API, check url and apikey in config.yml"
<p class="title is-4">{{ item.name }}</p> >?</strong
<p class="subtitle is-6">{{ item.subtitle }}</p> >
</div> </div>
<div class="notifs"> </template>
<strong </Generic>
v-if="activity > 0"
class="notif activity"
title="Activity"
>{{ activity }}</strong
>
<strong
v-if="warnings > 0"
class="notif warnings"
title="Warning"
>{{ warnings }}</strong
>
<strong v-if="errors > 0" class="notif errors" title="Error">{{
errors
}}</strong>
<strong
v-if="serverError"
class="notif errors"
title="Connection error to Radarr API, check url and apikey in config.yml"
>?</strong
>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "Radarr", name: "Radarr",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => { data: () => {
return { return {
activity: null, activity: null,
@ -70,15 +48,7 @@ export default {
}, },
methods: { methods: {
fetchConfig: function () { fetchConfig: function () {
fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, { this.fetch(`/api/health?apikey=${this.item.apikey}`)
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
.then((health) => { .then((health) => {
this.warnings = 0; this.warnings = 0;
this.errors = 0; this.errors = 0;
@ -94,15 +64,7 @@ export default {
console.error(e); console.error(e);
this.serverError = true; this.serverError = true;
}); });
fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, { this.fetch(`/api/queue?apikey=${this.item.apikey}`)
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
.then((queue) => { .then((queue) => {
this.activity = 0; this.activity = 0;
for (var i = 0; i < queue.length; i++) { for (var i = 0; i < queue.length; i++) {
@ -121,35 +83,30 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.notifs { .notifs {
position: absolute; position: absolute;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
top: 0.3em; top: 0.3em;
right: 0.5em; right: 0.5em;
} .notif {
.notif { display: inline-block;
padding-right: 0.35em; padding: 0.2em 0.35em;
padding-left: 0.35em; border-radius: 0.25em;
padding-top: 0.2em; position: relative;
padding-bottom: 0.2em; margin-left: 0.3em;
border-radius: 0.25em; font-size: 0.8em;
position: relative; &.activity {
margin-left: 0.3em; background-color: #4fb5d6;
font-size: 0.8em; }
}
.activity {
background-color: #4fb5d6;
}
.warnings { &.warnings {
background-color: #d08d2e; background-color: #d08d2e;
} }
.errors { &.errors {
background-color: #e51111; background-color: #e51111;
}
}
} }
</style> </style>

140
src/components/services/Sonarr.vue
View File

@ -1,62 +1,41 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #indicator>
<a :href="item.url" :target="item.target" rel="noreferrer"> <div class="notifs">
<div class="card-content"> <strong v-if="activity > 0" class="notif activity" title="Activity">
<div class="media"> {{ activity }}
<div v-if="item.logo" class="media-left"> </strong>
<figure class="image is-48x48"> <strong v-if="warnings > 0" class="notif warnings" title="Warning">
<img :src="item.logo" :alt="`${item.name} logo`" /> {{ warnings }}
</figure> </strong>
</div> <strong v-if="errors > 0" class="notif errors" title="Error">
<div v-if="item.icon" class="media-left"> {{ errors }}
<figure class="image is-48x48"> </strong>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> <strong
</figure> v-if="serverError"
</div> class="notif errors"
<div class="media-content"> title="Connection error to Sonarr API, check url and apikey in config.yml"
<p class="title is-4">{{ item.name }}</p> >
<p class="subtitle is-6">{{ item.subtitle }}</p> ?
</div> </strong>
<div class="notifs"> </div>
<strong </template>
v-if="activity > 0" </Generic>
class="notif activity"
title="Activity"
>{{ activity }}</strong
>
<strong
v-if="warnings > 0"
class="notif warnings"
title="Warning"
>{{ warnings }}</strong
>
<strong v-if="errors > 0" class="notif errors" title="Error">{{
errors
}}</strong>
<strong
v-if="serverError"
class="notif errors"
title="Connection error to Sonarr API, check url and apikey in config.yml"
>?</strong
>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "Sonarr", name: "Sonarr",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => { data: () => {
return { return {
activity: null, activity: null,
@ -70,15 +49,7 @@ export default {
}, },
methods: { methods: {
fetchConfig: function () { fetchConfig: function () {
fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, { this.fetch(`/api/health?apikey=${this.item.apikey}`)
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
.then((health) => { .then((health) => {
this.warnings = 0; this.warnings = 0;
this.errors = 0; this.errors = 0;
@ -94,15 +65,7 @@ export default {
console.error(e); console.error(e);
this.serverError = true; this.serverError = true;
}); });
fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, { this.fetch(`/api/queue?apikey=${this.item.apikey}`)
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
.then((queue) => { .then((queue) => {
this.activity = 0; this.activity = 0;
for (var i = 0; i < queue.length; i++) { for (var i = 0; i < queue.length; i++) {
@ -121,35 +84,32 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.notifs { .notifs {
position: absolute; position: absolute;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
top: 0.3em; top: 0.3em;
right: 0.5em; right: 0.5em;
}
.notif {
padding-right: 0.35em;
padding-left: 0.35em;
padding-top: 0.2em;
padding-bottom: 0.2em;
border-radius: 0.25em;
position: relative;
margin-left: 0.3em;
font-size: 0.8em;
}
.activity {
background-color: #4fb5d6;
}
.warnings { .notif {
background-color: #d08d2e; display: inline-block;
} padding: 0.2em 0.35em;
border-radius: 0.25em;
position: relative;
margin-left: 0.3em;
font-size: 0.8em;
.errors { &.activity {
background-color: #e51111; background-color: #4fb5d6;
}
&.warnings {
background-color: #d08d2e;
}
&.errors {
background-color: #e51111;
}
}
} }
</style> </style>