이준희
2 years ago
2 changed files with 221 additions and 209 deletions
@ -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; |
||||||
|
Loading…
Reference in new issue