New api and zone management; highligh occlusion and highlighAll functionality; improved search in reports and alerts history + autofill; refactored alert panel
This commit is contained in:
iv_vuytsik
@@ -107,6 +107,41 @@ const NavigationPage: React.FC = () => {
|
||||
const [detectorsError, setDetectorsError] = useState<string | null>(null)
|
||||
const [modelError, setModelError] = useState<string | null>(null)
|
||||
const [isModelReady, setIsModelReady] = useState(false)
|
||||
const [focusedSensorId, setFocusedSensorId] = useState<string | null>(null)
|
||||
const [highlightAllSensors, setHighlightAllSensors] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDetector === null && selectedAlert === null) {
|
||||
setFocusedSensorId(null);
|
||||
}
|
||||
}, [selectedDetector, selectedAlert]);
|
||||
|
||||
// Управление выделением всех сенсоров при открытии/закрытии меню Sensors
|
||||
useEffect(() => {
|
||||
console.log('[NavigationPage] showSensors changed:', showSensors, 'modelReady:', isModelReady)
|
||||
if (showSensors && isModelReady) {
|
||||
// При открытии меню Sensors - выделяем все сенсоры (только если модель готова)
|
||||
console.log('[NavigationPage] Setting highlightAllSensors to TRUE')
|
||||
setHighlightAllSensors(true)
|
||||
setFocusedSensorId(null)
|
||||
} else if (!showSensors) {
|
||||
// При закрытии меню Sensors - сбрасываем выделение
|
||||
console.log('[NavigationPage] Setting highlightAllSensors to FALSE')
|
||||
setHighlightAllSensors(false)
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
// Дополнительный эффект для задержки выделения сенсоров при открытии меню
|
||||
useEffect(() => {
|
||||
if (showSensors && isModelReady) {
|
||||
const timer = setTimeout(() => {
|
||||
console.log('[NavigationPage] Delayed highlightAllSensors to TRUE')
|
||||
setHighlightAllSensors(true)
|
||||
}, 500) // Задержка 500мс для полной инициализации модели
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
const urlObjectId = searchParams.get('objectId')
|
||||
const urlObjectTitle = searchParams.get('objectTitle')
|
||||
@@ -133,10 +168,10 @@ const NavigationPage: React.FC = () => {
|
||||
}, [selectedModelPath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||||
setCurrentObject(urlObjectId, urlObjectTitle)
|
||||
if (urlObjectId && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||||
setCurrentObject(urlObjectId, urlObjectTitle ?? currentObject.title ?? undefined)
|
||||
}
|
||||
}, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])
|
||||
}, [urlObjectId, urlObjectTitle, currentObject.id, currentObject.title, setCurrentObject])
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetectors = async () => {
|
||||
@@ -177,18 +212,28 @@ const NavigationPage: React.FC = () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedDetector?.detector_id === detector.detector_id && showDetectorMenu) {
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
if (selectedDetector?.serial_number === detector.serial_number && showDetectorMenu) {
|
||||
closeDetectorMenu()
|
||||
} else {
|
||||
setSelectedDetector(detector)
|
||||
setShowDetectorMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
// При открытии меню детектора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
}
|
||||
}
|
||||
|
||||
const closeDetectorMenu = () => {
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedAlert(null)
|
||||
// При закрытии меню детектора из Sensors - выделяем все сенсоры снова
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNotificationClick = (notification: NotificationType) => {
|
||||
@@ -209,6 +254,12 @@ const NavigationPage: React.FC = () => {
|
||||
const closeAlertMenu = () => {
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedDetector(null)
|
||||
// При закрытии меню алерта из Sensors - выделяем все сенсоры снова
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAlertClick = (alert: AlertType) => {
|
||||
@@ -219,19 +270,86 @@ const NavigationPage: React.FC = () => {
|
||||
)
|
||||
|
||||
if (detector) {
|
||||
console.log('[NavigationPage] Found detector for alert:', detector)
|
||||
|
||||
setSelectedAlert(alert)
|
||||
setShowAlertMenu(true)
|
||||
|
||||
setSelectedDetector(detector)
|
||||
|
||||
console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
|
||||
if (selectedAlert?.id === alert.id && showAlertMenu) {
|
||||
closeAlertMenu()
|
||||
} else {
|
||||
setSelectedAlert(alert)
|
||||
setShowAlertMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
// При открытии меню алерта - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
|
||||
}
|
||||
} else {
|
||||
console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSensorSelection = (serialNumber: string | null) => {
|
||||
if (serialNumber === null) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no sensor is selected, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (focusedSensorId === serialNumber) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and deselected the current sensor, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// При выборе конкретного сенсора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
|
||||
const detector = Object.values(detectorsData?.detectors || {}).find(
|
||||
(d) => d.serial_number === serialNumber
|
||||
);
|
||||
|
||||
if (detector) {
|
||||
if (showFloorNavigation || showListOfDetectors) {
|
||||
handleDetectorMenuClick(detector);
|
||||
} else if (detector.notifications && detector.notifications.length > 0) {
|
||||
const sortedNotifications = [...detector.notifications].sort((a, b) => {
|
||||
const priorityOrder: { [key: string]: number } = { critical: 0, warning: 1, info: 2 };
|
||||
return priorityOrder[a.priority.toLowerCase()] - priorityOrder[b.priority.toLowerCase()];
|
||||
});
|
||||
const notification = sortedNotifications[0];
|
||||
const alert: AlertType = {
|
||||
...notification,
|
||||
detector_id: detector.detector_id,
|
||||
detector_name: detector.name,
|
||||
location: detector.location,
|
||||
object: detector.object,
|
||||
status: detector.status,
|
||||
type: notification.type || 'info',
|
||||
};
|
||||
handleAlertClick(alert);
|
||||
} else {
|
||||
handleDetectorMenuClick(detector);
|
||||
}
|
||||
} else {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no valid detector found, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
const s = (status || '').toLowerCase()
|
||||
switch (s) {
|
||||
@@ -371,9 +489,9 @@ const NavigationPage: React.FC = () => {
|
||||
</button>
|
||||
<nav className="flex items-center gap-2 text-sm">
|
||||
<span className="text-gray-400">Дашборд</span>
|
||||
<span className="text-gray-600">/</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">{objectTitle || 'Объект'}</span>
|
||||
<span className="text-gray-600">/</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">Навигация</span>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -414,7 +532,7 @@ const NavigationPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ModelViewer
|
||||
<ModelViewer
|
||||
key={selectedModelPath || 'no-model'}
|
||||
modelPath={selectedModelPath}
|
||||
onSelectModel={(path) => {
|
||||
@@ -425,7 +543,11 @@ const NavigationPage: React.FC = () => {
|
||||
}}
|
||||
onModelLoaded={handleModelLoaded}
|
||||
onError={handleModelError}
|
||||
focusSensorId={selectedDetector?.serial_number ?? selectedAlert?.detector_id?.toString() ?? null}
|
||||
activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
|
||||
focusSensorId={focusedSensorId}
|
||||
highlightAllSensors={highlightAllSensors}
|
||||
isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
|
||||
onSensorPick={handleSensorSelection}
|
||||
renderOverlay={({ anchor }) => (
|
||||
<>
|
||||
{selectedAlert && showAlertMenu && anchor ? (
|
||||
@@ -449,12 +571,12 @@ const NavigationPage: React.FC = () => {
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user