85 lines
3.4 KiB
React
85 lines
3.4 KiB
React
import { useState, useEffect } from 'react'
|
|
import { fetchAnalyse, setAnalyse } from '../lib/analyseApi'
|
|
import { analyseStatus, avvLabel } from '../lib/analyseView'
|
|
|
|
const COLORS = { green: '#10b981', red: '#ef4444', grey: '#a0aec0' }
|
|
|
|
// Kompakte Zeile "Website-Analyse" je Projekt (lädt beim Einbinden; mit key=Projekt-ID verwenden)
|
|
export default function AnalyseRow({ projectId }) {
|
|
const [data, setData] = useState(null)
|
|
const [loadError, setLoadError] = useState('')
|
|
const [mode, setMode] = useState(null) // null | 'on' | 'off'
|
|
const [confirmed, setConfirmed] = useState(false)
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
fetchAnalyse(projectId)
|
|
.then((r) => { if (!cancelled) setData(r) })
|
|
.catch((err) => { if (!cancelled) setLoadError(err.message) })
|
|
return () => { cancelled = true }
|
|
}, [projectId])
|
|
|
|
const apply = async (on) => {
|
|
setBusy(true)
|
|
setError('')
|
|
try {
|
|
await setAnalyse(projectId, { on, avvConfirmedVerbally: on })
|
|
setData(await fetchAnalyse(projectId))
|
|
setMode(null)
|
|
setConfirmed(false)
|
|
} catch (err) {
|
|
setError(err.message)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
const cancel = () => { setMode(null); setConfirmed(false); setError('') }
|
|
const status = analyseStatus(data)
|
|
|
|
return (
|
|
<div style={{ marginTop: 10, fontSize: 13 }}>
|
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<span className="text-grey">Website-Analyse:</span>
|
|
{loadError ? (
|
|
<span style={{ color: COLORS.red }}>{loadError}</span>
|
|
) : data ? (
|
|
<span style={{ color: COLORS[status.color] }}>{status.text}</span>
|
|
) : (
|
|
<span className="text-grey">Lädt …</span>
|
|
)}
|
|
{status.hint && <span className="text-grey">({status.hint})</span>}
|
|
{status.canEnable && !mode && (
|
|
<button type="button" className="btn btn-sm" onClick={() => setMode('on')}>{status.enableLabel || 'Einschalten'}</button>
|
|
)}
|
|
{status.canDisable && !mode && (
|
|
<button type="button" className="btn btn-sm" onClick={() => setMode('off')}>Ausschalten</button>
|
|
)}
|
|
</div>
|
|
|
|
{mode === 'on' && data && (
|
|
<div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<label style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
|
|
<input type="checkbox" checked={confirmed} onChange={(e) => setConfirmed(e.target.checked)} />
|
|
{avvLabel(data.avvVersion)}
|
|
</label>
|
|
<button type="button" className="btn btn-sm" disabled={!confirmed || busy} onClick={() => apply(true)}>Einschalten</button>
|
|
<button type="button" className="btn btn-sm" disabled={busy} onClick={cancel}>Abbrechen</button>
|
|
</div>
|
|
)}
|
|
|
|
{mode === 'off' && (
|
|
<div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<span>Website-Analyse wirklich ausschalten?</span>
|
|
<button type="button" className="btn btn-sm" disabled={busy} onClick={() => apply(false)}>Ja, ausschalten</button>
|
|
<button type="button" className="btn btn-sm" disabled={busy} onClick={cancel}>Abbrechen</button>
|
|
</div>
|
|
)}
|
|
|
|
{error && <div style={{ marginTop: 6, color: COLORS.red }}>{error}</div>}
|
|
</div>
|
|
)
|
|
}
|