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

vertiport 페이지 수정

master
sanguu516 5 months ago
parent
ca4a73b992
commit
35d8df9ddc
3 changed files with 231 additions and 133 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/components/laanc/map/LaancAreaMap.js
  2. 249
      src/components/vertiport/VertiportRightMenu.js
  3. 112
      src/views/vertiport/VertiportView.js

3
src/components/laanc/map/LaancAreaMap.js
Unescape View File

@ -244,7 +244,8 @@ export default function LaancAreaMap({
const onMouseMove = e => {
if (isDrag) {
const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current;
console.log('e.pageX>', e.pageX);
console.log('startX>', startX);
scrollRef.current.scrollLeft = startX - e.pageX;
if (scrollLeft === 0) {

249
src/components/vertiport/VertiportRightMenu.js
Unescape View File

@ -1,112 +1,123 @@
import { Map } from 'react-feather';
import { PiAirTrafficControlBold } from "react-icons/pi";
import { PiAirTrafficControlBold } from 'react-icons/pi';
import { useState } from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, ButtonGroup, Button } from 'reactstrap'
import {
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
ButtonGroup,
Button
} from 'reactstrap';
export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
const [active, setActive] = useState('1')
const [active, setActive] = useState('1');
const toggle = tab => {
if (active !== tab) {
setActive(tab)
setActive(tab);
}
}
};
return (
<>
{openSetting ? (
<div className='right-menu active'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(false)}
>
<PiAirTrafficControlBold size={22} />
</button>
<div className='right-layer active bg-line'>
<div className='tab-btn'>
<ButtonGroup>
<Button
active={active === '1'}
onClick={() => {
toggle('1')
}}
outline
color='primary'
>
스케줄 현황
</Button>
<Button
active={active === '2'}
onClick={() => {
toggle('2')
}}
outline
color='primary'
>
기상
</Button>
<Button
active={active === '3'}
onClick={() => {
toggle('3')
}}
outline
color='primary'
>
NOTAM
</Button>
</ButtonGroup>
</div>
<div className='vertiport-tab'>
<div className={`right-menu ${openSetting ? 'active' : ''}`}>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(!openSetting)}
>
<PiAirTrafficControlBold size={22} />
</button>
<div className={`right-layer bg-line ${openSetting ? 'active' : ''}`}>
<div className='tab-btn'>
<ButtonGroup>
<Button
active={active === '1'}
onClick={() => {
toggle('1');
}}
outline
color='primary'
>
스케줄 현황
</Button>
<Button
active={active === '2'}
onClick={() => {
toggle('2');
}}
outline
color='primary'
>
기상
</Button>
<Button
active={active === '3'}
onClick={() => {
toggle('3');
}}
outline
color='primary'
>
NOTAM
</Button>
</ButtonGroup>
</div>
<div className='vertiport-tab'>
<TabContent className='py-50' activeTab={active}>
<TabPane tabId='1'>
<div className='layer-content'>
<div class="layer-ti"><h4>출발 스케쥴 목록</h4></div>
<div className='vertiport-table'>
<table className='table-st'>
<thead>
<tr>
<th>편명</th>
<th>출발시간</th>
<th>목적지</th>
<th>게이트</th>
<th>버티포트</th>
</tr>
</thead>
<tbody>
<tr>
<td>PAL001</td>
<td>09:00</td>
<td>잠실</td>
<td>G1</td>
<td>F1</td>
</tr>
<tr>
<td>PAL002</td>
<td>09:10</td>
<td>코엑스</td>
<td>G2</td>
<td>F2</td>
</tr>
<tr>
<td>PAL003</td>
<td>09:20</td>
<td>아라뱃길</td>
<td>G3</td>
<td>F1</td>
</tr>
<tr>
<td>PAL004</td>
<td>09:30</td>
<td>잠실</td>
<td>G4</td>
<td>F2</td>
</tr>
</tbody>
</table>
</div>
<div class='layer-ti'>
<h4>출발 스케쥴 목록</h4>
</div>
<div className='vertiport-table'>
<table className='table-st'>
<thead>
<tr>
<th>편명</th>
<th>출발시간</th>
<th>목적지</th>
<th>게이트</th>
<th>버티포트</th>
</tr>
</thead>
<tbody>
<tr>
<td>PAL001</td>
<td>09:00</td>
<td>잠실</td>
<td>G1</td>
<td>F1</td>
</tr>
<tr>
<td>PAL002</td>
<td>09:10</td>
<td>코엑스</td>
<td>G2</td>
<td>F2</td>
</tr>
<tr>
<td>PAL003</td>
<td>09:20</td>
<td>아라뱃길</td>
<td>G3</td>
<td>F1</td>
</tr>
<tr>
<td>PAL004</td>
<td>09:30</td>
<td>잠실</td>
<td>G4</td>
<td>F2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className='layer-content'>
<div class="layer-ti"><h4>도착 스케쥴 목록</h4></div>
<div class='layer-ti'>
<h4>도착 스케쥴 목록</h4>
</div>
<div className='vertiport-table'>
<table className='table-st'>
<thead>
@ -152,7 +163,9 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
</div>
</div>
<div className='layer-content'>
<div class="layer-ti"><h4>착륙 대기 목록</h4></div>
<div class='layer-ti'>
<h4>착륙 대기 목록</h4>
</div>
<div className='vertiport-table'>
<table className='table-st'>
<thead>
@ -200,44 +213,40 @@ export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
</TabPane>
<TabPane tabId='2'>
<p>
Bear claw jelly beans wafer pastry jelly beans candy macaroon biscuit topping. Sesame snaps lemon drops
donut gingerbread dessert cotton candy wafer croissant jelly beans. Sweet roll halvah gingerbread bonbon
apple pie gummies chocolate bar pastry gummi bears.
Bear claw jelly beans wafer pastry jelly beans candy macaroon
biscuit topping. Sesame snaps lemon drops donut gingerbread
dessert cotton candy wafer croissant jelly beans. Sweet roll
halvah gingerbread bonbon apple pie gummies chocolate bar
pastry gummi bears.
</p>
<p>
Croissant danish chocolate bar pie muffin. Gummi bears marshmallow chocolate bar bear claw. Fruitcake halvah
chupa chups dragée carrot cake cookie. Carrot cake oat cake cake chocolate bar cheesecake. Wafer gingerbread
sweet roll candy chocolate bar gingerbread.
Croissant danish chocolate bar pie muffin. Gummi bears
marshmallow chocolate bar bear claw. Fruitcake halvah chupa
chups dragée carrot cake cookie. Carrot cake oat cake cake
chocolate bar cheesecake. Wafer gingerbread sweet roll candy
chocolate bar gingerbread.
</p>
</TabPane>
<TabPane tabId='3'>
<p>
Croissant jelly tootsie roll candy canes. Donut sugar plum jujubes sweet roll chocolate cake wafer. Tart
caramels jujubes. Dragée tart oat cake. Fruitcake cheesecake danish. Danish topping candy jujubes. Candy
canes candy canes lemon drops caramels tiramisu chocolate bar pie.
Croissant jelly tootsie roll candy canes. Donut sugar plum
jujubes sweet roll chocolate cake wafer. Tart caramels
jujubes. Dragée tart oat cake. Fruitcake cheesecake danish.
Danish topping candy jujubes. Candy canes candy canes lemon
drops caramels tiramisu chocolate bar pie.
</p>
<p>
Gummi bears tootsie roll cake wafer. Gummies powder apple pie bear claw. Caramels bear claw fruitcake
topping lemon drops. Carrot cake macaroon ice cream liquorice donut soufflé. Gummi bears carrot cake toffee
bonbon gingerbread lemon drops chocolate cake.
Gummi bears tootsie roll cake wafer. Gummies powder apple pie
bear claw. Caramels bear claw fruitcake topping lemon drops.
Carrot cake macaroon ice cream liquorice donut soufflé. Gummi
bears carrot cake toffee bonbon gingerbread lemon drops
chocolate cake.
</p>
</TabPane>
</TabContent>
</div>
</div>
</div>
) : (
<div className='right-menu'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(true)}
>
<PiAirTrafficControlBold size={22} />
</button>
<div className='right-layer'>
</div>
</div>
)}
</div>
</>
);
};

112
src/views/vertiport/VertiportView.js
Unescape View File

@ -2,7 +2,7 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss';
import '../../assets/css/custom.css';
import { useState } from 'react';
import { useState, useRef } from 'react';
import { Map } from 'react-feather';
import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
import { createPortal } from 'react-dom';
@ -12,11 +12,78 @@ import { VertiportLeftMenu } from '../../components/vertiport/VertiportLeftMenu'
import { Button } from 'reactstrap';
export default function VertiportView() {
// 오른쪽 사이드 메뉴 표출 여부
const [openSetting, setOpenSetting] = useState(true);
const [openSetting, setOpenSetting] = useState(false);
const [oepnReportList, setOpenReportList] = useState(false);
// 좌표 정보 마우스 드래그
const scrollRef = useRef(null);
const [isDrag, setIsDrag] = useState(false);
const [startX, setStartX] = useState();
const titleName = '지상관제(버티포트) 현황';
/**
* [좌표 정보] 마우스 다운 시 스크롤 준비
* @param {Event} e 이벤트
*/
const onMouseDown = e => {
setIsDrag(true);
setStartX(e.pageX + scrollRef.current.scrollLeft);
};
/**
* [좌표 정보] 마우스 드래그로 스크롤 이동
* @param {Event} e 이벤트
*/
const onMouseMove = e => {
if (isDrag) {
const { scrollWidth, clientWidth, scrollLeft } = scrollRef.current;
scrollRef.current.scrollLeft = startX - e.pageX;
if (scrollLeft === 0) {
setStartX(e.pageX);
} else if (scrollWidth <= clientWidth + scrollLeft) {
setStartX(e.pageX + scrollLeft);
}
}
};
/**
* [좌표 정보] onMouseMove 이벤트 빈도 조절
* @param {*} func 적용할 함수
* @param {number} ms 딜레이 시간
* @returns
*/
const throttle = (func, ms) => {
let throttled = false;
return (...args) => {
if (!throttled) {
throttled = true;
setTimeout(() => {
func(...args);
throttled = false;
}, ms);
}
};
};
/**
* [좌표 정보] 마우스 업 시 스크롤 멈춤
* @param {Event} e 이벤트
*/
const onMouseUp = e => {
e.preventDefault();
setIsDrag(false);
};
/**
* [좌표 정보] 마우스 벗어날 시 스크롤 멈춤
*/
const onMouseLeave = () => {
setIsDrag(false);
};
return (
<>
<CustomMainLayout title={titleName}>
@ -29,8 +96,12 @@ export default function VertiportView() {
</Button>
<div className='vertiport-map'>
<div>
<div><span className='fato'>F1</span></div>
<div><span className='fato'>F2</span></div>
<div>
<span className='fato'>F1</span>
</div>
<div>
<span className='fato'>F2</span>
</div>
</div>
<div className='gate-map'>
<div className='gate-wrap'>
@ -62,15 +133,34 @@ export default function VertiportView() {
</div>
</div>
<div>
<div><span className='fato'>H1</span></div>
<div><span className='fato'>H2</span></div>
<div><span className='fato'>H3</span></div>
<div>
<span className='fato'>H1</span>
</div>
<div>
<span className='fato'>H2</span>
</div>
<div>
<span className='fato'>H3</span>
</div>
</div>
</div>
<div className='vertiport-hanger'>
<h3 className='ti-h3'>Hanger 운영현황</h3>
<div className='vertiport-table'>
<div
className='vertiport-table'
ref={scrollRef}
onMouseDown={onMouseDown}
onMouseMove={isDrag ? throttle(onMouseMove, 50) : null}
onMouseUp={onMouseUp}
onMouseLeave={onMouseLeave}
style={{
cursor:
scrollRef?.current?.scrollWidth >
scrollRef?.current?.clientWidth
? 'pointer'
: 'default'
}}
>
<h3 className='ti-h3'>Hanger 운영현황</h3>
<table className='table-st'>
<thead>
<tr>
@ -463,12 +553,10 @@ export default function VertiportView() {
setOpenReportList={setOpenReportList}
oepnReportList={oepnReportList}
/>,
document.getElementById('app-content')
)}
</>
)}
{createPortal(
<VertiportRightMenu
openSetting={openSetting}

Write Preview
Loading…
Cancel
Save