37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
||
import StateMachinePanel from './StateMachinePanel';
|
||
import TimelinePanel from './TimelinePanel';
|
||
import PidPanel from './PidPanel';
|
||
import EventLog from './EventLog';
|
||
import MetricsPanel from './MetricsPanel';
|
||
import SensorPanel from './SensorPanel';
|
||
import type { SimulationState } from '../domain/types';
|
||
|
||
export default function EngineeringDetails({ simulation }: { simulation: SimulationState }) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
|
||
return (
|
||
<section className="engineering-details-section" id="engineering">
|
||
<div className="engineering-toggle" onClick={() => setIsOpen(!isOpen)}>
|
||
<h2>Инженерные детали (Engineering Mode)</h2>
|
||
<button className="btn-secondary">
|
||
{isOpen ? 'Свернуть' : 'Развернуть'}
|
||
</button>
|
||
</div>
|
||
|
||
{isOpen && (
|
||
<div className="engineering-content">
|
||
<div className="engineering-grid">
|
||
<div className="eng-panel"><StateMachinePanel currentState={simulation.machineState} /></div>
|
||
<div className="eng-panel"><MetricsPanel metrics={simulation.metrics} /></div>
|
||
<div className="eng-panel"><SensorPanel simulation={simulation} /></div>
|
||
<div className="eng-panel"><TimelinePanel simulation={simulation} /></div>
|
||
<div className="eng-panel"><PidPanel pid={simulation.pid} metrics={simulation.metrics} status={simulation.systemStatus} /></div>
|
||
<div className="eng-panel"><EventLog events={simulation.events} /></div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|