laanc 페이지 작업

1 year ago · a33ec356b0
6 changed files with 303 additions and 245 deletions
--- 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')),
--- 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 <CloudRain size={20} />;
+      } else if (skyDetail == 3) {
+        return <CloudSnow size={20} />;
+      } else if (wheatherDetail[5].fcstValue == 1) {
+        return <Sun size={20} />;
+      } else return <Cloud size={20} />;
+    }
+  }

-  const handlerLaanc = () => {
-    dispatch(laancModeAction(!isLaanc));
+  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')} />;
+    }
  };

  return (
@ -139,10 +178,48 @@ const ControlMain = () => {
          <img src={logo} width='80' />
          <span>PAL</span>
        </h1>
-        {/* 사이드바 start */}
-        {isLaanc ? null : <ControlMenuLeft alarm={alarm} openMenu={openMenu} />}

+        <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>
@ -161,7 +238,6 @@ const ControlMain = () => {
          </li>
          {/* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */}
        </ul>
-        {/* 사이드바 end */}
      </div>
      <div
        className={
@ -170,16 +246,119 @@ const ControlMain = () => {
            : 'main-data main-data-test'
        }
      >
-        {/* top components start */}
-        {isLaanc ? null : (
-          <ControlTopPackage
-            dronCnt={droneCount}
-            uamCnt={uamCount}
-            flightCnt={controlGpCountFlight ? controlGpCountFlight.length : 0}
-            handlerLaanc={handlerLaanc}
-          />
-        )}
-        {/* top components end */}
+        <div className='main-data-box wather-data'>
+          <Card>
+            <div className='data-box-header'>
+              <span className='box-ti'>
+                {!isClickObject
+                  ? '김포공항'
+                  : !controlDetail?.stAreaNm
+                  ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
+                  : controlDetail?.stAreaNm}
+              </span>
+              <span className=''>&nbsp;{weathericon()}</span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list'>
+                <span>기온</span>
+                <span>
+                  {!isClickObject
+                    ? controlWheather?.items.item[12].fcstValue
+                    : controlDetail?.items.item[12].fcstValue}
+                  ℃
+                </span>
+              </div>
+              <div className='data-list'>
+                <span>풍향</span>
+                <span>
+                  <Navigation2
+                    className='navigation-icon'
+                    style={{
+                      transform: !isClickObject
+                        ? `rotate(${controlWheather?.items.item[3].fcstValue}deg)`
+                        : `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
+                    }}
+                  />
+                </span>
+              </div>
+              <div className='data-list'>
+                <span>풍속</span>
+                <span>
+                  {!isClickObject
+                    ? controlWheather?.items.item[4].fcstValue
+                    : controlDetail?.items.item[4].fcstValue}{' '}
+                  m/s
+                </span>
+              </div>
+            </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'>
+                <span>드론</span>
+                {/* <span>{controlGpList ? controlGpList.length : 0}</span> */}
+                {/* <span>
+                  {controlGpCountDrone?.length > 0
+                    ? controlGpCountDrone?.length
+                    : 0}
+                </span> */}
+                <span>{droneCount}</span>
+              </div>
+              <div className='data-list'>
+                <span>UAM</span>
+                <span>{uamCount}</span>
+              </div>
+              <div className='data-list'>
+                <span>항공기</span>
+                {/* <span>2147대</span> */}
+                <span>
+                  {controlGpCountFlight?.length > 0
+                    ? controlGpCountFlight?.length
+                    : 0}
+                </span>
+              </div>
+            </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'>
+              <span className='box-ti'>LAANC 시스템</span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list' style={{ cursor: 'pointer' }}>
+                <span onClick={() => history.push('laanc')}>
+                  승인요청 바로가기
+                </span>
+              </div>
+              {/* <div className='data-list' style={{ cursor: 'pointer' }}>
+                <span onClick={() => handlerDrawType('RESET')}>초기화</span>
+              </div> */}
+            </div>
+          </Card>
+        </div>
      </div>
      {oepnReportList ? (
        <ControlReportList
@ -206,38 +385,28 @@ const ControlMain = () => {
        <div />
      )}

-      {isLaanc ? (
+      {openSetting ? (
        <div className='right-menu active'>
-          <div className='right-layer active' style={{ width: '567.58px' }}>
-            <FlightPlan handlerLaanc={handlerLaanc} />
+          <button
+            className='right-layer-btn'
+            onClick={() => setOpenSetting(false)}
+          >
+            <Map size={18} />
+          </button>
+          <div className='right-layer active'>
+            <ControlSetting />
          </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>
-          )}
-        </>
+        <div className='right-menu'>
+          <button
+            className='right-layer-btn'
+            onClick={() => setOpenSetting(true)}
+          >
+            <Map size={18} />
+          </button>
+          <div className='right-layer'></div>
+        </div>
      )}
    </>
  );
--- a/src/views/control/menu/ControlMenuLeft.js
+++ b/src/views/control/menu/ControlMenuLeft.js
@ -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 <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;
--- a/src/views/control/menu/ControlTopPackage.js
+++ b/src/views/control/menu/ControlTopPackage.js
@ -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 <CloudRain size={20} />;
-      } else if (skyDetail == 3) {
-        return <CloudSnow size={20} />;
-      } else if (wheatherDetail[5].fcstValue == 1) {
-        return <Sun size={20} />;
-      } else return <Cloud size={20} />;
-    }
-  };
-
-  return (
-    <>
-      <div className='main-data-box wather-data'>
-        <Card>
-          <div className='data-box-header'>
-            <span className='box-ti'>
-              {!isClickObject
-                ? '김포공항'
-                : !controlDetail?.stAreaNm
-                ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
-                : controlDetail?.stAreaNm}
-            </span>
-            <span className=''>&nbsp;{weatherIcon()}</span>
-          </div>
-          <div className='data-list-box'>
-            <div className='data-list'>
-              <span>기온</span>
-              <span>
-                {!isClickObject
-                  ? controlWheather?.items.item[12].fcstValue
-                  : controlDetail?.items.item[12].fcstValue}
-                ℃
-              </span>
-            </div>
-            <div className='data-list'>
-              <span>풍향</span>
-              <span>
-                <Navigation2
-                  className='navigation-icon'
-                  style={{
-                    transform: !isClickObject
-                      ? `rotate(${controlWheather?.items.item[3].fcstValue}deg)`
-                      : `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
-                  }}
-                />
-              </span>
-            </div>
-            <div className='data-list'>
-              <span>풍속</span>
-              <span>
-                {!isClickObject
-                  ? controlWheather?.items.item[4].fcstValue
-                  : controlDetail?.items.item[4].fcstValue}{' '}
-                m/s
-              </span>
-            </div>
-          </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'>
-              <span>드론</span>
-              <span>{dronCnt}</span>
-            </div>
-            <div className='data-list'>
-              <span>UAM</span>
-              <span>{uamCnt}</span>
-            </div>
-            <div className='data-list'>
-              <span>항공기</span>
-              <span>{flightCnt}</span>
-            </div>
-          </div>
-        </Card>
-      </div>
-      <div className='main-data-box flight-data'>
-        <Card>
-          <div className='data-box-header'>
-            <span className='box-ti'>LAANC 시스템</span>
-          </div>
-          <div className='data-list-box'>
-            <div className='data-list' style={{ cursor: 'pointer' }}>
-              <span onClick={handlerLaanc}>승인요청 바로가기</span>
-            </div>
-          </div>
-        </Card>
-      </div>
-    </>
-  );
-}
-
-export default ControlTopPackage;
--- a/src/views/laanc/LeftMenu.js
+++ 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 (
+    <>
+      <div className='left-menu'>
+        <h1 className='logo'>
+          <img src={logo} width='80' />
+          <span>PAL</span>
+        </h1>
+      </div>
+      <div className='right-menu active'>
+        <button className='right-layer-btn' onClick={() => {}}></button>
+        <div className='right-layer active'>
+          <div>asdsad</div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default LeftMenu;
--- a/src/views/laanc/index.js
+++ b/src/views/laanc/index.js
@ -0,0 +1,16 @@
+import { MapControl } from '../../components/map/MapControl';
+import LeftMenu from './LeftMenu';
+
+const LaancView = () => {
+  return (
+    <div className='pal-container'>
+      <div className='map'>
+        <MapControl />
+      </div>
+
+      <LeftMenu />
+    </div>
+  );
+};
+
+export default LaancView;