pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

관제 LAANC 레이아웃 작업중

pull/2/head
김장현 1 year ago
parent
41adf94545
commit
151337d590
5 changed files with 184 additions and 234 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/modules/control/map/actions/controlMapActions.ts
  2. 5
      src/modules/control/map/reducers/controlMapReducer.ts
  3. 330
      src/views/control/main/ControlMain.js
  4. 46
      src/views/control/menu/ControlMenuLeft.js
  5. 34
      src/views/control/setting/Dddd.js

3
src/modules/control/map/actions/controlMapActions.ts
Unescape View File

@ -28,3 +28,6 @@ export const sensorClickAction = (value: any) => dispatch =>
export const ctrlDrawTypeChangeAction = (value: any) => dispatch =>
dispatch({ type: 'CTRL_DRAW_TYPE_CHANGE', value });
export const laancModeAction = (value: boolean) => dispatch =>
dispatch({ type: 'LAANC_MODE', value });

5
src/modules/control/map/reducers/controlMapReducer.ts
Unescape View File

@ -92,6 +92,11 @@ const controlReducerReducer = (state = initialState, action) => {
...state,
drawCheck: action.value
};
case 'LAANC_MODE':
return {
...state,
isLaanc: action.value
};
}
};

330
src/views/control/main/ControlMain.js
Unescape View File

@ -1,32 +1,21 @@
import React, { useEffect, useState } from 'react';
import '../../../assets/css/custom.css';
import logo from '../../../assets/images/pal_logo.png';
import finevt_logo from '../../../assets/images/finevt_logo.png';
import nam_logo from '../../../assets/images/nam_logo.png';
import future_logo from '../../../assets/images/future_logo.png';
import tp_logo from '../../../assets/images/tplogo_wh.png';
import kac_logo from '../../../assets/images/kac_logo_wh.png';
import { useEffect, useState } from 'react';
import {
Sun,
Map,
Bell,
Navigation2,
Cloud,
CloudRain,
CloudSnow,
Moon
CloudSnow
} from 'react-feather';
import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
import { IoAlertOutline } from 'react-icons/io5';
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
import { Card, Button } from 'reactstrap';
import { AiOutlinePoweroff } from 'react-icons/ai';
import { Card } from 'reactstrap';
import '../../../assets/css/custom.css';
import logo from '../../../assets/images/pal_logo.png';
import tp_logo from '../../../assets/images/tplogo_wh.png';
import kac_logo from '../../../assets/images/kac_logo_wh.png';
import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
import ControlReportList from '../report/ControlReportList';
import ControlReportDetail from '../report/ControlReportDetail';
import WeatherList from '../weather/WeatherList';
import ControlAlarmList from '../alarm/ControlAlarmList';
import ControlSetting from '../setting/ControlSetting';
import WebsocketClient from '../../../components/websocket/WebsocketClient';
@ -34,11 +23,12 @@ import { useDispatch, useSelector } from 'react-redux';
import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction';
import * as Actions from '../../../modules/account/login/actions/authAction';
import {
ctrlDrawTypeChangeAction,
objectUnClickAction
objectUnClickAction,
laancModeAction
} from '../../../modules/control/map/actions/controlMapActions';
import { useSkin } from '../../../utility/hooks/useSkin';
import { NavLink } from 'reactstrap';
import Dddd from '../setting/Dddd';
import ControlMenuLeft from '../menu/ControlMenuLeft';
const ControlMain = () => {
const dispatch = useDispatch();
@ -46,8 +36,6 @@ const ControlMain = () => {
const { isClickObject, isLaanc } = useSelector(
state => state.controlMapReducer
);
const mapControl = useSelector(state => state.controlMapReducer);
const { controlGpList, controlGroupAuthInfo } = useSelector(
state => state.controlGpState
);
@ -57,7 +45,6 @@ const ControlMain = () => {
const { controlGpCountDrone, controlGpCountFlight } = useSelector(
state => state.controlGpCountState
);
console.log('>>>>', isClickObject);
// pav박람회 -> uam, 드론 구별을 위한 임시 코드
// (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
@ -72,38 +59,6 @@ const ControlMain = () => {
const [openAlarmList, setOpenAlarmList] = useState(false);
const [openSetting, setOpenSetting] = useState(false);
const [skin, setSkin] = useSkin();
const openMenu = val => {
if (val === 'reportList') {
setOpenReportList(true);
// setOpenReportDetail(false);
// setOpenWeatherList(false);
setOpenAlarmList(false);
} else if (val === 'weatherList') {
setOpenReportList(false);
// setOpenReportDetail(false);
// setOpenWeatherList(true);
setOpenAlarmList(false);
} else if (val === 'alarmList') {
dispatch(objectUnClickAction());
setOpenReportList(false);
// setOpenReportDetail(false);
// setOpenWeatherList(false);
setOpenAlarmList(true);
setAlarm(false);
}
};
// const openReportDetailParam = val => {
// setOpenReportDetail(true);
// };
const handlerLogout = () => {
dispatch(Actions.logout.request());
};
useEffect(() => {
if (controlGpList) {
@ -138,19 +93,48 @@ const ControlMain = () => {
}
}, [controlGpCountDrone]);
useEffect(() => {
dispatch(controlweatherAction.request(rq));
}, []);
const openMenu = val => {
if (val === 'reportList') {
setOpenReportList(true);
// setOpenReportDetail(false);
// setOpenWeatherList(false);
setOpenAlarmList(false);
} else if (val === 'weatherList') {
setOpenReportList(false);
// setOpenReportDetail(false);
// setOpenWeatherList(true);
setOpenAlarmList(false);
} else if (val === 'alarmList') {
dispatch(objectUnClickAction());
setOpenReportList(false);
// setOpenReportDetail(false);
// setOpenWeatherList(false);
setOpenAlarmList(true);
setAlarm(false);
}
};
const handlerLogout = () => {
dispatch(Actions.logout.request());
};
const handlerClose = () => {
setOpenReportList(true);
dispatch(objectUnClickAction());
};
//날씨 API
const rq = {
nx: 37.558522,
ny: 126.793722
};
useEffect(() => {
dispatch(controlweatherAction.request(rq));
}, []);
function weathericon() {
const weathericon = () => {
if (controlWheather) {
let wheatherDetail = controlWheather.items.item;
let skyDetail = wheatherDetail[6].fcstValue;
@ -162,145 +146,45 @@ const ControlMain = () => {
return <Sun size={20} />;
} else return <Cloud size={20} />;
}
}
const handlerDrawType = val => {
dispatch(ctrlDrawTypeChangeAction(val));
};
const ThemeToggler = () => {
if (skin === 'dark') {
return <Sun className='ficon' onClick={() => setSkin('light')} />;
} else {
return <Moon className='ficon' onClick={() => setSkin('dark')} />;
}
const handlerLaanc = () => {
dispatch(laancModeAction(!isLaanc));
};
const hadlerLaanc = () => {
if (isLaanc) mapControl.isLaanc = false;
else if (!isLaanc) mapControl.isLaanc = true;
};
return (
<>
{isLaanc ? (
<>
{' '}
<ControlAlarmNotice />
<div className='left-menu'>
<h1 className='logo'>
<img src={logo} width='80' />
<span>PAL</span>
</h1>
<ControlAlarmNotice />
<ul className='left-menu-nav'>
<li>
<button onClick={() => openMenu('reportList')}>
<DroneMenuIcon width='30' height='30' />
</button>
</li>
{/* <li>
<button>
<Bell width='20' height='20' />
</button>
</li> */}
{/* <li>
<button onClick={() => openMenu('weatherList')}>
<Sun size={25} />
</button>
</li> */}
<li>
<button onClick={() => openMenu('alarmList')}>
{alarm ? (
<IoAlertOutline size={25} />
) : (
<Bell width='20' height='20' />
)}
</button>
</li>
<li>
<NavLink className='nav-link-style'>
<ThemeToggler />
</NavLink>
</li>
</ul>
<ul className='left-menu-footer'>
{/* <li>
<img src={future_logo} width='50' />
</li>
<li>
<img src={nam_logo} width='50' />
</li>
<li>
<img src={finevt_logo} width='50' />
</li> */}
<li>
<img src={kac_logo} width='50' />
</li>
<li>
<img src={tp_logo} width='50' />
</li>
<li>
<AiOutlinePoweroff
size={25}
className='logout-btn'
onClick={handlerLogout}
/>
</li>
<li style={{ marginLeft: '8px' }}>
<WebsocketClient />
</li>
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
</ul>
</div>
</>
) : (
<>
<ControlAlarmNotice />
<div className='left-menu'>
<h1 className='logo'>
<img src={logo} width='80' />
<span>PAL</span>
</h1>
<div className='left-menu'>
<h1 className='logo'>
<img src={logo} width='80' />
<span>PAL</span>
</h1>
{/* 사이드바 start */}
{isLaanc ? null : <ControlMenuLeft alarm={alarm} openMenu={openMenu} />}
<ul className='left-menu-nav'>
{/* <li>
<button>
<Bell width='20' height='20' />
</button>
</li> */}
{/* <li>
<button onClick={() => openMenu('weatherList')}>
<Sun size={25} />
</button>
</li> */}
</ul>
<ul className='left-menu-footer'>
{/* <li>
<img src={future_logo} width='50' />
<ul className='left-menu-footer'>
<li>
<img src={kac_logo} width='50' />
</li>
<li>
<img src={nam_logo} width='50' />
<img src={tp_logo} width='50' />
</li>
<li>
<img src={finevt_logo} width='50' />
</li> */}
<li>
<AiOutlinePoweroff
size={25}
className='logout-btn'
onClick={handlerLogout}
/>
</li>
<li style={{ marginLeft: '8px' }}>
<WebsocketClient />
</li>
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
</ul>
</div>
</>
)}
<AiOutlinePoweroff
size={25}
className='logout-btn'
onClick={handlerLogout}
/>
</li>
<li style={{ marginLeft: '8px' }}>
<WebsocketClient />
</li>
{/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
</ul>
{/* 사이드바 end */}
</div>
<div
className={
!oepnReportList && !openAlarmList && !isClickObject
@ -387,23 +271,6 @@ const ControlMain = () => {
</div>
</Card>
</div>
{/* <div className='main-data-box flight-data'>
<Card>
<div className='data-box-header'>
<span className='box-ti'>화재경보</span>
</div>
<div className='data-list-box'>
<div className='data-list' style={{ cursor: 'pointer' }}>
<span onClick={() => handlerDrawType('CIRCLE')}>
화재구역설정
</span>
</div>
<div className='data-list' style={{ cursor: 'pointer' }}>
<span onClick={() => handlerDrawType('RESET')}>초기화</span>
</div>
</div>
</Card>
</div> */}
<div className='main-data-box flight-data'>
<Card>
<div className='data-box-header'>
@ -411,11 +278,8 @@ const ControlMain = () => {
</div>
<div className='data-list-box'>
<div className='data-list' style={{ cursor: 'pointer' }}>
<span onClick={hadlerLaanc}>승인요청 바로가기</span>
<span onClick={handlerLaanc}>승인요청 바로가기</span>
</div>
{/* <div className='data-list' style={{ cursor: 'pointer' }}>
<span onClick={() => handlerDrawType('RESET')}>초기화</span>
</div> */}
</div>
</Card>
</div>
@ -445,28 +309,38 @@ const ControlMain = () => {
<div />
)}
{openSetting ? (
{isLaanc ? (
<div className='right-menu active'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(false)}
>
<Map size={18} />
</button>
<div className='right-layer active'>
<ControlSetting />
<Dddd />
</div>
</div>
) : (
<div className='right-menu'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(true)}
>
<Map size={18} />
</button>
<div className='right-layer'></div>
</div>
<>
{openSetting ? (
<div className='right-menu active'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(false)}
>
<Map size={18} />
</button>
<div className='right-layer active'>
<ControlSetting />
</div>
</div>
) : (
<div className='right-menu'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(true)}
>
<Map size={18} />
</button>
<div className='right-layer'></div>
</div>
)}
</>
)}
</>
);

46
src/views/control/menu/ControlMenuLeft.js
Unescape View File

@ -1,10 +1,44 @@
import { NavLink } from 'reactstrap';
import { Bell, Sun, Moon } from 'react-feather';
import { IoAlertOutline } from 'react-icons/io5';
import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
import { useSkin } from '../../../utility/hooks/useSkin';
import React, { useEffect, useState } from 'react';
function ControlMenuLeft({ alarm, openMenu }) {
const [skin, setSkin] = useSkin();
const ControlMenuLeft = () => {
return(
<></>
)
const ThemeToggler = () => {
if (skin === 'dark') {
return <Sun className='ficon' onClick={() => setSkin('light')} />;
} else {
return <Moon className='ficon' onClick={() => setSkin('dark')} />;
}
};
return (
<ul className='left-menu-nav'>
<li>
<button onClick={() => openMenu('reportList')}>
<DroneMenuIcon width='30' height='30' />
</button>
</li>
<li>
<button onClick={() => openMenu('alarmList')}>
{alarm ? (
<IoAlertOutline size={25} />
) : (
<Bell width='20' height='20' />
)}
</button>
</li>
<li>
<NavLink className='nav-link-style'>
<ThemeToggler />
</NavLink>
</li>
</ul>
);
}
export default ControlMenuLeft();
export default ControlMenuLeft;

34
src/views/control/setting/Dddd.js
Unescape View File

@ -0,0 +1,34 @@
import React, { useEffect, useState } from 'react';
import { Search } from 'react-feather';
import { BiBuildings, BiGridAlt } from 'react-icons/bi';
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
} from 'reactstrap';
import {
areaClickAction,
environmentClickAction,
mapTypeChangeAction,
sensorClickAction
} from '../../../modules/control/map/actions/controlMapActions';
const Dddd = props => {
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>
</div>
);
};
export default Dddd;
Write Preview
Loading…
Cancel
Save