143 lines
5.8 KiB
Vue
143 lines
5.8 KiB
Vue
<script setup lang="ts">
|
|
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
|
import { Head, Link, useForm } from '@inertiajs/vue3';
|
|
import type { ConsoleData } from '@/types';
|
|
import { ref } from 'vue';
|
|
|
|
interface Props {
|
|
consoles: ConsoleData[];
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
};
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
const form = useForm({
|
|
console_id: '',
|
|
rom_files: [] as File[],
|
|
});
|
|
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|
const isDragging = ref(false);
|
|
|
|
const handleFileSelect = (e: Event) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (target.files) {
|
|
form.rom_files = Array.from(target.files);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: DragEvent) => {
|
|
isDragging.value = false;
|
|
if (e.dataTransfer?.files) {
|
|
form.rom_files = Array.from(e.dataTransfer.files);
|
|
}
|
|
};
|
|
|
|
const submit = () => {
|
|
form.post(route('upload.store'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
form.reset();
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Upload ROMs" :user="user">
|
|
<template #header>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Upload ROMs</h2>
|
|
</template>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<!-- Console Selection -->
|
|
<div>
|
|
<label for="console" class="block text-sm font-medium text-gray-700">Select Console</label>
|
|
<select
|
|
id="console"
|
|
v-model="form.console_id"
|
|
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
|
required
|
|
>
|
|
<option value="">Choose a console...</option>
|
|
<option v-for="console in consoles" :key="console.id" :value="console.id">
|
|
{{ console.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- File Drop Zone -->
|
|
<div
|
|
@dragover.prevent="isDragging = true"
|
|
@dragleave.prevent="isDragging = false"
|
|
@drop.prevent="handleDrop"
|
|
:class="[
|
|
'border-2 border-dashed rounded-lg p-12 text-center transition-colors',
|
|
isDragging ? 'border-purple-500 bg-purple-50' : 'border-gray-300 hover:border-gray-400'
|
|
]"
|
|
>
|
|
<div class="space-y-4">
|
|
<div class="text-4xl">📁</div>
|
|
<div class="text-gray-600">
|
|
<p class="text-lg">Drag & drop ROM files here</p>
|
|
<p class="text-sm text-gray-400">or click to browse</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
@click="fileInput?.click()"
|
|
class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded"
|
|
>
|
|
Select Files
|
|
</button>
|
|
<input
|
|
ref="fileInput"
|
|
type="file"
|
|
multiple
|
|
accept=".nes,.sfc,.smc,.n64,.v64,.z64,.gba,.nds,.md,.bin,.gen,.iso,.gcm,.cue,.gdi,.cdi,.cso"
|
|
@change="handleFileSelect"
|
|
class="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected Files -->
|
|
<div v-if="form.rom_files.length > 0" class="space-y-2">
|
|
<h4 class="font-medium">Selected Files ({{ form.rom_files.length }})</h4>
|
|
<div
|
|
v-for="(file, index) in form.rom_files"
|
|
:key="index"
|
|
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
|
>
|
|
<span class="text-sm">{{ file.name }}</span>
|
|
<button
|
|
type="button"
|
|
@click="form.rom_files.splice(index, 1)"
|
|
class="text-red-500 hover:text-red-700 text-sm"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
:disabled="form.processing || form.rom_files.length === 0"
|
|
class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{{ form.processing ? 'Uploading...' : 'Upload ROMs' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|