From 16d3f4f53a4f4be77ace6f4f140e2e639ee761d9 Mon Sep 17 00:00:00 2001 From: royto <royto81+github@gmail.com> Date: Sat, 22 Jul 2023 22:55:00 +0200 Subject: feat: add Readarr custom service --- src/components/services/Readarr.vue | 117 ++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/components/services/Readarr.vue (limited to 'src') diff --git a/src/components/services/Readarr.vue b/src/components/services/Readarr.vue new file mode 100644 index 0000000..d921c29 --- /dev/null +++ b/src/components/services/Readarr.vue @@ -0,0 +1,117 @@ +<template> + <Generic :item="item"> + <template #indicator> + <div class="notifs"> + <strong v-if="activity > 0" class="notif activity" title="Activity"> + {{ activity }} + </strong> + <strong v-if="missing > 0" class="notif missing" title="Missing"> + {{ missing }} + </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 Readarr 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"; + +const API = "/api/v1"; + +export default { + name: "Readarr", + mixins: [service], + props: { + item: Object, + }, + components: { + Generic, + }, + data: () => { + return { + activity: null, + missing: null, + warnings: null, + errors: null, + serverError: false, + }; + }, + created: function () { + this.fetchConfig(); + }, + computed: { + apiPath() { + return API; + }, + }, + methods: { + fetchConfig: function () { + const handleError = (e) => { + console.error(e); + this.serverError = true; + } + this.fetch(`${this.apiPath}/health?apikey=${this.item.apikey}`) + .then((health) => { + this.warnings = health.filter(h => h.type === 'warning').length; + this.errors = health.filter(h => h.type === 'errors').length; + }) + .catch(handleError); + this.fetch(`${this.apiPath}/queue?apikey=${this.item.apikey}`) + .then((queue) => { + this.activity = queue.totalRecords; + }) + .catch(handleError); + this.fetch(`${this.apiPath}/wanted/missing?apikey=${this.item.apikey}`) + .then((missing) => { + this.missing = missing.totalRecords; + }) + .catch(handleError); + }, + }, +}; +</script> + +<style scoped lang="scss"> +.notifs { + position: absolute; + color: white; + font-family: sans-serif; + top: 0.3em; + right: 0.5em; + display: flex; + gap: 0.2rem; + .notif { + padding: 0.2em 0.35em; + border-radius: 0.25em; + font-size: 0.8em; + &.activity { + background-color: #4fb5d6; + } + + &.missing { + background-color: #9d00ff; + } + + &.warnings { + background-color: #d08d2e; + } + + &.errors { + background-color: #e51111; + } + } +} +</style> -- cgit v1.2.3