holm/homer
1
0
Fork 0
forked from extern/homer
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework speedtesttracker based on the Generic component

Browse Source
This commit is contained in:
Bastien Wirtz 2022-11-05 22:14:32 +01:00
parent b5048fc353
commit beb5755747
1 changed files with 32 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/services/SpeedtestTracker.vue
View File

@ -1,61 +1,43 @@
<template> <template>
<div> <Generic :item="item">
<div class="card" :class="item.class"> <template #content>
<a :href="item.url" :target="item.target" rel="noreferrer"> <p class="title is-4">{{ item.name }}</p>
<div class="card-content"> <p class="subtitle is-6">
<div class="media"> <template v-if="speedtest">
<div v-if="item.logo" class="media-left"> <i class="fas fa-arrow-down"></i> {{ download }} Mbit/s |
<figure class="image is-48x48"> <i class="fas fa-arrow-up"></i> {{ upload }} Mbit/s |
<img :src="item.logo" :alt="`${item.name} logo`" /> <i class="fas fa-stopwatch"></i> {{ ping }} ms
</figure> </template>
</div> </p>
<div v-if="item.icon" class="media-left"> </template>
<figure class="image is-48x48"> </Generic>
<i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
</figure>
</div>
<div class="media-content">
<p class="title is-4">{{ item.name }}</p>
<p class="subtitle is-6">
<template v-if="item.subtitle">
{{ item.subtitle }}
</template>
<template v-else-if="api">
<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
</template>
</p>
</div>
</div>
<div class="tag" :class="item.tagstyle" v-if="item.tag">
<strong class="tag-text">#{{ item.tag }}</strong>
</div>
</div>
</a>
</div>
</div>
</template> </template>
<script> <script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";
export default { export default {
name: "SpeedtestTracker", name: "SpeedtestTracker",
mixins: [service],
props: { props: {
item: Object, item: Object,
}, },
components: {
Generic,
},
data: () => ({ data: () => ({
api: null, speedtest: null,
}), }),
computed: { computed: {
download: function() { download: function () {
var download = this.api.data.download; return this.format(this.speedtest?.download);
return parseFloat(download).toFixed(2);
}, },
upload: function() { upload: function () {
var upload = this.api.data.upload; return this.format(this.speedtest?.upload);
return parseFloat(upload).toFixed(2);
}, },
ping: function() { ping: function () {
var ping = this.api.data.ping; return this.format(this.speedtest?.ping);
return parseFloat(ping).toFixed(2);
}, },
}, },
created() { created() {
@ -63,24 +45,15 @@ export default {
}, },
methods: { methods: {
fetchStatus: async function () { fetchStatus: async function () {
if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing this.fetch("/api/speedtest/latest")
const url = `${this.item.url}/api/speedtest/latest`; .then((response) => {
this.api = await fetch(url) this.speedtest = response.data;
.then(function(response) {
if (!response.ok) {
throw new Error("Not 2xx response");
} else {
return response.json();
}
}) })
.catch((e) => console.log(e)); .catch((e) => console.log(e));
}, },
format: function (value) {
return value ? parseFloat(value).toFixed(2) : "n/a";
},
}, },
}; };
</script> </script>
<style scoped lang="scss">
.media-left img {
max-height: 100%;
}
</style>