]>
Commit | Line | Data |
---|---|---|
dfde8ea8 MB |
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> | |
30 | import service from "@/mixins/service.js"; | |
31 | import Generic from "./Generic.vue"; | |
32 | ||
33 | export 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", | |
de4b7e61 | 75 | Accept: "application/json", |
dfde8ea8 | 76 | }, |
de4b7e61 BW |
77 | body: JSON.stringify({ |
78 | headers: { "content-Type": "application/json" }, | |
79 | data: { | |
80 | collection: "StatisticsJSONDB", | |
81 | mode: "getById", | |
82 | docID: "statistics", | |
83 | obj: {}, | |
84 | }, | |
85 | timeout: 1000, | |
86 | }), | |
dfde8ea8 | 87 | }; |
de4b7e61 | 88 | const response = await this.fetch(`/api/v2/cruddb`, options); |
dfde8ea8 MB |
89 | this.error = false; |
90 | this.stats = response; | |
91 | } catch (e) { | |
92 | this.error = true; | |
93 | console.error(e); | |
94 | } | |
95 | }, | |
96 | }, | |
97 | }; | |
98 | </script> | |
99 | ||
100 | <style scoped lang="scss"> | |
101 | .notifs { | |
102 | position: absolute; | |
103 | color: white; | |
104 | font-family: sans-serif; | |
105 | top: 0.3em; | |
106 | right: 0.5em; | |
107 | ||
108 | .notif { | |
109 | display: inline-block; | |
110 | padding: 0.2em 0.35em; | |
111 | border-radius: 0.25em; | |
112 | position: relative; | |
113 | margin-left: 0.3em; | |
114 | font-size: 0.8em; | |
115 | ||
116 | &.queue { | |
117 | background-color: #28a9a3; | |
118 | } | |
119 | ||
120 | &.errored { | |
121 | background-color: #e51111; | |
122 | } | |
123 | ||
124 | &.error { | |
125 | border-radius: 50%; | |
126 | aspect-ratio: 1; | |
127 | background-color: #e51111; | |
128 | } | |
129 | } | |
130 | } | |
131 | </style> |