|
|
|
@ -5,274 +5,197 @@ import { CgTrees } from 'react-icons/cg';
|
|
|
|
|
import { VscRadioTower } from 'react-icons/vsc'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { |
|
|
|
|
Button, |
|
|
|
|
InputGroup, |
|
|
|
|
ButtonGroup, |
|
|
|
|
InputGroupAddon, |
|
|
|
|
Input, |
|
|
|
|
CustomInput |
|
|
|
|
Button, |
|
|
|
|
InputGroup, |
|
|
|
|
ButtonGroup, |
|
|
|
|
InputGroupAddon, |
|
|
|
|
Input, |
|
|
|
|
CustomInput |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { |
|
|
|
|
areaClickAction, environmentClickAction, |
|
|
|
|
mapTypeChangeAction, sensorClickAction |
|
|
|
|
areaClickAction, |
|
|
|
|
environmentClickAction, |
|
|
|
|
mapTypeChangeAction, |
|
|
|
|
sensorClickAction |
|
|
|
|
} from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import ControlReservation from './ControlReservation'; |
|
|
|
|
|
|
|
|
|
const ControlSetting = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const [modal, setModal] = useState(false); |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
const mapControl = useSelector(state => state.controlMapReducer); |
|
|
|
|
|
|
|
|
|
const handlerMapType = val => { |
|
|
|
|
dispatch(mapTypeChangeAction(val)); |
|
|
|
|
}; |
|
|
|
|
const handlerMapType = val => { |
|
|
|
|
dispatch(mapTypeChangeAction(val)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerAreaClick = val => { |
|
|
|
|
dispatch(areaClickAction(val)); |
|
|
|
|
}; |
|
|
|
|
const handlerAreaClick = val => { |
|
|
|
|
dispatch(areaClickAction(val)); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlerSensorClick = (val, isChecked) => { |
|
|
|
|
if (isChecked) { |
|
|
|
|
dispatch(sensorClickAction(val)); |
|
|
|
|
} else { |
|
|
|
|
dispatch(sensorClickAction('')); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const handlerModal = () => { |
|
|
|
|
setModal(!modal); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className=''> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>지도유형</h4> |
|
|
|
|
{/* <button className='btn-icon' outline color='primary'><X size={20} /></button> */} |
|
|
|
|
return ( |
|
|
|
|
<div className=''> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>지도유형</h4> |
|
|
|
|
{/* <button className='btn-icon' outline color='primary'><X size={20} /></button> */} |
|
|
|
|
</div> |
|
|
|
|
<div className='map-btn'> |
|
|
|
|
<ButtonGroup> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'HYBRID' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('HYBRID')} |
|
|
|
|
> |
|
|
|
|
위성지도 |
|
|
|
|
</Button> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'NORMAL' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('NORMAL')} |
|
|
|
|
> |
|
|
|
|
일반지도 |
|
|
|
|
</Button> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'TERRAIN' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('TERRAIN')} |
|
|
|
|
> |
|
|
|
|
지형지도 |
|
|
|
|
</Button> |
|
|
|
|
</ButtonGroup> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>공역 표출 정보</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content-box'> |
|
|
|
|
<div className='layer-content-info layer-switch-list'> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-red'></span>비행금지구역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0001')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test01' |
|
|
|
|
name='test01' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0001} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-pink'></span>비행제한구역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0002')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test02' |
|
|
|
|
name='test02' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0002} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className='map-btn'> |
|
|
|
|
<ButtonGroup> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'HYBRID' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('HYBRID')} |
|
|
|
|
> |
|
|
|
|
위성지도 |
|
|
|
|
</Button> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'NORMAL' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('NORMAL')} |
|
|
|
|
> |
|
|
|
|
일반지도 |
|
|
|
|
</Button> |
|
|
|
|
<Button |
|
|
|
|
color={mapControl.mapType === 'TERRAIN' ? 'primary' : ''} |
|
|
|
|
onClick={e => handlerMapType('TERRAIN')} |
|
|
|
|
> |
|
|
|
|
지형지도 |
|
|
|
|
</Button> |
|
|
|
|
</ButtonGroup> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-orange'></span>관제권(공항) |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>공역 표출 정보</h4> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0003')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test03' |
|
|
|
|
name='test03' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0003} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content-box'> |
|
|
|
|
<div className='layer-content-info layer-switch-list'> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-red'></span>비행금지구역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0001')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test01' |
|
|
|
|
name='test01' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0001} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-pink'></span>비행제한구역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0002')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test02' |
|
|
|
|
name='test02' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0002} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-orange'></span>관제권(공항) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0003')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test03' |
|
|
|
|
name='test03' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0003} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-brown'></span>비행장(군사) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0004')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test04' |
|
|
|
|
name='test04' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0004} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-purple'></span>이착륙장 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0005')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test05' |
|
|
|
|
name='test05' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0005} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-skyblue'></span> |
|
|
|
|
초경량비행장치공역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0006')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test06' |
|
|
|
|
name='test06' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0006} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-brown'></span>비행장(군사) |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* <div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>환경지표</h4> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0004')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test04' |
|
|
|
|
name='test04' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0004} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content-box'> |
|
|
|
|
<div className='layer-content-info layer-switch-list'> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-red'></span>미세먼지(DUST) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onChange={e => handlerSensorClick('dust', e.target.checked)} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='sensorDust' |
|
|
|
|
name='sensorDust' |
|
|
|
|
inline |
|
|
|
|
checked={mapControl.sensor === 'dust'} |
|
|
|
|
// defaultChecked={mapControl.sensor === 'dust'}
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-pink'></span>오존(O3) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onChange={e => handlerSensorClick('o3', e.target.checked)} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='sensorO3' |
|
|
|
|
name='sensorO3' |
|
|
|
|
inline |
|
|
|
|
checked={mapControl.sensor === 'o3'} |
|
|
|
|
// defaultChecked={mapControl.sensor === 'o3'}
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-orange'></span>이산화질소(No2) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onChange={e => handlerSensorClick('no2', e.target.checked)} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='sensorNo2' |
|
|
|
|
name='sensorNo2' |
|
|
|
|
inline |
|
|
|
|
checked={mapControl.sensor === 'no2'} |
|
|
|
|
// defaultChecked={mapControl.sensor === 'no2'}
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-brown'></span>일산화탄소(Co) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onChange={e => handlerSensorClick('co', e.target.checked)} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='sensorCo' |
|
|
|
|
name='sensorCo' |
|
|
|
|
inline |
|
|
|
|
checked={mapControl.sensor === 'co'} |
|
|
|
|
// defaultChecked={mapControl.sensor === 'co'}
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-purple'></span>아황산가스(So2) |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onChange={e => handlerSensorClick('so2', e.target.checked)} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='sensorSo2' |
|
|
|
|
name='sensorSo2' |
|
|
|
|
inline |
|
|
|
|
checked={mapControl.sensor === 'so2'} |
|
|
|
|
// defaultChecked={mapControl.sensor === 'so2'}
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-purple'></span>이착륙장 |
|
|
|
|
</div> |
|
|
|
|
</div> */} |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0005')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test05' |
|
|
|
|
name='test05' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0005} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<span className='dot-icon color-skyblue'></span> |
|
|
|
|
초경량비행장치공역 |
|
|
|
|
</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<CustomInput |
|
|
|
|
onClick={e => handlerAreaClick('0006')} |
|
|
|
|
className='custom-control-primary' |
|
|
|
|
type='switch' |
|
|
|
|
id='test06' |
|
|
|
|
name='test06' |
|
|
|
|
inline |
|
|
|
|
defaultChecked={mapControl.area0006} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>예약프로세스</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content-box'> |
|
|
|
|
<div className='map-btn'> |
|
|
|
|
<ButtonGroup> |
|
|
|
|
<Button color='primary' onClick={handlerModal}> |
|
|
|
|
예약창열기 |
|
|
|
|
</Button> |
|
|
|
|
</ButtonGroup> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
</div> |
|
|
|
|
{modal ? ( |
|
|
|
|
<ControlReservation modal={modal} handler={handlerModal} /> |
|
|
|
|
) : ( |
|
|
|
|
<></> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
export default ControlSetting; |
|
|
|
|