|
|
@ -1,19 +1,17 @@ |
|
|
|
import { WINDY_KEY } from '../../configs/constants'; |
|
|
|
import { WINDY_KEY } from '../../configs/constants'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import { Search } from 'react-feather' |
|
|
|
import { Search } from 'react-feather'; |
|
|
|
import { Card, CardBody, Button, Input, Row, Col, InputGroup, InputGroupAddon, InputGroupText, FormGroup } from 'reactstrap'; |
|
|
|
import '../../assets/css/custom.css'; |
|
|
|
|
|
|
|
import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi'; |
|
|
|
import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const WeatherView = () => { |
|
|
|
const WeatherView = () => { |
|
|
|
|
|
|
|
|
|
|
|
const [query, setQuery] = useState(''); |
|
|
|
const [query, setQuery] = useState(''); |
|
|
|
const [searchRes, setSearchRes] = useState([]); |
|
|
|
const [searchRes, setSearchRes] = useState([]); |
|
|
|
const [isSearch, setIsSearch] = useState(false); |
|
|
|
const [isSearch, setIsSearch] = useState(false); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
const [map, setMap] = useState(); |
|
|
|
const [map, setMap] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
const options = { |
|
|
|
// Required: API key
|
|
|
|
// Required: API key
|
|
|
@ -24,7 +22,6 @@ const WeatherView = () => { |
|
|
|
// Optional: Initial state of the map
|
|
|
|
// Optional: Initial state of the map
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSearch = async () => { |
|
|
|
const handleSearch = async () => { |
|
|
|
const res = await flightPlanAPI.searchArea({ query: query }); |
|
|
|
const res = await flightPlanAPI.searchArea({ query: query }); |
|
|
|
setIsSearch(true); |
|
|
|
setIsSearch(true); |
|
|
@ -39,19 +36,20 @@ const WeatherView = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
const handleCoord = (mapx, mapy) => { |
|
|
|
const handleCoord = (mapx, mapy) => { |
|
|
|
let utmk = naver.maps.TransCoord.fromTM128ToUTMK(naver.maps.Point(mapx, mapy)); |
|
|
|
let utmk = naver.maps.TransCoord.fromTM128ToUTMK( |
|
|
|
|
|
|
|
naver.maps.Point(mapx, mapy) |
|
|
|
|
|
|
|
); |
|
|
|
let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk); |
|
|
|
let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk); |
|
|
|
setIsSearch(false); |
|
|
|
setIsSearch(false); |
|
|
|
|
|
|
|
|
|
|
|
setMap(latlng); |
|
|
|
setMap(latlng); |
|
|
|
let options = { |
|
|
|
let options = { |
|
|
|
duration: 800, |
|
|
|
duration: 800, |
|
|
|
easing: 'easeOutCubic' |
|
|
|
easing: 'easeOutCubic' |
|
|
|
} |
|
|
|
}; |
|
|
|
// map.morph(latlng, 16, options)
|
|
|
|
// map.morph(latlng, 16, options)
|
|
|
|
console.log(map); |
|
|
|
console.log(map); |
|
|
|
|
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const handleEnter = e => { |
|
|
|
const handleEnter = e => { |
|
|
|
if (e.key == 'Enter') { |
|
|
|
if (e.key == 'Enter') { |
|
|
|
handleSearch(); |
|
|
|
handleSearch(); |
|
|
@ -59,7 +57,7 @@ const WeatherView = () => { |
|
|
|
}; |
|
|
|
}; |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div className='search-comp'> |
|
|
|
<div className='d-flex search-comp' style={{ position: 'absolute' }}> |
|
|
|
<div className=''> |
|
|
|
<div className=''> |
|
|
|
<InputGroup className='search-feather'> |
|
|
|
<InputGroup className='search-feather'> |
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
@ -98,7 +96,6 @@ const WeatherView = () => { |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='address'> |
|
|
|
<div className='address'> |
|
|
|
{/* <span>{prev.address}</span> */} |
|
|
|
|
|
|
|
<span>{prev.roadAddress}</span> |
|
|
|
<span>{prev.roadAddress}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -113,18 +110,17 @@ const WeatherView = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{!map ? |
|
|
|
{!map ? ( |
|
|
|
|
|
|
|
|
|
|
|
<iframe |
|
|
|
<iframe |
|
|
|
style={{ width: '100%', height: '99vh' }} |
|
|
|
style={{ width: '100%', height: '100vh' }} |
|
|
|
src='https://embed.windy.com/embed2.html?lat=37.549&lon=126.658&detailLat=37.549&detailLon=126.658&zoom=7&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1' |
|
|
|
src='https://embed.windy.com/embed2.html?lat=37.549&lon=126.658&detailLat=37.549&detailLon=126.658&zoom=7&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1' |
|
|
|
/> : |
|
|
|
/> |
|
|
|
|
|
|
|
) : ( |
|
|
|
<iframe |
|
|
|
<iframe |
|
|
|
style={{ width: '100%', height: '99vh' }} |
|
|
|
style={{ width: '100%', height: '100vh' }} |
|
|
|
src={`https://embed.windy.com/embed2.html?lat=${map._lat}&lon=${map._lng}&detailLat=37.549&detailLon=126.658&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1`} |
|
|
|
src={`https://embed.windy.com/embed2.html?lat=${map._lat}&lon=${map._lng}&detailLat=37.549&detailLon=126.658&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1`} |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
} |
|
|
|
|
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|