Compare commits
92 Commits
Author | SHA1 | Date |
---|---|---|
김장현 | 12610e03f8 | 2 hours ago |
kyw546 | e4efb940ac | 2 hours ago |
김지은 | a4081ead4a | 21 hours ago |
김지은 | 6b93fe2466 | 21 hours ago |
김지은 | 729845ad83 | 21 hours ago |
김장현 | f8beb8ed98 | 21 hours ago |
김지은 | ebfe6e9fcb | 23 hours ago |
이준희 | f5cc90fea7 | 2 months ago |
junh_eee(이준희) | 9b73b58e5b | 2 months ago |
이준희 | 6ba21bf69f | 2 months ago |
김지은 | e9fdf3e9ea | 10 months ago |
김지은 | f161ce7f7c | 10 months ago |
김지은 | 8e246de085 | 10 months ago |
김지은 | 72638e9f5a | 10 months ago |
김지은 | ecd66d0b8e | 10 months ago |
김지은 | b7e3e7a322 | 10 months ago |
김지은 | 993c06de17 | 10 months ago |
김지은 | c3c6ebe3ca | 10 months ago |
김지은 | af942b57c2 | 11 months ago |
김지은 | c9f9d651b0 | 11 months ago |
김지은 | 4fdfa2f665 | 11 months ago |
김지은 | 294d9ed93b | 11 months ago |
이준희 | 6578cb5f8d | 11 months ago |
이준희 | eb49879d45 | 11 months ago |
이준희 | 95f4be94a4 | 11 months ago |
이준희 | 1f04c6d59d | 11 months ago |
이준희 | 2bbf1294f9 | 11 months ago |
hhjk00 | 45cf2bfd12 | 11 months ago |
hhjk00 | b6bed9cfc4 | 11 months ago |
이준희 | 8fb4f11851 | 11 months ago |
김장현 | 7a50181d88 | 11 months ago |
이준희 | 79deb90758 | 11 months ago |
이준희 | 3629520881 | 11 months ago |
kyw546 | a93275dde0 | 11 months ago |
kyw546 | fc99f04e27 | 11 months ago |
김지은 | 259a65b420 | 11 months ago |
김지은 | 1b2f05464e | 11 months ago |
김지은 | 9152deff65 | 11 months ago |
김지은 | 9085249189 | 11 months ago |
김지은 | 5bfa8013c7 | 11 months ago |
junh_eee(이준희) | e77df057ed | 11 months ago |
kyw546 | 74f7a91bbe | 11 months ago |
kyw546 | 074b16db9f | 11 months ago |
kyw546 | 7a9470040d | 11 months ago |
kyw546 | 12e2da75d3 | 11 months ago |
kyw546 | f8a30eb1dc | 11 months ago |
kyw546 | 5ae982130e | 11 months ago |
kyw546 | c01e0894a2 | 11 months ago |
kyw546 | 66ab0ba594 | 11 months ago |
김장현 | 4812519fcb | 11 months ago |
김장현 | a802aed33d | 11 months ago |
hhjk00 | 24182b65a8 | 11 months ago |
hhjk00 | 9469d774bc | 11 months ago |
junh_eee(이준희) | 0caccde9fd | 11 months ago |
hhjk00 | 9d358d7361 | 11 months ago |
hhjk00 | b9d1f9eba8 | 11 months ago |
hhjk00 | 87997130e2 | 11 months ago |
hhjk00 | 2f2d30c524 | 11 months ago |
hhjk00 | ec1f3de597 | 1 year ago |
hhjk00 | 8e7691b7b7 | 1 year ago |
junh_eee(이준희) | 70e22656f0 | 1 year ago |
junh_eee(이준희) | 25f9433fdd | 1 year ago |
junh_eee(이준희) | 2dbf064211 | 1 year ago |
junh_eee(이준희) | 528988bff4 | 1 year ago |
junh_eee(이준희) | ca6465f9f1 | 1 year ago |
junh_eee(이준희) | 4c99822a38 | 1 year ago |
junh_eee(이준희) | df47548969 | 1 year ago |
junh_eee(이준희) | 01764adb94 | 1 year ago |
junh_eee(이준희) | 060a25c841 | 1 year ago |
junh_eee(이준희) | 650314091b | 1 year ago |
김장현 | da8b4d1079 | 1 year ago |
김장현 | 8ef3f93d45 | 1 year ago |
김장현 | 741cabf151 | 1 year ago |
이준희 | 113c4f87d6 | 1 year ago |
이준희 | 8b64938b0d | 1 year ago |
이준희 | 28b925b967 | 1 year ago |
이준희 | d7014cab22 | 1 year ago |
이준희 | 58928b91c9 | 1 year ago |
이준희 | 3b463398c9 | 1 year ago |
이준희 | 1c9cc24468 | 1 year ago |
sanguu516(박상현) | b28040e93a | 1 year ago |
sanguu516(박상현) | e0631f680f | 1 year ago |
sanguu516(박상현) | 4ed385d2a0 | 1 year ago |
이준희 | d577f38a0e | 1 year ago |
이준희 | e832f77d8a | 1 year ago |
이준희 | 00b571b854 | 1 year ago |
이준희 | 54d67b70e5 | 1 year ago |
sanguu516(박상현) | a108456653 | 1 year ago |
이준희 | 91993115a0 | 1 year ago |
이준희 | 2f10b1d0ab | 1 year ago |
sanguu516(박상현) | 6b2b81ed6f | 1 year ago |
이준희 | 966ccc2c03 | 1 year ago |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 1.9 KiB |
@ -1,9 +1,12 @@
|
||||
import React from 'react'; |
||||
import { GoogleCustomMap } from './google/GoogleMap'; |
||||
import { NaverCustomMap } from './naver/NaverMap'; |
||||
import MapBoxMap from './mapbox/MapBoxMap'; |
||||
|
||||
export const MapControl = props => { |
||||
return ( |
||||
<>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</> |
||||
// <NaverCustomMap />
|
||||
// <MapBoxMap />
|
||||
); |
||||
}; |
||||
|
@ -0,0 +1,372 @@
|
||||
// import { MAPBOX_TOKEN } from '../../../configs/constants';
|
||||
// import { useEffect, useState, useRef } from 'react';
|
||||
// import { DronMarker } from './dron/DronMarker';
|
||||
// import { FeatureAirZone } from './feature/FeatureAirZone';
|
||||
// import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
// import mapboxgl from 'mapbox-gl';
|
||||
// import MapboxLanguage from '@mapbox/mapbox-gl-language';
|
||||
|
||||
// export default function MapBoxMap() {
|
||||
// const naver = window.naver;
|
||||
|
||||
// const [mapObject, setMapObject] = useState(null);
|
||||
// const [isMapLoaded, setMapLoaded] = useState(false);
|
||||
// const mapContainer = useRef(null);
|
||||
|
||||
// const uamPosition = {
|
||||
// type: 'FeatureCollection',
|
||||
// features: [
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'V1',
|
||||
// background: '#ffffff',
|
||||
// border: '#15298A',
|
||||
// spanColor: '#000000'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.540668, 37.4797865]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'V2',
|
||||
// background: '#ffffff',
|
||||
// border: '#15298A',
|
||||
// spanColor: '#000000'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6107763, 37.521245]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'V3',
|
||||
// background: '#ffffff',
|
||||
// border: '#15298A',
|
||||
// spanColor: '#000000'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6243464, 37.5642352]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'V4',
|
||||
// background: '#ffffff',
|
||||
// border: '#15298A',
|
||||
// spanColor: '#000000'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6650669, 37.3658236]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'V5',
|
||||
// background: '#ffffff',
|
||||
// border: '#15298A',
|
||||
// spanColor: '#000000'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.7074861, 37.4520753]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R1',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.5801572, 37.492581]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R2',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6036588, 37.542031]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R3',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6005224, 37.5764269]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R4',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6600404, 37.5790407]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R5',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.649562, 37.524016]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R6',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.693722, 37.5506488]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R7',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6023981, 37.4712333]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R8',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6202759, 37.4046495]
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// properties: {
|
||||
// name: 'R9',
|
||||
// background: '#429629',
|
||||
// border: '#ffffff',
|
||||
// spanColor: '#ffffff'
|
||||
// },
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [126.6296542, 37.3450207]
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
|
||||
// useEffect(() => {
|
||||
// mapBoxMapInit();
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (mapObject) {
|
||||
// uamPosition.features.map(uam => {
|
||||
// const el = document.createElement('div');
|
||||
// const elChild = document.createElement('span');
|
||||
// elChild.innerText = uam.properties.name;
|
||||
// elChild.style.color = uam.properties.spanColor;
|
||||
// el.className = 'marker';
|
||||
// el.style.background = uam.properties.background;
|
||||
// el.style.borderRadius = '50%';
|
||||
// el.style.border = `4px solid ${uam.properties.border}`;
|
||||
// el.style.padding = '5px';
|
||||
// el.style.width = '40px';
|
||||
// el.style.height = '40px';
|
||||
// el.style.textAlign = 'center';
|
||||
// el.appendChild(elChild);
|
||||
|
||||
// new mapboxgl.Marker(el)
|
||||
// .setLngLat(uam.geometry.coordinates)
|
||||
// .addTo(mapObject);
|
||||
// });
|
||||
// }
|
||||
// }, [mapObject]);
|
||||
|
||||
// const mapBoxMapInit = () => {
|
||||
// mapboxgl.accessToken = MAPBOX_TOKEN;
|
||||
|
||||
// const map = new mapboxgl.Map({
|
||||
// container: 'map', // container ID
|
||||
// style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
// center: [126.611401, 37.519695], // starting position [lng, lat]
|
||||
// zoom: 11, // starting zoom
|
||||
// antialias: true
|
||||
// });
|
||||
|
||||
// const language = new MapboxLanguage();
|
||||
// map.addControl(language);
|
||||
|
||||
// map.on('load', () => {
|
||||
// const layers = map.getStyle().layers;
|
||||
|
||||
// const labelLayerId = layers.find(
|
||||
// layer => layer.type === 'symbol' && layer.layout['text-field']
|
||||
// ).id;
|
||||
|
||||
// // 지형 3d start
|
||||
// map.addSource('mapbox-dem', {
|
||||
// type: 'raster-dem',
|
||||
// url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||||
// tileSize: 512,
|
||||
// maxZoom: 16
|
||||
// });
|
||||
// map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
|
||||
// map.addLayer({
|
||||
// id: 'contour-labels',
|
||||
// type: 'symbol',
|
||||
// source: {
|
||||
// type: 'vector',
|
||||
// url: 'mapbox://mapbox.mapbox-terrain-v2'
|
||||
// },
|
||||
// 'source-layer': 'contour',
|
||||
// layout: {
|
||||
// visibility: 'visible',
|
||||
// 'symbol-placement': 'line',
|
||||
// 'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
|
||||
// },
|
||||
// paint: {
|
||||
// 'icon-color': '#877b59',
|
||||
// 'icon-halo-width': 1,
|
||||
// 'text-color': '#877b59',
|
||||
// 'text-halo-width': 1
|
||||
// }
|
||||
// });
|
||||
// map.addLayer({
|
||||
// id: 'sky',
|
||||
// type: 'sky',
|
||||
// paint: {
|
||||
// 'sky-type': 'atmosphere',
|
||||
// 'sky-atmosphere-sun': [0.0, 90.0],
|
||||
// 'sky-atmosphere-sun-intensity': 15
|
||||
// }
|
||||
// });
|
||||
// // 지형 3d end
|
||||
// // 등고선 start
|
||||
// map.addLayer({
|
||||
// id: 'contours',
|
||||
// type: 'line',
|
||||
// source: {
|
||||
// type: 'vector',
|
||||
// url: 'mapbox://mapbox.mapbox-terrain-v2'
|
||||
// },
|
||||
// 'source-layer': 'contour',
|
||||
// layout: {
|
||||
// visibility: 'visible',
|
||||
// 'line-join': 'round',
|
||||
// 'line-cap': 'round'
|
||||
// },
|
||||
// paint: {
|
||||
// 'line-color': '#877b59',
|
||||
// 'line-width': 1
|
||||
// }
|
||||
// });
|
||||
// // 등고선 end
|
||||
// // 3d building
|
||||
// map.addLayer(
|
||||
// {
|
||||
// id: 'add-3d-buildings',
|
||||
// source: 'composite',
|
||||
// 'source-layer': 'building',
|
||||
// filter: ['==', 'extrude', 'true'],
|
||||
// type: 'fill-extrusion',
|
||||
// minzoom: 15,
|
||||
// paint: {
|
||||
// 'fill-extrusion-color': '#aaa',
|
||||
|
||||
// // Use an 'interpolate' expression to
|
||||
// // add a smooth transition effect to
|
||||
// // the buildings as the user zooms in.
|
||||
// 'fill-extrusion-height': [
|
||||
// 'interpolate',
|
||||
// ['linear'],
|
||||
// ['zoom'],
|
||||
// 15,
|
||||
// 0,
|
||||
// 15.05,
|
||||
// ['get', 'height']
|
||||
// ],
|
||||
// 'fill-extrusion-base': [
|
||||
// 'interpolate',
|
||||
// ['linear'],
|
||||
// ['zoom'],
|
||||
// 15,
|
||||
// 0,
|
||||
// 15.05,
|
||||
// ['get', 'min_height']
|
||||
// ],
|
||||
// 'fill-extrusion-opacity': 0.6
|
||||
// }
|
||||
// },
|
||||
// labelLayerId
|
||||
// );
|
||||
// // 3d building
|
||||
// setMapObject(map);
|
||||
// setMapLoaded(true);
|
||||
// });
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <div
|
||||
// id='map'
|
||||
// ref={mapContainer}
|
||||
// style={{ width: '100%', height: '100vh' }}
|
||||
// ></div>
|
||||
// {isMapLoaded && mapObject ? (
|
||||
// <>
|
||||
// <DronMarker map={mapObject} mapboxgl={mapboxgl} />
|
||||
// <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
|
||||
// </>
|
||||
// ) : null}
|
||||
|
||||
// {/* */}
|
||||
// </>
|
||||
// );
|
||||
// }
|
@ -0,0 +1,657 @@
|
||||
// import $ from 'jquery';
|
||||
// import { useEffect, useState } from 'react';
|
||||
// import { useDispatch, useSelector, shallowEqual } from 'react-redux';
|
||||
// import '../../../../assets/css/custom.css';
|
||||
// import FlightIcon from '../../../../assets/images/airplan_org.svg';
|
||||
// import FlightDetailIcon from '../../../../assets/images/airplan_pp.svg';
|
||||
// import DronIcon from '../../../../assets/images/drone-marker-icon.png';
|
||||
// import DronDetailIcon from '../../../../assets/images/drone-marker-icon-pulple.png';
|
||||
// import DronUamIcon from '../../../../assets/images/uam_icon.png';
|
||||
// import DronUamDetailIcon from '../../../../assets/images/uam_icon_purple.png';
|
||||
// import {
|
||||
// controlGpDtlAction,
|
||||
// controlGpFlightPlanAction,
|
||||
// controlGpCountAction
|
||||
// } from '../../../../modules/control/gp';
|
||||
// import {
|
||||
// objectClickAction,
|
||||
// objectUnClickAction
|
||||
// } from '../../../../modules/control/map/actions/controlMapActions';
|
||||
// import { JOIN_LIST } from '../../../../modules/basis/group/actions/basisGroupAction';
|
||||
|
||||
// export const DronMarker = props => {
|
||||
// const dispatch = useDispatch();
|
||||
|
||||
// const { controlGpList, controlGroupAuthInfo } = useSelector(
|
||||
// state => state.controlGpState
|
||||
// );
|
||||
// const { objectId, isClickObject } = useSelector(
|
||||
// state => state.controlMapReducer,
|
||||
// shallowEqual
|
||||
// );
|
||||
// // const { controlGroupAuthInfo } = useSelector(
|
||||
// // state => state.controlGroupAuthState
|
||||
// // );
|
||||
// const { controlGpArcrftWarnList } = useSelector(
|
||||
// state => state.controlGpLogState
|
||||
// );
|
||||
|
||||
// const { user } = useSelector(state => state.authState);
|
||||
// const { joinList } = useSelector(state => state.groupState);
|
||||
|
||||
// const [arrMarkers, setArrMarkers] = useState([]);
|
||||
// const [arrInfos, setArrInfos] = useState([]);
|
||||
|
||||
// const [count, setCount] = useState({
|
||||
// drone: [],
|
||||
// flight: []
|
||||
// });
|
||||
|
||||
// let mapboxgl = props.mapboxgl;
|
||||
// let map = props.map;
|
||||
// let CustomOverlay;
|
||||
// let infoWindow;
|
||||
// // const infowindowOpen = data => {
|
||||
// // const content = `
|
||||
// // <div class="dblock-box">
|
||||
// // <div class="dblock-ti">
|
||||
// // <span>${data?.id}</span>
|
||||
// // </div>
|
||||
// // <div class="dblock-txt>
|
||||
// // <div class="dblock-txt-list">
|
||||
// // <div>
|
||||
// // <span style="width: 250px; display: inline-block;">${
|
||||
// // data?.speed
|
||||
// // }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
|
||||
// // data?.heading
|
||||
// // }</span>
|
||||
// // <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
|
||||
// // 6
|
||||
// // )} | ${(data?.coord._lng).toFixed(6)}</span>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // `;
|
||||
|
||||
// // infoWindow = new naver.maps.InfoWindow({
|
||||
// // class: 'tooltip-dblock',
|
||||
// // content: content,
|
||||
// // maxWidth: 160,
|
||||
// // backgroundColor: '#283046', //박스안쪽영역 컬러
|
||||
// // // borderColor: '#333', //테두리컬러
|
||||
// // // borderWidth: 3, //테두리 굵기
|
||||
// // // anchorSize: new naver.maps.Size(30, -10),
|
||||
// // anchorSkew: false,
|
||||
// // anchorColor: '#283046',
|
||||
|
||||
// // pixelOffset: new naver.maps.Point(20, -20)
|
||||
// // });
|
||||
|
||||
// // infoWindow.open(props.map, data.coord);
|
||||
// // };
|
||||
|
||||
// // useLayoutEffect(() => {
|
||||
// // dispatch(controlGroupAuthAction.request());
|
||||
// // }, [controlGpList]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (count.drone.length > 0 || count.flight.length > 0) {
|
||||
// dispatch(
|
||||
// controlGpCountAction.request({
|
||||
// count
|
||||
// })
|
||||
// );
|
||||
// } else {
|
||||
// const count = {
|
||||
// drone: [],
|
||||
// flight: []
|
||||
// };
|
||||
// dispatch(
|
||||
// controlGpCountAction.request({
|
||||
// count
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// }, [count]);
|
||||
|
||||
// useEffect(() => {
|
||||
// dispatch(
|
||||
// JOIN_LIST.request({
|
||||
// cstmrSno: user?.cstmrSno
|
||||
// })
|
||||
// );
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (arrMarkers.length != 0) {
|
||||
// markerInfo(arrMarkers);
|
||||
// }
|
||||
// }, [arrMarkers]);
|
||||
|
||||
// useEffect(() => {
|
||||
// markerInit();
|
||||
// }, [controlGpList]);
|
||||
|
||||
// // useEffect(() => {
|
||||
// // let imageUrl;
|
||||
// // arrMarkers.map(clickMarker => {
|
||||
// // if (objectId === clickMarker.controlId && isClickObject) {
|
||||
// // // console.log(clickMarker.gps.objectId, '><><');
|
||||
// // imageUrl =
|
||||
// // // clickMarker.type === 'DRONE' ? DronUamDetailIcon : FlightDetailIcon;
|
||||
// // clickMarker.type === 'DRONE'
|
||||
// // ? clickMarker.gps.objectId.includes('UAM')
|
||||
// // ? DronUamDetailIcon
|
||||
// // : DronDetailIcon
|
||||
// // : FlightDetailIcon;
|
||||
// // clickMarker.setIcon({
|
||||
// // content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
|
||||
// // origin: new naver.maps.Point(0, 0),
|
||||
// // anchor: new naver.maps.Point(15, 15)
|
||||
// // });
|
||||
// // } else {
|
||||
// // // imageUrl = clickMarker.type === 'DRONE' ? DronUamIcon : FlightIcon;
|
||||
// // imageUrl =
|
||||
// // clickMarker.type === 'DRONE'
|
||||
// // ? clickMarker.gps.objectId.includes('UAM')
|
||||
// // ? DronUamIcon
|
||||
// // : DronIcon
|
||||
// // : FlightIcon;
|
||||
// // clickMarker.setIcon({
|
||||
// // content: `<img src="${imageUrl}" alt="" style="transform: rotate(${clickMarker.gps.heading}deg)">`,
|
||||
// // origin: new naver.maps.Point(0, 0),
|
||||
// // anchor: new naver.maps.Point(15, 15)
|
||||
// // });
|
||||
// // }
|
||||
// // });
|
||||
// // }, [objectId, isClickObject]);
|
||||
|
||||
// // useEffect(() => {
|
||||
// // arrMarkers.map(clickMarker => {
|
||||
// // if (objectId === clickMarker.controlId) {
|
||||
// // dispatch(controlGpDtlAction.request(objectId));
|
||||
// // props.map.setCenter(clickMarker.getPosition());
|
||||
// // props.map.setZoom(13, true);
|
||||
// // }
|
||||
// // });
|
||||
// // }, [objectId]);
|
||||
|
||||
// //마커를 그린다.
|
||||
// const addMarkers = (position, id, controlId, gps) => {
|
||||
// const gpsCnt = {
|
||||
// gps: gps,
|
||||
// type: ''
|
||||
// };
|
||||
|
||||
// const markerOption = {};
|
||||
|
||||
// if (id.substring(0, 2) === 'PA') {
|
||||
// const pal = controlGroupAuthInfo?.find(
|
||||
// prev => prev.idntfNum === gps.objectId
|
||||
// );
|
||||
// if (pal || !pal || id.includes('NAMWON')) {
|
||||
// if (id.includes('UAM')) {
|
||||
// markerOption.url = DronUamIcon;
|
||||
// } else {
|
||||
// markerOption.url = DronIcon;
|
||||
// }
|
||||
|
||||
// markerOption.type = 'DRONE';
|
||||
// gpsCnt.type = 'drone';
|
||||
// } else {
|
||||
// if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
|
||||
// markerOption.url = FlightIcon;
|
||||
// markerOption.type = 'FLIGHT';
|
||||
// gpsCnt.type = 'flight';
|
||||
// } else {
|
||||
// const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
|
||||
// if (
|
||||
// terminal?.groupAuthCd === 'MASTER' ||
|
||||
// terminal?.groupAuthCd === 'LEADER'
|
||||
// ) {
|
||||
// markerOption.url = FlightIcon;
|
||||
// markerOption.type = 'FLIGHT';
|
||||
// gpsCnt.type = 'flight';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// if (user?.authId === 'SUPER' || user?.authId === 'ADMIN') {
|
||||
// markerOption.url = FlightIcon;
|
||||
// markerOption.type = 'FLIGHT';
|
||||
// gpsCnt.type = 'flight';
|
||||
// } else {
|
||||
// const terminal = joinList?.find(prev => prev.trmnlId === gps.trmnlId);
|
||||
// if (
|
||||
// terminal?.groupAuthCd === 'MASTER' ||
|
||||
// terminal?.groupAuthCd === 'LEADER'
|
||||
// ) {
|
||||
// markerOption.url = FlightIcon;
|
||||
// markerOption.type = 'FLIGHT';
|
||||
// gpsCnt.type = 'flight';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (gpsCnt.type === 'drone') {
|
||||
// setCount(prev => ({
|
||||
// ...prev,
|
||||
// drone: [...prev.drone, gpsCnt]
|
||||
// }));
|
||||
// } else if (gpsCnt.type === 'flight') {
|
||||
// setCount(prev => ({
|
||||
// ...prev,
|
||||
// flight: [...prev.flight, gpsCnt]
|
||||
// }));
|
||||
// }
|
||||
|
||||
// // if (id.substring(0, 2) === 'PA') {
|
||||
// // const pal = controlGroupAuthInfo?.find(
|
||||
// // prev => prev.idntfNum === gps.objectId
|
||||
// // );
|
||||
// // markerOption.url = pal ? DronIcon : FlightIcon;
|
||||
// // markerOption.type = pal ? 'DRONE' : 'FLIGHT';
|
||||
// // } else {
|
||||
// // markerOption.url = FlightIcon;
|
||||
// // markerOption.type = 'FLIGHT';
|
||||
// // }
|
||||
|
||||
// // markerOption.origin = new naver.maps.Point(0, 0);
|
||||
// // markerOption.anchor = new naver.maps.Point(15, 15);
|
||||
|
||||
// // const marker = new naver.maps.Marker({
|
||||
// // position: position,
|
||||
// // title: id,
|
||||
// // id: id,
|
||||
// // controlId: controlId,
|
||||
// // type: markerOption.type,
|
||||
// // icon: {
|
||||
// // content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
|
||||
// // origin: markerOption.origin,
|
||||
// // anchor: markerOption.anchor
|
||||
// // },
|
||||
// // gps: gps
|
||||
// // });
|
||||
// // marker.setMap(props.map);
|
||||
// const el = document.createElement('img');
|
||||
// el.id = id;
|
||||
// el.src = markerOption.url;
|
||||
// el.style.transform = `rotate(${gps.heading}deg)`;
|
||||
|
||||
// const marker = new props.mapboxgl.Marker({
|
||||
// element: el,
|
||||
// rotation: gps.heading
|
||||
// })
|
||||
// .setLngLat(position)
|
||||
// .addTo(props.map);
|
||||
// marker.id = id;
|
||||
// marker.title = id;
|
||||
// marker.controlId = controlId;
|
||||
// marker.type = markerOption.type;
|
||||
// marker.gps = gps;
|
||||
// marker.position = position;
|
||||
// marker.icon = {
|
||||
// content: `<img id=${id} src="${markerOption.url}" alt="" style="transform: rotate(${gps.heading}deg);">`,
|
||||
// origin: markerOption.origin,
|
||||
// anchor: markerOption.anchor
|
||||
// };
|
||||
|
||||
// dispatch(controlGpFlightPlanAction.request(marker.id)); //예상경로
|
||||
// // dispatch(controlGpHisAction.request({ id: marker.controlId })); //진행경로;
|
||||
|
||||
// /** drone 상세보기 */
|
||||
// marker.getElement().addEventListener('click', function (e) {
|
||||
// handlerDronClick(marker.controlId, marker.id);
|
||||
// });
|
||||
|
||||
// if (markerOption.url) {
|
||||
// setArrMarkers(m => [...m, marker]);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const handlerDronClick = (controlId, idntfNum) => {
|
||||
// // get detail, history, flight-plan
|
||||
// dispatch(objectClickAction(controlId));
|
||||
// // dispatch(controlGpDtlAction.request(controlId));
|
||||
// // dispatch(controlGpFlightPlanAction.request(idntfNum));
|
||||
// };
|
||||
|
||||
// //마커를 삭제 한다.
|
||||
// const removeMarkers = marker => {
|
||||
// // marker.setMap(null);
|
||||
// marker.remove();
|
||||
// };
|
||||
|
||||
// const removeInfos = info => {
|
||||
// // info.setMap(null);
|
||||
// info.remove();
|
||||
// };
|
||||
|
||||
// //마커에 위치를 이동한다.
|
||||
// const moveMarkers = (marker, position, gps) => {
|
||||
// const getIcon = marker.icon;
|
||||
|
||||
// marker.setLngLat(position);
|
||||
// const warnList = controlGpArcrftWarnList?.filter(
|
||||
// i => i.cntrlId === gps.controlId
|
||||
// );
|
||||
|
||||
// if (warnList?.length > 0) {
|
||||
// if (warnList[0].controlWarnCd) {
|
||||
// // marker.setIcon({
|
||||
// // content: `<img ${getIcon.content.substr(
|
||||
// // getIcon.content.indexOf('src'),
|
||||
// // getIcon.content.indexOf('alt') - 6
|
||||
// // )} alt="" style="transform: rotate(${
|
||||
// // gps.heading
|
||||
// // }deg); filter: invert(16%) sepia(79%) saturate(4975%) hue-rotate(359deg) brightness(104%) contrast(129%)" />`,
|
||||
// // anchor: getIcon.anchor
|
||||
// // });
|
||||
// } else {
|
||||
// // console.log(marker);
|
||||
// // marker.setIcon({
|
||||
// // content: `<img ${getIcon.content.substr(
|
||||
// // getIcon.content.indexOf('src'),
|
||||
// // getIcon.content.indexOf('alt') - 6
|
||||
// // )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
|
||||
// // anchor: getIcon.anchor
|
||||
// // });
|
||||
// marker.setRotation(gps.heading);
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
// marker.setRotation(gps.heading);
|
||||
// // marker.setIcon({
|
||||
// // content: `<img ${getIcon.content.substr(
|
||||
// // getIcon.content.indexOf('src'),
|
||||
// // getIcon.content.indexOf('alt') - 6
|
||||
// // )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
|
||||
// // anchor: getIcon.anchor
|
||||
// // });
|
||||
// };
|
||||
|
||||
// const moveInfos = (info, position, item, idx) => {
|
||||
// if (info) {
|
||||
// info.setLngLat([position.lng, position.lat]);
|
||||
// // info.setPosition(position, info);
|
||||
// // // info._element.html(`<div class="dblock-ti"><span>${info?._id}</span>
|
||||
// // // <span>${item?.speed}${item?.speedType} | ${item?.elev}${item?.elevType} | ${item?.heading}</span></div>`);
|
||||
// // info._element.html(`
|
||||
// // <div class="dblock-ti">
|
||||
// // <span>${info?._id}</span>
|
||||
// // </div>
|
||||
// // <div class="dblock-txt">
|
||||
// // <div class="dblock-txt-list">
|
||||
// // <span>${item?.elev}M</span>
|
||||
// // <span>${item?.speed}km</span>
|
||||
// // ${
|
||||
// // typeof item?.lat === 'number' && typeof item?.lng === 'number'
|
||||
// // ? `
|
||||
// // <span>
|
||||
// // ${(item?.lat).toFixed(6)} ${(item?.lng).toFixed(6)}
|
||||
// // </span>`
|
||||
// // : ''
|
||||
// // }
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // `);
|
||||
// }
|
||||
// };
|
||||
|
||||
// //데이터가 없는 마커를 모두 삭제 한다.
|
||||
// const allRemoveMarkers = () => {
|
||||
// let isUnClick = false;
|
||||
// if (arrMarkers && controlGpList) {
|
||||
// arrMarkers.map(marker => {
|
||||
// const isExists = controlGpList.find(
|
||||
// item => item.objectId === marker.id
|
||||
// );
|
||||
|
||||
// if (!isExists) {
|
||||
// removeMarkers(marker);
|
||||
// const arrData = arrMarkers.filter(item => item.id != marker.id);
|
||||
|
||||
// const drone = count.drone.filter(d => d.gps.objectId != marker.id);
|
||||
// const flight = count.flight.filter(d => d.gps.objectId != marker.id);
|
||||
|
||||
// setCount({
|
||||
// drone: drone,
|
||||
// flight: flight
|
||||
// });
|
||||
|
||||
// removeArrMarkers(arrData);
|
||||
// if (marker.controlId === objectId) {
|
||||
// dispatch(objectUnClickAction());
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// arrInfos.map(info => {
|
||||
// const isExists = controlGpList.find(item => item.objectId === info._id);
|
||||
// if (!isExists) {
|
||||
// removeInfos(info);
|
||||
// const arrData = arrInfos.filter(item => item.id != info._id);
|
||||
// removeArrInfos(arrData);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// return isUnClick;
|
||||
// };
|
||||
|
||||
// //마커를 셋팅 한다.
|
||||
// const markerInit = () => {
|
||||
// if (controlGpList) {
|
||||
// allRemoveMarkers();
|
||||
// controlGpList.map((item, idx) => {
|
||||
// // let position = new naver.maps.LatLng(item.lat, item.lng);
|
||||
// let position = new props.mapboxgl.LngLat(item.lng, item.lat);
|
||||
|
||||
// if (arrMarkers.length > 0) {
|
||||
// const isExists = arrMarkers.find(ele => ele.id === item.objectId);
|
||||
// const isInfos = arrInfos.find(info => info._id === item.objectId);
|
||||
// if (isExists) {
|
||||
// moveMarkers(isExists, position, item);
|
||||
// moveInfos(isInfos, position, item, idx);
|
||||
// } else {
|
||||
// addMarkers(position, item.objectId, item.controlId, item);
|
||||
// }
|
||||
// } else {
|
||||
// addMarkers(position, item.objectId, item.controlId, item);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
// //운항정보 창 셋팅
|
||||
// const infoInit = (marker, gps, idx) => {
|
||||
// CustomOverlay = function (options) {
|
||||
// this._element = $(`
|
||||
// <div class="dblock-box">
|
||||
// <div class="dblock-ti">
|
||||
// <span>${marker?.id}</span>
|
||||
// </div>
|
||||
// <div class="dblock-txt">
|
||||
// <div class="dblock-txt-list">
|
||||
// <span>${gps?.elev}M</span>
|
||||
// <span>${gps?.speed}km</span>
|
||||
// ${
|
||||
// typeof gps?.lat === 'number' && typeof gps?.lng === 'number'
|
||||
// ? `
|
||||
// <span>
|
||||
// ${(gps?.lat).toFixed(6)} ${(gps?.lng).toFixed(6)}
|
||||
// </span>`
|
||||
// : ''
|
||||
// }
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// `);
|
||||
|
||||
// // this._element = $(`
|
||||
// // <div class="tooltip-box" style="width: 150px;">
|
||||
// // <div class="tooltip-ti">
|
||||
// // <span>${marker?.id}</span>
|
||||
// // </div>
|
||||
// // <div class="tooltip-txt>
|
||||
// // <div class="tooltip-txt-list">
|
||||
// // <div>
|
||||
// // <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
|
||||
// // </div>
|
||||
// // <div>
|
||||
// // <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
|
||||
// // </div>
|
||||
// // <div>
|
||||
// // <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // `)
|
||||
|
||||
// this.setPosition(options.position, idx);
|
||||
// this.setMap(options.map || null);
|
||||
// this.setId(options.id);
|
||||
// this.setIdx(idx);
|
||||
// this.setControlId(options.controlId);
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype = new naver.maps.OverlayView();
|
||||
// CustomOverlay.prototype.constructor = CustomOverlay;
|
||||
|
||||
// //메소드 재정의
|
||||
// //필수
|
||||
// CustomOverlay.prototype.onAdd = function () {
|
||||
// let overlayLayer = this.getPanes().overlayLayer;
|
||||
|
||||
// this._element.appendTo(overlayLayer);
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.draw = function (idx) {
|
||||
// if (!this.getMap()) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// let projection = this.getProjection(),
|
||||
// position = this.getPosition(),
|
||||
// pixelPosition = projection.fromCoordToOffset(position);
|
||||
|
||||
// // let cnt = 0;
|
||||
// // let index = idx?._idx;
|
||||
// // cnt = index * 98;
|
||||
// this._element.css('left', pixelPosition.x);
|
||||
// this._element.css('top', pixelPosition.y);
|
||||
// // this._element.css('top', pixelPosition.y + -cnt)
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.onRemove = function () {
|
||||
// let overlayLayer = this.getPanes().overlayLayer;
|
||||
|
||||
// this._element.remove();
|
||||
// this._element.off();
|
||||
// };
|
||||
|
||||
// //속성
|
||||
// CustomOverlay.prototype.setPosition = function (position, idx) {
|
||||
// this._position = position;
|
||||
// this.draw(idx);
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.getPosition = function () {
|
||||
// return this._position;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.setId = function (id) {
|
||||
// this._id = id;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.getId = function () {
|
||||
// return this._id;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.setIdx = function (idx) {
|
||||
// this._idx = idx;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.getIdx = function () {
|
||||
// return this._idx;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.setControlId = function (controlId) {
|
||||
// this._controlId = controlId;
|
||||
// };
|
||||
|
||||
// CustomOverlay.prototype.getControlId = function () {
|
||||
// return this._controlId;
|
||||
// };
|
||||
// };
|
||||
|
||||
// const removeArrMarkers = arrData => {
|
||||
// setArrMarkers(arrData);
|
||||
// };
|
||||
|
||||
// const removeArrInfos = arrData => {
|
||||
// setArrInfos(arrData);
|
||||
// };
|
||||
|
||||
// const markerInfo = arrMarkers => {
|
||||
// arrMarkers.forEach((marker, idx) => {
|
||||
// if (arrInfos.filter(i => i._controlId === marker.controlId).length > 0) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const info = new props.mapboxgl.Popup({
|
||||
// closeButton: false,
|
||||
// closeOnClick: false
|
||||
// })
|
||||
// .setLngLat([marker.position.lng, marker.position.lat])
|
||||
// .setHTML(
|
||||
// `
|
||||
// <div class="dblock-box">
|
||||
// <div class="dblock-ti">
|
||||
// <span>${marker?.id}</span>
|
||||
// </div>
|
||||
// <div class="dblock-txt">
|
||||
// <div class="dblock-txt-list">
|
||||
// <span>${marker.gps?.elev}M</span>
|
||||
// <span>${marker.gps?.speed}km</span>
|
||||
// ${
|
||||
// typeof marker.gps?.lat === 'number' &&
|
||||
// typeof marker.gps?.lng === 'number'
|
||||
// ? `
|
||||
// <span>
|
||||
// ${(marker.gps?.lat).toFixed(
|
||||
// 6
|
||||
// )} ${(marker.gps?.lng).toFixed(6)}
|
||||
// </span>`
|
||||
// : ''
|
||||
// }
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// `
|
||||
// )
|
||||
// .addTo(props.map);
|
||||
// // infoInit(marker, controlGpList[idx], idx);
|
||||
// info._id = marker.id;
|
||||
// info.gps = marker.gps;
|
||||
// // if (controlGpList.length != 0) {
|
||||
// // const info = new CustomOverlay({
|
||||
// // position: new naver.maps.LatLng(
|
||||
// // controlGpList[idx]?.lat,
|
||||
// // controlGpList[idx]?.lng
|
||||
// // ),
|
||||
// // // map: map,
|
||||
// // id: marker.id,
|
||||
// // idx: idx,
|
||||
// // controlId: marker.controlId
|
||||
// // });
|
||||
// // info.setMap(map);
|
||||
|
||||
// setArrInfos(m => [...m, info]);
|
||||
// // }
|
||||
// });
|
||||
// };
|
||||
|
||||
// return null;
|
||||
// };
|
@ -0,0 +1,392 @@
|
||||
// import { useEffect, useState } from 'react';
|
||||
// import { useSelector } from 'react-redux';
|
||||
// import * as turf from '@turf/turf';
|
||||
// import geoJson from '../../../../components/map/geojson/airArea.json';
|
||||
// import gimPo from '../../../../components/map/geojson/airportAirArea.json';
|
||||
// import '../../../../assets/css/custom.css';
|
||||
|
||||
// // 격자 공역 Source
|
||||
// const airPort = [
|
||||
// {
|
||||
// title: '김포공항',
|
||||
// buffer: 9300,
|
||||
// center: [126.793722, 37.558522],
|
||||
// reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
|
||||
// },
|
||||
// {
|
||||
// title: '인천공항',
|
||||
// buffer: 9300,
|
||||
// center: [126.4409428, 37.4588105],
|
||||
// reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
|
||||
// },
|
||||
// {
|
||||
// title: '제주공항',
|
||||
// buffer: 9300,
|
||||
// center: [126.4930205, 33.506848],
|
||||
// reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
|
||||
// },
|
||||
// {
|
||||
// title: '정석비행장',
|
||||
// buffer: 9300,
|
||||
// center: [126.7142598, 33.3943517],
|
||||
// reduce: [54.4, 218.6, 500, 905.4, 1459.8, 2195, 3173.5, 4552.5, 6952.5]
|
||||
// }
|
||||
// ];
|
||||
|
||||
// export const FeatureAirZone = props => {
|
||||
// const mapControl = useSelector(state => state.controlMapReducer);
|
||||
// let popup;
|
||||
// let infoWindow;
|
||||
|
||||
// useEffect(() => {
|
||||
// featureAirZoneInit();
|
||||
// }, [mapControl]);
|
||||
|
||||
// const infowindowOpen = data => {
|
||||
// const content =
|
||||
// '<div class="tooltip-box">' +
|
||||
// '<div class="tooltip-ti">' +
|
||||
// '<span>' +
|
||||
// data.title +
|
||||
// '</span>' +
|
||||
// '</div>' +
|
||||
// '<div class="tooltip-txt">' +
|
||||
// '<div class="tooltip-txt-list">' +
|
||||
// '<span>' +
|
||||
// data.description +
|
||||
// '</span>' +
|
||||
// '</div>' +
|
||||
// '</div>' +
|
||||
// '</div>';
|
||||
|
||||
// if (popup) {
|
||||
// popup.remove();
|
||||
// }
|
||||
|
||||
// // Create a popup element
|
||||
// popup = new props.mapboxgl.Popup({
|
||||
// offset: [20, -20],
|
||||
// closeButton: false,
|
||||
// closeOnClick: false,
|
||||
// closeOnMove: true
|
||||
// })
|
||||
// .setLngLat(data.coord)
|
||||
// .setHTML(content)
|
||||
// .addTo(props.map);
|
||||
// };
|
||||
|
||||
// const featureAirEvent = markers => {
|
||||
// markers.forEach(marker => {
|
||||
// marker.getElement().addEventListener('mouseover', e => {
|
||||
// const data = {};
|
||||
// data.coord = marker.getLngLat();
|
||||
// data.title = marker.properties.name;
|
||||
// data.description = marker.properties.description;
|
||||
|
||||
// infowindowOpen(data);
|
||||
// });
|
||||
// marker.getElement().addEventListener('mouseout', () => {
|
||||
// if (popup) {
|
||||
// popup.remove();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// props.map.on('mouseover', 'maine', e => {
|
||||
// props.map.getCanvas().style.cursor = 'pointer';
|
||||
// const feature = e.features[0];
|
||||
// const data = feature.properties;
|
||||
// data.coord = e.lngLat;
|
||||
// data.title = feature.properties.name;
|
||||
|
||||
// infowindowOpen(data);
|
||||
// });
|
||||
|
||||
// props.map.on('mouseout', 'maine', () => {
|
||||
// props.map.getCanvas().style.cursor = '';
|
||||
// if (popup) {
|
||||
// popup.remove();
|
||||
// }
|
||||
// });
|
||||
|
||||
// props.map.on('click', e => {
|
||||
// // 클릭한 지점의 피처들을 얻어옵니다.
|
||||
// const features = props.map.queryRenderedFeatures(e.point, {
|
||||
// layers: ['add-3d-buildings'] // 빌딩 레이어의 ID를 지정합니다.
|
||||
// });
|
||||
|
||||
// // 빌딩 피처가 있는 경우
|
||||
// if (features.length > 0) {
|
||||
// // 첫 번째 빌딩 피처의 높이 값을 얻어옵니다.
|
||||
// const height = features[0].properties.height;
|
||||
|
||||
// // 팝업을 생성하고 지도에 추가합니다.
|
||||
// new props.mapboxgl.Popup()
|
||||
// .setLngLat(e.lngLat)
|
||||
// .setHTML(`Building height: ${height}m`)
|
||||
// .addTo(props.map);
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
// // 공역 생성 함수
|
||||
// const featureAirZoneInit = () => {
|
||||
// let arrGeoJson = [];
|
||||
|
||||
// const useGeoJson = {
|
||||
// ...geoJson,
|
||||
// features: [...geoJson.features, ...gimPo.features]
|
||||
// };
|
||||
|
||||
// // props.map.data.removeGeoJson(useGeoJson);
|
||||
// if (props.map.getLayer('maine')) {
|
||||
// props.map.removeLayer('maine');
|
||||
// props.map.removeSource('maine');
|
||||
// }
|
||||
|
||||
// // 공역 색상 및 공역 표출 정보에 따른 노출
|
||||
// useGeoJson.features.map(item => {
|
||||
// if (item.properties.type === '0001' && mapControl.area0001) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#FF3648' }
|
||||
// });
|
||||
// } else if (item.properties.type === '0002' && mapControl.area0002) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#FFA1AA' }
|
||||
// });
|
||||
// } else if (item.properties.type === '0003' && mapControl.area0003) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#FFA800' }
|
||||
// });
|
||||
// } else if (item.properties.type === '0004' && mapControl.area0004) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#A16B00' }
|
||||
// });
|
||||
// } else if (item.properties.type === '0005' && mapControl.area0005) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#AB40FF' }
|
||||
// });
|
||||
// } else if (item.properties.type === '0006' && mapControl.area0006) {
|
||||
// arrGeoJson.push({
|
||||
// ...item,
|
||||
// properties: { ...item.properties, color: '#009cad' }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// useGeoJson.features = arrGeoJson;
|
||||
|
||||
// // 공역 생성 start
|
||||
// props.map.addSource('maine', {
|
||||
// type: 'geojson',
|
||||
// data: {
|
||||
// ...useGeoJson
|
||||
// }
|
||||
// });
|
||||
// props.map.addLayer({
|
||||
// id: 'maine',
|
||||
// type: 'fill',
|
||||
// source: 'maine',
|
||||
// layout: {},
|
||||
// paint: {
|
||||
// 'fill-color': ['get', 'color'],
|
||||
// 'fill-opacity': 0.5
|
||||
// }
|
||||
// });
|
||||
// // 공역 생성 end
|
||||
|
||||
// // 비행장 마커 생성
|
||||
// const markers = useGeoJson.features
|
||||
// .filter(i => i.geometry.type === 'Point')
|
||||
// .map(i => {
|
||||
// const marker = new props.mapboxgl.Marker()
|
||||
// .setLngLat(i.geometry.coordinates)
|
||||
// .addTo(props.map);
|
||||
// marker.properties = i.properties;
|
||||
// return marker;
|
||||
// });
|
||||
|
||||
// // 격자 공역 생성
|
||||
// airPort.map(air => polyArea(air));
|
||||
// // 마우스 오버 이벤트 생성
|
||||
// featureAirEvent(markers);
|
||||
// };
|
||||
|
||||
// // 격자 공역 셋팅 함수
|
||||
// const polyArea = air => {
|
||||
// const polyArr = [];
|
||||
// const radius = air.buffer;
|
||||
// const position = air.center;
|
||||
// const color = '#000';
|
||||
// const opacity = 0.7;
|
||||
|
||||
// let angle = 0;
|
||||
// let layerId = 1;
|
||||
// for (let i = 0; i < 4; i++) {
|
||||
// angle += 90;
|
||||
// let buffer = 0;
|
||||
// for (let j = 0; j < 9; j++) {
|
||||
// buffer += 1000;
|
||||
|
||||
// const coord = turf.destination(
|
||||
// turf.point([position[0], position[1]]),
|
||||
// buffer / 1000,
|
||||
// angle,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates;
|
||||
|
||||
// let reduce = 0;
|
||||
// reduce = air.reduce[j];
|
||||
|
||||
// if (angle % 180 === 0) {
|
||||
// const polyEW = {
|
||||
// id: layerId++,
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'LineString',
|
||||
// coordinates: [
|
||||
// turf.destination(
|
||||
// turf.point([coord[0], coord[1]]),
|
||||
// (radius - reduce) / 1000,
|
||||
// 90,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates,
|
||||
// turf.destination(
|
||||
// turf.point([coord[0], coord[1]]),
|
||||
// (radius - reduce) / 1000,
|
||||
// 270,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates
|
||||
// ]
|
||||
// },
|
||||
// properties: {
|
||||
// stroke: color,
|
||||
// 'stroke-width': 0.8,
|
||||
// 'stroke-opacity': opacity
|
||||
// }
|
||||
// };
|
||||
// polyArr.push(polyEW);
|
||||
// } else {
|
||||
// const polyNS = {
|
||||
// id: layerId++,
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'LineString',
|
||||
// coordinates: [
|
||||
// turf.destination(
|
||||
// turf.point([coord[0], coord[1]]),
|
||||
// (radius - reduce) / 1000,
|
||||
// 0,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates,
|
||||
// turf.destination(
|
||||
// turf.point([coord[0], coord[1]]),
|
||||
// (radius - reduce) / 1000,
|
||||
// 180,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates
|
||||
// ]
|
||||
// },
|
||||
// properties: {
|
||||
// stroke: color,
|
||||
// 'stroke-width': 0.8,
|
||||
// 'stroke-opacity': opacity
|
||||
// }
|
||||
// };
|
||||
// polyArr.push(polyNS);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// const NS = {
|
||||
// id: layerId++,
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'LineString',
|
||||
// coordinates: [
|
||||
// turf.destination(
|
||||
// turf.point([position[0], position[1]]),
|
||||
// radius / 1000,
|
||||
// 0,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates,
|
||||
// turf.destination(
|
||||
// turf.point([position[0], position[1]]),
|
||||
// radius / 1000,
|
||||
// 180,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates
|
||||
// ]
|
||||
// },
|
||||
// properties: {
|
||||
// stroke: color,
|
||||
// 'stroke-width': 0.8,
|
||||
// 'stroke-opacity': opacity
|
||||
// }
|
||||
// };
|
||||
// polyArr.push(NS);
|
||||
|
||||
// const EW = {
|
||||
// id: layerId++,
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'LineString',
|
||||
// coordinates: [
|
||||
// turf.destination(
|
||||
// turf.point([position[0], position[1]]),
|
||||
// radius / 1000,
|
||||
// 90,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates,
|
||||
// turf.destination(
|
||||
// turf.point([position[0], position[1]]),
|
||||
// radius / 1000,
|
||||
// 270,
|
||||
// { units: 'kilometers' }
|
||||
// ).geometry.coordinates
|
||||
// ]
|
||||
// },
|
||||
// properties: {
|
||||
// stroke: color,
|
||||
// 'stroke-width': 0.8,
|
||||
// 'stroke-opacity': opacity
|
||||
// }
|
||||
// };
|
||||
|
||||
// polyArr.push(EW);
|
||||
// if (props.map.getLayer(air.title)) {
|
||||
// props.map.removeLayer(air.title);
|
||||
// props.map.removeSource(air.title);
|
||||
// }
|
||||
// props.map.addSource(air.title, {
|
||||
// type: 'geojson',
|
||||
// data: {
|
||||
// type: 'FeatureCollection',
|
||||
// features: polyArr
|
||||
// }
|
||||
// });
|
||||
|
||||
// props.map.addLayer({
|
||||
// id: air.title,
|
||||
// type: 'line',
|
||||
// source: air.title,
|
||||
// layout: {
|
||||
// 'line-join': 'round',
|
||||
// 'line-cap': 'round'
|
||||
// },
|
||||
// paint: {
|
||||
// 'line-color': color,
|
||||
// 'line-width': 0.8,
|
||||
// 'line-opacity': opacity
|
||||
// }
|
||||
// });
|
||||
|
||||
// // Grid area
|
||||
// };
|
||||
|
||||
// return null;
|
||||
// };
|
@ -0,0 +1,13 @@
|
||||
export default [ |
||||
{ |
||||
id: 'reservation_001', |
||||
title: '도심항공교통(UAM) 예약', |
||||
navLink: '#' |
||||
}, |
||||
{ |
||||
id: 'reservation_001_01', |
||||
type: 'item', |
||||
title: '도심항공교통(UAM) 예약', |
||||
navLink: '/reservation' |
||||
} |
||||
]; |
@ -0,0 +1,10 @@
|
||||
import { lazy } from 'react'; |
||||
|
||||
const RouteReservation = [ |
||||
{ |
||||
path: '/reservation', |
||||
component: lazy(() => import('../../views/reservation/ReservationView')) |
||||
} |
||||
]; |
||||
|
||||
export default RouteReservation; |
@ -0,0 +1,423 @@
|
||||
import { useState } from 'react'; |
||||
import { Button, Row, Col, FormGroup, Label, Input, Modal, ModalHeader, ModalBody, CustomInput } from 'reactstrap'; |
||||
|
||||
export default function ControlFsm({ modal, handler }) { |
||||
return ( |
||||
<div |
||||
className='vertically-centered-modal' |
||||
> |
||||
<Modal |
||||
isOpen={modal} |
||||
toggle={handler} |
||||
className='modal-dialog-centered modal-lg' |
||||
> |
||||
<ModalHeader |
||||
toggle={handler} |
||||
> |
||||
FSM 비행계획서 |
||||
</ModalHeader> |
||||
<ModalBody className='pal-modal-body'> |
||||
<div className='fsm-wrap'> |
||||
<div className='fsm-box'> |
||||
<div className='fsm-ti'> |
||||
<h5>비행계획서 상세정보</h5> |
||||
<div className='btn-wrap'> |
||||
<Button>CHG</Button> |
||||
<Button>CNL</Button> |
||||
<Button color='success'>비행계획서 제출</Button> |
||||
</div> |
||||
</div> |
||||
<Row> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>서류구분</Label> |
||||
<Input |
||||
type='select' |
||||
name='select' |
||||
bsSize='sm' |
||||
id='' |
||||
> |
||||
<option>비행계획서 작성</option> |
||||
</Input> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>항공기 등록기호</Label> |
||||
<Input |
||||
type='text' |
||||
id='' |
||||
bsSize='sm' |
||||
placeholder='' |
||||
value='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>비행계획일자</Label> |
||||
<Input |
||||
type='text' |
||||
id='' |
||||
bsSize='sm' |
||||
placeholder='' |
||||
value='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Priority</Label> |
||||
<Input |
||||
type='select' |
||||
name='select' |
||||
bsSize='sm' |
||||
id='' |
||||
> |
||||
<option>FF</option> |
||||
</Input> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Filing Time</Label> |
||||
<Input |
||||
type='text' |
||||
id='' |
||||
bsSize='sm' |
||||
placeholder='' |
||||
value='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>의뢰부서</Label> |
||||
<Input |
||||
type='text' |
||||
id='' |
||||
bsSize='sm' |
||||
placeholder='' |
||||
value='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<hr/> |
||||
<Row> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Message Type</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Flight Identity(Callsign)</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Flight Rules</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Flight Type</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Number</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Aicrraft Type</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Wake Turb. Cat.</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Equipment</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Departure</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Time</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Cruising Speed</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Flight Level</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='12'> |
||||
<FormGroup> |
||||
<Label for=''>Route</Label> |
||||
<Input |
||||
type='textarea' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Arrival</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Total EET</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>1st ALTN</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>2st ALTN</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='12'> |
||||
<FormGroup> |
||||
<Label for=''>Other information</Label> |
||||
<Input |
||||
type='textarea' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>E</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>P</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>R/</Label> |
||||
<div className='checkbox-inline'> |
||||
<CustomInput inline type='checkbox' id='exampleCustomCheckbox' label='U' defaultChecked /> |
||||
<CustomInput inline type='checkbox' id='exampleCustomCheckbox2' label='V' /> |
||||
<CustomInput inline type='checkbox' id='exampleCustomCheckbox3' label='E' /> |
||||
</div> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col className='list-input' md='6' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>S/</Label> |
||||
<div className='checkbox-inline'> |
||||
<CustomInput inline type='checkbox' id='4' label='P' defaultChecked /> |
||||
<CustomInput inline type='checkbox' id='5' label='D' /> |
||||
<CustomInput inline type='checkbox' id='6' label='M' /> |
||||
<CustomInput inline type='checkbox' id='7' label='J' /> |
||||
</div> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='6' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>J/</Label> |
||||
<div className='checkbox-inline'> |
||||
<CustomInput inline type='checkbox' id='8' label='L' defaultChecked /> |
||||
<CustomInput inline type='checkbox' id='9' label='F' /> |
||||
<CustomInput inline type='checkbox' id='10' label='U' /> |
||||
<CustomInput inline type='checkbox' id='11' label='V' /> |
||||
</div> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>D/Number</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Capacity</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Cover</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>Colour</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>A/</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>N/</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' md='3' sm='12'> |
||||
<FormGroup> |
||||
<Label for=''>C/</Label> |
||||
<Input |
||||
type='text' |
||||
bsSize='sm' |
||||
id='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</ModalBody> |
||||
</Modal> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,266 @@
|
||||
import { useState } from 'react'; |
||||
import { |
||||
Badge, |
||||
Button, |
||||
Input, |
||||
InputGroup, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
Nav, |
||||
NavItem, |
||||
NavLink |
||||
} from 'reactstrap'; |
||||
import { |
||||
Step1, |
||||
Step2, |
||||
Step3, |
||||
Step4, |
||||
ReserveStep1, |
||||
ReserveStep2, |
||||
ReserveStep3, |
||||
ReserveStep4 |
||||
} from './steps'; |
||||
import { CustomMainLayout } from '../../../components/layout/CustomMainLayout'; |
||||
import { ChevronRight } from 'react-feather'; |
||||
import AppCollapse from '@components/app-collapse'; |
||||
|
||||
export default function ControlReservation({ modal, handler }) { |
||||
const [activeTab, setActiveTab] = useState(1); |
||||
const [step, setStep] = useState(1); |
||||
const [airTraficCheck, setAirTraficCheck] = useState(1); |
||||
const [isChoise, setIsChoise] = useState(false); |
||||
const [search, setSearch] = useState(false); |
||||
const [reserveStep, setReserveStep] = useState(1); |
||||
const titleName = '도심항공교통(UAM) 예약'; |
||||
const data = [ |
||||
{ |
||||
title: ( |
||||
<div> |
||||
<div> |
||||
<span>여정1 선택완료</span> |
||||
<span>여정2 선택완료</span> |
||||
</div> |
||||
<div>TEST</div> |
||||
</div> |
||||
), |
||||
content: ( |
||||
<div className=''> |
||||
Brownie sweet carrot cake dragée caramels fruitcake. Gummi bears |
||||
tootsie roll croissant gingerbread dragée tootsie roll. Cookie |
||||
caramels tootsie roll pie. Sesame snaps cookie cake donut wafer. Wafer |
||||
cookie jelly-o candy muffin cake. Marzipan topping lollipop. Gummies |
||||
chocolate sugar plum. |
||||
</div> |
||||
) |
||||
} |
||||
]; |
||||
|
||||
function getStepColorClass(stepNumber, currentStep) { |
||||
return stepNumber === currentStep ? 'active-step' : 'inactive-step'; |
||||
} |
||||
return ( |
||||
<CustomMainLayout title={titleName}> |
||||
<div className='uam-reservation'> |
||||
<div> |
||||
{search ? ( |
||||
reserveStep !== 4 ? ( |
||||
<div className='uam-reservation-header'> |
||||
<div> |
||||
<ul className='step'> |
||||
<li className={getStepColorClass(1, step)}> |
||||
<span className='num-icon'>1</span> |
||||
<span className='ti'>항공교통 조회</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(2, step)}> |
||||
<span className='num-icon'>2</span> |
||||
<span className='ti'>항공교통 선택</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(3, step)}> |
||||
<span className='num-icon'>3</span> |
||||
<span className='ti'>탑승정보 입력</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(4, step)}> |
||||
<span className='num-icon'>4</span> |
||||
<span className='ti'>결제</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div className='uam-reservation-header'> |
||||
<div>결제완료</div> |
||||
</div> |
||||
) |
||||
) : ( |
||||
<div className='uam-reservation-header'> |
||||
<ul className='step'> |
||||
<li className={getStepColorClass(1, step)}> |
||||
<span className='num-icon'>1</span> |
||||
<span className='ti'>항공교통 조회</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(2, step)}> |
||||
<span className='num-icon'>2</span> |
||||
<span className='ti'>항공교통 선택</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(3, step)}> |
||||
<span className='num-icon'>3</span> |
||||
<span className='ti'>탑승정보 입력</span> |
||||
</li> |
||||
<li className='line'> |
||||
<ChevronRight /> |
||||
</li> |
||||
<li className={getStepColorClass(4, step)}> |
||||
<span className='num-icon'>4</span> |
||||
<span className='ti'>결제</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div> |
||||
{!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 className='uam-reservation-btn'> |
||||
<div> |
||||
<Button |
||||
color='danger' |
||||
onClick={() => { |
||||
if (reserveStep === 1) { |
||||
setIsChoise(false); |
||||
setSearch(false); |
||||
setAirTraficCheck(1); |
||||
} else { |
||||
setReserveStep(reserveStep - 1); |
||||
setStep(step - 1); |
||||
} |
||||
}} |
||||
> |
||||
취소 |
||||
</Button> |
||||
</div> |
||||
<div> |
||||
<Button |
||||
color='primary' |
||||
onClick={() => { |
||||
setReserveStep(reserveStep + 1); |
||||
setStep(step + 1); |
||||
}} |
||||
> |
||||
{reserveStep === 3 ? '결제하기' : '다음'} |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div> |
||||
<div> |
||||
<button onClick={handler}>확인</button> |
||||
</div> |
||||
</div> |
||||
)} |
||||
</> |
||||
)} |
||||
</div> |
||||
{/* 하단 total 생성 될때 최상단 content-wrapper에 |
||||
padding-bottom:5rem이 추가되어야함 그래야 취소 다음 버튼이 보임
|
||||
현재 임시로 css에서 강제로 important 준 상태*/} |
||||
<div className='uam-reservation-total'> |
||||
<AppCollapse data={data} /> |
||||
</div> |
||||
</div> |
||||
</CustomMainLayout> |
||||
); |
||||
} |
@ -0,0 +1,430 @@
|
||||
import React, { useState, Component } from 'react'; |
||||
|
||||
import Slider from 'react-slick'; |
||||
import 'slick-carousel/slick/slick.css'; |
||||
import 'slick-carousel/slick/slick-theme.css'; |
||||
|
||||
import { |
||||
Badge, |
||||
Button, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter, |
||||
Alert |
||||
} from 'reactstrap'; |
||||
import { ArrowRight, XCircle, X } from 'react-feather'; |
||||
|
||||
export default function ReserveStep1() { |
||||
const settings = { |
||||
dots: false, |
||||
infinite: true, |
||||
speed: 500, |
||||
slidesToShow: 7, |
||||
slidesToScroll: 1 |
||||
}; |
||||
const [centeredModal, setCenteredModal] = useState(false); |
||||
|
||||
return ( |
||||
<div className='step-reservation'> |
||||
<div className='step-box'> |
||||
<div className='uam-reservation-tab-list'> |
||||
<div |
||||
className='list' |
||||
onClick={() => setCenteredModal(!centeredModal)} |
||||
> |
||||
고양 킨텍스 |
||||
</div> |
||||
<div |
||||
className='list' |
||||
onClick={() => setCenteredModal(!centeredModal)} |
||||
> |
||||
여의도 공원 |
||||
</div> |
||||
<div |
||||
className='list' |
||||
onClick={() => setCenteredModal(!centeredModal)} |
||||
> |
||||
2023. 10. 22(목) ~ 2023. 11. 01(목) |
||||
</div> |
||||
<div |
||||
className='list' |
||||
onClick={() => setCenteredModal(!centeredModal)} |
||||
> |
||||
성인 1명, 소아 1명, 유아 1명 |
||||
</div> |
||||
<Button onClick={() => setCenteredModal(!centeredModal)}>수정</Button> |
||||
</div> |
||||
<Modal |
||||
isOpen={centeredModal} |
||||
toggle={() => setCenteredModal(!centeredModal)} |
||||
className='modal-dialog-centered uam-reservation-quick' |
||||
> |
||||
<ModalHeader> |
||||
<div className='uam-reservation-tab-list'> |
||||
<div className='list'>고양 킨텍스</div> |
||||
<div className='list'>여의도 공원</div> |
||||
<div className='list'>2023. 10. 22(목) ~ 2023. 11. 01(목)</div> |
||||
<div className='list'>성인 1명, 소아 1명, 유아 1명</div> |
||||
<Button>수정</Button> |
||||
</div> |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
<div className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>출발지 선택</h5> |
||||
{/* 버튼 클릭시 모달이 닫히는게 아니라 |
||||
step-wrap이 닫히거나 변경? 추후에... 다시 상의.. |
||||
modal사용시 quick box 커스텀 어려움 |
||||
modal 제거 후 하드코딩 ? 추후 상의 |
||||
현재는 그냥 기획서상 화면만 구현 */} |
||||
<Button |
||||
className='btn-icon' |
||||
color='primary' |
||||
onClick={() => setCenteredModal(!centeredModal)} |
||||
> |
||||
<X size={16} /> |
||||
</Button> |
||||
</div> |
||||
<div className='step-box-city'> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>아라뱃길</li> |
||||
<li> |
||||
<ul> |
||||
<li>드론시험 인증센터</li> |
||||
<li>계양 신도시</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>한강</li> |
||||
<li> |
||||
<ul> |
||||
<li>고양 킨텍스</li> |
||||
<li>김포공항</li> |
||||
<li>여의도 공원</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>탄천</li> |
||||
<li> |
||||
<ul> |
||||
<li>잠실한강공원</li> |
||||
<li>수서역</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>최근 조회하신 여정</h5> |
||||
</div> |
||||
<div className='search-box-city'> |
||||
<div className='search-city'> |
||||
<div> |
||||
<span>드론시험 인증센터</span> |
||||
<span className='arrow'> |
||||
<ArrowRight /> |
||||
</span> |
||||
<span>계양 신도시</span> |
||||
</div> |
||||
<div className='delete'> |
||||
<XCircle /> |
||||
</div> |
||||
</div> |
||||
<div className='search-city'> |
||||
<div> |
||||
<span>드론시험 인증센터</span> |
||||
<span className='arrow'> |
||||
<ArrowRight /> |
||||
</span> |
||||
<span>계양 신도시</span> |
||||
</div> |
||||
<div className='delete'> |
||||
<XCircle /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</ModalBody> |
||||
</Modal> |
||||
</div> |
||||
|
||||
<div className='step-box'> |
||||
<div className='step-reservation-header'> |
||||
<Badge color='primary' className='badge-glow'> |
||||
여정 1 |
||||
</Badge> |
||||
<div className='place'> |
||||
<span>고양 킨텍스</span> |
||||
<span className='arrow'> |
||||
<ArrowRight /> |
||||
</span> |
||||
<span>여의도 공원</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className='reservation-date'> |
||||
<Slider {...settings}> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.23(월)</span> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.24(화)</span> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.25(수)</span> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
<div className='box active'> |
||||
<span className='date'>2025.10.26(목)</span> |
||||
<span className='state'> |
||||
56,000<span className='rate'>KRW</span> |
||||
</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.27(금)</span> |
||||
<span className='state'> |
||||
58,000<span className='rate'>KRW</span> |
||||
</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.28(토)</span> |
||||
<span className='state'>-</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.29(일)</span> |
||||
<span className='state'> |
||||
48,000<span className='rate'>KRW</span> |
||||
</span> |
||||
</div> |
||||
<div className='box'> |
||||
<span className='date'>2025.10.30(월)</span> |
||||
<span className='state'> |
||||
38,000<span className='rate'>KRW</span> |
||||
</span> |
||||
</div> |
||||
</Slider> |
||||
</div> |
||||
|
||||
<div className='reservation-table'> |
||||
<table> |
||||
<colgroup> |
||||
<col width='20%' /> |
||||
<col width='20%' /> |
||||
<col width='15%' /> |
||||
<col width='15%' /> |
||||
<col width='15%' /> |
||||
</colgroup> |
||||
<thead> |
||||
<tr> |
||||
<th>출발/도착시간(비행시간)</th> |
||||
<th>편명/기종</th> |
||||
<th>특가운임</th> |
||||
<th>할인운임</th> |
||||
<th>정규운임</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
<div> |
||||
<span className='alltime'> |
||||
<span className='time'>1시간 5분</span> |
||||
<span className='start'>12:40</span> |
||||
<span className='line'></span> |
||||
<span className='arrive'>09:45</span> |
||||
<span className='plus'>+ 1 day</span> |
||||
</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='flight'> |
||||
<span>3P1003</span> |
||||
<span>B737-800</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount active'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td colSpan='5'> |
||||
<div className='fare-wrap'> |
||||
<div className='fare'> |
||||
<ul className='list-txt'> |
||||
<li> |
||||
<h6>특가운임 운임조건</h6> |
||||
</li> |
||||
<li> |
||||
<span className='ti'>취소 수수료</span> |
||||
<span> |
||||
구매일 ~ 91일전까지 : 전액환불 |
||||
<br /> |
||||
출발 이후 : 5,000원 |
||||
</span> |
||||
</li> |
||||
<li> |
||||
<span>예약부도 위약금</span> |
||||
<span>출발 이후 : 12,000원</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div className='fare active'> |
||||
<ul className='list-txt'> |
||||
<li> |
||||
<h6>할인운임 운임조건</h6> |
||||
</li> |
||||
<li> |
||||
<span className='ti'>취소 수수료</span> |
||||
<span> |
||||
구매일 ~ 91일전까지 : 전액환불 |
||||
<br /> |
||||
출발 이후 : 5,000원 |
||||
</span> |
||||
</li> |
||||
<li> |
||||
<span>예약부도 위약금</span> |
||||
<span>출발 이후 : 12,000원</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div className='fare'> |
||||
<ul className='list-txt'> |
||||
<li> |
||||
<h6>정규운임 운임조건</h6> |
||||
</li> |
||||
<li> |
||||
<span className='ti'>취소 수수료</span> |
||||
<span> |
||||
구매일 ~ 91일전까지 : 전액환불 |
||||
<br /> |
||||
출발 이후 : 5,000원 |
||||
</span> |
||||
</li> |
||||
<li> |
||||
<span>예약부도 위약금</span> |
||||
<span>출발 이후 : 12,000원</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<div> |
||||
<span className='alltime'> |
||||
<span className='time'>1시간 5분</span> |
||||
<span className='start'>12:40</span> |
||||
<span className='line'></span> |
||||
<span className='arrive'>09:45</span> |
||||
<span className='plus'>+ 1 day</span> |
||||
</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='flight'> |
||||
<span>3P1003</span> |
||||
<span>B737-800</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td colSpan='5'></td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
<div> |
||||
<span className='alltime'> |
||||
<span className='time'>1시간 5분</span> |
||||
<span className='start'>12:40</span> |
||||
<span className='line'></span> |
||||
<span className='arrive'>09:45</span> |
||||
<span className='plus'>+ 1 day</span> |
||||
</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='flight'> |
||||
<span>3P1003</span> |
||||
<span>B737-800</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'>매진</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div className='amount'> |
||||
<span className='state'> |
||||
76.000<span className='rate'>KRW</span> |
||||
</span> |
||||
<span className='seat'>잔여 7석</span> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td colSpan='5'></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,223 @@
|
||||
export default function ReserveStep2() { |
||||
return ( |
||||
<div style={{ padding: '40px' }}> |
||||
<div |
||||
style={{ |
||||
fontWeight: 'bold', |
||||
fontSize: '1.3rem', |
||||
borderBottom: '1px solid #000' |
||||
}} |
||||
> |
||||
성인 1 |
||||
</div> |
||||
<div style={{ padding: '10px', marginBottom: '20px' }}> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
width: '100%' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
width: '50%' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
marginBottom: '10px', |
||||
height: '100px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>성명</span> |
||||
<div style={{ padding: '10px' }}> |
||||
<input value='KIM' style={{ marginRight: '10px',padding:'5px' }} /> |
||||
<input value='YOONSUN' style={{ marginRight: '10px',padding:'5px' }} /> |
||||
<input value='12345678' style={{ padding:'5px' }}/> |
||||
</div> |
||||
<div style={{ marginBottom: '10px' }}> |
||||
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 |
||||
바랍니다. |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
marginBottom: '10px', |
||||
height: '100px', |
||||
padding: '10px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>신분할인 (여정1)</span> |
||||
<div style={{ marginBottom: '10px' }}> |
||||
<select style={{ width: '72%' ,padding:'5px'}}> |
||||
<option>성인 (기본운임)</option> |
||||
</select> |
||||
</div> |
||||
<div> |
||||
* 선택한 할인율 적용된 금액은 다음 단계에서 확인 가능합니다. |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
|
||||
height: '80px', |
||||
padding: '10px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>신분할인 (여정2)</span> |
||||
<div style={{ marginBottom: '10px' }}> |
||||
<select style={{ width: '72%' ,padding:'5px'}}> |
||||
<option>성인 (기본운임)</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '50%' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
marginBottom: '10px', |
||||
height: '100px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>성별</span> |
||||
<div style={{ padding:'10px' }}> |
||||
<span style={{ padding: '5px 40px', border: '1px solid #000' }}> |
||||
남자 |
||||
</span> |
||||
<span |
||||
style={{ |
||||
padding: '5px 40px', |
||||
border: '1px solid #990033', |
||||
backgroundColor: '#990033', |
||||
color: '#fff' |
||||
}} |
||||
> |
||||
여자 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
marginBottom: '10px', |
||||
height: '100px' |
||||
}} |
||||
></div> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px dotted #000', |
||||
|
||||
height: '80px' |
||||
}} |
||||
></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'space-between', |
||||
|
||||
borderBottom: '1px solid #000' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
fontWeight: 'bold', |
||||
fontSize: '1.3rem' |
||||
}} |
||||
> |
||||
예매자 정보 |
||||
</div> |
||||
<div style={{ color: 'red' }}> |
||||
* 반드시 연락 가능한 연락처와 이메일을 입력하십시오. |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
padding: '10px', |
||||
backgroundColor: '#F2F2F2', |
||||
borderBottom: '1px dotted #000' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
width: '100%' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
width: '50%', |
||||
borderRight: '1px solid #000', |
||||
marginRight: '10px' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
// marginBottom: '10px',
|
||||
height: '100px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>연락처</span> |
||||
<div style={{ marginBottom: '10px' }}> |
||||
<select |
||||
disabled |
||||
style={{ height: '29px', marginRight: '10px' }} |
||||
> |
||||
<option>+ 82 (대한민국)</option> |
||||
</select> |
||||
<select |
||||
disabled |
||||
style={{ height: '29px', marginRight: '10px' }} |
||||
> |
||||
<option>010</option> |
||||
</select> |
||||
<input value='' disabled style={{ marginRight: '10px' }} /> |
||||
<input value='' disabled /> |
||||
</div> |
||||
<div style={{ marginBottom: '10px' }}> |
||||
* 탑승자의 성명은 신분증상의 성명과 동일하게 입력하여 주시기 |
||||
바랍니다. |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '50%' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
// marginBottom: '10px',
|
||||
height: '100px' |
||||
}} |
||||
> |
||||
<span style={{ fontWeight: 'bold' }}>이메일</span> |
||||
<div> |
||||
<input |
||||
value='이메일' |
||||
disabled |
||||
style={{ marginRight: '10px' }} |
||||
/> |
||||
@ |
||||
<select disabled style={{ height: '29px', width: '300px' }}> |
||||
<option>선택</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,164 @@
|
||||
export default function ReserveStep3() { |
||||
return ( |
||||
<div style={{ padding: '40px' }}> |
||||
<div |
||||
style={{ |
||||
borderBottom: '1px solid #000' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
fontWeight: 'bold', |
||||
fontSize: '1.3rem' |
||||
}} |
||||
> |
||||
결제 정보 |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
padding: '5px', |
||||
borderBottom: '1px solid #000' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center' |
||||
}} |
||||
> |
||||
결제 수단 |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
backgroundColor: '#990033', |
||||
color: '#fff', |
||||
padding: '10px', |
||||
marginRight: '10px' |
||||
}} |
||||
> |
||||
신용카드 |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
padding: '10px', |
||||
border: '1px solid #000', |
||||
marginRight: '10px' |
||||
}} |
||||
> |
||||
카카오페이 |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
padding: '10px', |
||||
border: '1px solid #000' |
||||
}} |
||||
> |
||||
계좌이체 |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
padding: '5px', |
||||
borderBottom: '1px solid #000' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center' |
||||
}} |
||||
> |
||||
결제 카드 |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'start', |
||||
alignItems: 'center', |
||||
marginRight: '10px' |
||||
}} |
||||
> |
||||
<select style={{ width: '400px',padding:'8px' }}> |
||||
<option>카드 선택</option> |
||||
</select> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'start', |
||||
alignItems: 'center', |
||||
marginRight: '10px' |
||||
}} |
||||
> |
||||
<select style={{ width: '400px',padding:'8px' }}> |
||||
<option>일시불</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'flex-start', |
||||
padding: '5px', |
||||
borderBottom: '1px solid #000', |
||||
backgroundColor: '#F2F2F2' |
||||
}} |
||||
> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
color: '#990033' |
||||
}} |
||||
> |
||||
총액 |
||||
</div> |
||||
<div |
||||
style={{ |
||||
width: '15%', |
||||
height: '50px', |
||||
display: 'flex', |
||||
justifyContent: 'start', |
||||
alignItems: 'center', |
||||
marginRight: '10px', |
||||
color: '#990033', |
||||
fontWeight: 'bold', |
||||
fontSize: '1.2rem' |
||||
}} |
||||
> |
||||
118,200 <span style={{ fontSize: '0.7rem' }}>KRW</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,121 @@
|
||||
import { Table } from 'reactstrap'; |
||||
export default function ReserveStep4() { |
||||
return ( |
||||
<div style={{ padding: '40px' }}> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
fontSize: '1.5rem', |
||||
color: '#000', |
||||
fontWeight: 'bold', |
||||
marginBottom: '10px' |
||||
}} |
||||
> |
||||
항공교통 예약이 완료되었습니다. |
||||
</div> |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
backgroundColor: '#F2F2F2', |
||||
height: '70px', |
||||
alignItems: 'center', |
||||
fontSize: '1.2rem', |
||||
marginBottom: '10px' |
||||
}} |
||||
> |
||||
<div> |
||||
예약번호 :{' '} |
||||
<span style={{ color: '#990033', marginRight: '20px' }}> |
||||
452006915(Y08HR) |
||||
</span> |
||||
</div> |
||||
<div style={{ color: '#990033', marginRight: '20px' }}>|</div> |
||||
<div> |
||||
{' '} |
||||
예약일 :{' '} |
||||
<span style={{ color: '#990033', marginRight: '20px' }}> |
||||
2023.10.25(목) |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>항공 일정</div> |
||||
<Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}> |
||||
<thead> |
||||
<tr> |
||||
<th>구간</th> |
||||
<th>편명</th> |
||||
<th>출발일시</th> |
||||
<th>도착일시</th> |
||||
<th>좌석수</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
{' '} |
||||
여정1 |
||||
<br /> |
||||
{'고양 킨텍스 -> 여의도 공원'} |
||||
</td> |
||||
<td>UAM123</td> |
||||
<td>2023.10.25(목) 08:40</td> |
||||
<td>2023.10.25(목) 10:45</td> |
||||
<td>1</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
{' '} |
||||
여정1 |
||||
<br /> |
||||
{'여의도 공원 -> 고양 킨텍스'} |
||||
</td> |
||||
<td>UAM321</td> |
||||
<td>2023.10.28(목) 10:45</td> |
||||
<td>2023.10.28(목) 11:40</td> |
||||
<td>1</td> |
||||
</tr> |
||||
</tbody> |
||||
</Table> |
||||
<div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>예매자 정보</div> |
||||
<Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}> |
||||
<thead> |
||||
<tr> |
||||
<th>연락처</th> |
||||
<th>이메일</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>+82(대한민국) 010-8250-4456</td> |
||||
<td>kyw546@palnet.co.kr</td> |
||||
</tr> |
||||
</tbody> |
||||
</Table> |
||||
<div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>결제 내역</div> |
||||
<Table bordered style={{ textAlign: 'center', marginBottom: '10px' }}> |
||||
<thead> |
||||
<tr> |
||||
<th>결제수단</th> |
||||
<th>카드번호</th> |
||||
<th>할부개월</th> |
||||
<th>승인번호</th> |
||||
<th>결제금액</th> |
||||
<th>결제일</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>신용카드</td> |
||||
<td>****_****_****_1234</td> |
||||
<td>일시불</td> |
||||
<td>123456789</td> |
||||
<td>118,200 KRW</td> |
||||
<td>2023.10.20 (목) 09:43 </td> |
||||
</tr> |
||||
</tbody> |
||||
</Table> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,70 @@
|
||||
import { XCircle, ArrowRight } from 'react-feather'; |
||||
|
||||
export default function Step1() { |
||||
return ( |
||||
<div className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>출발지 선택</h5> |
||||
</div> |
||||
<div className='step-box-city'> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>아라뱃길</li> |
||||
<li> |
||||
<ul> |
||||
<li>드론시험 인증센터</li> |
||||
<li>계양 신도시</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>한강</li> |
||||
<li> |
||||
<ul> |
||||
<li>고양 킨텍스</li> |
||||
<li>김포공항</li> |
||||
<li>여의도 공원</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>탄천</li> |
||||
<li> |
||||
<ul> |
||||
<li>잠실한강공원</li> |
||||
<li>수서역</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>최근 조회하신 여정</h5> |
||||
</div> |
||||
<div className='search-box-city'> |
||||
<div className='search-city'> |
||||
<div> |
||||
<span>드론시험 인증센터</span> |
||||
<span className='arrow'><ArrowRight /></span> |
||||
<span>계양 신도시</span> |
||||
</div> |
||||
<div className='delete'> |
||||
<XCircle /> |
||||
</div> |
||||
</div> |
||||
<div className='search-city'> |
||||
<div> |
||||
<span>드론시험 인증센터</span> |
||||
<span className='arrow'><ArrowRight /></span> |
||||
<span>계양 신도시</span> |
||||
</div> |
||||
<div className='delete'> |
||||
<XCircle /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,41 @@
|
||||
export default function Step2() { |
||||
return ( |
||||
<div className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>도착지 선택</h5> |
||||
</div> |
||||
<div className='step-box-city'> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>아라뱃길</li> |
||||
<li> |
||||
<ul> |
||||
<li>드론시험 인증센터</li> |
||||
<li>계양 신도시</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>한강</li> |
||||
<li> |
||||
<ul> |
||||
<li>고양 킨텍스</li> |
||||
<li>김포공항</li> |
||||
<li>여의도 공원</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<ul className='step-box-city-list'> |
||||
<li className='step-city-ti'>탄천</li> |
||||
<li> |
||||
<ul> |
||||
<li>잠실한강공원</li> |
||||
<li>수서역</li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,32 @@
|
||||
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||
import Flatpickr from 'react-flatpickr'; |
||||
import { Button } from 'reactstrap'; |
||||
|
||||
|
||||
export default function Step3() { |
||||
return ( |
||||
<div className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>탑승일 선택</h5> |
||||
<Button size='sm'>초기화</Button> |
||||
</div> |
||||
<div className='calendar'> |
||||
<Flatpickr |
||||
// value={['2023-10-10', '2023-10-10']}
|
||||
// className='hidden-input'
|
||||
id='searchDate' |
||||
options={{ |
||||
inline: true, |
||||
mode: 'range', |
||||
showMonths: 2, |
||||
wrap: true |
||||
}} |
||||
> |
||||
<input type='text' data-input style={{ display: 'none' }} /> |
||||
</Flatpickr> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,43 @@
|
||||
import NumberInput from '@components/number-input' |
||||
import { Button, Label } from 'reactstrap' |
||||
|
||||
export default function Step4({ setIsChoise }) { |
||||
return ( |
||||
<div className='step-wrap'> |
||||
<div className='step-box'> |
||||
<div className='step-box-ti'> |
||||
<h5>탑승객 수 선택</h5> |
||||
</div> |
||||
<div className='passengers'> |
||||
<ul> |
||||
<li> |
||||
<div> |
||||
<h6>성인 (만 13세 이상)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input1' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div> |
||||
<h6>소아 (만 2세 ~ 13세 미만)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input2' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<div> |
||||
<h6>유아 (만 2세 미만)</h6> |
||||
<div> |
||||
<NumberInput size='sm' id='min-max-number-input3' min={0} max={9} /> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div className='finish-btn'><Button color='success' onClick={() => setIsChoise(true)}>선택 완료</Button></div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,19 @@
|
||||
import Step1 from './Step1'; |
||||
import Step2 from './Step2'; |
||||
import Step3 from './Step3'; |
||||
import Step4 from './Step4'; |
||||
import ReserveStep1 from './ReserveStep1'; |
||||
import ReserveStep2 from './ReserveStep2'; |
||||
import ReserveStep3 from './ReserveStep3'; |
||||
import ReserveStep4 from './ReserveStep4'; |
||||
|
||||
export { |
||||
Step1, |
||||
Step2, |
||||
Step3, |
||||
Step4, |
||||
ReserveStep1, |
||||
ReserveStep2, |
||||
ReserveStep3, |
||||
ReserveStep4 |
||||
}; |
@ -0,0 +1,6 @@
|
||||
import ControlReservation from '../control/setting/ControlReservation'; |
||||
import '../../assets/css/custom.css'; |
||||
|
||||
export default function ReservationView() { |
||||
return <ControlReservation />; |
||||
} |