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

예약 페이지 생성

master
김장현 11 months ago
parent
79deb90758
commit
7a50181d88
9 changed files with 201 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package-lock.json
  2. 3
      src/@core/layouts/components/menu/vertical-menu/index.js
  3. 12
      src/@core/layouts/components/navbar/NavbarUser.js
  4. 13
      src/navigation/reservation/index.js
  5. 10
      src/router/routes/RouteReservation.js
  6. 2
      src/router/routes/index.js
  7. 272
      src/views/control/setting/ControlReservation.js
  8. 15
      src/views/control/setting/ControlSetting.js
  9. 6
      src/views/reservation/ReservationView.js

2
package-lock.json generated
Unescape View File

@ -12784,7 +12784,7 @@
"load-script": { "load-script": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
"integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
}, },
"loader-runner": { "loader-runner": {
"version": "2.4.0", "version": "2.4.0",

3
src/@core/layouts/components/menu/vertical-menu/index.js
Unescape View File

@ -10,6 +10,7 @@ import statics from '@src/navigation/statics';
import system from '@src/navigation/system'; import system from '@src/navigation/system';
import analysis from '@src/navigation/analysis'; import analysis from '@src/navigation/analysis';
import flightPlan from '@src/navigation/flightPlan'; import flightPlan from '@src/navigation/flightPlan';
import reservation from '@src/navigation/reservation';
// ** Third Party Components // ** Third Party Components
import classnames from 'classnames'; import classnames from 'classnames';
@ -43,6 +44,8 @@ const Sidebar = props => {
return analysis; return analysis;
case 'flightPlan': case 'flightPlan':
return flightPlan; return flightPlan;
case 'reservation':
return reservation;
} }
}; };

12
src/@core/layouts/components/navbar/NavbarUser.js
Unescape View File

@ -130,6 +130,18 @@ const NavbarUser = props => {
날씨 정보 날씨 정보
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem>
<NavLink
onClick={e => handlerTopMenu('reservation')}
active={topMenuCd === 'reservation'}
// active={active === '2'}
// onClick={() => {
// toggle('2')
// }}
>
도심항공교통(UAM) 예약
</NavLink>
</NavItem>
</Nav> </Nav>
{/* <div className='bookmark-wrapper d-flex align-items-center'> {/* <div className='bookmark-wrapper d-flex align-items-center'>
<NavItem className='d-none d-lg-block'> <NavItem className='d-none d-lg-block'>

13
src/navigation/reservation/index.js
Unescape View File

@ -0,0 +1,13 @@
export default [
{
id: 'reservation_001',
title: '도심항공교통(UAM) 예약',
navLink: '#'
},
{
id: 'reservation_001_01',
type: 'item',
title: '도심항공교통(UAM) 예약',
navLink: '/reservation'
}
];

10
src/router/routes/RouteReservation.js
Unescape View File

@ -0,0 +1,10 @@
import { lazy } from 'react';
const RouteReservation = [
{
path: '/reservation',
component: lazy(() => import('../../views/reservation/ReservationView'))
}
];
export default RouteReservation;

2
src/router/routes/index.js
Unescape View File

@ -5,6 +5,7 @@ import RouteBasis from './RouteBasis';
import RouteDashboard from './RouteDashboard'; import RouteDashboard from './RouteDashboard';
import RouteSystem from './RouteSystem'; import RouteSystem from './RouteSystem';
import RouteWeather from './RouteWeather'; import RouteWeather from './RouteWeather';
import RouteReservation from './RouteReservation';
// ** Document title // ** Document title
const TemplateTitle = '%s - Dron Control System'; const TemplateTitle = '%s - Dron Control System';
@ -20,6 +21,7 @@ const Routes = [
...RouteBasis, ...RouteBasis,
...RouteSystem, ...RouteSystem,
...RouteWeather, ...RouteWeather,
...RouteReservation,
{ {
path: '/home', path: '/home',
component: lazy(() => import('../../views/Home')) component: lazy(() => import('../../views/Home'))

272
src/views/control/setting/ControlReservation.js
Unescape View File

@ -34,152 +34,166 @@ export default function ControlReservation({ modal, handler }) {
return stepNumber === currentStep ? 'active-step' : 'inactive-step'; return stepNumber === currentStep ? 'active-step' : 'inactive-step';
} }
return ( return (
<div <div className='vertically-centered-modal'>
className='vertically-centered-modal' {/* <Modal
>
<Modal
isOpen={modal} isOpen={modal}
toggle={handler} toggle={handler}
className='modal-dialog-centered modal-lg modal-uam-reservation' className='modal-dialog-centered modal-lg modal-uam-reservation'
> > */}
<ModalHeader {/* <ModalHeader
toggle={handler} toggle={handler}
> > */}
{search ? ( {search ? (
reserveStep !== 4 ? ( reserveStep !== 4 ? (
<div className='uam-reservation-header'> <div className='uam-reservation-header'>
<h5>도심항공교통(UAM) 예약</h5> <h5>도심항공교통(UAM) 예약</h5>
<div> <div>
<ul className='step'>
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
<li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
<li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul>
</div>
</div>
) : (
<div className='uam-reservation-header'>
<h4>도심항공교통(UAM) 예약</h4>
<div>
결제완료
</div>
</div>
)
) : (
<div className='uam-reservation-header'>
<h5>도심항공교통(UAM) 예약</h5>
<ul className='step'> <ul className='step'>
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li> <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li> <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
<li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li> <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
<li className={getStepColorClass(4, step)}>➃ 결제</li> <li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul> </ul>
</div> </div>
)} </div>
</ModalHeader> ) : (
<ModalBody> <div className='uam-reservation-header'>
{!search ? ( <h4>도심항공교통(UAM) 예약</h4>
<div>결제완료</div>
</div>
)
) : (
<div className='uam-reservation-header'>
<h5>도심항공교통(UAM) 예약</h5>
<ul className='step'>
<li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
<li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
<li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
<li className={getStepColorClass(4, step)}>➃ 결제</li>
</ul>
</div>
)}
{/* </ModalHeader> */}
{/* <ModalBody> */}
{!search ? (
<div>
<div>
<Nav justified pills>
<NavItem>
<NavLink
active={activeTab === 1}
onClick={() => setActiveTab(1)}
>
<span>왕복</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={activeTab === 2}
onClick={() => setActiveTab(2)}
>
<span>편도</span>
</NavLink>
</NavItem>
</Nav>
</div>
<div className='uam-reservation-tab-list'>
<div
className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(1);
}}
>
출발지
</div>
<div
className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(2);
}}
>
도착지
</div>
<div
className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(3);
}}
>
탑승일
</div>
<div
className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
onClick={() => {
setAirTraficCheck(4);
}}
>
탑승객
</div>
<div
className={`list finish ${isChoise ? 'active' : ''}`}
onClick={() => {
setSearch(true);
setStep(2);
}}
>
항공교통 조회
</div>
</div>
<>
{airTraficCheck === 1 && <Step1 />}
{airTraficCheck === 2 && <Step2 />}
{airTraficCheck === 3 && <Step3 />}
{airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
</>
</div>
) : (
<>
{reserveStep === 1 && <ReserveStep1 />}
{reserveStep === 2 && <ReserveStep2 />}
{reserveStep === 3 && <ReserveStep3 />}
{reserveStep === 4 && <ReserveStep4 />}
{reserveStep !== 4 ? (
<div> <div>
<div> <div>
<Nav justified pills> <button
<NavItem> onClick={() => {
<NavLink if (reserveStep === 1) {
active={activeTab === 1} setIsChoise(false);
onClick={() => setActiveTab(1)} setSearch(false);
> setAirTraficCheck(1);
<span> } else {
왕복 setReserveStep(reserveStep - 1);
</span> setStep(step - 1);
</NavLink> }
</NavItem> }}
<NavItem> >
<NavLink 취소
active={activeTab === 2} </button>
onClick={() => setActiveTab(2)}
>
<span>
편도
</span>
</NavLink>
</NavItem>
</Nav>
</div> </div>
<div className='uam-reservation-tab-list'> <div>
<div className={`list ${airTraficCheck === 1 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(1);}}> <button
출발지 onClick={() => {
</div> setReserveStep(reserveStep + 1);
<div className={`list ${airTraficCheck === 2 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(2);}}> setStep(step + 1);
도착지 }}
</div> >
<div className={`list ${airTraficCheck === 3 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(3);}}> {reserveStep === 3 ? '결제하기' : '다음'}
탑승일 </button>
</div>
<div className={`list ${airTraficCheck === 4 ? 'active' : ''}`} onClick={() => {setAirTraficCheck(4);}}>
탑승객
</div>
<div className={`list finish ${isChoise ? 'active' : ''}`} onClick={() => {setSearch(true); setStep(2);}}>
항공교통 조회
</div>
</div> </div>
<>
{airTraficCheck === 1 && <Step1 />}
{airTraficCheck === 2 && <Step2 />}
{airTraficCheck === 3 && <Step3 />}
{airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
</>
</div> </div>
) : ( ) : (
<> <div>
{reserveStep === 1 && <ReserveStep1 />} <div>
{reserveStep === 2 && <ReserveStep2 />} <button onClick={handler}>확인</button>
{reserveStep === 3 && <ReserveStep3 />} </div>
{reserveStep === 4 && <ReserveStep4 />} </div>
{reserveStep !== 4 ? (
<div>
<div>
<button
onClick={() => {
if (reserveStep === 1) {
setIsChoise(false);
setSearch(false);
setAirTraficCheck(1);
} else {
setReserveStep(reserveStep - 1);
setStep(step - 1);
}
}}
>
취소
</button>
</div>
<div>
<button
onClick={() => {
setReserveStep(reserveStep + 1);
setStep(step + 1);
}}
>
{reserveStep === 3 ? '결제하기' : '다음'}
</button>
</div>
</div>
) : (
<div>
<div>
<button
onClick={handler}
>
확인
</button>
</div>
</div>
)}
</>
)} )}
</ModalBody> </>
</Modal> )}
{/* </ModalBody> */}
{/* </Modal> */}
</div> </div>
); );
} }

15
src/views/control/setting/ControlSetting.js
Unescape View File

@ -4,6 +4,7 @@ import { BiBuildings, BiGridAlt } from 'react-icons/bi';
import { CgTrees } from 'react-icons/cg'; import { CgTrees } from 'react-icons/cg';
import { VscRadioTower } from 'react-icons/vsc'; import { VscRadioTower } from 'react-icons/vsc';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { import {
Button, Button,
InputGroup, InputGroup,
@ -24,6 +25,7 @@ import ControlFsm from './ControlFsm';
const ControlSetting = props => { const ControlSetting = props => {
const [modal, setModal] = useState(false); const [modal, setModal] = useState(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const history = useHistory();
const mapControl = useSelector(state => state.controlMapReducer); const mapControl = useSelector(state => state.controlMapReducer);
@ -39,7 +41,7 @@ const ControlSetting = props => {
// setModal(!modal); // setModal(!modal);
// }; // };
const handlerModal = (modalName) => { const handlerModal = modalName => {
setModal(modalName); setModal(modalName);
}; };
@ -188,8 +190,13 @@ const ControlSetting = props => {
<div className='layer-content-box'> <div className='layer-content-box'>
<div className='map-btn'> <div className='map-btn'>
<ButtonGroup> <ButtonGroup>
<Button color='primary' onClick={() => handlerModal('reservation')}> <Button
도심항공교통(UAM) 예약 바로가기 color='primary'
onClick={() => {
history.push('');
}}
>
도심항공교통(UAM) 예약 바로가기
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
@ -203,7 +210,7 @@ const ControlSetting = props => {
<div className='map-btn'> <div className='map-btn'>
<ButtonGroup> <ButtonGroup>
<Button color='primary' onClick={() => handlerModal('fsm')}> <Button color='primary' onClick={() => handlerModal('fsm')}>
FSM 비행계획서 작성 바로가기 FSM 비행계획서 작성 바로가기
</Button> </Button>
</ButtonGroup> </ButtonGroup>
</div> </div>

6
src/views/reservation/ReservationView.js
Unescape View File

@ -0,0 +1,6 @@
import ControlReservation from '../control/setting/ControlReservation';
import '../../assets/css/custom.css';
export default function ReservationView() {
return <ControlReservation />;
}
Write Preview
Loading…
Cancel
Save