fix(iace): FAB pointer-events fix + Initialisieren auf Betriebszustaende-Seite
- FAB-Container bekommt pointer-events-none, nur Button + Panel sind klickbar (behebt: Buttons auf der rechten Seite waren nicht klickbar) - Initialisieren + Neu-Initialisieren Buttons von Interview-Seite auf Betriebszustaende-Seite verschoben (natuerlicher Flow: Grenzen → States → Init) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -95,13 +95,13 @@ export default function IACEFlowFAB() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
|
||||
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end pointer-events-none">
|
||||
{/* Expanded Panel */}
|
||||
<div
|
||||
ref={panelRef}
|
||||
className={`mb-3 w-[300px] max-h-[70vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 transition-all duration-200 origin-bottom-right ${
|
||||
isOpen
|
||||
? 'opacity-100 scale-100 translate-y-0'
|
||||
? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
|
||||
: 'opacity-0 scale-95 translate-y-2 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
@@ -223,7 +223,7 @@ export default function IACEFlowFAB() {
|
||||
<button
|
||||
ref={fabRef}
|
||||
onClick={() => setIsOpen((o) => !o)}
|
||||
className="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all flex items-center justify-center"
|
||||
className="pointer-events-auto w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all flex items-center justify-center"
|
||||
title="CE-Prozessschritte"
|
||||
>
|
||||
{/* Steps/flow icon */}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useOperationalStates, type OperationalStateInfo } from './_hooks/useOperationalStates'
|
||||
|
||||
@@ -57,6 +58,31 @@ export default function OperationalStatesPage() {
|
||||
deltaLoading,
|
||||
} = useOperationalStates(projectId)
|
||||
|
||||
const [initStatus, setInitStatus] = useState<'idle' | 'running' | 'done' | 'error'>('idle')
|
||||
const [initResult, setInitResult] = useState<{ steps: { name: string; status: string; count: number; details?: string }[]; summary?: Record<string, number> } | null>(null)
|
||||
|
||||
async function handleInitialize(force: boolean) {
|
||||
// Save current selection first
|
||||
await saveSelection(selectedStates)
|
||||
setInitStatus('running')
|
||||
setInitResult(null)
|
||||
try {
|
||||
const url = `/api/sdk/v1/iace/projects/${projectId}/initialize${force ? '?force=true' : ''}`
|
||||
const res = await fetch(url, { method: 'POST' })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}))
|
||||
alert(err.error || 'Initialisierung fehlgeschlagen')
|
||||
setInitStatus('error')
|
||||
return
|
||||
}
|
||||
const data = await res.json()
|
||||
setInitResult(data)
|
||||
setInitStatus('done')
|
||||
} catch {
|
||||
setInitStatus('error')
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
@@ -213,6 +239,66 @@ export default function OperationalStatesPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Initialize Section */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
|
||||
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Projekt initialisieren</h2>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
|
||||
Erzeugt Gefaehrdungen und Massnahmen basierend auf Maschinenbeschreibung, Komponenten und den ausgewaehlten Betriebszustaenden.
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
disabled={initStatus === 'running' || selectedStates.length === 0}
|
||||
onClick={() => handleInitialize(false)}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{initStatus === 'running' ? (
|
||||
<>
|
||||
<span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
|
||||
Analyse laeuft...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
Initialisieren
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
disabled={initStatus === 'running' || selectedStates.length === 0}
|
||||
onClick={() => {
|
||||
if (!confirm('Alle bestehenden Gefaehrdungen und Massnahmen loeschen und neu erstellen?')) return
|
||||
handleInitialize(true)
|
||||
}}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
Neu initialisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{initResult && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
<h3 className="text-sm font-semibold text-green-800 dark:text-green-300">Initialisierung abgeschlossen</h3>
|
||||
<div className="space-y-1">
|
||||
{initResult.steps.map((s, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-xs">
|
||||
<span className={s.status === 'done' ? 'text-green-600' : s.status === 'skipped' ? 'text-gray-400' : 'text-red-500'}>
|
||||
{s.status === 'done' ? '\u2713' : s.status === 'skipped' ? '\u25CB' : '\u2717'}
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-300">{s.name}</span>
|
||||
{s.count > 0 && <span className="text-gray-400">({s.count})</span>}
|
||||
{s.details && <span className="text-gray-400 text-[10px]">— {s.details}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user