Sven laptop
91 lines
3.2 KiB
React
91 lines
3.2 KiB
React
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>
|
|
)
|
|
}
|