80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { saveParserBackendService, UploadSaveResponse } from '@/services/SaveParserBackendService'
|
|
import { useState } from 'react'
|
|
import FormError from './FormError'
|
|
|
|
export enum GameEnum {
|
|
EU4 = 'eu4',
|
|
Stellaris = 'stellaris',
|
|
}
|
|
|
|
export default function SaveFileUploadingDialog() {
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
|
const [game, setGame] = useState<GameEnum>(GameEnum.EU4)
|
|
const [uploadResult, setUploadResult] = useState<UploadSaveResponse | null>(null)
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setSelectedFile(e.target.files[0])
|
|
}
|
|
}
|
|
|
|
const handleUpload = async () => {
|
|
try {
|
|
if (!selectedFile) return
|
|
|
|
console.log('Uploading file:', selectedFile.name)
|
|
const result = await saveParserBackendService.uploadSave(game, selectedFile)
|
|
console.log('Got response:', result)
|
|
setUploadResult(result)
|
|
} catch (err: any) {
|
|
console.error(err.message)
|
|
setError(err.message)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="container mt-5" style={{ maxWidth: '500px' }}>
|
|
<h3 className="mb-2 fw-semibold">Select game save file</h3>
|
|
<FormError message={error} />
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="gameSelect" className="form-label">
|
|
Select Game
|
|
</label>
|
|
<select
|
|
id="gameSelect"
|
|
className="form-select"
|
|
value={game}
|
|
onChange={(e) => setGame(e.target.value as GameEnum)}
|
|
>
|
|
{Object.values(GameEnum).map((value) => (
|
|
<option key={value} value={value}>
|
|
{value}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<input type="file" className="form-control mb-3" onChange={handleFileChange} />
|
|
<button className="btn btn-primary" onClick={handleUpload} disabled={!selectedFile}>
|
|
Upload File
|
|
</button>
|
|
|
|
{selectedFile && (
|
|
<div className="mt-3">
|
|
File: <strong>{selectedFile.name}</strong>
|
|
</div>
|
|
)}
|
|
|
|
{uploadResult && (
|
|
<div className="mt-3">
|
|
Save Id: <strong>{uploadResult.id}</strong>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|