extern/homer
1
0
Fork 1
mirror of https://github.com/bastienwirtz/homer.git synced 2025-06-25 20:21:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make Lidaar component use the Generic base component

Browse Source
This commit is contained in:
Bastien Wirtz 2021-12-13 21:07:30 +01:00
parent b1c8586441
commit 8283b8da5a
1 changed files with 50 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/services/Lidarr.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 Lidarr 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 Lidarr 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: "Lidarr", name: "Lidarr",
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/v1/health?apikey=${this.item.apikey}`, { this.fetch(`/api/v1/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/v1/queue/status?apikey=${this.item.apikey}`, { this.fetch(`/api/v1/queue/status?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 = queue.totalCount; this.activity = queue.totalCount;
}) })
@ -116,35 +78,33 @@ 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-right: 0.35em;
padding-left: 0.35em; padding-left: 0.35em;
padding-top: 0.2em; padding-top: 0.2em;
padding-bottom: 0.2em; padding-bottom: 0.2em;
border-radius: 0.25em; border-radius: 0.25em;
position: relative; position: relative;
margin-left: 0.3em; margin-left: 0.3em;
font-size: 0.8em; font-size: 0.8em;
} &.activity {
.activity { background-color: #4fb5d6;
background-color: #4fb5d6; }
}
.warnings { &.warnings {
background-color: #d08d2e; background-color: #d08d2e;
} }
.errors { &.errors {
background-color: #e51111; background-color: #e51111;
}
}
} }
</style> </style>