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

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

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

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

@ -1,215 +1,229 @@
import {
TodayWeather,
TomorrowWeahter,
AfterTomorrowWeahter,
LastwWeahter
} from "../../../../components/basis/flight/plan/TodayWeather"
TodayWeather,
TomorrowWeahter,
AfterTomorrowWeahter,
LastwWeahter
} from '../../../../components/basis/flight/plan/TodayWeather';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import dfsxyconv from '../../../../utility/dfsxyconv';
import moment from 'moment';
import {
Compass
} from 'react-feather';
import { Compass } from 'react-feather';
import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction';
import { Spinner } from 'reactstrap';
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);
let now = moment();
let date = moment().format('YYYYMMDD');
let time = moment().format('HHmm');
let plus_day1 = moment().add(1, 'day').format('YYYYMMDD');
let plus_day2 = moment().add(2, 'day').format('YYYYMMDD');
useEffect(() => {
if (weather?.response.body.items) {
let wheatherobj = {};
const weatherData = weather.response.body.items?.item;
//오늘 날씨 필터링
const todayres = weatherData.filter(
weatherData => weatherData.fcstDate == date
);
const todayData = todayres.filter(todayres => {
switch (todayres.category) {
case 'TMP':
case 'SKY':
case 'VEC':
case 'WSD':
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 });
const dispatch = useDispatch();
const { weather } = useSelector(state => state.flightState);
let now = moment();
let date = moment().format('YYYYMMDD');
let time = moment().format('HHmm');
let plus_day1 = moment().add(1, 'day').format('YYYYMMDD');
let plus_day2 = moment().add(2, 'day').format('YYYYMMDD');
useEffect(() => {
if (weather?.response.body.items) {
let wheatherobj = {};
const weatherData = weather.response.body.items?.item;
//오늘 날씨 필터링
const todayres = weatherData.filter(
weatherData => weatherData.fcstDate == date
);
const todayData = todayres.filter(todayres => {
switch (todayres.category) {
case 'TMP':
case 'SKY':
case 'VEC':
case 'WSD':
case 'PTY':
return { ...todayres };
}
}, [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';
if (hours >= 2 && minutes > 9 && hours <= 5) {
basetime = '0200';
} else if (hours >= 5 && minutes > 9 && hours < 8) {
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';
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));
});
//내일 날씨 필터링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 };
}
}, [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');
const [activeTab, setActiveTab] = useState('1');
const toggle = tab => {
return setActiveTab(tab);
};
if (hours >= 2 && minutes > 9 && hours <= 5) {
basetime = '0200';
} else if (hours >= 5 && minutes > 9 && hours < 8) {
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'>
{Object.keys(dayData).length != 0 &&
mapAreaCoordList[0]?.coordList[0].lat != 0 ? (
<div className='layer-weather-box'>
<div className='layer-weather-info'>
<div className='layer-weather-table'>
<div className='layer-weather-address'>
검색하신 지역의 날씨 정보입니다.
<span>
<Compass size={20} /> {weather.area1 != undefined ?
`${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` : `선택하신 좌표는 없는 주소입니다.`}
</span>
</div>
<div className='tab-menu'>
<ul>
<li
className={activeTab == 1 ? `active` : ''}
onClick={() => toggle('1')}
>
오늘
</li>
<li
className={activeTab == 2 ? `active` : ''}
onClick={() => toggle('2')}
>
내일
</li>
<li
className={activeTab == 3 ? `active` : ''}
onClick={() => toggle('3')}
>
모레
</li>
</ul>
</div>
{activeTab == 1 ? (
<div className='tab-content active'>
<TodayWeather todayData={dayData.todayData} />
</div>
) : (
<></>
)}
{activeTab == 2 ? (
<div className='tab-content active'>
<TomorrowWeahter
tomorrowData={dayData.tomorrowData}
/>
</div>
) : (
<></>
)}
{activeTab == 3 ? (
<div className='tab-content active'>
<AfterTomorrowWeahter
afterData={dayData.afterData}
/>
</div>
) : (
<></>
)}
{Object.keys(dayData).length != 0 &&
mapAreaCoordList[0]?.coordList[0].lat != 0 ? (
<div className='layer-weather-box'>
<div className='layer-weather-info'>
<div className='layer-weather-table'>
<div className='layer-weather-address'>
검색하신 지역의 날씨 정보입니다.
<span>
<Compass size={20} />{' '}
{weather.area1 != undefined
? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}`
: `선택하신 좌표는 없는 주소입니다.`}
</span>
</div>
{weather.area1 != undefined ? (
<>
<div className='tab-menu'>
<ul>
<li
className={activeTab == 1 ? `active` : ''}
onClick={() => toggle('1')}
>
오늘
</li>
<li
className={activeTab == 2 ? `active` : ''}
onClick={() => toggle('2')}
>
내일
</li>
<li
className={activeTab == 3 ? `active` : ''}
onClick={() => toggle('3')}
>
모레
</li>
</ul>
</div>
{activeTab == 1 ? (
<div className='tab-content active'>
<TodayWeather todayData={dayData.todayData} />
</div>
) : (
<></>
)}
{activeTab == 2 ? (
<div className='tab-content active'>
<TomorrowWeahter
tomorrowData={dayData.tomorrowData}
/>
</div>
</div>
) : (
<></>
)}
{activeTab == 3 ? (
<div className='tab-content active'>
<AfterTomorrowWeahter afterData={dayData.afterData} />
</div>
) : (
<></>
)}
</>
) : null}
</div>
) : null}
</div>
</div>
) : null}
</div>
)
)}
</>
);
}
export default WeatherContainer;

Write Preview
Loading…
Cancel
Save