aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services/Tdarr.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services/Tdarr.vue')
-rw-r--r--src/components/services/Tdarr.vue125
1 files changed, 125 insertions, 0 deletions
diff --git a/src/components/services/Tdarr.vue b/src/components/services/Tdarr.vue
new file mode 100644
index 0000000..a2734f0
--- /dev/null
+++ b/src/components/services/Tdarr.vue
@@ -0,0 +1,125 @@
1<template>
2 <Generic :item="item">
3 <template #indicator>
4 <div class="notifs">
5 <strong
6 v-if="queue > 0"
7 class="notif queue"
8 :title="`${queue} items queued`"
9 >
10 {{ queue }}
11 </strong>
12 <strong
13 v-if="errored > 0"
14 class="notif errored"
15 :title="`${errored} items`"
16 >
17 {{ errored }}
18 </strong>
19 <i
20 v-if="error"
21 class="notif error fa-solid fa-triangle-exclamation"
22 title="Unable to fetch current status"
23 ></i>
24 </div>
25 </template>
26 </Generic>
27</template>
28
29<script>
30import service from "@/mixins/service.js";
31import Generic from "./Generic.vue";
32
33export default {
34 name: "Tdarr",
35 mixins: [service],
36 props: {
37 item: Object,
38 },
39 components: {
40 Generic,
41 },
42 data: () => ({
43 stats: null,
44 error: false,
45 }),
46 computed: {
47 queue: function () {
48 if (!this.stats) {
49 return "";
50 }
51 return this.stats.table1Count;
52 },
53 errored: function () {
54 if (!this.stats) {
55 return "";
56 }
57 return this.stats.table6Count;
58 },
59 },
60 created() {
61 const checkInterval = parseInt(this.item.checkInterval, 10) || 0;
62 if (checkInterval > 0) {
63 setInterval(() => this.fetchStatus(), checkInterval);
64 }
65
66 this.fetchStatus();
67 },
68 methods: {
69 fetchStatus: async function () {
70 try {
71 const options = {
72 method: "POST",
73 headers: {
74 "Content-Type": "application/json",
75 "Accept": "application/json",
76 },
77 body: JSON.stringify({"headers":{"content-Type":"application/json"},"data":{"collection":"StatisticsJSONDB","mode":"getById","docID":"statistics","obj":{}},"timeout":1000}),
78 };
79 const response = await this.fetch(
80 `/api/v2/cruddb`,
81 options
82 );
83 this.error = false;
84 this.stats = response;
85 } catch (e) {
86 this.error = true;
87 console.error(e);
88 }
89 },
90 },
91};
92</script>
93
94<style scoped lang="scss">
95.notifs {
96 position: absolute;
97 color: white;
98 font-family: sans-serif;
99 top: 0.3em;
100 right: 0.5em;
101
102 .notif {
103 display: inline-block;
104 padding: 0.2em 0.35em;
105 border-radius: 0.25em;
106 position: relative;
107 margin-left: 0.3em;
108 font-size: 0.8em;
109
110 &.queue {
111 background-color: #28a9a3;
112 }
113
114 &.errored {
115 background-color: #e51111;
116 }
117
118 &.error {
119 border-radius: 50%;
120 aspect-ratio: 1;
121 background-color: #e51111;
122 }
123 }
124}
125</style>