|
|
@ -1,5 +1,20 @@ |
|
|
|
import { WINDY_KEY } from '../../configs/constants'; |
|
|
|
import { WINDY_KEY } from '../../configs/constants'; |
|
|
|
|
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
import { Search } from 'react-feather' |
|
|
|
|
|
|
|
import { Card, CardBody, Button, Input, Row, Col, InputGroup, InputGroupAddon, InputGroupText, FormGroup } from 'reactstrap'; |
|
|
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
|
|
|
import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const WeatherView = () => { |
|
|
|
const WeatherView = () => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [query, setQuery] = useState(''); |
|
|
|
|
|
|
|
const [searchRes, setSearchRes] = useState([]); |
|
|
|
|
|
|
|
const [isSearch, setIsSearch] = useState(false); |
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
const [map, setMap] = useState(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
const options = { |
|
|
|
// Required: API key
|
|
|
|
// Required: API key
|
|
|
|
key: WINDY_KEY // REPLACE WITH YOUR KEY !!!
|
|
|
|
key: WINDY_KEY // REPLACE WITH YOUR KEY !!!
|
|
|
@ -9,12 +24,107 @@ import { WINDY_KEY } from '../../configs/constants'; |
|
|
|
// Optional: Initial state of the map
|
|
|
|
// Optional: Initial state of the map
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSearch = async () => { |
|
|
|
|
|
|
|
const res = await flightPlanAPI.searchArea({ query: query }); |
|
|
|
|
|
|
|
setIsSearch(true); |
|
|
|
|
|
|
|
setSearchRes(res.data.items); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleChange = e => { |
|
|
|
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (name == 'searchInput') { |
|
|
|
|
|
|
|
setQuery(value); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const handleCoord = (mapx, mapy) => { |
|
|
|
|
|
|
|
let utmk = naver.maps.TransCoord.fromTM128ToUTMK(naver.maps.Point(mapx, mapy)); |
|
|
|
|
|
|
|
let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk); |
|
|
|
|
|
|
|
setIsSearch(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setMap(latlng); |
|
|
|
|
|
|
|
let options = { |
|
|
|
|
|
|
|
duration: 800, |
|
|
|
|
|
|
|
easing: 'easeOutCubic' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// map.morph(latlng, 16, options)
|
|
|
|
|
|
|
|
console.log(map); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const handleEnter = e => { |
|
|
|
|
|
|
|
if (e.key == 'Enter') { |
|
|
|
|
|
|
|
handleSearch(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
|
|
|
|
<div className='search-comp'> |
|
|
|
|
|
|
|
<div className=''> |
|
|
|
|
|
|
|
<InputGroup className='search-feather'> |
|
|
|
|
|
|
|
<InputGroupAddon addonType='prepend'> |
|
|
|
|
|
|
|
<InputGroupText> |
|
|
|
|
|
|
|
<Search size={14} onClick={handleSearch} /> |
|
|
|
|
|
|
|
</InputGroupText> |
|
|
|
|
|
|
|
</InputGroupAddon> |
|
|
|
|
|
|
|
<Input |
|
|
|
|
|
|
|
type='text' |
|
|
|
|
|
|
|
id='searchInput' |
|
|
|
|
|
|
|
name='searchInput' |
|
|
|
|
|
|
|
bsSize='sm' |
|
|
|
|
|
|
|
autoComplete='off' |
|
|
|
|
|
|
|
placeholder='검색명을 입력하세요.' |
|
|
|
|
|
|
|
onChange={handleChange} |
|
|
|
|
|
|
|
onKeyPress={handleEnter} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</InputGroup> |
|
|
|
|
|
|
|
<div className='search-result-comp'> |
|
|
|
|
|
|
|
<ul> |
|
|
|
|
|
|
|
{searchRes?.length !== 0 && isSearch ? ( |
|
|
|
|
|
|
|
searchRes?.map((prev, idx) => { |
|
|
|
|
|
|
|
let title = prev.title.replaceAll('<b>', ''); |
|
|
|
|
|
|
|
title = title.replaceAll('</b>', ''); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<li |
|
|
|
|
|
|
|
key={prev.mapx + prev.mapy} |
|
|
|
|
|
|
|
onClick={() => handleCoord(prev.mapx, prev.mapy)} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<a> |
|
|
|
|
|
|
|
<div className='search-result'> |
|
|
|
|
|
|
|
<div className='title'> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<strong>{title}</strong> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className='address'> |
|
|
|
|
|
|
|
{/* <span>{prev.address}</span> */} |
|
|
|
|
|
|
|
<span>{prev.roadAddress}</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</a> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<></> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{!map ? |
|
|
|
|
|
|
|
|
|
|
|
<iframe |
|
|
|
<iframe |
|
|
|
style={{ width: '100%', height: '99vh' }} |
|
|
|
style={{ width: '100%', height: '99vh' }} |
|
|
|
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' }} |
|
|
|
|
|
|
|
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`} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
</> |
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|