src/components/services/SpeedtestTracker.vue

   1 <template>
   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>
  14 </template>
  15
  16 <script>
  17 import service from "@/mixins/service.js";
  18 import Generic from "./Generic.vue";
  19
  20 export default {
  21   name: "SpeedtestTracker",
  22   mixins: [service],
  23   props: {
  24     item: Object,
  25   },
  26   components: {
  27     Generic,
  28   },
  29   data: () => ({
  30     speedtest: null,
  31   }),
  32   computed: {
  33     download: function () {
  34       return this.format(this.speedtest?.download);
  35     },
  36     upload: function () {
  37       return this.format(this.speedtest?.upload);
  38     },
  39     ping: function () {
  40       return this.format(this.speedtest?.ping);
  41     },
  42   },
  43   created() {
  44     this.fetchStatus();
  45   },
  46   methods: {
  47     fetchStatus: async function () {
  48       this.fetch("/api/speedtest/latest")
  49         .then((response) => {
  50           this.speedtest = response.data;
  51         })
  52         .catch((e) => console.log(e));
  53     },
  54     format: function (value) {
  55       return value ? parseFloat(value).toFixed(2) : "n/a";
  56     },
  57   },
  58 };
  59 </script>