435 lines
20 KiB
JavaScript
435 lines
20 KiB
JavaScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
|
|
import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
|
|
import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
|
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { roofMaterialsAtom } from '@/store/settingAtom'
|
|
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
|
|
import { onlyNumberInputChange } from '@/util/input-utils'
|
|
|
|
export const ROOF_MATERIAL_LAYOUT = {
|
|
PARALLEL: 'P',
|
|
STAIRS: 'S',
|
|
}
|
|
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
|
|
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
|
|
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
|
|
const { closePopup } = usePopup()
|
|
const { getMessage } = useMessage()
|
|
const roofMaterials = useRecoilValue(roofMaterialsAtom)
|
|
|
|
const globalLocale = useRecoilValue(globalLocaleStore)
|
|
const { basicSetting, setBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting()
|
|
const { findCommonCode } = useCommonCode()
|
|
const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
|
|
const [currentRoof, setCurrentRoof] = useState(addedRoofs[0]) // 현재 선택된 지붕재 정보
|
|
|
|
const roofRef = {
|
|
roofCd: useRef(null),
|
|
width: useRef(null),
|
|
length: useRef(null),
|
|
rafter: useRef(null),
|
|
hajebichi: useRef(null),
|
|
}
|
|
|
|
// 데이터를 최초 한 번만 조회
|
|
useEffect(() => {
|
|
if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
|
|
const raftCodeList = findCommonCode('203800')
|
|
setRaftCodes(raftCodeList)
|
|
// setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet })
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!currentRoof || Object.keys(currentRoof).length === 0) return
|
|
console.log(basicSetting)
|
|
setBasicSettings({
|
|
...basicSetting,
|
|
roofSizeSet: String(currentRoof.roofSizeSet),
|
|
roofAngleSet: currentRoof.roofAngleSet,
|
|
roofsData: {
|
|
roofApply: true,
|
|
roofSeq: 0,
|
|
roofMatlCd: currentRoof.roofMatlCd,
|
|
roofWidth: currentRoof.width,
|
|
roofHeight: currentRoof.length,
|
|
roofHajebichi: currentRoof.hajebichi,
|
|
roofGap: currentRoof.raft,
|
|
roofLayout: currentRoof.layout,
|
|
roofPitch: currentRoof.pitch,
|
|
roofAngle: currentRoof.angle,
|
|
},
|
|
})
|
|
}, [currentRoof])
|
|
|
|
const handleRoofSizeSetChange = (value) => {
|
|
setCurrentRoof({ ...currentRoof, roofSizeSet: value })
|
|
}
|
|
|
|
const handleRoofAngleSetChange = (value) => {
|
|
setCurrentRoof({ ...currentRoof, roofAngleSet: value })
|
|
}
|
|
|
|
// Function to update the roofType and corresponding values
|
|
const handleRoofTypeChange = (value) => {
|
|
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
|
|
setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet })
|
|
}
|
|
|
|
const changeInput = (value, e) => {
|
|
const { name } = e.target
|
|
setCurrentRoof({ ...currentRoof, [name]: Number(value) })
|
|
}
|
|
|
|
const handleRafterChange = (value) => {
|
|
setCurrentRoof({ ...currentRoof, raft: value })
|
|
}
|
|
|
|
const handleRoofLayoutChange = (value) => {
|
|
setCurrentRoof({ ...currentRoof, layout: value })
|
|
}
|
|
|
|
const handleSaveBtn = () => {
|
|
const roofInfo = {
|
|
...currentRoof,
|
|
roofCd: roofRef.roofCd.current?.value,
|
|
width: roofRef.width.current?.value,
|
|
length: roofRef.length.current?.value,
|
|
hajebichi: roofRef.hajebichi.current?.value,
|
|
raft: roofRef.rafter.current?.value,
|
|
selected: true,
|
|
layout: currentRoof.layout,
|
|
index: 0,
|
|
}
|
|
|
|
const newAddedRoofs = [...addedRoofs]
|
|
if (addedRoofs.length === 1) {
|
|
newAddedRoofs[0] = { ...roofInfo }
|
|
setAddedRoofs(newAddedRoofs)
|
|
}
|
|
|
|
console.log('save Info', {
|
|
...basicSetting,
|
|
selectedRoofMaterial: {
|
|
// 선택된 지붕재 정보
|
|
roofInfo,
|
|
},
|
|
})
|
|
|
|
setBasicSettings({
|
|
...basicSetting,
|
|
selectedRoofMaterial: {
|
|
// 선택된 지붕재 정보
|
|
...roofInfo,
|
|
},
|
|
//roofs: addedRoofs,
|
|
roofsData: {
|
|
roofApply: true,
|
|
roofSeq: 0,
|
|
roofMatlCd: currentRoof.roofMatlCd,
|
|
roofWidth: currentRoof.width,
|
|
roofHeight: currentRoof.length,
|
|
roofHajebichi: currentRoof.hajebichi,
|
|
roofGap: currentRoof.raft,
|
|
roofLayout: currentRoof.layout,
|
|
roofSizeSet: currentRoof.roofSizeSet,
|
|
roofAngleSet: currentRoof.roofAngleSet,
|
|
roofPitch: currentRoof.pitch,
|
|
roofAngle: currentRoof.angle,
|
|
},
|
|
})
|
|
|
|
basicSettingSave()
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos}>
|
|
<div className={`modal-pop-wrap ll mount`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
|
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="placement-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{ width: '151px' }} />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
|
|
<td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="tip-wrap">
|
|
{getMessage('modal.placement.initial.setting.size')}
|
|
<button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="pop-form-radio">
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="roofSizeSet"
|
|
id="ra01"
|
|
value="1" // roofSizeSet 값이 '1'인 경우
|
|
checked={currentRoof?.roofSizeSet === '1'} // 선택 여부 확인
|
|
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
|
onClick={() => handleRoofSizeSetChange('1')}
|
|
/>
|
|
<label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
|
|
</div>
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="roofSizeSet"
|
|
id="ra02"
|
|
value="2" // roofSizeSet 값이 '2'인 경우
|
|
checked={currentRoof?.roofSizeSet === '2'} // 선택 여부 확인
|
|
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
|
onClick={() => handleRoofSizeSetChange('2')}
|
|
/>
|
|
<label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
|
|
</div>
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="roofSizeSet"
|
|
id="ra03"
|
|
value="3" // roofSizeSet 값이 '3'인 경우
|
|
checked={currentRoof?.roofSizeSet === '3'} // 선택 여부 확인
|
|
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
|
onClick={() => handleRoofSizeSetChange('3')}
|
|
/>
|
|
<label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
|
|
<td>
|
|
<div className="pop-form-radio">
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="roofAngleSet"
|
|
id="ra04"
|
|
value="slope" // 첫 번째 라디오 버튼의 값
|
|
checked={currentRoof?.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
|
|
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
|
|
onClick={() => handleRoofAngleSetChange('slope')}
|
|
/>
|
|
<label htmlFor="ra04">{getMessage('modal.placement.initial.setting.roof.pitch')}</label>
|
|
</div>
|
|
<div className="d-check-radio pop">
|
|
<input
|
|
type="radio"
|
|
name="roofAngleSet"
|
|
id="ra05"
|
|
value="flat" // 두 번째 라디오 버튼의 값
|
|
checked={currentRoof?.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
|
|
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
|
|
onClick={() => handleRoofAngleSetChange('flat')}
|
|
/>
|
|
<label htmlFor="ra05">{getMessage('modal.placement.initial.setting.roof.angle')}</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="tip-wrap">
|
|
{getMessage('modal.placement.initial.setting.roof.material')}
|
|
<button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="placement-option">
|
|
<div className="grid-select no-flx" style={{ width: '171px' }}>
|
|
<QSelectBox
|
|
title={
|
|
currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
|
|
}
|
|
ref={roofRef.roofCd}
|
|
options={roofMaterials.map((roof, index) => {
|
|
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
|
|
})}
|
|
value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
|
|
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
|
|
sourceKey="id"
|
|
targetKey="id"
|
|
showKey="name"
|
|
disabled={currentRoof?.roofSizeSet === '3'}
|
|
/>
|
|
{/* <select
|
|
className="select-light dark"
|
|
name="roofMatlCd"
|
|
ref={roofRef.roofCd}
|
|
value={currentRoofMaterial.roofMatlCd}
|
|
onChange={(e) => {
|
|
handleRoofTypeChange(e.target.value)
|
|
}}
|
|
>
|
|
{roofMaterials.map((roof, index) => {
|
|
return (
|
|
<option key={index} value={roof.roofMatlCd}>
|
|
{roof.roofMatlNm}
|
|
</option>
|
|
)
|
|
})}
|
|
</select> */}
|
|
</div>
|
|
{currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="input-grid" style={{ width: '84px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
name={`width`}
|
|
ref={roofRef.width}
|
|
value={parseInt(currentRoof?.width)}
|
|
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
|
readOnly={currentRoof?.widAuth === 'R'}
|
|
disabled={currentRoof?.roofSizeSet === '3'}
|
|
/>
|
|
</div>
|
|
{/* <div className="input-grid" style={{ width: '63px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
ref={roofRef.width}
|
|
defaultValue={parseInt(currentRoofMaterial.width)}
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
)}
|
|
{currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="input-grid" style={{ width: '84px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
name={`length`}
|
|
ref={roofRef.length}
|
|
value={parseInt(currentRoof?.length)}
|
|
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
|
readOnly={currentRoof?.lenAuth === 'R'}
|
|
disabled={currentRoof?.roofSizeSet === '3'}
|
|
/>
|
|
</div>
|
|
{/* <div className="input-grid" style={{ width: '63px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
ref={roofRef.length}
|
|
defaultValue={parseInt(currentRoofMaterial.length)}
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
)}
|
|
{currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
|
|
<div className="flex-ment">
|
|
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
|
{raftCodes.length > 0 && (
|
|
<div className="select-wrap" style={{ width: '160px' }}>
|
|
<QSelectBox
|
|
options={raftCodes}
|
|
ref={roofRef.rafter}
|
|
title={
|
|
raftCodes.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
|
|
.clCodeNm
|
|
}
|
|
value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
|
|
onChange={(e) => handleRafterChange(e.clCode)}
|
|
sourceKey="clCode"
|
|
targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
|
|
showKey="clCodeNm"
|
|
disabled={currentRoof?.roofSizeSet === '3'}
|
|
/>
|
|
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
|
|
{raftCodes.map((raft, index) => {
|
|
return (
|
|
<option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
|
|
{raft.clCodeNm}
|
|
</option>
|
|
)
|
|
})}
|
|
</select> */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{currentRoof && ['C', 'R'].includes(currentRoof.roofPchAuth) && (
|
|
<div className="flex-ment">
|
|
<span>{getMessage('hajebichi')}</span>
|
|
<div className="input-grid" style={{ width: '84px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
name={`hajebichi`}
|
|
ref={roofRef.hajebichi}
|
|
value={parseInt(currentRoof.hajebichi)}
|
|
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
|
readOnly={currentRoof.roofPchAuth === 'R'}
|
|
disabled={currentRoof.roofSizeSet === '3'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{currentRoof && (
|
|
<div className="placement-roof-btn-wrap">
|
|
<div className="icon-btn-wrap mt10">
|
|
<button
|
|
className={`${currentRoof?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
|
|
value={ROOF_MATERIAL_LAYOUT.PARALLEL}
|
|
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
|
|
>
|
|
{getMessage('modal.roof.alloc.select.parallel')}
|
|
<i className="allocation01"></i>
|
|
</button>
|
|
<button
|
|
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
|
|
value={ROOF_MATERIAL_LAYOUT.STAIRS}
|
|
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}
|
|
>
|
|
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
|
{getMessage('modal.common.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
|
|
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|