|
|
@ -3,19 +3,18 @@ import { |
|
|
|
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 [dayData, setdayData] = useState({}); |
|
|
|
|
|
|
|
const { loading } = useSelector(state => state.loadingReducer); |
|
|
|
|
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const { weather } = useSelector(state => state.flightState); |
|
|
|
const { weather } = useSelector(state => state.flightState); |
|
|
@ -79,7 +78,10 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [weather]); |
|
|
|
}, [weather]); |
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (mapAreaCoordList[0]?.coordList[0].lat != 0 || mapAreaCoordList[0]?.coordList[0].lon != 0) { |
|
|
|
if ( |
|
|
|
|
|
|
|
mapAreaCoordList[0]?.coordList[0].lat != 0 || |
|
|
|
|
|
|
|
mapAreaCoordList[0]?.coordList[0].lon != 0 |
|
|
|
|
|
|
|
) { |
|
|
|
let nx = mapAreaCoordList[0]?.coordList[0].lat; |
|
|
|
let nx = mapAreaCoordList[0]?.coordList[0].lat; |
|
|
|
let ny = mapAreaCoordList[0]?.coordList[0].lon; |
|
|
|
let ny = mapAreaCoordList[0]?.coordList[0].lon; |
|
|
|
const rs = dfsxyconv('toXY', nx, ny); |
|
|
|
const rs = dfsxyconv('toXY', nx, ny); |
|
|
@ -134,7 +136,6 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [mapAreaCoordList]); |
|
|
|
}, [mapAreaCoordList]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [active, setActive] = useState('active'); |
|
|
|
const [active, setActive] = useState('active'); |
|
|
|
const [activeTab, setActiveTab] = useState('1'); |
|
|
|
const [activeTab, setActiveTab] = useState('1'); |
|
|
|
const toggle = tab => { |
|
|
|
const toggle = tab => { |
|
|
@ -142,8 +143,15 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
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 ? ( |
|
|
@ -153,10 +161,15 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
<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 |
|
|
|
|
|
|
|
? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` |
|
|
|
|
|
|
|
: `선택하신 좌표는 없는 주소입니다.`} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{weather.area1 != undefined ? ( |
|
|
|
|
|
|
|
<> |
|
|
|
<div className='tab-menu'> |
|
|
|
<div className='tab-menu'> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
<li |
|
|
@ -197,19 +210,20 @@ export function WeatherContainer({ mapAreaCoordList }) { |
|
|
|
)} |
|
|
|
)} |
|
|
|
{activeTab == 3 ? ( |
|
|
|
{activeTab == 3 ? ( |
|
|
|
<div className='tab-content active'> |
|
|
|
<div className='tab-content active'> |
|
|
|
<AfterTomorrowWeahter |
|
|
|
<AfterTomorrowWeahter afterData={dayData.afterData} /> |
|
|
|
afterData={dayData.afterData} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<></> |
|
|
|
<></> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
) : null} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
) |
|
|
|
</> |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
export default WeatherContainer; |
|
|
|
export default WeatherContainer; |
|
|
|