holm/homer
1
0
Fork 0
forked from extern/homer
Code Issues Pull Requests 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>
<div>
<div class="card" :class="item.class">
<a :href="item.url" :target="item.target" rel="noreferrer">
<div class="card-content">
<div class="media">
<div v-if="item.logo" class="media-left">
<figure class="image is-48x48">
<img :src="item.logo" :alt="`${item.name} logo`" />
</figure>
</div>
<div v-if="item.icon" class="media-left">
<figure class="image is-48x48">
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">{{ item.subtitle }}</p>
</div>
<div class="notifs">
<strong
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>
<Generic :item="item">
<template #indicator>
<div class="notifs">
<strong 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>
</template>
</Generic>
</template>
<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default {
name: "Lidarr",
mixins: [service],
props: {
item: Object,
},
components: {
Generic,
},
data: () => {
return {
activity: null,
@ -70,15 +48,7 @@ export default {
},
methods: {
fetchConfig: function () {
fetch(`${this.item.url}/api/v1/health?apikey=${this.item.apikey}`, {
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
this.fetch(`/api/v1/health?apikey=${this.item.apikey}`)
.then((health) => {
this.warnings = 0;
this.errors = 0;
@ -94,15 +64,7 @@ export default {
console.error(e);
this.serverError = true;
});
fetch(`${this.item.url}/api/v1/queue/status?apikey=${this.item.apikey}`, {
credentials: "include",
})
.then((response) => {
if (response.status != 200) {
throw new Error(response.statusText);
}
return response.json();
})
this.fetch(`/api/v1/queue/status?apikey=${this.item.apikey}`)
.then((queue) => {
this.activity = queue.totalCount;
})
@ -116,35 +78,33 @@ export default {
</script>
<style scoped lang="scss">
.media-left img {
max-height: 100%;
}
.notifs {
position: absolute;
color: white;
font-family: sans-serif;
top: 0.3em;
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;
}
.notif {
display: inline-block;
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 {
background-color: #d08d2e;
}
&.warnings {
background-color: #d08d2e;
}
.errors {
background-color: #e51111;
&.errors {
background-color: #e51111;
}
}
}
</style>