63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import DiskReader from '@/components/DiskReader.vue'
|
|
|
|
const loadName = ref('')
|
|
const loadTotal = ref(0)
|
|
const loadLoaded = ref(0)
|
|
|
|
function handleStart(name: string) {
|
|
console.log(`Loading file: ${name}`)
|
|
loadName.value = name
|
|
loadLoaded.value = 0
|
|
loadTotal.value = -1
|
|
}
|
|
|
|
function handleLoad(data: ArrayBuffer) {
|
|
console.log('File loaded')
|
|
console.log(data)
|
|
}
|
|
|
|
function handleError(message: string) {
|
|
console.log('Error loading file' + message)
|
|
loadLoaded.value = -1
|
|
loadTotal.value = -1
|
|
}
|
|
|
|
function handleProgress(loaded: number, total: number) {
|
|
loadLoaded.value = loaded
|
|
loadTotal.value = total
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<h2>Playground</h2>
|
|
<p>This is my playground for testing out my code.</p>
|
|
<section>
|
|
<h3>Upload Disk</h3>
|
|
<DiskReader
|
|
@error="handleError"
|
|
@load="handleLoad"
|
|
@progress="handleProgress"
|
|
@start="handleStart"
|
|
/>
|
|
<div v-if="loadName">
|
|
Loading {{ loadName }}
|
|
<progress :max="loadTotal" :value="loadLoaded">
|
|
{{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
|
|
</progress>
|
|
{{ ((loadLoaded / loadTotal) * 100.0).toFixed(2) }} %
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
progress {
|
|
margin-top: 1em;
|
|
margin-left: 1em;
|
|
margin-right: 0.25em;
|
|
}
|
|
</style>
|