108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<template>
|
|
<div class="file-selector">
|
|
<label for="file-select">Select File:</label>
|
|
<select
|
|
id="file-select"
|
|
v-model="selectedFile"
|
|
:disabled="isLoading || uniqueFiles.length === 0"
|
|
>
|
|
<option value="">-- Choose a file --</option>
|
|
<option
|
|
v-for="file in uniqueFiles"
|
|
:key="file.filename"
|
|
:value="getFileType(file.filename)"
|
|
>
|
|
{{ formatFileName(file.filename) }} ({{ formatSize(file.size) }})
|
|
</option>
|
|
</select>
|
|
|
|
<span v-if="fileContent" class="file-info">
|
|
{{ fileLines.length.toLocaleString() }} lines
|
|
<template v-if="selectedFileMeta">
|
|
• {{ formatSize(selectedFileMeta.size) }}
|
|
</template>
|
|
</span>
|
|
|
|
<span v-if="isLoading" class="file-status">Loading...</span>
|
|
<span v-if="fileError" class="file-error">{{ fileError }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted } from 'vue';
|
|
import { useGamemasterFiles } from '../../composables/useGamemasterFiles.js';
|
|
|
|
const props = defineProps({
|
|
client: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const {
|
|
selectedFile,
|
|
fileContent,
|
|
fileLines,
|
|
uniqueFiles,
|
|
isLoading,
|
|
fileError,
|
|
loadStatus,
|
|
formatSize,
|
|
formatFileName,
|
|
getFileType
|
|
} = useGamemasterFiles(props.client);
|
|
|
|
const selectedFileMeta = computed(() => {
|
|
if (!selectedFile.value) return null;
|
|
return uniqueFiles.value.find(
|
|
file => getFileType(file.filename) === selectedFile.value
|
|
);
|
|
});
|
|
|
|
onMounted(() => {
|
|
loadStatus();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.file-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.file-selector label {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.file-selector select {
|
|
padding: 6px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background: white;
|
|
}
|
|
|
|
.file-selector select:disabled {
|
|
background: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
|
|
.file-info {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.file-status {
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.file-error {
|
|
font-size: 13px;
|
|
color: #d9534f;
|
|
}
|
|
</style>
|