81 lines
2.6 KiB
HTML
81 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Upload Members</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel">
|
|
function MembersForm() {
|
|
const [year, setYear] = React.useState(0);
|
|
const [file, setFile] = React.useState(null);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!year || !file) {
|
|
alert('Both year and file are required!');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('year', year);
|
|
formData.append('members.csv', file);
|
|
|
|
fetch('/admin/members', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Members uploaded successfully!');
|
|
} else {
|
|
alert(`Error: ${data.error}`);
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<h1>Upload Members CSV</h1>
|
|
<label htmlFor="year">Year:</label>
|
|
<input
|
|
type="number"
|
|
id="year"
|
|
name="year"
|
|
value={year}
|
|
onChange={(e) => setYear(e.target.value)}
|
|
required
|
|
/><br/><br/>
|
|
|
|
<label htmlFor="members.csv">CSV File:</label>
|
|
<input
|
|
type="file"
|
|
id="members.csv"
|
|
name="members.csv"
|
|
accept=".csv"
|
|
onChange={(e) => setFile(e.target.files[0])}
|
|
required
|
|
/><br/><br/>
|
|
|
|
<button type="submit">Upload</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
root.render(
|
|
<MembersForm />
|
|
);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|