Add ability to save files

This commit is contained in:
Jordan Goulder 2025-02-03 23:08:26 -05:00
parent 734fc9a33e
commit c79655a467

View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { FloppyDisk } from '@/floppy/disk.ts'
import { computed, ref } from 'vue'
import { computed, onUnmounted, ref } from 'vue'
import HexDump from '@/components/HexDump.vue'
import TextDump from '@/components/TextDump.vue'
@ -10,6 +10,20 @@ const currentPath = ref([''])
const currentFileData = ref(new ArrayBuffer(0))
const currentFileObjectUrl = computed<string>((previous) => {
if (previous?.startsWith('blob')) {
URL.revokeObjectURL(previous)
}
if (currentFileData.value.byteLength === 0) {
return ''
}
return URL.createObjectURL(
new Blob([currentFileData.value], { type: 'application/octet-stream' }),
)
})
const currentFileName = ref<string>('')
const dataView = ref('hex-dump')
@ -55,6 +69,12 @@ const files = computed(() => {
.sort()
})
onUnmounted(() => {
if (currentFileObjectUrl.value?.startsWith('blob')) {
URL.revokeObjectURL(currentFileObjectUrl.value)
}
})
function arraysEqual<T>(a1: T[], a2: T[]): boolean {
return a1.length === a2.length && a1.every((value, index) => value === a2[index])
}
@ -100,11 +120,14 @@ function loadFile(name: string, firstCluster: number, size: number) {
</li>
</ul>
</div>
<div>
<div class="current-file-controls">
<select v-model="dataView">
<option value="hex-dump">Hex Dump</option>
<option value="text-dump">Text</option>
</select>
<a v-show="currentFileObjectUrl" :download="currentFileName" :href="currentFileObjectUrl"
>Download File</a
>
</div>
<div class="current-file-view">
<TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
@ -132,6 +155,14 @@ div.file-list {
overflow-y: auto;
padding: 1em 1em 0;
border: 1px solid rgba(255, 255, 255, 0.2);
flex: 1 0 auto;
}
.current-file-controls {
display: flex;
flex-direction: column;
gap: 1em;
flex: 1 0 auto;
}
.directories a {