create admin_ui

Co-authored-by: Copilot <copilot@github.com>
2026-05-06 10:55:31 +02:00
parent 2845f442a3
commit 8cf3fe98cb
40 changed files with 5534 additions and 693 deletions
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react'
+import { transitClient } from '../api'
+
+export default function BusLinesManager({ token, user }) {
+  const client = transitClient(token)
+  const [busLines, setBusLines] = useState([])
+  const [lineNumber, setLineNumber] = useState('')
+  const [startStop, setStartStop] = useState('')
+  const [endStop, setEndStop] = useState('')
+  const [estimatedDurationMinutes, setEstimatedDurationMinutes] = useState('')
+  const [description, setDescription] = useState('')
+  const [message, setMessage] = useState(null)
+  const [isAdmin] = useState(Boolean(user?.userCode))
+
+  const loadBusLines = async () => {
+    try {
+      const res = await client.get('/admin/bus-lines')
+      setBusLines(res.data.busLines || [])
+    } catch (err) {
+      setMessage('Error: ' + (err.response?.data?.error || err.message))
+    }
+  }
+
+  useEffect(() => {
+    loadBusLines()
+  }, [])
+
+  const createBusLine = async (e) => {
+    e.preventDefault()
+    setMessage(null)
+    try {
+      const res = await client.post('/admin/bus-lines', {
+        lineNumber: Number(lineNumber),
+        startStop,
+        endStop,
+        estimatedDurationMinutes: Number(estimatedDurationMinutes),
+        description,
+      })
+      setLineNumber('')
+      setStartStop('')
+      setEndStop('')
+      setEstimatedDurationMinutes('')
+      setDescription('')
+      setMessage('Bus line created: #' + (res.data.busLine?.id || 'ok'))
+      await loadBusLines()
+    } catch (err) {
+      setMessage('Error: ' + (err.response?.data?.error || err.message))
+    }
+  }
+
+  return (
+    <section className="card">
+      <div className="section-header">
+        <div>
+          <h2>Buslijnen</h2>
+          <p>Maak en bewerk buslijnen.</p>
+        </div>
+        <button className="secondary" onClick={loadBusLines}>Refresh</button>
+      </div>
+
+      <div className="list-grid">
+        {busLines.map(line => (
+          <article className="mini-card" key={line.id}>
+            <strong>#{line.id} Lijn {line.lineNumber}</strong>
+            <div>{line.startStop} → {line.endStop}</div>
+            <div>{line.estimatedDurationMinutes} min</div>
+            {line.description ? <div className="muted">{line.description}</div> : null}
+          </article>
+        ))}
+      </div>
+
+      {isAdmin ? (
+        <form onSubmit={createBusLine} className="stack-form">
+          <div className="form-row">
+            <input placeholder="Line number" value={lineNumber} onChange={e => setLineNumber(e.target.value)} />
+            <input placeholder="Start stop" value={startStop} onChange={e => setStartStop(e.target.value)} />
+            <input placeholder="End stop" value={endStop} onChange={e => setEndStop(e.target.value)} />
+          </div>
+          <div className="form-row">
+            <input placeholder="Duration in minutes" value={estimatedDurationMinutes} onChange={e => setEstimatedDurationMinutes(e.target.value)} />
+            <input placeholder="Description" value={description} onChange={e => setDescription(e.target.value)} />
+            <button type="submit">Create bus line</button>
+          </div>
+        </form>
+      ) : <div>You must be admin to create bus lines.</div>}
+
+      {message && <div className="message">{message}</div>}
+    </section>
+  )
+}