]>
Commit | Line | Data |
---|---|---|
b8e3f74e | 1 | <template> |
2 | <Generic :item="item"> | |
3 | <template #indicator> | |
4 | <div class="notifs"> | |
5 | <strong v-if="users > 0" class="notif users" title="Users"> | |
6 | {{ users }} | |
7 | </strong> | |
8 | <strong v-if="photos > 0" class="notif photos" title="Photos"> | |
9 | {{ photos }} | |
10 | </strong> | |
11 | <strong v-if="videos > 0" class="notif videos" title="Videos"> | |
12 | {{ videos }} | |
13 | </strong> | |
14 | <strong v-if="usage > 0" class="notif usage" title="Usage"> | |
15 | {{ humanizeSize }} | |
16 | </strong> | |
17 | <strong | |
18 | v-if="serverError" | |
19 | class="notif errors" | |
20 | title="Connection error to Immich API, check your url and apikey in config.yml" | |
21 | >?</strong | |
22 | > | |
23 | </div> | |
24 | </template> | |
25 | </Generic> | |
26 | </template> | |
27 | ||
28 | <script> | |
29 | import service from "@/mixins/service.js"; | |
30 | import Generic from "./Generic.vue"; | |
31 | ||
32 | export default { | |
33 | name: "Immich", | |
34 | mixins: [service], | |
35 | props: { | |
36 | item: Object, | |
37 | }, | |
38 | components: { | |
39 | Generic, | |
40 | }, | |
41 | data: () => { | |
42 | return { | |
de4b7e61 | 43 | users: null, |
b8e3f74e | 44 | photos: null, |
45 | videos: null, | |
46 | usage: null, | |
47 | serverError: false, | |
48 | }; | |
49 | }, | |
50 | created: function () { | |
51 | const updateInterval = parseInt(this.item.updateInterval, 10) || 0; | |
52 | if (updateInterval > 0) { | |
53 | setInterval(() => this.fetchConfig(), updateInterval); | |
54 | } | |
55 | this.fetchConfig(); | |
56 | }, | |
57 | computed: { | |
58 | humanizeSize: function () { | |
de4b7e61 BW |
59 | let bytes = this.usage; |
60 | if (Math.abs(bytes) < 1024) return bytes + " B"; | |
b8e3f74e | 61 | |
de4b7e61 BW |
62 | const units = ["KiB", "MiB", "GiB", "TiB"]; |
63 | let u = -1; | |
64 | do { | |
65 | bytes /= 1024; | |
66 | ++u; | |
67 | } while ( | |
68 | Math.round(Math.abs(bytes) * 100) / 100 >= 1024 && | |
69 | u < units.length - 1 | |
70 | ); | |
b8e3f74e | 71 | |
de4b7e61 | 72 | return bytes.toFixed(2) + " " + units[u]; |
b8e3f74e | 73 | }, |
74 | }, | |
75 | methods: { | |
76 | fetchConfig: function () { | |
77 | const headers = { | |
78 | "x-api-key": this.item.apikey, | |
de4b7e61 | 79 | }; |
b8e3f74e | 80 | |
81 | this.fetch(`/api/server-info/stats`, { headers }) | |
82 | .then((stats) => { | |
83 | this.photos = stats.photos; | |
84 | this.videos = stats.videos; | |
85 | this.usage = stats.usage; | |
86 | this.users = stats.usageByUser.length; | |
de4b7e61 | 87 | }) |
b8e3f74e | 88 | .catch((e) => { |
89 | console.error(e); | |
90 | this.serverError = true; | |
91 | }); | |
92 | }, | |
93 | }, | |
94 | }; | |
95 | </script> | |
96 | ||
97 | <style scoped lang="scss"> | |
98 | .notifs { | |
99 | position: absolute; | |
100 | color: white; | |
101 | font-family: sans-serif; | |
102 | top: 0.3em; | |
103 | right: 0.5em; | |
104 | .notif { | |
105 | display: inline-block; | |
106 | padding: 0.2em 0.35em; | |
107 | border-radius: 0.25em; | |
108 | position: relative; | |
109 | margin-left: 0.3em; | |
110 | font-size: 0.8em; | |
111 | &.photos { | |
112 | background-color: #4fb5d6; | |
113 | } | |
114 | ||
115 | &.videos { | |
116 | background-color: #d08d2e; | |
117 | } | |
118 | ||
119 | &.usage { | |
120 | background-color: #e51111; | |
121 | } | |
122 | ||
123 | &.users { | |
124 | background-color: #8dd475; | |
125 | } | |
126 | } | |
127 | } | |
de4b7e61 | 128 | </style> |