diff --git a/src/router/routes/index.js b/src/router/routes/index.js index f557a51..aa7e29d 100644 --- a/src/router/routes/index.js +++ b/src/router/routes/index.js @@ -80,7 +80,11 @@ const Routes = [ component: lazy(() => import('../../views/control')), layout: 'BlankLayout' }, - + { + path: '/laanc', + component: lazy(() => import('../../views/laanc')), + layout: 'BlankLayout' + }, { path: '/testDraw', component: lazy(() => import('../../views/testDraw')), diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index 3af9b02..d56e8b6 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -1,14 +1,29 @@ -import { useEffect, useState } from 'react'; -import { Map } from 'react-feather'; -import { AiOutlinePoweroff } from 'react-icons/ai'; -import { Card } from 'reactstrap'; +import React, { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; 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 { + Sun, + Map, + Bell, + Navigation2, + Cloud, + CloudRain, + CloudSnow, + Moon +} 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 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'; @@ -16,24 +31,22 @@ import { useDispatch, useSelector } from 'react-redux'; import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction'; import * as Actions from '../../../modules/account/login/actions/authAction'; import { - objectUnClickAction, - laancModeAction + ctrlDrawTypeChangeAction, + objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions'; -import FlightPlan from '../setting/LAANC/FlightPlan'; - -import ControlMenuLeft from '../menu/ControlMenuLeft'; -import ControlTopPackage from '../menu/ControlTopPackage'; +import { useSkin } from '../../../utility/hooks/useSkin'; +import { NavLink } from 'reactstrap'; const ControlMain = () => { const dispatch = useDispatch(); - const { isClickObject, isLaanc } = useSelector( - state => state.controlMapReducer - ); + const { isClickObject } = useSelector(state => state.controlMapReducer); const { controlGpList, controlGroupAuthInfo } = useSelector( state => state.controlGpState ); - + const { controlDetail, controlWheather } = useSelector( + state => state.controlGpDtlState + ); const { controlGpCountDrone, controlGpCountFlight } = useSelector( state => state.controlGpCountState ); @@ -51,6 +64,39 @@ const ControlMain = () => { const [openAlarmList, setOpenAlarmList] = useState(false); const [openSetting, setOpenSetting] = useState(false); + const [skin, setSkin] = useSkin(); + const history = useHistory(); + + 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) { @@ -85,49 +131,42 @@ 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() { + if (controlWheather) { + let wheatherDetail = controlWheather.items.item; + let skyDetail = wheatherDetail[6].fcstValue; + if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) { + return ; + } else if (skyDetail == 3) { + return ; + } else if (wheatherDetail[5].fcstValue == 1) { + return ; + } else return ; + } + } - const handlerLaanc = () => { - dispatch(laancModeAction(!isLaanc)); + const handlerDrawType = val => { + dispatch(ctrlDrawTypeChangeAction(val)); + }; + + const ThemeToggler = () => { + if (skin === 'dark') { + return setSkin('light')} />; + } else { + return setSkin('dark')} />; + } }; return ( @@ -139,10 +178,48 @@ const ControlMain = () => { PAL - {/* 사이드바 start */} - {isLaanc ? null : } +
    +
  • + +
  • + {/*
  • + +
  • */} + {/*
  • + +
  • */} +
  • + +
  • +
  • + + + +
  • +
    + {/*
  • + +
  • +
  • + +
  • +
  • + +
  • */}
  • @@ -161,7 +238,6 @@ const ControlMain = () => { {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
- {/* 사이드바 end */}
{ : 'main-data main-data-test' } > - {/* top components start */} - {isLaanc ? null : ( - - )} - {/* top components end */} +
+ +
+ + {!isClickObject + ? '김포공항' + : !controlDetail?.stAreaNm + ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` + : controlDetail?.stAreaNm} + +  {weathericon()} +
+
+
+ 기온 + + {!isClickObject + ? controlWheather?.items.item[12].fcstValue + : controlDetail?.items.item[12].fcstValue} + ℃ + +
+
+ 풍향 + + + +
+
+ 풍속 + + {!isClickObject + ? controlWheather?.items.item[4].fcstValue + : controlDetail?.items.item[4].fcstValue}{' '} + m/s + +
+
+
+
+
+ +
+ 비행중인 기체 +
+
+
+ 드론 + {/* {controlGpList ? controlGpList.length : 0} */} + {/* + {controlGpCountDrone?.length > 0 + ? controlGpCountDrone?.length + : 0} + */} + {droneCount} +
+
+ UAM + {uamCount} +
+
+ 항공기 + {/* 2147대 */} + + {controlGpCountFlight?.length > 0 + ? controlGpCountFlight?.length + : 0} + +
+
+
+
+ {/*
+ +
+ 화재경보 +
+
+
+ handlerDrawType('CIRCLE')}> + 화재구역설정 + +
+
+ handlerDrawType('RESET')}>초기화 +
+
+
+
*/} +
+ +
+ LAANC 시스템 +
+
+
+ history.push('laanc')}> + 승인요청 바로가기 + +
+ {/*
+ handlerDrawType('RESET')}>초기화 +
*/} +
+
+
{oepnReportList ? ( {
)} - {isLaanc ? ( + {openSetting ? (
-
- + +
+
) : ( - <> - {openSetting ? ( -
- -
- -
-
- ) : ( -
- -
-
- )} - +
+ +
+
)} ); diff --git a/src/views/control/menu/ControlMenuLeft.js b/src/views/control/menu/ControlMenuLeft.js deleted file mode 100644 index e1bb12d..0000000 --- a/src/views/control/menu/ControlMenuLeft.js +++ /dev/null @@ -1,44 +0,0 @@ -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'; - -function ControlMenuLeft({ alarm, openMenu }) { - const [skin, setSkin] = useSkin(); - - const ThemeToggler = () => { - if (skin === 'dark') { - return setSkin('light')} />; - } else { - return setSkin('dark')} />; - } - }; - - return ( -
    -
  • - -
  • - -
  • - -
  • -
  • - - - -
  • -
- ); -} - -export default ControlMenuLeft; diff --git a/src/views/control/menu/ControlTopPackage.js b/src/views/control/menu/ControlTopPackage.js deleted file mode 100644 index b782c97..0000000 --- a/src/views/control/menu/ControlTopPackage.js +++ /dev/null @@ -1,111 +0,0 @@ -import { useDispatch, useSelector } from 'react-redux'; -import { Sun, Navigation2, Cloud, CloudRain, CloudSnow } from 'react-feather'; -import { Card } from 'reactstrap'; - -function ControlTopPackage({ dronCnt, uamCnt, flightCnt = 0, handlerLaanc }) { - const { controlDetail, controlWheather } = useSelector( - state => state.controlGpDtlState - ); - const { isClickObject } = useSelector(state => state.controlMapReducer); - - const weatherIcon = () => { - if (controlWheather) { - let wheatherDetail = controlWheather.items.item; - let skyDetail = wheatherDetail[6].fcstValue; - if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) { - return ; - } else if (skyDetail == 3) { - return ; - } else if (wheatherDetail[5].fcstValue == 1) { - return ; - } else return ; - } - }; - - return ( - <> -
- -
- - {!isClickObject - ? '김포공항' - : !controlDetail?.stAreaNm - ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} ` - : controlDetail?.stAreaNm} - -  {weatherIcon()} -
-
-
- 기온 - - {!isClickObject - ? controlWheather?.items.item[12].fcstValue - : controlDetail?.items.item[12].fcstValue} - ℃ - -
-
- 풍향 - - - -
-
- 풍속 - - {!isClickObject - ? controlWheather?.items.item[4].fcstValue - : controlDetail?.items.item[4].fcstValue}{' '} - m/s - -
-
-
-
-
- -
- 비행중인 기체 -
-
-
- 드론 - {dronCnt} -
-
- UAM - {uamCnt} -
-
- 항공기 - {flightCnt} -
-
-
-
-
- -
- LAANC 시스템 -
-
-
- 승인요청 바로가기 -
-
-
-
- - ); -} - -export default ControlTopPackage; diff --git a/src/views/laanc/LeftMenu.js b/src/views/laanc/LeftMenu.js new file mode 100644 index 0000000..233dff2 --- /dev/null +++ b/src/views/laanc/LeftMenu.js @@ -0,0 +1,24 @@ +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'; + +function LeftMenu() { + return ( + <> +
+

+ + PAL +

+
+
+ +
+
asdsad
+
+
+ + ); +} + +export default LeftMenu; diff --git a/src/views/laanc/index.js b/src/views/laanc/index.js new file mode 100644 index 0000000..1044480 --- /dev/null +++ b/src/views/laanc/index.js @@ -0,0 +1,16 @@ +import { MapControl } from '../../components/map/MapControl'; +import LeftMenu from './LeftMenu'; + +const LaancView = () => { + return ( +
+
+ +
+ + +
+ ); +}; + +export default LaancView;