47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
import { useState } from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { Button, Offcanvas } from "react-bootstrap";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faCommentDots, faCommentSlash } from "@fortawesome/free-solid-svg-icons";
|
|
import { fetchBuiAlarmStateByBaja } from "@STORE";
|
|
function AlarmOffcanvas() {
|
|
const dispatch = useDispatch();
|
|
const { selectedBuiArea, selectedBuiTag } = useSelector((state) => state.buildingInfo);
|
|
// alarm
|
|
const [showAlarm, setShowAlarm] = useState(false);
|
|
const getAlarmList = () => {
|
|
dispatch(fetchBuiAlarmStateByBaja(selectedBuiArea, selectedBuiTag));
|
|
setShowAlarm(!showAlarm);
|
|
};
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="link"
|
|
className="d-flex flex-column align-items-center justify-content-center mx-3 text-decoration-none text-white"
|
|
onClick={getAlarmList}
|
|
>
|
|
<FontAwesomeIcon icon={showAlarm ? faCommentSlash : faCommentDots} size="2x" />
|
|
<span className="mt-1">{showAlarm ? "隱藏警告" : "顯示警告"}</span>
|
|
</Button>
|
|
<Offcanvas
|
|
className="opacity-75"
|
|
show={showAlarm}
|
|
onHide={() => {
|
|
setShowAlarm(false);
|
|
}}
|
|
placement="end"
|
|
>
|
|
<Offcanvas.Header closeButton>
|
|
<Offcanvas.Title>Offcanvas</Offcanvas.Title>
|
|
</Offcanvas.Header>
|
|
<Offcanvas.Body>
|
|
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
|
text, images, lists, etc.
|
|
</Offcanvas.Body>
|
|
</Offcanvas>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default AlarmOffcanvas;
|