]>
Commit | Line | Data |
---|---|---|
b5048fc3 | 1 | <template> |
beb57557 BW |
2 | <Generic :item="item"> |
3 | <template #content> | |
4 | <p class="title is-4">{{ item.name }}</p> | |
5 | <p class="subtitle is-6"> | |
6 | <template v-if="speedtest"> | |
7 | <i class="fas fa-arrow-down"></i> {{ download }} Mbit/s | | |
8 | <i class="fas fa-arrow-up"></i> {{ upload }} Mbit/s | | |
9 | <i class="fas fa-stopwatch"></i> {{ ping }} ms | |
10 | </template> | |
11 | </p> | |
12 | </template> | |
13 | </Generic> | |
b5048fc3 BG |
14 | </template> |
15 | ||
16 | <script> | |
beb57557 BW |
17 | import service from "@/mixins/service.js"; |
18 | import Generic from "./Generic.vue"; | |
19 | ||
b5048fc3 BG |
20 | export default { |
21 | name: "SpeedtestTracker", | |
beb57557 | 22 | mixins: [service], |
b5048fc3 BG |
23 | props: { |
24 | item: Object, | |
25 | }, | |
beb57557 BW |
26 | components: { |
27 | Generic, | |
28 | }, | |
b5048fc3 | 29 | data: () => ({ |
beb57557 | 30 | speedtest: null, |
b5048fc3 BG |
31 | }), |
32 | computed: { | |
beb57557 BW |
33 | download: function () { |
34 | return this.format(this.speedtest?.download); | |
b5048fc3 | 35 | }, |
beb57557 BW |
36 | upload: function () { |
37 | return this.format(this.speedtest?.upload); | |
b5048fc3 | 38 | }, |
beb57557 BW |
39 | ping: function () { |
40 | return this.format(this.speedtest?.ping); | |
b5048fc3 BG |
41 | }, |
42 | }, | |
43 | created() { | |
44 | this.fetchStatus(); | |
45 | }, | |
46 | methods: { | |
47 | fetchStatus: async function () { | |
beb57557 BW |
48 | this.fetch("/api/speedtest/latest") |
49 | .then((response) => { | |
50 | this.speedtest = response.data; | |
b5048fc3 BG |
51 | }) |
52 | .catch((e) => console.log(e)); | |
53 | }, | |
beb57557 BW |
54 | format: function (value) { |
55 | return value ? parseFloat(value).toFixed(2) : "n/a"; | |
56 | }, | |
b5048fc3 BG |
57 | }, |
58 | }; | |
59 | </script> |