Add ability to save files
This commit is contained in:
parent
734fc9a33e
commit
c79655a467
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { FloppyDisk } from '@/floppy/disk.ts'
|
import { FloppyDisk } from '@/floppy/disk.ts'
|
||||||
import { computed, ref } from 'vue'
|
import { computed, onUnmounted, ref } from 'vue'
|
||||||
import HexDump from '@/components/HexDump.vue'
|
import HexDump from '@/components/HexDump.vue'
|
||||||
import TextDump from '@/components/TextDump.vue'
|
import TextDump from '@/components/TextDump.vue'
|
||||||
|
|
||||||
@ -10,6 +10,20 @@ const currentPath = ref([''])
|
|||||||
|
|
||||||
const currentFileData = ref(new ArrayBuffer(0))
|
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 currentFileName = ref<string>('')
|
||||||
|
|
||||||
const dataView = ref('hex-dump')
|
const dataView = ref('hex-dump')
|
||||||
@ -55,6 +69,12 @@ const files = computed(() => {
|
|||||||
.sort()
|
.sort()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (currentFileObjectUrl.value?.startsWith('blob')) {
|
||||||
|
URL.revokeObjectURL(currentFileObjectUrl.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
function arraysEqual<T>(a1: T[], a2: T[]): boolean {
|
function arraysEqual<T>(a1: T[], a2: T[]): boolean {
|
||||||
return a1.length === a2.length && a1.every((value, index) => value === a2[index])
|
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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="current-file-controls">
|
||||||
<select v-model="dataView">
|
<select v-model="dataView">
|
||||||
<option value="hex-dump">Hex Dump</option>
|
<option value="hex-dump">Hex Dump</option>
|
||||||
<option value="text-dump">Text</option>
|
<option value="text-dump">Text</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a v-show="currentFileObjectUrl" :download="currentFileName" :href="currentFileObjectUrl"
|
||||||
|
>Download File</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="current-file-view">
|
<div class="current-file-view">
|
||||||
<TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
|
<TextDump v-if="dataView === 'text-dump'" :buffer="currentFileData" />
|
||||||
@ -132,6 +155,14 @@ div.file-list {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 1em 1em 0;
|
padding: 1em 1em 0;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
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 {
|
.directories a {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user