]>
Commit | Line | Data |
---|---|---|
98fe0a39 MB |
1 | <template> |
2 | <Generic :item="item"> | |
3 | <template #indicator> | |
4 | <div class="notifs"> | |
5 | <strong | |
6 | v-if="downloads > 0" | |
7 | class="notif downloading" | |
8 | :title="`${downloads} active download${downloads > 1 ? 's' : ''}`" | |
9 | > | |
10 | {{ downloads }} | |
11 | </strong> | |
12 | <i | |
13 | v-if="error" | |
14 | class="notif error fa-solid fa-triangle-exclamation" | |
15 | title="Unable to fetch current status" | |
16 | ></i> | |
17 | </div> | |
18 | </template> | |
19 | </Generic> | |
20 | </template> | |
21 | ||
22 | <script> | |
23 | import service from "@/mixins/service.js"; | |
24 | import Generic from "./Generic.vue"; | |
25 | ||
26 | export default { | |
27 | name: "SABnzbd", | |
28 | mixins: [service], | |
29 | props: { | |
30 | item: Object, | |
31 | }, | |
32 | components: { | |
33 | Generic, | |
34 | }, | |
35 | data: () => ({ | |
36 | stats: null, | |
37 | error: false, | |
38 | }), | |
39 | computed: { | |
40 | downloads: function () { | |
41 | if (!this.stats) { | |
42 | return ""; | |
43 | } | |
44 | return this.stats.noofslots; | |
45 | }, | |
46 | }, | |
47 | created() { | |
48 | const downloadInterval = parseInt(this.item.downloadInterval, 10) || 0; | |
49 | if (downloadInterval > 0) { | |
50 | setInterval(() => this.fetchStatus(), downloadInterval); | |
51 | } | |
52 | ||
53 | this.fetchStatus(); | |
54 | }, | |
55 | methods: { | |
56 | fetchStatus: async function () { | |
57 | try { | |
58 | const response = await this.fetch( | |
de4b7e61 | 59 | `/api?output=json&apikey=${this.item.apikey}&mode=queue`, |
98fe0a39 MB |
60 | ); |
61 | this.error = false; | |
62 | this.stats = response.queue; | |
63 | } catch (e) { | |
64 | this.error = true; | |
65 | console.error(e); | |
66 | } | |
67 | }, | |
68 | }, | |
69 | }; | |
70 | </script> | |
71 | ||
72 | <style scoped lang="scss"> | |
73 | .notifs { | |
74 | position: absolute; | |
75 | color: white; | |
76 | font-family: sans-serif; | |
77 | top: 0.3em; | |
78 | right: 0.5em; | |
79 | ||
80 | .notif { | |
81 | display: inline-block; | |
82 | padding: 0.2em 0.35em; | |
83 | border-radius: 0.25em; | |
84 | position: relative; | |
85 | margin-left: 0.3em; | |
86 | font-size: 0.8em; | |
87 | ||
88 | &.downloading { | |
89 | background-color: #4fb5d6; | |
90 | } | |
91 | ||
92 | &.error { | |
93 | border-radius: 50%; | |
94 | aspect-ratio: 1; | |
95 | background-color: #e51111; | |
96 | } | |
97 | } | |
98 | } | |
99 | </style> |