김장현
1 year ago
6 changed files with 303 additions and 245 deletions
@ -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; |
|
@ -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=''> {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; |
|
@ -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; |
@ -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; |
Loading…
Reference in new issue