aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/components/services/SpeedtestTracker.vue91
1 files changed, 32 insertions, 59 deletions
diff --git a/src/components/services/SpeedtestTracker.vue b/src/components/services/SpeedtestTracker.vue
index f836001..d4ebd74 100644
--- a/src/components/services/SpeedtestTracker.vue
+++ b/src/components/services/SpeedtestTracker.vue
@@ -1,61 +1,43 @@
1<template> 1<template>
2 <div> 2 <Generic :item="item">
3 <div class="card" :class="item.class"> 3 <template #content>
4 <a :href="item.url" :target="item.target" rel="noreferrer"> 4 <p class="title is-4">{{ item.name }}</p>
5 <div class="card-content"> 5 <p class="subtitle is-6">
6 <div class="media"> 6 <template v-if="speedtest">
7 <div v-if="item.logo" class="media-left"> 7 <i class="fas fa-arrow-down"></i> {{ download }} Mbit/s |
8 <figure class="image is-48x48"> 8 <i class="fas fa-arrow-up"></i> {{ upload }} Mbit/s |
9 <img :src="item.logo" :alt="`${item.name} logo`" /> 9 <i class="fas fa-stopwatch"></i> {{ ping }} ms
10 </figure> 10 </template>
11 </div> 11 </p>
12 <div v-if="item.icon" class="media-left"> 12 </template>
13 <figure class="image is-48x48"> 13 </Generic>
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.name }}</p>
19 <p class="subtitle is-6">
20 <template v-if="item.subtitle">
21 {{ item.subtitle }}
22 </template>
23 <template v-else-if="api">
24 <i class="fas fa-arrow-down"></i> {{ download }} Mbit/s | <i class="fas fa-arrow-up"></i> {{ upload }} Mbit/s | <i class="fas fa-stopwatch"></i> {{ ping }} ms
25 </template>
26 </p>
27 </div>
28 </div>
29 <div class="tag" :class="item.tagstyle" v-if="item.tag">
30 <strong class="tag-text">#{{ item.tag }}</strong>
31 </div>
32 </div>
33 </a>
34 </div>
35 </div>
36</template> 14</template>
37 15
38<script> 16<script>
17import service from "@/mixins/service.js";
18import Generic from "./Generic.vue";
19
39export default { 20export default {
40 name: "SpeedtestTracker", 21 name: "SpeedtestTracker",
22 mixins: [service],
41 props: { 23 props: {
42 item: Object, 24 item: Object,
43 }, 25 },
26 components: {
27 Generic,
28 },
44 data: () => ({ 29 data: () => ({
45 api: null, 30 speedtest: null,
46 }), 31 }),
47 computed: { 32 computed: {
48 download: function() { 33 download: function () {
49 var download = this.api.data.download; 34 return this.format(this.speedtest?.download);
50 return parseFloat(download).toFixed(2);
51 }, 35 },
52 upload: function() { 36 upload: function () {
53 var upload = this.api.data.upload; 37 return this.format(this.speedtest?.upload);
54 return parseFloat(upload).toFixed(2);
55 }, 38 },
56 ping: function() { 39 ping: function () {
57 var ping = this.api.data.ping; 40 return this.format(this.speedtest?.ping);
58 return parseFloat(ping).toFixed(2);
59 }, 41 },
60 }, 42 },
61 created() { 43 created() {
@@ -63,24 +45,15 @@ export default {
63 }, 45 },
64 methods: { 46 methods: {
65 fetchStatus: async function () { 47 fetchStatus: async function () {
66 if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing 48 this.fetch("/api/speedtest/latest")
67 const url = `${this.item.url}/api/speedtest/latest`; 49 .then((response) => {
68 this.api = await fetch(url) 50 this.speedtest = response.data;
69 .then(function(response) {
70 if (!response.ok) {
71 throw new Error("Not 2xx response");
72 } else {
73 return response.json();
74 }
75 }) 51 })
76 .catch((e) => console.log(e)); 52 .catch((e) => console.log(e));
77 }, 53 },
54 format: function (value) {
55 return value ? parseFloat(value).toFixed(2) : "n/a";
56 },
78 }, 57 },
79}; 58};
80</script> 59</script>
81
82<style scoped lang="scss">
83.media-left img {
84 max-height: 100%;
85}
86</style>