diff options
author | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-29 14:18:59 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-29 14:18:59 -0400 |
commit | e6c106eb72412fc6ad2998e1ff662f9206595ae7 (patch) | |
tree | d85bee77527cea8dd0a026515c29696ccafe428f /src | |
parent | 6e4410d8f144e3ab2ff22444313f2a3c3a24c29c (diff) | |
download | homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.tar.gz homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.tar.zst homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.zip |
Added Tautulli service (#439)
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/Tautulli.vue | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/src/components/services/Tautulli.vue b/src/components/services/Tautulli.vue new file mode 100644 index 0000000..2e8f8f5 --- /dev/null +++ b/src/components/services/Tautulli.vue | |||
@@ -0,0 +1,92 @@ | |||
1 | <template> | ||
2 | <Generic :item="item"> | ||
3 | <template #indicator> | ||
4 | <div class="notifs"> | ||
5 | <strong | ||
6 | v-if="streams > 0" | ||
7 | class="notif playing" | ||
8 | :title="`${streams} active stream${streams > 1 ? 's' : ''}`" | ||
9 | > | ||
10 | {{ streams }} | ||
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: "Tautulli", | ||
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 | streams: function () { | ||
41 | if (!this.stats) { | ||
42 | return ""; | ||
43 | } | ||
44 | return this.stats.stream_count; | ||
45 | }, | ||
46 | }, | ||
47 | created() { | ||
48 | this.fetchStatus(); | ||
49 | }, | ||
50 | methods: { | ||
51 | fetchStatus: async function () { | ||
52 | try { | ||
53 | const response = await this.fetch(`/api/v2?apikey=${this.item.apikey}&cmd=get_activity`); | ||
54 | this.error = false; | ||
55 | this.stats = response.response.data; | ||
56 | } catch (e) { | ||
57 | this.error = true; | ||
58 | console.error(e); | ||
59 | } | ||
60 | } | ||
61 | }, | ||
62 | }; | ||
63 | </script> | ||
64 | |||
65 | <style scoped lang="scss"> | ||
66 | .notifs { | ||
67 | position: absolute; | ||
68 | color: white; | ||
69 | font-family: sans-serif; | ||
70 | top: 0.3em; | ||
71 | right: 0.5em; | ||
72 | |||
73 | .notif { | ||
74 | display: inline-block; | ||
75 | padding: 0.2em 0.35em; | ||
76 | border-radius: 0.25em; | ||
77 | position: relative; | ||
78 | margin-left: 0.3em; | ||
79 | font-size: 0.8em; | ||
80 | |||
81 | &.playing { | ||
82 | background-color: #28a9a3; | ||
83 | } | ||
84 | |||
85 | &.error { | ||
86 | border-radius: 50%; | ||
87 | aspect-ratio: 1; | ||
88 | background-color: #e51111; | ||
89 | } | ||
90 | } | ||
91 | } | ||
92 | </style> | ||