From 151337d5903e0034f8c7e9543dff41414b4c7419 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Mon, 18 Sep 2023 13:56:55 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EC=A0=9C=20LAANC=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../control/map/actions/controlMapActions.ts | 3 + .../control/map/reducers/controlMapReducer.ts | 5 + src/views/control/main/ControlMain.js | 330 ++++++------------ src/views/control/menu/ControlMenuLeft.js | 46 ++- src/views/control/setting/Dddd.js | 34 ++ 5 files changed, 184 insertions(+), 234 deletions(-) create mode 100644 src/views/control/setting/Dddd.js diff --git a/src/modules/control/map/actions/controlMapActions.ts b/src/modules/control/map/actions/controlMapActions.ts index ec65173..3d10899 100644 --- a/src/modules/control/map/actions/controlMapActions.ts +++ b/src/modules/control/map/actions/controlMapActions.ts @@ -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 }); diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index cbefdd2..fbd5ff8 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -92,6 +92,11 @@ const controlReducerReducer = (state = initialState, action) => { ...state, drawCheck: action.value }; + case 'LAANC_MODE': + return { + ...state, + isLaanc: action.value + }; } }; diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index 56f0b6a..136d8b9 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -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 ; } else return ; } - } - - const handlerDrawType = val => { - dispatch(ctrlDrawTypeChangeAction(val)); }; - const ThemeToggler = () => { - if (skin === 'dark') { - return setSkin('light')} />; - } else { - return setSkin('dark')} />; - } + const handlerLaanc = () => { + dispatch(laancModeAction(!isLaanc)); }; - const hadlerLaanc = () => { - if (isLaanc) mapControl.isLaanc = false; - else if (!isLaanc) mapControl.isLaanc = true; - }; return ( <> - {isLaanc ? ( - <> - {' '} - -
-

- - PAL -

+ -
    -
  • - -
    • - {/*
  • - -
    • */} - {/*
  • - -
    • */} -
  • - -
    • -
  • - - - -
    • -
-
    - {/*
  • - -
    • -
  • - -
    • -
  • - -
    • */} -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • - {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} -
-
- - ) : ( - <> - -
-

- - PAL -

+
+

+ + PAL +

+ {/* 사이드바 start */} + {isLaanc ? null : } -
    - {/*
  • - -
    • */} - {/*
  • - -
    • */} -
-
    - {/*
  • - +
      +
    • +
    • - +
    • - -
      • */} - -
    • - -
      • -
    • - -
      • - {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} -
    -
- - )} - + + +
  • + +
    • + {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */} + + {/* 사이드바 end */} +
    {
    - {/*
    - -
    - 화재경보 -
    -
    -
    - handlerDrawType('CIRCLE')}> - 화재구역설정 - -
    -
    - handlerDrawType('RESET')}>초기화 -
    -
    -     -
    */}
    @@ -411,11 +278,8 @@ const ControlMain = () => {
    - 승인요청 바로가기 + 승인요청 바로가기
    - {/*
    - handlerDrawType('RESET')}>초기화 -
    */}
    @@ -445,28 +309,38 @@ const ControlMain = () => {
    )} - {openSetting ? ( + {isLaanc ? (
    -
    - +
    ) : ( -
    - -
    -
    + <> + {openSetting ? ( +
    + +
    + +
    +
    + ) : ( +
    + +
    +
    + )} + )} ); diff --git a/src/views/control/menu/ControlMenuLeft.js b/src/views/control/menu/ControlMenuLeft.js index eceb123..e1bb12d 100644 --- a/src/views/control/menu/ControlMenuLeft.js +++ b/src/views/control/menu/ControlMenuLeft.js @@ -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 setSkin('light')} />; + } else { + return setSkin('dark')} />; + } + }; + + return ( +
      +
    • + +
      • + +
    • + +
      • +
    • + + + +
      • +
    + ); } -export default ControlMenuLeft(); \ No newline at end of file +export default ControlMenuLeft; diff --git a/src/views/control/setting/Dddd.js b/src/views/control/setting/Dddd.js new file mode 100644 index 0000000..f7cda5d --- /dev/null +++ b/src/views/control/setting/Dddd.js @@ -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 ( +
    +
    +
    +

    지도유형

    + {/* */} +
    +
    +
    + ); +}; +export default Dddd;