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:
@@ -95,13 +95,13 @@ export default function IACEFlowFAB() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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 */}
|
{/* Expanded Panel */}
|
||||||
<div
|
<div
|
||||||
ref={panelRef}
|
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 ${
|
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
|
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'
|
: 'opacity-0 scale-95 translate-y-2 pointer-events-none'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -223,7 +223,7 @@ export default function IACEFlowFAB() {
|
|||||||
<button
|
<button
|
||||||
ref={fabRef}
|
ref={fabRef}
|
||||||
onClick={() => setIsOpen((o) => !o)}
|
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"
|
title="CE-Prozessschritte"
|
||||||
>
|
>
|
||||||
{/* Steps/flow icon */}
|
{/* Steps/flow icon */}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
import { useParams, useRouter } from 'next/navigation'
|
import { useParams, useRouter } from 'next/navigation'
|
||||||
import { useOperationalStates, type OperationalStateInfo } from './_hooks/useOperationalStates'
|
import { useOperationalStates, type OperationalStateInfo } from './_hooks/useOperationalStates'
|
||||||
|
|
||||||
@@ -57,6 +58,31 @@ export default function OperationalStatesPage() {
|
|||||||
deltaLoading,
|
deltaLoading,
|
||||||
} = useOperationalStates(projectId)
|
} = 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) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center h-64">
|
<div className="flex items-center justify-center h-64">
|
||||||
@@ -213,6 +239,66 @@ export default function OperationalStatesPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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 */}
|
{/* Footer Actions */}
|
||||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user