First attempt at react interface

2026-01-21 12:51:40 -05:00
parent 5d8977e0c0
commit 3c489b7c32
16 changed files with 16805 additions and 20 deletions
--- a/server/templates/members.html
+++ b/server/templates/members.html
@@ -4,15 +4,77 @@
    <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>
-    <h1>Upload Members CSV</h1>
-    <form action="/admin/members" method="post" enctype="multipart/form-data">
-        <label for="year">Year:</label>
-        <input type="number" id="year" name="year" required><br><br>
-        <label for="members.csv">CSV File:</label>
-        <input type="file" id="members.csv" name="members.csv" accept=".csv" required><br><br>
-        <button type="submit">Upload</button>
-    </form>
+    <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>