|
|
@@ -1,20 +1,25 @@ |
|
|
|
import WarnAlert from "."; |
|
|
|
import { useSelector } from "react-redux"; |
|
|
|
import { createPortal } from "react-dom"; |
|
|
|
|
|
|
|
function AlarmListContainer(props) { |
|
|
|
const alarmList = useSelector((state) => state.alarm.list); |
|
|
|
const posMap = { |
|
|
|
A1_1_1: { x: 800, y: 200 }, |
|
|
|
}; |
|
|
|
return alarmList.map((alarm) => ( |
|
|
|
<WarnAlert |
|
|
|
key={alarm.id} |
|
|
|
title={alarm.title} |
|
|
|
content={alarm.content} |
|
|
|
x={posMap[alarm.title].x} |
|
|
|
y={posMap[alarm.title].y} |
|
|
|
/> |
|
|
|
)); |
|
|
|
|
|
|
|
return createPortal( |
|
|
|
alarmList.map((alarm) => ( |
|
|
|
<WarnAlert |
|
|
|
key={alarm.id} |
|
|
|
title={alarm.title} |
|
|
|
content={alarm.content} |
|
|
|
x={posMap[alarm.title]?.x || Math.floor(Math.random() * 500)} |
|
|
|
y={posMap[alarm.title]?.y || Math.floor(Math.random() * 500)} |
|
|
|
/> |
|
|
|
)), |
|
|
|
document.getElementById("alarm-list-container") |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
export default AlarmListContainer; |