-
신청일
-
-
-
-
-
-
- props.handlerInput('searchDate', val)
- }
- onKeyPress={props.onKeyPress}
- className='form-control flat-picker bg-transparent border-0 shadow-none'
- />
-
-
-
+ const [checkState, setCheckState] = useState(initCheckState);
+ const handleClickSearch = (e) => {
+ handleSearch(searchData);
+ }
+ const handleChangeInput = (dates, value, config) => {
+ if (dates.length === 2) {
+ const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss');
+ const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss');
+ handleChangeSearchData({schFltStDt, schFltEndDt})
+ }
+ }
+ const handleChangeCheckbox = (e) => {
+ const {name, value, checked} = e.target;
+ let val;
+ switch (value) {
+ case 'A':
+ val = checked ? 'A' : '';
+ handleChangeSearchData({[name]: val})
+ setCheckState({
+ 'all': checked,
+ 'yes': checked,
+ 'no': checked
+ })
+ break;
+ case 'Y':
+ if (checked && checkState.no) val = 'A'
+ else if (checked && !checkState.no) val = 'Y'
+ else if (!checked && checkState.no) val = 'N'
+ else if (!checked && !checkState.no) val = ''
+ handleChangeSearchData({[name]: val})
+ setCheckState(prevState => ({
+ 'all': prevState.no && checked,
+ 'yes': checked,
+ 'no': prevState.no
+ }))
+ break;
+ case 'N':
+ if (checked && checkState.yes) val = 'A'
+ else if (checked && !checkState.yes) val = 'N'
+ else if (!checked && checkState.yes) val = 'Y'
+ else if (!checked && !checkState.yes) val = ''
+ handleChangeSearchData({[name]: val})
+ setCheckState(prevState => ({
+ 'all': prevState.yes && checked,
+ 'yes': prevState.yes,
+ 'no': checked
+ }))
+ break;
+ default:
+ break;
+ }
+ }
+ return (
+
-
-
-
-
-
승인여부
-
- {/*
-
-
*/}
-
-
- setIsCheckBox({
- all: !isCheck.all,
- yes: !isCheck.all,
- no: !isCheck.all
- })
- }
- />
-
- setIsCheckBox({
- all: false,
- yes: !isCheck.yes
- })
- }
- />
-
- setIsCheckBox({
- all: false,
- no: !isCheck.no
- })
- }
- />
+
+
+
+ 검색
+
-
-
-
-
- )
+
+
+
+
+
+
+
+
+
+ )
}
-export default FlightPlanSearch;
\ No newline at end of file
+export default FlightPlanSearch;
diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js
new file mode 100644
index 0000000..e193de5
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDraw.js
@@ -0,0 +1,652 @@
+import $ from 'jquery';
+import '../../../../assets/css/custom.css';
+import { CustomInput } from 'reactstrap';
+
+import buffer from '@turf/buffer'
+
+export const FlightPlanDraw = props => {
+ const {naver} = props;
+ const {map} = props;
+
+
+ var Measure = function(buttons) {
+ this.$btnLine = buttons.line;
+ this.$btnPolygon = buttons.polygon;
+ this.$btnCircle = buttons.circle;
+ this.$btnRectangle = buttons.rectangle;
+
+ this._mode = null;
+
+ this._bindDOMEvents();
+ };
+
+ $.extend(
+ Measure.prototype,{
+ constructor: Measure,
+
+ setMap: function(map) {
+ console.log('setMap')
+ if (this.map) {
+ this._unbindMap(this.map);
+ }
+
+ this.map = map;
+
+ if (map) {
+ this._bindMap(map);
+ }
+ },
+
+ startMode: function(mode) {
+ console.log('startMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ this._startDistance();
+ } if (mode === 'polygon') {
+ this._startArea();
+ } if (mode === 'circle') {
+ this._startCircle();
+ } if (mode === 'rectangle') {
+ this._startRectangle();
+ }
+ },
+
+ _startDistance: function() {
+ console.log('startDistance')
+ var map = this.map;
+ this._distanceListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+ ];
+ },
+
+ _startArea: function() {
+ console.log('startArea')
+ var map = this.map;
+
+ this._areaListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this))
+ ];
+
+ $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this));
+ },
+
+ _startCircle: function() {
+ console.log('startCircle')
+ var map = this.map;
+ this._circleListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
+ ];
+ },
+
+ _startRectangle: function() {
+ console.log('startRectangle')
+ var map = this.map;
+ this._rectangleListeners = [
+ naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
+ naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))
+ ]
+ },
+
+ _finishDistance: function() {
+ console.log('finishDistance')
+
+ naver.maps.Event.removeListener(this._distanceListeners);
+ delete this._distanceListeners;
+
+ $(document).off('mousemove.measure');
+
+ if (this._guideline) {
+ this._guideline.setMap(null);
+ delete this._guideline;
+ }
+
+ if (this._polyline) {
+ // console.log(this._polyline.getPath()._array, 'path')
+ let polypaths = this._polyline.getPath()._array;
+
+ //파싱
+ let polypathJSON = new Array();
+ for(let i = 0; i< polypaths.length; i++) {
+
+ //파싱
+ let obj = new Object();
+
+ obj.x = '' + polypaths[i]._lng + '';
+ obj.y = '' + polypaths[i]._lat + '';
+
+ obj = JSON.stringify(obj);
+ polypathJSON.push(JSON.parse(obj));
+ }
+ console.log(polypathJSON, 'json polyline path')
+
+
+ //버퍼 생성에 필요한 coordinates 배열 변환
+ let lineStringPaths = [];
+ for(let i = 0; i < this._polyline.getPath().length; i++) {
+ lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+ }
+ console.log(lineStringPaths, 'polyline path')
+
+ //버퍼 생성을 위한 line 객체
+ const originalGeojson = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ properties: {},
+ geometry: {
+ type: "LineString",
+ coordinates: lineStringPaths
+ }
+ }
+ ]
+ };
+ console.log(originalGeojson)
+
+ //버퍼 객체
+ const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+
+ //버퍼 라인 생성
+ let bufferPath = bufferObj.features[0].geometry.coordinates[0];
+ console.log(bufferPath, 'buffer path')
+
+ this.bufferPolyline = new naver.maps.Polyline({
+ strokeColor: '#ff0000',
+ strokeWeight: 2,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path : bufferPath,
+ map: map
+ });
+
+ // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
+ // this._polyline.setMap(null)
+ delete this._polyline;
+
+ }
+ //onfocus()의 반대기능 = blur()
+ this.$btnLine.removeClass('control-on').blur();
+
+ this._mode = null;
+ },
+
+ _finishArea: function() {
+ console.log('finishArea')
+ naver.maps.Event.removeListener(this._areaListeners);
+ delete this._areaListeners;
+
+ $(document).off('mousemove.measure');
+
+ if (this._polygon) {
+ var path = this._polygon.getPath();
+ path.pop();
+
+ delete this._polygon;
+ }
+
+ this.$btnPolygon.removeClass('control-on').blur();
+
+ this._mode = null;
+ },
+
+ _finishCircle: function() {
+ console.log('finishCircle')
+
+ naver.maps.Event.removeListener(this._circleListeners);
+ delete this._circleListeners;
+
+ $(document).off('mousemove.measure');
+
+ if(this._guidecircle) {
+ this._guidecircle.setMap(null);
+ this._radius.setMap(null);
+ delete this._raidus;
+ delete this._guidecircle;
+ }
+
+ if (this._circle) {
+ // this._circle.setMap(null);
+ delete this._circle;
+ }
+
+ this.$btnCircle.removeClass('control-on').blur();
+
+ // delete this._lastDistance;
+ this._mode = null;
+ },
+
+ _finishRectangle: function() {
+ console.log('finishRectangle')
+
+ naver.maps.Event.removeListener(this._rectangleListeners);
+ delete this._rectangleListeners;
+
+ $(document).off('mousemove.measure');
+
+ if(this._rectangle) {
+ this._guiderectangle.setMap(null);
+ delete this._guiderectangle;
+ }
+
+ this.$btnRectangle.removeClass('control-on').blur();
+
+ this._mode = null;
+ },
+
+ finishMode: function(mode) {
+ console.log('finishMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ this._finishDistance();
+ } if (mode === 'polygon') {
+ this._finishArea();
+ } if (mode === 'circle') {
+ this._finishCircle();
+ } if (mode === 'rectangle') {
+ this._finishRectangle();
+ }
+ },
+
+ _fromMetersToText: function(meters) {
+ meters = meters || 0;
+
+ var km = 1000,
+ text = meters;
+
+ if(meters >= km) {
+ text = parseFloat((meters / km).toFixed(1)) + 'km';
+ } else {
+ text = parseFloat(meters.toFixed(1)) + 'm';
+ }
+
+ return text;
+ },
+
+ _addMileStone: function(coord, text, css) {
+ if(!this._ms) this._ms = [];
+
+ let content;
+ if(text == 'Start') {
+ content = '
'+ text +'
'
+ } else {
+ content = '
'+ text +'
'
+ }
+
+ var ms = new naver.maps.Marker({
+ position: coord,
+ icon: {
+ content: content,
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: this.map
+ });
+
+ var msElement = $(ms.getElement());
+
+ if(css) {
+ msElement.css(css);
+ } else {
+ msElement.css('font-size', '13px');
+ }
+
+ this._ms.push(ms);
+ },
+
+ _onClickDistance: function(e) {
+ console.log('onClickDistance')
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polyline) {
+ // 임시로 보여줄 점선 폴리라인을 생성합니다.
+ this._guideline = new naver.maps.Polyline({
+ strokeColor: '#0000ff',
+ strokeWeight: 3,
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.2,
+ path: [coord],
+ map: map
+ });
+
+ // this._lastDistance = this._guideline.getDistance();
+
+ $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
+ this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+
+ // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
+ this._polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#0000ff',
+ strokeWeight: 3,
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+
+ this._lastDistance = this._polyline.getDistance();
+ this._addMileStone(coord, 'Start');
+
+ } else {
+ this._guideline.setPath([e.coord]);
+ this._polyline.getPath().push(coord);
+
+ var distance = this._polyline.getDistance();
+ this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+ this._lastDistance = distance;
+ }
+ },
+
+ _onMouseMoveDistance: function(e) {
+ console.log('onMouseMoveDistance')
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._guideline.getPath();
+
+ if (path.getLength() === 2) {
+ //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
+ path.pop();
+ }
+
+ // [기존 클릭 좌표, 실시간 좌표]
+ path.push(coord);
+ },
+
+ _onClickArea: function(e) {
+ console.log('onClickArea')
+ var map = this.map,
+ coord = e.coord;
+
+ if (!this._polygon) {
+ this._polygon = new naver.maps.Polygon({
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ paths: [coord],
+ map: map
+ });
+ } else {
+ this._polygon.getPath().push(coord);
+ }
+ },
+
+ _onMouseMoveArea: function(e) {
+ console.log('onMouseMoveArea')
+ if (!this._polygon) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._polygon.getPath();
+
+ if (path.getLength() >= 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ },
+
+ _onClickCircle: function(e) {
+ console.log('onClickCircle')
+ var map = this.map,
+ coord = e.coord;
+
+ if(!this._circle) {
+
+ //가이드 라인
+ this._radius = new naver.maps.Polyline({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ });
+ this._lastDistance = this._radius.getDistance();
+
+ // 임시로 보여줄 원형
+ this._guidecircle = new naver.maps.Circle({
+ strokeOpacity: 0.8,
+ strokeStyle: [4, 4],
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: this._lastDistance,
+ map: map
+ });
+
+ $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this));
+ this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)));
+
+ // 실제 사용되는 원형
+ this._circle = new naver.maps.Circle({
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: this._lastDistance,
+ map: map
+ });
+
+ } else {
+ // this._guidecircle.setCenter(e.coord);
+ // this._circle.setCenter(coord);
+ // if(this._radius.getPath().length() === 2) {
+ // this._radius.getPath().pop();
+ // }
+
+ // this._radius.getPath().push(coord);
+
+ var distance = this._radius.getDistance();
+ this._lastDistance = distance;
+ this._circle.setRadius(this._lastDistance);
+
+
+ }
+ },
+
+ _onMouseMoveCircle: function(e) {
+ console.log('onMouseMoveCircle')
+ if(!this._circle) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = this._radius.getPath(),
+ center = this._guidecircle.getCenter(), //LatLng으로 나옴
+ r = proj.getDistance(coord, center);
+
+ if(path.getLength() === 2) {
+ path.pop();
+ }
+ path.push(coord);
+ this._guidecircle.setRadius(r);
+ },
+
+ _onClickRectangle: function(e) {
+ console.log('onClickRectangle')
+ var map = this.map,
+ coord = e.coord;
+
+ this.max_x = 0;
+ this.max_y = 0;
+
+
+ if(!this._rectangle) {
+ //min = 고정값
+ this.fixed = coord;
+ this.min = [this.fixed.x, this.fixed.y];
+ this.max = [this.max_x, this.max_y];
+ this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]];
+
+ // 임시로 보여줄 사각형
+ this._guiderectangle = new naver.maps.Rectangle({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ bounds: this.boundscoord,
+ map: map
+ });
+
+ $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
+ this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
+
+ //실제 사용되는 사각형
+ this._rectangle = new naver.maps.Rectangle({
+ strokeOpacity: 0.8,
+ fillColor: '#0000ff',
+ fillOpacity: 0.1,
+ bounds: this.boundscoord,
+ map: map
+ });
+
+ } else {
+ this.max = [coord.x, coord.y];
+ this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
+ this._rectangle.setBounds(this.boundscoord);
+ }
+ },
+
+ _onMouseMoveRectangle: function(e) {
+ console.log('onMouseMoveRectangle')
+ if(!this._rectangle) return;
+
+ var map = this.map,
+ proj = this.map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ bounds = this._guiderectangle.getBounds(),
+ max = [coord.x, coord.y];
+
+ this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
+ this._guiderectangle.setBounds(this.boundscoord);
+ },
+
+ _bindMap: function(map) {
+ console.log('bindMap')
+ },
+
+ _unbindMap: function() {
+ console.log('unbindMap')
+ this.unbindAll();
+ },
+
+ _bindDOMEvents: function() {
+ console.log('bindDOMEvents')
+ this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line'));
+ this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon'));
+ this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle'));
+ this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
+
+ },
+
+ _onClickButton: function(newMode, e) {
+ //newMode는 방금 클릭한 값(line, polygon, circle...)
+ console.log('onClickButton')
+ e.preventDefault();
+
+ var btn = $(e.target),
+ map = this.map,
+ mode = this._mode;
+ //this._mode는 클릭하기 전 값(첫 클릭이면 null)
+
+ if (btn.hasClass('control-on')) {
+ console.log('remove')
+ btn.removeClass('control-on');
+ } else {
+ console.log('add')
+ btn.addClass('control-on');
+ }
+
+ this._clearMode(mode);
+
+ if (mode === newMode) {
+ this._mode = null;
+ return;
+ }
+
+ this._mode = newMode;
+
+ this.startMode(newMode);
+ },
+
+ _clearMode: function(mode) {
+ console.log('clearMode')
+ if (!mode) return;
+
+ if (mode === 'line') {
+ if (this._polyline) {
+ this._polyline.setMap(null);
+ delete this._polyline;
+ }
+
+ this._finishDistance();
+ } else if (mode === 'polygon') {
+ if (this._polygon) {
+ this._polygon.setMap(null);
+ delete this._polygon;
+ }
+
+ this._finishArea();
+ } else if (mode === 'circle') {
+ if (this._circle) {
+ this._circle.setMap(null);
+ delete this._circle;
+ }
+
+ this._finishCircle();
+ } else if (mode === 'rectangle') {
+ if(this._rectangle) {
+ this._rectangle.setMap(null);
+ delete this._rectangle;
+ }
+ }
+ }
+ });
+
+ // id랑 매치시켜서 옵션 지정함
+ var measures = new Measure({
+ line: $('#line'),
+ polygon: $('#polygon'),
+ circle: $('#circle'),
+ rectangle: $('#rectangle')
+ });
+
+ measures.setMap(map);
+
+ return(
+ <>
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js
new file mode 100644
index 0000000..da4df93
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDrawTest.js
@@ -0,0 +1,676 @@
+import $ from 'jquery';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+export const FlightPlanDrawTest = props => {
+ const mapControl = useSelector(state => state.controlMapReducer);
+
+ const [pastPolyline, setPolyline] = useState();
+ const [pastBuffer, setBuffer] = useState();
+
+ const [pastPolygon, setPolygon] = useState();
+
+ // const [pastCircle, setCircle] = useState();
+ const [pastCircle, setCircle] = useState([]);
+ const [pastEve, setEve] = useState();
+
+ const [pastDragCircle, setDragCircle] = useState([]);
+
+ const [pastMarker, setMarker] = useState([]);
+
+ const naver = props.naver;
+ const map = props.map;
+ let mode = props.mode;
+
+ let areaInfo;
+ let lastDistance;
+
+ let polyline;
+ let guideline;
+ let bufferPolygon;
+
+ let polygon;
+
+ let circle;
+ let radiusline;
+
+ let Eve = {
+ clickEve: '',
+ mousedownEve: '',
+ rightclickEve: ''
+ }
+
+ let dragCircle = [];
+ let dragCircleEve = [];
+
+ let check;
+
+ let distanceMarker = [];
+
+ useEffect(() => {
+ drawInit();
+ }, [mapControl.drawType])
+
+ useEffect(() => {
+ handleDetailDrwa();
+ }, [props.areaCoordList])
+
+ const drawInit = () => {
+ console.log(mapControl.drawType);
+ if (mapControl.drawType === 'LINE') {
+ onClickButton('LINE');
+ } else if (mapControl.drawType === 'CIRCLE') {
+ onClickButton('CIRCLE');
+ } else if (mapControl.drawType === 'POLYGON') {
+ onClickButton('POLYGON');
+ } else if (mapControl.drawType === 'RESET') {
+ onClickReset('RESET')
+ }
+ }
+
+ const onClickButton = (newMode) => {
+ console.log('onClickButton');
+
+ clearMode(mode);
+
+ if (mode === newMode) {
+ mode = null;
+ return;
+ }
+
+ // mode = newMode;
+
+ startMode(newMode);
+ }
+
+ const clearMode = (mode) => {
+ console.log('clearMode')
+
+ // if(!mode) return;
+
+ if (pastPolyline) {
+ console.log('clear polyline ', pastPolyline)
+ pastPolyline.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ pastBuffer.setMap(null);
+ setPolyline();
+ setDragCircle([]);
+ setBuffer();
+ }
+ if (pastCircle) {
+ console.log('clear circle ', pastCircle)
+ pastCircle.forEach(prev => prev.setMap(null))
+ naver.maps.Event.removeListener(pastEve);
+
+ // setCircle();
+ setCircle([]);
+ }
+ if (pastPolygon) {
+ console.log('clear polygon ', pastPolygon)
+ pastPolygon.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+
+ setPolygon();
+ setDragCircle([]);
+ }
+ if (pastMarker) {
+ console.log('clear marker ', pastMarker)
+ pastMarker.forEach(m => m.setMap(null));
+ }
+
+ finishDraw();
+ props.handleInitCoordinates();
+ }
+
+ const startMode = (mode) => {
+ console.log('startMode')
+
+ if (!mode) return;
+
+ if (mode === 'LINE') {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
+ } else if (mode === 'POLYGON') {
+ Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
+ } else if (mode === 'CIRCLE') {
+ setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
+ }
+ }
+
+ const removeListener = () => {
+ console.log('removeListener')
+
+ naver.maps.Event.removeListener(Eve.clickEve);
+ naver.maps.Event.removeListener(Eve.mousedownEve);
+ naver.maps.Event.removeListener(Eve.rightclickEve);
+ if (!circle) $(document).off('mousemove.measure');
+ // if(pastCircle) naver.maps.Event.removeListener(pastEve);
+ naver.maps.Event.removeListener(pastEve);
+ }
+
+ const finishDraw = () => {
+ console.log('finishDraw')
+ removeListener();
+
+ if (polyline) {
+ if (guideline) {
+ guideline.setMap(null);
+ guideline = '';
+ }
+
+ let polypaths = polyline.getPath()._array;
+
+ if (polypaths.length >= 2) {
+ setPolyline(polyline);
+ setAreaInfo(polypaths);
+ } else {
+ polyline.setMap(null);
+ polyline = '';
+ }
+
+ polyline.setMap(null)
+ } else if (polygon) {
+ let path = polygon.getPath();
+ path.pop();
+
+ let polygonpaths = polygon.getPath()._array;
+
+ setPolygon(polygon);
+ setAreaInfo(polygonpaths);
+
+ polygon.setMap(null)
+ }
+ }
+
+ const onClickPolyline = (e) => {
+ console.log('onClickPolyline')
+ var coord = e.coord;
+
+ // if (!check) {
+ if (!polyline) {
+ //가이드라인
+ guideline = new naver.maps.Polyline({
+ strokeColor: '#283046',
+ strokeWeight: 2,
+ strokeOpacity: 0.3,
+ path: [coord],
+ map: map
+ });
+ lastDistance = guideline.getDistance();
+
+ //실제 사용되는 라인
+ polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ // strokeColor: '#283046',
+ strokeColor: '#ff0000',
+ strokeWeight: 3,
+ strokeOpacity: 1,
+ path: [coord],
+ map: map
+ });
+
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
+
+ lastDistance = polyline.getDistance();
+ addMileStone(coord, 'Start')
+ } else {
+ guideline.setPath([e.coord]);
+ polyline.getPath().push(coord);
+
+ var distance = polyline.getDistance();
+ addMileStone(coord, fromMetersToText(distance - lastDistance));
+ lastDistance = distance;
+ }
+ // }
+ }
+
+ const onMouseMovePolyline = (e) => {
+ console.log('onMouseMovePolyline')
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = guideline.getPath();
+
+ if (path.getLength() === 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ }
+
+ const onClickPolygon = (e) => {
+ console.log('onClickPolygon')
+ var coord = e.coord;
+
+ if (!polygon) {
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ paths: [coord],
+ map: map
+ });
+
+ Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+ $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
+ } else {
+ polygon.getPath().push(coord);
+ }
+ }
+
+ const onMouseMovePolygon = (e) => {
+ console.log('onMouseMovePolygon')
+ if (!polygon) return;
+
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+ path = polygon.getPath();
+
+ if (path.getLength() >= 2) {
+ path.pop();
+ }
+
+ path.push(coord);
+ }
+
+ const onClickCircle = (e) => {
+ console.log('onClickCircle')
+ var coord = e.coord;
+
+ if(!circle) {
+ radiusline = new naver.maps.Polyline({
+ strokeStyle: [4, 4],
+ strokeOpacity: 0.6,
+ path: [coord],
+ map: map
+ })
+ lastDistance = radiusline.getDistance();
+
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ center: coord,
+ radius: 100,
+ // map: map,
+ clickable: true
+ })
+
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+ } else {
+ circle.setCenter(coord);
+ circle.setRadius(100);
+ }
+ // setCircle(circle);
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ }
+
+ const onMouseDownDrag = (index) => {
+ console.log('onMouseDownDrag')
+
+ if (circle) {
+ naver.maps.Event.removeListener(Eve.clickEve);
+ }
+
+ map.setOptions({
+ draggable: false,
+ pinchZoom: false,
+ scrollWheel: false,
+ keyboardShortcuts: false,
+ disableDoubleTapZoom: true,
+ disableDoubleClickZoom: true,
+ disableTwoFingerTapZoom: true
+ })
+
+ $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
+ $(document).on('mouseup.measure', function () { onMouseUpDrag() });
+ }
+
+ const onMouseMoveDrag = (e, index) => {
+ console.log('onMouseMoveDrag')
+
+ check = true;
+
+ var proj = map.getProjection(),
+ coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
+
+ if (polyline) {
+ var polypaths = polyline.getPath()._array;
+
+ let movepath = [];
+ for (let i = 0; i < polypaths.length; i++) {
+ let path;
+ if (i === index) {
+ path = coord;
+ } else {
+ path = polypaths[i]
+ }
+ movepath.push(path);
+ }
+
+ polyline.setPath(movepath);
+
+ } else if (polygon) {
+ var polygonpaths = polygon.getPath()._array;
+
+ let movepath = [];
+ for (let i = 0; i < polygonpaths.length; i++) {
+ let path;
+ if (i === index) {
+ path = coord;
+ } else {
+ path = polygonpaths[i]
+ }
+ movepath.push(path);
+ }
+ polygon.setPaths(movepath)
+
+ } else if (circle) {
+ // var circlepath = radiusline.getPath(),
+ // center = circle.getCenter(),
+ // r = proj.getDistance(coord, center);
+ var center = circle.getCenter(),
+ r = proj.getDistance(coord, center);
+
+ // if (circlepath.getLength() === 2) {
+ // circlepath.pop();
+ // }
+ // circlepath.push(coord);
+ circle.setRadius(r);
+ }
+
+ if (!circle) {
+ dragCircle[index].setCenter(coord);
+ }
+ }
+
+ const onMouseUpDrag = () => {
+ console.log('onMouseUpDrag')
+
+ map.setOptions({
+ draggable: true,
+ pinchZoom: true,
+ scrollWheel: true,
+ keyboardShortcuts: true,
+ disableDoubleTapZoom: false,
+ disableDoubleClickZoom: false,
+ disableTwoFingerTapZoom: false
+ })
+
+ if (polyline) {
+ var path = polyline.getPath()._array;
+ setPolyline(polyline);
+ setAreaInfo(path);
+ props.handleBufferList();
+ }
+
+ if (polygon) {
+ var path = polygon.getPath()._array;
+ setPolygon(polygon);
+ setAreaInfo(path);
+ }
+
+ $(document).off('mousemove.measure');
+ $(document).off('mouseup.measure');
+
+ if (circle) {
+ // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
+ setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
+ // setCircle(circle);
+ setCircle(prev => ([...prev, circle]))
+ setAreaInfo('');
+ }
+
+ check = false;
+ }
+
+ const setAreaInfo = (path) => {
+ areaInfo = {
+ coordinates: [],
+ bufferZone: 0,
+ };
+
+ let prePath = [];
+ if (path) {
+ path.forEach((item) => {
+ const p = {
+ lat: item.y,
+ lon: item.x
+ }
+
+ prePath.push(p);
+ })
+ // path.forEach(prev=> prePath.push([prev.x, prev.y]))
+ }
+
+ if (polyline) {
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'LINE';
+ } else if (polygon) {
+ areaInfo.coordinates = prePath;
+ areaInfo.areaType = 'POLYGON';
+ } else if (circle) {
+ const point = {
+ lat: circle.getCenter().y,
+ lon: circle.getCenter().x
+ }
+
+ areaInfo.coordinates.push(point);
+ areaInfo.bufferZone = circle.getRadius();
+ areaInfo.areaType = 'CIRCLE';
+ }
+ props.handleCoordinates(areaInfo);
+ // console.log(areaInfo, 'areaInfo')
+ }
+
+ const onClickReset = () => {
+ console.log('onClickRest - ', mapControl.drawType);
+ if (mapControl.drawType === 'RESET') {
+ clearMode('RESET');
+ }
+ }
+
+ const handleDetailDrwa = () => {
+ if (props.areaCoordList) {
+ console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
+
+ const areas = props.areaCoordList[0];
+
+ const paths = [];
+
+ areas.coordList.forEach((coord) => {
+ const path = new naver.maps.LatLng(coord.lat, coord.lon)
+
+ paths.push(path);
+ });
+
+ if (areas.areaType && areas.areaType === 'LINE') {
+ //polyline 생성
+ if(pastPolyline) {
+ pastPolyline.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ }
+ polyline = new naver.maps.Polyline({
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ strokeColor: '#283046',
+ strokeWeight: 3,
+ strokeOpacity: 1,
+ path: paths,
+ map: map
+ });
+
+ setPolyline(polyline)
+
+ //dragCircle 생성
+ for(let i = 0; i < paths.length; i++) {
+ dragCircle.push(
+ new naver.maps.Circle({
+ strokestrokeOpacity: 1,
+ strokeColor: '#000000',
+ fillColor: '#ffffff',
+ fillOpacity: 1,
+ center: paths[i],
+ radius: 15,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+ }
+
+ setDragCircle(dragCircle);
+
+ if (areas.bufferCoordList) {
+ const bufferPaths = [];
+
+ areas.bufferCoordList.forEach((bfCoord) => {
+ const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
+
+ bufferPaths.push(path);
+ });
+ console.log('buffer test : ',areas.bufferCoordList);
+
+ if(pastBuffer) {
+ pastBuffer.setMap(null);
+ }
+
+ // console.log(bufferPaths)
+ //bufferline 생성
+ bufferPolygon = new naver.maps.Polyline({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ // fillColor: '#7367F0',
+ // fillOpacity: 0.1,
+ path: bufferPaths,
+ map: map
+ });
+ // console.log(bufferPolygon);
+ setBuffer(bufferPolygon);
+ }
+ }
+
+ if (areas.areaType && areas.areaType === 'POLYGON') {
+ //polygon 생성
+ if(pastPolygon) {
+ pastPolygon.setMap(null);
+ pastDragCircle.forEach(c => c.setMap(null));
+ }
+ polygon = new naver.maps.Polygon({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ paths: paths,
+ map: map
+ });
+
+ setPolygon(polygon);
+
+ //dragCircle 생성
+ for(let i = 0; i < paths.length; i++) {
+ dragCircle.push(
+ new naver.maps.Circle({
+ strokestrokeOpacity: 1,
+ strokeColor: '#000000',
+ fillColor: '#ffffff',
+ fillOpacity: 1,
+ center: paths[i],
+ radius: 15,
+ map: map,
+ clickable: true
+ })
+ )
+ dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+ }
+
+ setDragCircle(dragCircle);
+ }
+
+ if (areas.areaType && areas.areaType === 'CIRCLE') {
+ //circle 생성
+ if(pastCircle) {
+ // pastCircle.setMap(null);
+ console.log(pastCircle)
+ pastCircle.forEach(prev => prev.setMap(null));
+ }
+ if(circle) {
+ circle.setMap(null);
+ }
+ // radiusline = new naver.maps.Polyline({
+ // strokeStyle: [4, 4],
+ // strokeOpacity: 0.6,
+ // path: [coord],
+ // map: map
+ // })
+ circle = new naver.maps.Circle({
+ strokeColor: '#283046',
+ strokeOpacity: 1,
+ // fillColor: '#ff0000',
+ fillColor: '#7367F0',
+ fillOpacity: 0.1,
+ center: paths[0],
+ radius: areas.bufferZone,
+ map: map,
+ clickable: true
+ });
+ Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+
+ setCircle([circle]);
+ }
+ }
+ }
+
+ const addMileStone = (coord, text, css) => {
+ if(distanceMarker) distanceMarker = [];
+
+ let content;
+ if(text == 'Start') {
+ content = '
'+ text +'
'
+ } else {
+ content = '
'+ text +'
'
+ }
+
+ var _ms = new naver.maps.Marker({
+ position: coord,
+ icon: {
+ content: content,
+ anchor: new naver.maps.Point(-5, -5)
+ },
+ map: map
+ });
+
+ var msElement = $(_ms.getElement());
+
+ if(css) {
+ msElement.css(css);
+ } else {
+ msElement.css('font-size', '13px');
+ }
+
+ distanceMarker.push(_ms);
+ setMarker(prev => ([...prev, _ms]))
+ }
+
+ const fromMetersToText = (meters) => {
+ meters = meters || 0;
+
+ var km = 1000,
+ text = meters;
+
+ if(meters >= km) {
+ text = parseFloat((meters / km).toFixed(1)) + 'km';
+ } else {
+ text = parseFloat(meters.toFixed(1)) + 'm';
+ }
+ return text;
+ }
+
+ return (
+ <>
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js
index 65f4560..e36f419 100644
--- a/src/components/mapDraw/naver/draw/JQueryDraw.js
+++ b/src/components/mapDraw/naver/draw/JQueryDraw.js
@@ -2,8 +2,6 @@ import $ from 'jquery';
import '../../../../assets/css/custom.css';
import { CustomInput } from 'reactstrap';
-import buffer from '@turf/buffer'
-
export const JQueryDraw = props => {
const {naver} = props;
const {map} = props;
diff --git a/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js
new file mode 100644
index 0000000..e6e377c
--- /dev/null
+++ b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js
@@ -0,0 +1,45 @@
+import React, {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import FlightPlanArcrft from '../../../../components/basis/flight/plan/FlightPlanArcrft';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
+// import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot';
+
+const FlightPlanArcrftContainer = ({handleModal, type}) => {
+ const dispatch = useDispatch();
+ const { arcrftList } = useSelector(state => state.flightState);
+
+
+ /* 기체 조회 */
+ const handleSearch = () => {
+ const groupId = sessionStorage.getItem('groupId');
+
+ if(groupId) {
+ dispatch(Actions.FLIGHT_PLAN_ARCRFT_LIST.request(groupId));
+ }
+ }
+
+ /* 기체 선택 */
+ const handleSelectArcrft = (arcrftSno) => {
+ handleModal({target: 'arcrft', isOpen: false});
+
+ const arcrft = arcrftList.find(arcrft => {
+ return arcrft.arcrftSno === arcrftSno;
+ });
+ /* 기체 정보 Redux 저장 */
+ dispatch(Actions.ARCRFT_SELECT(arcrft));
+ }
+
+ useEffect(() => {
+ handleSearch();
+ }, [])
+
+
+ return (
+
+ )
+}
+
+export default FlightPlanArcrftContainer;
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
index 39dc57e..3ae27cb 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
@@ -2,74 +2,61 @@ import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import {useHistory} from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
-import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm';
import {Col, Row, Form } from 'reactstrap';
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
+import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
+import FlightPlanAreaDetailContainer from './FlightPlanAreaDetailContainer';
-const FlightPlanAreaContainer = (props) => {
- const dispatch = useDispatch();
- const history = useHistory();
-
- const { areaList } = useSelector(state => state.flightState);
- const [airArea, setAirArea] = useState(null);
-
- const validSchema = yup.object().shape({
- });
-
- const { register, getValues, setValue, errors, handleSubmit } = useForm({
- defaultValues: {
- coodinates: [],
- radius: '',
- altitude_m: '',
- altitude_ft: '',
- },
- resolver: yupResolver(validSchema)
- });
+const FlightPlanAreaContainer = ({handleModal}) => {
+ const dispatch = useDispatch();
+ const { publicAreaList} = useSelector(state => state.flightState);
+ const [airArea, setAirArea] = useState(null);
const getAirAreaList = () => {
- dispatch(Actions.AREA_LIST.request());
- }
-
- const createAirArea = async data => {
- dispatch(Actions.FLIGHT_PLAN_AREA.request(data));
-
- props.setModal({ ...props.modal, isOpen: !props.modal.isOpen });
- props.setOnSubmit(false);
+ dispatch(Actions.PUBLIC_AREA_LIST.request());
+ }
+
+ const handleConfirm = (areaList) => {
+ if(areaList === undefined) {
+ alert('영역을 설정해주세요.')
+ return false;
+ }
+
+ dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList))
}
- useEffect(() => {
+ useEffect(() => {
+ dispatch(drawTypeChangeAction(''));
getAirAreaList();
}, []);
- useEffect(() => {
- setAirArea(areaList);
- }, [areaList])
+ useEffect(() => {
+ setAirArea(publicAreaList);
+ }, [publicAreaList])
+
- return (
+ return (
{airArea != null ? (
- ) : null}
-
-
-
-
-
-
+ ) : null}
+
+
+
+
+
+
)
}
-export default FlightPlanAreaContainer;
\ No newline at end of file
+export default FlightPlanAreaContainer;
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
new file mode 100644
index 0000000..c6e5443
--- /dev/null
+++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Col, Row, Form } from 'reactstrap';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
+import FlightPlanAreaDetailForm from '../../../../components/basis/flight/plan/FlightPlanAreaDetailForm';
+import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel';
+
+
+const FlightPlanAreaDetailContainer = ({ handleModal }) => {
+ const dispatch = useDispatch();
+
+ const { areaCoordList, detail } = useSelector(state => state.flightState);
+ const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList);
+
+ const handleClose = (status) => {
+ handleModal({ type: 'area', isOpne: false});
+ }
+
+ const handleSave = () => {
+ const resultAreaDetail = areaDetail.map((area, i) => {
+ return {
+ ...area,
+ coordList : areaDetail[0].coordList
+ }
+ });
+
+ dispatch(Actions.AREA_DETAIL_LIST_SAVE(resultAreaDetail));
+
+ handleModal({ type: 'area', isOpne: false});
+ }
+
+ const handleChange = ({ name, value }) => {
+ setAreaDetail(prevState => {
+ const areaList = prevState.map((area, i) => {
+ return {
+ ...area,
+ [name] : value
+ }
+ });
+
+ return areaList;
+ })
+ }
+
+ const handleBufferList = () => {
+ dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
+ }
+
+ useEffect(() => {
+ // 좌표등록 (등록 시 데이터 초기화)
+ if(areaCoordList !== undefined) {
+ setAreaDetail(areaCoordList); // 새로 만든 영역
+ }
+ }, [areaCoordList]);
+
+ useEffect(() => {
+ // detail의 area 정보가 존재하면 detail 정보로 매핑
+ if(detail.areaList) {
+ if(detail.areaList[0].planAreaSno !== 0) {
+ setAreaDetail(detail.areaList);
+
+ dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList));
+ }
+ }
+
+ }, [])
+
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default FlightPlanAreaDetailContainer;
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js
index 51f71b2..033ea4c 100644
--- a/src/containers/basis/flight/plan/FlightPlanContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanContainer.js
@@ -1,38 +1,138 @@
-import React, { useState } from 'react';
-import moment from 'moment';
-import { Link, useHistory } from 'react-router-dom';
+import React, {useEffect, useState} from 'react';
+import moment, { suppressDeprecationWarnings } from 'moment';
+import {Link, Redirect, useHistory} from 'react-router-dom';
import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid';
-import { CustomMainLayout } from '../../../../components/layout/CustomMainLayout';
+import {CustomMainLayout} from '../../../../components/layout/CustomMainLayout';
import FlightPlanSearch from '../../../../components/basis/flight/plan/FlightPlanSearch';
+import {useDispatch, useSelector, shallowEqual} from 'react-redux';
+import * as FlightAction from '../../../../modules/basis/flight/actions/basisFlightAction';
+import {FlightPlanListRqData} from '../../../../modules/basis/flight/models/basisFlightModel';
+import { Row, Col } from 'reactstrap';
+import { JOIN_LIST } from "../../../../modules/basis/group/actions/basisGroupAction";
+import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/FlightPlanGroupGrid';
-const FlightPlanContainer = () => {
+const initSearchData = {
+ schFltStDt: moment().set({'m': 7, 'date': 1, 'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'),
+ schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'),
+ aprvlYn: 'N',
+ groupId: '',
+ cstmrSno: 0,
+}
+const columns = [{}]
+const FlightPlanContainer = () => {
+ const dispatch = useDispatch();
const history = useHistory();
+ const [searchData, setSerchData] = useState(initSearchData);
+ const {list: planListData, detail: planDetailData, selectGroup, areaCoordList } = useSelector(state => state.flightState);
+ const { joinList, joinListCount } = useSelector(state => state.groupState);
+ const { user } = useSelector(state => state.authState, shallowEqual);
- const moveFlightPlan = () => {
+ const [ params, setParams ] = useState({});
+
+
+ const moveFlightPlanDetailPage = () => {
+ if(planDetailData){
+ dispatch(FlightAction.FLIGHT_PLAN_DETAIL_INIT());
+ }
+ if(areaCoordList) {
+ dispatch(FlightAction.AREA_DETAIL_INIT());
+ }
history.push('/basis/flight/plan/create');
};
- const [times, setTimes] = useState({
- stDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
- endDate: moment().subtract(-1, 'day').format('YYYY-MM-DD'),
- search1: ''
- })
+ const handleSearch = (data) => {
+ dispatch(FlightAction.FLIGHT_PLAN_LIST.request(data));
+ }
+
+ const handleChangeSearchData = (values) => {
+ setSerchData(prevState => ({
+ ...prevState,
+ ...values
+ }))
+ }
+
+ const handleMoveDetail = (id) => {
+ history.push(`/basis/flight/plan/detail/${id}`)
+ }
+
+ const handleGroupSelect = ({ groupId, groupNm, groupAuthCd }) => {
+ // 권한 상관 없이 모두 조회 가능
+ console.log('select group : ', groupId)
+ const param = searchData;
+
+ param.cstmrSno = user.cstmrSno;
+ param.groupId = groupId;
+
+ dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: user.cstmrSno, groupId: groupId, groupNm: groupNm} ));
+
+ // groupId sessionStorage에 보관 (1 브라우저 1 tab에만 유효)
+ sessionStorage.setItem('groupId', groupId);
+
+ setSerchData(prevState => {
+ return {
+ ...prevState,
+ cstmrSno: user.cstmrSno,
+ groupId: groupId
+ }
+ });
+
+ dispatch(FlightAction.FLIGHT_PLAN_LIST.request(param));
+ }
- // console.log(history, 'history')
+ const handlerGroupCancel = () => {
+ dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: 0, groupId: '', groupNm: ''} ));
+ }
+ useEffect(() => {
+ if (user?.cstmrSno) {
+ dispatch(
+ JOIN_LIST.request({
+ cstmrSno: user?.cstmrSno
+ })
+ );
+ }
+ }, [user])
return (
- //
-
-
+
+
+
+
+
+
+ {selectGroup.cstmrSno !== 0 ? (
+ <>
+
+
+
+ ) : (
+
+ 나의 그룹 목록에서 상세보기를 클릭하세요.
+
+ )}
+
+
+
+