121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { isEmptyArray, isNotEmptyArray } from '@/util/common-utils'
|
|
export default function WindSelectPop(props) {
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
const { promiseGet } = useAxios(globalLocaleState)
|
|
const [windSpeedList, setWindSpeedList] = useState([])
|
|
const [windSpeed, setWindSpeed] = useState(null)
|
|
const { getMessage } = useMessage()
|
|
|
|
//선택한 라디오 값 세팅
|
|
const handleChangeRadio = (e) => {
|
|
setWindSpeed(e.target.value)
|
|
}
|
|
|
|
//적용
|
|
const applyWindSpeed = () => {
|
|
if (windSpeed == null) {
|
|
alert(getMessage('stuff.windSelectPopup.error.message2'))
|
|
} else {
|
|
props.windSpeedInfo({ windSpeed: windSpeed })
|
|
|
|
//팝업닫기
|
|
props.setShowWindSpeedButtonValid(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (props.prefName !== '') {
|
|
promiseGet({ url: `/api/object/windSpeed/${props.prefName}/list` }).then((res) => {
|
|
if (res.status === 200) {
|
|
if (!isEmptyArray(res.data)) {
|
|
setWindSpeedList(res.data)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}, [props])
|
|
|
|
return (
|
|
<div className="modal-popup">
|
|
<div className="modal-dialog middle">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h1 className="title">{getMessage('stuff.windSelectPopup.title')}</h1>
|
|
<button className="modal-close" onClick={() => props.setShowWindSpeedButtonValid(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-body-inner">
|
|
<div className="common-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{ width: '70px' }} />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>{getMessage('stuff.windSelectPopup.search.address1')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" defaultValue={props.prefName} readOnly />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="wind-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: '50px' }}>{getMessage('stuff.windSelectPopup.table.selected')}</th>
|
|
<th style={{ width: '110px' }}>{getMessage('stuff.windSelectPopup.table.windspeed')}</th>
|
|
<th>Remarks</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{windSpeedList.map((row, index) => {
|
|
return (
|
|
<tr key={index}>
|
|
<td className="al-c">
|
|
<div className="d-check-radio light no-text">
|
|
<input
|
|
type="radio"
|
|
value={row.standardWindSpeedId}
|
|
name="windS"
|
|
id={row.standardWindSpeedId}
|
|
onChange={handleChangeRadio}
|
|
/>
|
|
<label htmlFor={row.standardWindSpeedId}></label>
|
|
</div>
|
|
</td>
|
|
<td className="al-c">{row.standardWindSpeedId.slice(3)}</td>
|
|
<td>{row.remarks}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="footer-btn-wrap">
|
|
<button className="btn-origin navy mr5" onClick={applyWindSpeed}>
|
|
{getMessage('stuff.windSelectPopup.btn2')}
|
|
</button>
|
|
<button className="btn-origin grey" onClick={() => props.setShowWindSpeedButtonValid(false)}>
|
|
{getMessage('stuff.windSelectPopup.btn1')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|