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

비행계획서 날씨폼 로딩바 추가

pull/2/head
이준희 2 years ago
parent
af44093e3a
commit
92829c456f
2 changed files with 221 additions and 209 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/components/basis/flight/plan/FlightPlanAreaMap.js
  2. 400
      src/containers/basis/flight/plan/WeatherContainer.js

30
src/components/basis/flight/plan/FlightPlanAreaMap.js
Unescape View File

@ -68,7 +68,6 @@ const FlightPlanAreaMap = props => {
ModeInit(); ModeInit();
}, [mapControl.drawType]); }, [mapControl.drawType]);
useEffect(() => { useEffect(() => {
if (areaCoordList) { if (areaCoordList) {
if ( if (
@ -349,28 +348,27 @@ const FlightPlanAreaMap = props => {
> >
초기화 초기화
</Button.Ripple> </Button.Ripple>
{areaCoordList ? {areaCoordList ? (
areaCoordList[0].coordList[0].lat ? (<Button.Ripple areaCoordList[0].coordList[0].lat ? (
color='primary' <Button.Ripple color='primary' onClick={handler}>
onClick={handler} 날씨
> </Button.Ripple>
날씨 ) : null
</Button.Ripple>) : null ) : (
: <></>} <></>
)}
</div> </div>
<Modal <Modal
isOpen={formModal} isOpen={formModal}
toggle={handler} toggle={handler}
className='modal-dialog-centered' className='modal-dialog-centered'
> >
<ModalHeader toggle={handler}> <ModalHeader toggle={handler}>날씨 정보</ModalHeader>
날씨 정보
</ModalHeader>
<ModalBody> <ModalBody>
<p className='ti'>오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.</p> <p className='ti'>
<WeatherContainer 오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.
mapAreaCoordList={mapAreaCoordList} </p>
/> <WeatherContainer mapAreaCoordList={mapAreaCoordList} />
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color='primary' onClick={handler}> <Button color='primary' onClick={handler}>

400
src/containers/basis/flight/plan/WeatherContainer.js
Unescape View File

@ -1,215 +1,229 @@
import { import {
TodayWeather, TodayWeather,
TomorrowWeahter, TomorrowWeahter,
AfterTomorrowWeahter, AfterTomorrowWeahter,
LastwWeahter LastwWeahter
} from "../../../../components/basis/flight/plan/TodayWeather" } from '../../../../components/basis/flight/plan/TodayWeather';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import dfsxyconv from '../../../../utility/dfsxyconv'; import dfsxyconv from '../../../../utility/dfsxyconv';
import moment from 'moment'; import moment from 'moment';
import { import { Compass } from 'react-feather';
Compass
} from 'react-feather';
import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction'; import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction';
import { Spinner } from 'reactstrap';
export function WeatherContainer({ mapAreaCoordList }) { export function WeatherContainer({ mapAreaCoordList }) {
const [dayData, setdayData] = useState({});
const { loading } = useSelector(state => state.loadingReducer);
const [dayData, setdayData] = useState({}); const dispatch = useDispatch();
const { weather } = useSelector(state => state.flightState);
const dispatch = useDispatch(); let now = moment();
const { weather } = useSelector(state => state.flightState); let date = moment().format('YYYYMMDD');
let now = moment(); let time = moment().format('HHmm');
let date = moment().format('YYYYMMDD'); let plus_day1 = moment().add(1, 'day').format('YYYYMMDD');
let time = moment().format('HHmm'); let plus_day2 = moment().add(2, 'day').format('YYYYMMDD');
let plus_day1 = moment().add(1, 'day').format('YYYYMMDD'); useEffect(() => {
let plus_day2 = moment().add(2, 'day').format('YYYYMMDD'); if (weather?.response.body.items) {
useEffect(() => { let wheatherobj = {};
if (weather?.response.body.items) { const weatherData = weather.response.body.items?.item;
let wheatherobj = {}; //오늘 날씨 필터링
const weatherData = weather.response.body.items?.item; const todayres = weatherData.filter(
//오늘 날씨 필터링 weatherData => weatherData.fcstDate == date
const todayres = weatherData.filter( );
weatherData => weatherData.fcstDate == date const todayData = todayres.filter(todayres => {
); switch (todayres.category) {
const todayData = todayres.filter(todayres => { case 'TMP':
switch (todayres.category) { case 'SKY':
case 'TMP': case 'VEC':
case 'SKY': case 'WSD':
case 'VEC': case 'PTY':
case 'WSD': return { ...todayres };
case 'PTY':
return { ...todayres };
}
});
//내일 날씨 필터링todayres.category == ("TMP" || "SKY" || "VEC" || "WSD" || "PTY")
const tomorrowres = weatherData.filter(
weatherData => weatherData.fcstDate == plus_day1
);
const tomorrowData = tomorrowres.filter(tomorrowres => {
switch (tomorrowres.category) {
case 'TMP':
case 'SKY':
case 'VEC':
case 'WSD':
case 'PTY':
return { ...todayres };
}
});
//모레 날씨 필터링
const afterres = weatherData.filter(
weatherData => weatherData.fcstDate == plus_day2
);
const afterData = afterres.filter(afterres => {
switch (afterres.category) {
case 'TMP':
case 'SKY':
case 'VEC':
case 'WSD':
case 'PTY':
return { ...todayres };
}
});
wheatherobj = {
todayData,
tomorrowData,
afterData
};
setdayData({ ...wheatherobj });
} }
}, [weather]); });
useEffect(() => { //내일 날씨 필터링todayres.category == ("TMP" || "SKY" || "VEC" || "WSD" || "PTY")
if (mapAreaCoordList[0]?.coordList[0].lat != 0 || mapAreaCoordList[0]?.coordList[0].lon != 0) { const tomorrowres = weatherData.filter(
let nx = mapAreaCoordList[0]?.coordList[0].lat; weatherData => weatherData.fcstDate == plus_day1
let ny = mapAreaCoordList[0]?.coordList[0].lon; );
const rs = dfsxyconv('toXY', nx, ny); const tomorrowData = tomorrowres.filter(tomorrowres => {
switch (tomorrowres.category) {
let now = new Date(); case 'TMP':
let hours = now.getHours(); case 'SKY':
let minutes = now.getMinutes(); case 'VEC':
let basetime = '2300'; case 'WSD':
case 'PTY':
if (hours >= 2 && minutes > 9 && hours <= 5) { return { ...todayres };
basetime = '0200'; }
} else if (hours >= 5 && minutes > 9 && hours < 8) { });
basetime = '0500'; //모레 날씨 필터링
} else if (hours <= 8 && minutes < 10) { const afterres = weatherData.filter(
basetime = '0500'; weatherData => weatherData.fcstDate == plus_day2
} else if (hours >= 8 && minutes > 9 && hours < 11) { );
basetime = '0800'; const afterData = afterres.filter(afterres => {
} else if (hours <= 11 && minutes < 10) { switch (afterres.category) {
basetime = '0800'; case 'TMP':
} else if (hours >= 11 && minutes > 9 && hours < 14) { case 'SKY':
basetime = '1100'; case 'VEC':
} else if (hours <= 14 && minutes < 10) { case 'WSD':
basetime = '1100'; case 'PTY':
} else if (hours >= 14 && minutes > 9 && hours < 17) { return { ...todayres };
basetime = '1400';
} else if (hours <= 17 && minutes < 10) {
basetime = '1400';
} else if (hours >= 17 && minutes > 9 && hours < 20) {
basetime = '1700';
} else if (hours <= 20 && minutes < 10) {
basetime = '1700';
} else if (hours >= 20 && minutes > 9 && hours < 23) {
basetime = '2000';
} else if (hours <= 23 && minutes < 10) {
basetime = '2000';
} else basetime = '2300';
const apidata = {
serviceKey:
'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D',
numOfRows: 1000,
pageNo: 1,
dataType: 'JSON',
base_date: date,
base_time: basetime,
nx: rs.x,
ny: rs.y,
nx2: nx,
ny2: ny
};
dispatch(FlightweatherAction.request(apidata));
} }
}, [mapAreaCoordList]); });
wheatherobj = {
todayData,
tomorrowData,
afterData
};
setdayData({ ...wheatherobj });
}
}, [weather]);
useEffect(() => {
if (
mapAreaCoordList[0]?.coordList[0].lat != 0 ||
mapAreaCoordList[0]?.coordList[0].lon != 0
) {
let nx = mapAreaCoordList[0]?.coordList[0].lat;
let ny = mapAreaCoordList[0]?.coordList[0].lon;
const rs = dfsxyconv('toXY', nx, ny);
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let basetime = '2300';
const [active, setActive] = useState('active'); if (hours >= 2 && minutes > 9 && hours <= 5) {
const [activeTab, setActiveTab] = useState('1'); basetime = '0200';
const toggle = tab => { } else if (hours >= 5 && minutes > 9 && hours < 8) {
return setActiveTab(tab); basetime = '0500';
}; } else if (hours <= 8 && minutes < 10) {
basetime = '0500';
} else if (hours >= 8 && minutes > 9 && hours < 11) {
basetime = '0800';
} else if (hours <= 11 && minutes < 10) {
basetime = '0800';
} else if (hours >= 11 && minutes > 9 && hours < 14) {
basetime = '1100';
} else if (hours <= 14 && minutes < 10) {
basetime = '1100';
} else if (hours >= 14 && minutes > 9 && hours < 17) {
basetime = '1400';
} else if (hours <= 17 && minutes < 10) {
basetime = '1400';
} else if (hours >= 17 && minutes > 9 && hours < 20) {
basetime = '1700';
} else if (hours <= 20 && minutes < 10) {
basetime = '1700';
} else if (hours >= 20 && minutes > 9 && hours < 23) {
basetime = '2000';
} else if (hours <= 23 && minutes < 10) {
basetime = '2000';
} else basetime = '2300';
return ( const apidata = {
serviceKey:
'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D',
numOfRows: 1000,
pageNo: 1,
dataType: 'JSON',
base_date: date,
base_time: basetime,
nx: rs.x,
ny: rs.y,
nx2: nx,
ny2: ny
};
dispatch(FlightweatherAction.request(apidata));
}
}, [mapAreaCoordList]);
const [active, setActive] = useState('active');
const [activeTab, setActiveTab] = useState('1');
const toggle = tab => {
return setActiveTab(tab);
};
return (
<>
{loading ? (
<div className='grid-loading'>
<div>
<Spinner color='primary' />
<span>Loading...</span>
</div>
</div>
) : (
<div className='layer-content'> <div className='layer-content'>
{Object.keys(dayData).length != 0 && {Object.keys(dayData).length != 0 &&
mapAreaCoordList[0]?.coordList[0].lat != 0 ? ( mapAreaCoordList[0]?.coordList[0].lat != 0 ? (
<div className='layer-weather-box'> <div className='layer-weather-box'>
<div className='layer-weather-info'> <div className='layer-weather-info'>
<div className='layer-weather-table'> <div className='layer-weather-table'>
<div className='layer-weather-address'> <div className='layer-weather-address'>
검색하신 지역의 날씨 정보입니다. 검색하신 지역의 날씨 정보입니다.
<span> <span>
<Compass size={20} /> {weather.area1 != undefined ? <Compass size={20} />{' '}
`${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` : `선택하신 좌표는 없는 주소입니다.`} {weather.area1 != undefined
</span> ? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}`
</div> : `선택하신 좌표는 없는 주소입니다.`}
<div className='tab-menu'> </span>
<ul> </div>
<li
className={activeTab == 1 ? `active` : ''} {weather.area1 != undefined ? (
onClick={() => toggle('1')} <>
> <div className='tab-menu'>
오늘 <ul>
</li> <li
<li className={activeTab == 1 ? `active` : ''}
className={activeTab == 2 ? `active` : ''} onClick={() => toggle('1')}
onClick={() => toggle('2')} >
> 오늘
내일 </li>
</li> <li
<li className={activeTab == 2 ? `active` : ''}
className={activeTab == 3 ? `active` : ''} onClick={() => toggle('2')}
onClick={() => toggle('3')} >
> 내일
모레 </li>
</li> <li
</ul> className={activeTab == 3 ? `active` : ''}
</div> onClick={() => toggle('3')}
{activeTab == 1 ? ( >
<div className='tab-content active'> 모레
<TodayWeather todayData={dayData.todayData} /> </li>
</div> </ul>
) : ( </div>
<></> {activeTab == 1 ? (
)} <div className='tab-content active'>
{activeTab == 2 ? ( <TodayWeather todayData={dayData.todayData} />
<div className='tab-content active'> </div>
<TomorrowWeahter ) : (
tomorrowData={dayData.tomorrowData} <></>
/> )}
</div> {activeTab == 2 ? (
) : ( <div className='tab-content active'>
<></> <TomorrowWeahter
)} tomorrowData={dayData.tomorrowData}
{activeTab == 3 ? ( />
<div className='tab-content active'>
<AfterTomorrowWeahter
afterData={dayData.afterData}
/>
</div>
) : (
<></>
)}
</div> </div>
</div> ) : (
<></>
)}
{activeTab == 3 ? (
<div className='tab-content active'>
<AfterTomorrowWeahter afterData={dayData.afterData} />
</div>
) : (
<></>
)}
</>
) : null}
</div> </div>
) : null} </div>
</div>
) : null}
</div> </div>
)}
) </>
);
} }
export default WeatherContainer; export default WeatherContainer;

Write Preview
Loading…
Cancel
Save