239 lines
9.6 KiB
TypeScript
Executable File
239 lines
9.6 KiB
TypeScript
Executable File
import { useState } from 'react'
|
|
import type { LeftPanelProps, ExpandedSections } from './leftPanelTypes'
|
|
import PredictionInputSection from './PredictionInputSection'
|
|
import InfoLayerSection from './InfoLayerSection'
|
|
import OilBoomSection from './OilBoomSection'
|
|
|
|
export type { LeftPanelProps }
|
|
|
|
export function LeftPanel({
|
|
selectedAnalysis,
|
|
enabledLayers,
|
|
onToggleLayer,
|
|
accidentTime,
|
|
onAccidentTimeChange,
|
|
incidentCoord,
|
|
onCoordChange,
|
|
isSelectingLocation,
|
|
onMapSelectClick,
|
|
onRunSimulation,
|
|
isRunningSimulation,
|
|
selectedModels,
|
|
onModelsChange,
|
|
predictionTime,
|
|
onPredictionTimeChange,
|
|
spillType,
|
|
onSpillTypeChange,
|
|
oilType,
|
|
onOilTypeChange,
|
|
spillAmount,
|
|
onSpillAmountChange,
|
|
incidentName,
|
|
onIncidentNameChange,
|
|
spillUnit,
|
|
onSpillUnitChange,
|
|
boomLines,
|
|
onBoomLinesChange,
|
|
oilTrajectory,
|
|
algorithmSettings,
|
|
onAlgorithmSettingsChange,
|
|
isDrawingBoom,
|
|
onDrawingBoomChange,
|
|
drawingPoints,
|
|
onDrawingPointsChange,
|
|
containmentResult,
|
|
onContainmentResultChange,
|
|
layerOpacity,
|
|
onLayerOpacityChange,
|
|
layerBrightness,
|
|
onLayerBrightnessChange,
|
|
onImageAnalysisResult,
|
|
}: LeftPanelProps) {
|
|
const [expandedSections, setExpandedSections] = useState<ExpandedSections>({
|
|
predictionInput: true,
|
|
incident: false,
|
|
impactResources: false,
|
|
infoLayer: false,
|
|
oilBoom: false,
|
|
})
|
|
|
|
const toggleSection = (section: keyof ExpandedSections) => {
|
|
setExpandedSections(prev => ({
|
|
...prev,
|
|
[section]: !prev[section]
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className="w-80 min-w-[320px] bg-bg-1 border-r border-border flex flex-col">
|
|
{/* Scrollable Content */}
|
|
<div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent">
|
|
{/* Prediction Input Section */}
|
|
<PredictionInputSection
|
|
expanded={expandedSections.predictionInput}
|
|
onToggle={() => toggleSection('predictionInput')}
|
|
accidentTime={accidentTime}
|
|
onAccidentTimeChange={onAccidentTimeChange}
|
|
incidentCoord={incidentCoord}
|
|
onCoordChange={onCoordChange}
|
|
isSelectingLocation={isSelectingLocation}
|
|
onMapSelectClick={onMapSelectClick}
|
|
onRunSimulation={onRunSimulation}
|
|
isRunningSimulation={isRunningSimulation}
|
|
selectedModels={selectedModels}
|
|
onModelsChange={onModelsChange}
|
|
predictionTime={predictionTime}
|
|
onPredictionTimeChange={onPredictionTimeChange}
|
|
spillType={spillType}
|
|
onSpillTypeChange={onSpillTypeChange}
|
|
oilType={oilType}
|
|
onOilTypeChange={onOilTypeChange}
|
|
spillAmount={spillAmount}
|
|
onSpillAmountChange={onSpillAmountChange}
|
|
incidentName={incidentName}
|
|
onIncidentNameChange={onIncidentNameChange}
|
|
spillUnit={spillUnit}
|
|
onSpillUnitChange={onSpillUnitChange}
|
|
onImageAnalysisResult={onImageAnalysisResult}
|
|
/>
|
|
|
|
{/* Incident Section */}
|
|
<div className="border-b border-border">
|
|
<div
|
|
onClick={() => toggleSection('incident')}
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
|
|
>
|
|
<h3 className="text-[13px] font-bold text-text-2 font-korean">
|
|
사고정보
|
|
</h3>
|
|
<span className="text-[10px] text-text-3">
|
|
{expandedSections.incident ? '▼' : '▶'}
|
|
</span>
|
|
</div>
|
|
|
|
{expandedSections.incident && (
|
|
selectedAnalysis ? (
|
|
<div className="px-4 pb-4 space-y-3">
|
|
{/* Status Badge */}
|
|
{(() => {
|
|
const statusMap: Record<string, { label: string; style: string; dot: string }> = {
|
|
ACTIVE: {
|
|
label: '진행중',
|
|
style: 'bg-[rgba(239,68,68,0.15)] text-status-red border border-[rgba(239,68,68,0.3)]',
|
|
dot: 'bg-status-red animate-pulse',
|
|
},
|
|
INVESTIGATING: {
|
|
label: '조사중',
|
|
style: 'bg-[rgba(249,115,22,0.15)] text-status-orange border border-[rgba(249,115,22,0.3)]',
|
|
dot: 'bg-status-orange animate-pulse',
|
|
},
|
|
CLOSED: {
|
|
label: '종료',
|
|
style: 'bg-[rgba(100,116,139,0.15)] text-text-3 border border-[rgba(100,116,139,0.3)]',
|
|
dot: 'bg-text-3',
|
|
},
|
|
}
|
|
const s = statusMap[selectedAnalysis.acdntSttsCd] ?? statusMap['ACTIVE']
|
|
return (
|
|
<div className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[9px] font-semibold ${s.style}`}>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${s.dot}`} />
|
|
{s.label}
|
|
</div>
|
|
)
|
|
})()}
|
|
|
|
{/* Info Grid */}
|
|
<div className="grid gap-1">
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고코드</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.acdntSn}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고명</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.acdntNm || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">사고일시</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.occurredAt ? selectedAnalysis.occurredAt.slice(0, 16) : '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">유종</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.oilType || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">유출량</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-mono">{selectedAnalysis.volume != null ? `${selectedAnalysis.volume.toFixed(2)} kl` : '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">담당자</span>
|
|
<span className="text-[11px] text-text-1 font-medium font-korean">{selectedAnalysis.analyst || '—'}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1.5">
|
|
<span className="text-[10px] text-text-3 min-w-[52px] font-korean">위치</span>
|
|
<span className="text-[11px] text-status-orange font-semibold font-korean">{selectedAnalysis.location || '—'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="px-4 pb-4">
|
|
<p className="text-[11px] text-text-3 font-korean text-center py-2">선택된 사고정보가 없습니다.</p>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{/* Impact Resources Section */}
|
|
<div className="border-b border-border">
|
|
<div
|
|
onClick={() => toggleSection('impactResources')}
|
|
className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
|
|
>
|
|
<h3 className="text-[13px] font-bold text-text-2 font-korean">
|
|
영향 민감자원
|
|
</h3>
|
|
<span className="text-[10px] text-text-3">
|
|
{expandedSections.impactResources ? '▼' : '▶'}
|
|
</span>
|
|
</div>
|
|
|
|
{expandedSections.impactResources && (
|
|
<div className="px-4 pb-4">
|
|
<p className="text-[11px] text-text-3">영향받는 민감자원 목록</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info Layer Section */}
|
|
<InfoLayerSection
|
|
expanded={expandedSections.infoLayer}
|
|
onToggle={() => toggleSection('infoLayer')}
|
|
enabledLayers={enabledLayers}
|
|
onToggleLayer={onToggleLayer}
|
|
layerOpacity={layerOpacity}
|
|
onLayerOpacityChange={onLayerOpacityChange}
|
|
layerBrightness={layerBrightness}
|
|
onLayerBrightnessChange={onLayerBrightnessChange}
|
|
/>
|
|
|
|
{/* Oil Boom Placement Guide Section */}
|
|
<OilBoomSection
|
|
expanded={expandedSections.oilBoom}
|
|
onToggle={() => toggleSection('oilBoom')}
|
|
boomLines={boomLines}
|
|
onBoomLinesChange={onBoomLinesChange}
|
|
oilTrajectory={oilTrajectory}
|
|
incidentCoord={incidentCoord ?? { lat: 0, lon: 0 }}
|
|
algorithmSettings={algorithmSettings}
|
|
onAlgorithmSettingsChange={onAlgorithmSettingsChange}
|
|
isDrawingBoom={isDrawingBoom}
|
|
onDrawingBoomChange={onDrawingBoomChange}
|
|
drawingPoints={drawingPoints}
|
|
onDrawingPointsChange={onDrawingPointsChange}
|
|
containmentResult={containmentResult}
|
|
onContainmentResultChange={onContainmentResultChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|