60 lines
1.4 KiB
Markdown
60 lines
1.4 KiB
Markdown
|
# UI Page
|
||
|
|
|
||
|
|
Erstelle eine neue vollständige Seite für Mitai Jinkendo.
|
||
|
|
|
||
|
|
## Seiten-Struktur:
|
||
|
|
```jsx
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
import { api } from '../utils/api'
|
||
|
|
import { useAuth } from '../context/AuthContext'
|
||
|
|
|
||
|
|
export default function MeineSeite() {
|
||
|
|
const { session } = useAuth()
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [error, setError] = useState(null)
|
||
|
|
|
||
|
|
useEffect(() => { load() }, [])
|
||
|
|
|
||
|
|
const load = async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true)
|
||
|
|
const result = await api.meinEndpoint()
|
||
|
|
setData(result)
|
||
|
|
} catch(e) {
|
||
|
|
setError(e.message)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (loading) return <div className="spinner"/>
|
||
|
|
if (error) return <div style={{color:'var(--danger)'}}>{error}</div>
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{padding:'0 0 80px'}}>
|
||
|
|
{/* Titelzeile */}
|
||
|
|
<div style={{display:'flex',alignItems:'center',
|
||
|
|
justifyContent:'space-between',marginBottom:20}}>
|
||
|
|
<div style={{fontSize:20,fontWeight:700}}>Seitentitel</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Inhalt */}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Navigation einbinden:
|
||
|
|
In `App.jsx` unter den bestehenden Routen hinzufügen.
|
||
|
|
|
||
|
|
## Backend-Endpoint:
|
||
|
|
Neuen Endpoint in `backend/main.py` mit:
|
||
|
|
```python
|
||
|
|
@app.get("/api/mein-endpoint")
|
||
|
|
def mein_endpoint(session: dict = Depends(require_auth)):
|
||
|
|
pid = session['profile_id']
|
||
|
|
with get_db() as conn:
|
||
|
|
...
|
||
|
|
```
|