149 lines
4.2 KiB
Vue
149 lines
4.2 KiB
Vue
<template>
|
|
<div class="bg-m-secondary w-[507px] h-[184px] mx-4 rounded-md shadow-md/50 shadow-black p-2">
|
|
<div class="mb-2 flex items-center justify-between">
|
|
<p class="font-bold text-3xl text-m-tertiary">
|
|
Speedtest
|
|
</p>
|
|
<IconifyIcon
|
|
icon="mdi:reload"
|
|
class="bg-m-tertiary text-2xl text-black rounded-md shadow-md/50 mr-1 cursor-pointer"
|
|
@click="runTests"
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
|
|
<div class="flex items-center justify-center">
|
|
<IconifyIcon
|
|
icon="mdi:download"
|
|
class="text-m-primary text-2xl mt-2 ml-1"
|
|
/>
|
|
<p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
|
|
download
|
|
</p>
|
|
</div>
|
|
<div class="mx-2 flex flex-col items-center justify-center">
|
|
<template v-if="isTesting">
|
|
<TextSkeleton custom-class="h-10 w-16 mb-1" />
|
|
</template>
|
|
<span v-else class="text-4xl">
|
|
{{ download !== null ? `${download}` : "--" }}
|
|
</span>
|
|
<p class="font-bold text-xl leading-tight">
|
|
Mbps
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
|
|
<div class="flex items-center justify-center">
|
|
<IconifyIcon
|
|
icon="mdi:upload"
|
|
class="text-m-primary text-2xl mt-2 ml-1"
|
|
/>
|
|
<p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
|
|
upload
|
|
</p>
|
|
</div>
|
|
<div class="mx-2 flex flex-col items-center justify-center">
|
|
<template v-if="isTesting">
|
|
<TextSkeleton custom-class="h-10 w-16 mb-1" />
|
|
</template>
|
|
<span v-else class="text-4xl">
|
|
{{ upload !== null ? `${upload}` : "--" }}
|
|
</span>
|
|
<p class="font-bold text-xl leading-tight">
|
|
Mbps
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
|
|
<div class="flex items-center justify-center">
|
|
<IconifyIcon
|
|
icon="mdi:wifi"
|
|
class="text-m-primary text-2xl mt-2 ml-1"
|
|
/>
|
|
<p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
|
|
ping
|
|
</p>
|
|
</div>
|
|
<div class="mx-2 flex flex-col items-center justify-center">
|
|
<template v-if="isTesting">
|
|
<TextSkeleton custom-class="h-10 w-16 mb-1" />
|
|
</template>
|
|
<span v-else class="text-4xl">
|
|
{{ ping !== null ? `${ping}` : "--" }}
|
|
</span>
|
|
<p class="font-bold text-xl leading-tight">
|
|
Ms
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
import {Icon as IconifyIcon} from "@iconify/vue"
|
|
import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
|
|
|
|
const ping = ref<number | null>(null)
|
|
const download = ref<number | null>(null)
|
|
const upload = ref<number | null>(null)
|
|
const isTesting = ref(false)
|
|
|
|
async function testDownload() {
|
|
const start = performance.now()
|
|
|
|
const res = await fetch('/api/download')
|
|
const blob = await res.blob()
|
|
|
|
const end = performance.now()
|
|
|
|
const size = blob.size
|
|
const seconds = (end - start) / 1000
|
|
download.value = Math.round((size * 8) / seconds / 1000000)
|
|
}
|
|
|
|
async function testUpload() {
|
|
const size = 5 * 1024 * 1024
|
|
const data = new Uint8Array(size)
|
|
|
|
const start = performance.now()
|
|
|
|
await fetch('/api/upload', {
|
|
method: 'POST',
|
|
body: data
|
|
})
|
|
|
|
const end = performance.now()
|
|
|
|
const seconds = (end - start) / 1000
|
|
upload.value = Math.round((size * 8) / seconds / 1000000)
|
|
}
|
|
|
|
|
|
async function testPing() {
|
|
const start = performance.now()
|
|
|
|
await fetch('/api/ping')
|
|
|
|
const end = performance.now()
|
|
|
|
ping.value = Math.round(end - start)
|
|
}
|
|
|
|
async function runTests() {
|
|
isTesting.value = true
|
|
download.value = null
|
|
upload.value = null
|
|
ping.value = null
|
|
|
|
try {
|
|
await testDownload()
|
|
await testUpload()
|
|
await testPing()
|
|
} finally {
|
|
isTesting.value = false
|
|
}
|
|
}
|
|
</script>
|