383 lines
14 KiB
JavaScript
383 lines
14 KiB
JavaScript
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { useContext, useEffect, useRef, useState } from 'react'
|
|
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
|
|
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
|
|
import { useRecoilValue, useRecoilState } from 'recoil'
|
|
import {
|
|
canvasSettingState,
|
|
canvasState,
|
|
checkedModuleState,
|
|
isManualModuleLayoutSetupState,
|
|
isManualModuleSetupState,
|
|
toggleManualSetupModeState,
|
|
} from '@/store/canvasAtom'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
|
|
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
|
|
import { addedRoofsState, corridorDimensionSelector, basicSettingState } from '@/store/settingAtom'
|
|
import { isObjectNotEmpty } from '@/util/common-utils'
|
|
import Swal from 'sweetalert2'
|
|
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
|
|
import { useMasterController } from '@/hooks/common/useMasterController'
|
|
import { loginUserStore } from '@/store/commonAtom'
|
|
import { currentCanvasPlanState } from '@/store/canvasAtom'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import { useModuleSelection } from '@/hooks/module/useModuleSelection'
|
|
import { useOrientation } from '@/hooks/module/useOrientation'
|
|
import Trestle from './step/Trestle'
|
|
import { roofsState } from '@/store/roofAtom'
|
|
|
|
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
const [tabNum, setTabNum] = useState(1)
|
|
const orientationRef = useRef(null)
|
|
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
|
|
const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
|
|
const trestleRef = useRef(null)
|
|
const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
|
|
const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
|
|
const loginUserState = useRecoilValue(loginUserStore)
|
|
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
|
|
const canvas = useRecoilValue(canvasState)
|
|
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
|
const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
|
|
const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
|
|
const [roofs, setRoofs] = useState(addedRoofs)
|
|
const [manualSetupMode, setManualSetupMode] = useRecoilState(toggleManualSetupModeState)
|
|
const [layoutSetup, setLayoutSetup] = useState([{}])
|
|
|
|
const {
|
|
moduleSelectionInitParams,
|
|
selectedModules,
|
|
roughnessCodes,
|
|
windSpeedCodes,
|
|
managementState,
|
|
setManagementState,
|
|
moduleList,
|
|
setSelectedModules,
|
|
selectedSurfaceType,
|
|
setSelectedSurfaceType,
|
|
installHeight,
|
|
setInstallHeight,
|
|
standardWindSpeed,
|
|
setStandardWindSpeed,
|
|
verticalSnowCover,
|
|
setVerticalSnowCover,
|
|
handleChangeModule,
|
|
handleChangeSurfaceType,
|
|
handleChangeWindSpeed,
|
|
handleChangeInstallHeight,
|
|
handleChangeVerticalSnowCover,
|
|
} = useModuleSelection({ addedRoofs })
|
|
const { nextStep, compasDeg, setCompasDeg } = useOrientation()
|
|
const { trigger: orientationTrigger } = useCanvasPopupStatusController(1)
|
|
const { trigger: trestleTrigger } = useCanvasPopupStatusController(2)
|
|
const { trigger: placementTrigger } = useCanvasPopupStatusController(3)
|
|
const roofsStore = useRecoilValue(roofsState)
|
|
|
|
// const { initEvent } = useContext(EventContext)
|
|
const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
|
|
useModuleBasicSetting(tabNum)
|
|
const { updateObjectDate } = useMasterController()
|
|
|
|
useEffect(() => {
|
|
if (managementState) console.log('managementState', managementState)
|
|
}, [managementState])
|
|
|
|
useEffect(() => {
|
|
if (roofsStore && addedRoofs) {
|
|
console.log('🚀 ~ useEffect ~ roofsStore, addedRoofs:', roofsStore, addedRoofs)
|
|
setRoofs(
|
|
addedRoofs.map((roof, index) => {
|
|
return {
|
|
...roof,
|
|
...roofsStore[index]?.addRoof,
|
|
}
|
|
}),
|
|
)
|
|
|
|
setModuleSelectionData({
|
|
...moduleSelectionData,
|
|
roofConstructions: roofsStore.map((roof) => {
|
|
return {
|
|
addRoof: {
|
|
...roof.addRoof,
|
|
},
|
|
construction: {
|
|
...roof.construction,
|
|
},
|
|
trestle: {
|
|
...roof.trestle,
|
|
},
|
|
}
|
|
}),
|
|
})
|
|
}
|
|
}, [roofsStore, addedRoofs])
|
|
|
|
useEffect(() => {
|
|
let hasModules = canvas
|
|
.getObjects()
|
|
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
|
|
.some((obj) => obj.modules?.length > 0)
|
|
|
|
if (hasModules) {
|
|
orientationRef.current.handleNextStep()
|
|
setTabNum(3)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (basicSetting.roofSizeSet !== '3') {
|
|
manualModuleSetup()
|
|
} else {
|
|
manualFlatroofModuleSetup(placementFlatRef)
|
|
}
|
|
if (isClosePopup.close) {
|
|
closePopup(isClosePopup.id)
|
|
}
|
|
}, [isManualModuleSetup, isClosePopup])
|
|
|
|
useEffect(() => {
|
|
setIsManualModuleSetup(false)
|
|
}, [checkedModules])
|
|
|
|
const handleBtnNextStep = () => {
|
|
if (tabNum === 1) {
|
|
console.log('moduleSelectionData', moduleSelectionData)
|
|
orientationRef.current.handleNextStep()
|
|
setAddedRoofs(roofs)
|
|
return
|
|
} else if (tabNum === 2) {
|
|
if (basicSetting.roofSizeSet !== '3') {
|
|
if (!isObjectNotEmpty(moduleSelectionData.module)) {
|
|
Swal.fire({
|
|
title: getMessage('module.not.found'),
|
|
icon: 'warning',
|
|
})
|
|
return
|
|
}
|
|
|
|
// if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
|
|
// Swal.fire({
|
|
// title: getMessage('construction.length.difference'),
|
|
// icon: 'warning',
|
|
// })
|
|
// return
|
|
// }
|
|
|
|
if (!trestleRef.current.isComplete()) {
|
|
Swal.fire({
|
|
title: getMessage('construction.length.difference'),
|
|
icon: 'warning',
|
|
})
|
|
return
|
|
}
|
|
//물건정보 갱신일 수정
|
|
} else {
|
|
if (!isObjectNotEmpty(moduleSelectionData.module)) {
|
|
Swal.fire({
|
|
title: getMessage('module.not.found'),
|
|
icon: 'warning',
|
|
})
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
setTabNum(tabNum + 1)
|
|
}
|
|
|
|
const placementFlatRef = {
|
|
setupLocation: useRef('south'),
|
|
}
|
|
|
|
const handleManualModuleSetup = () => {
|
|
setManualSetupMode(`manualSetup_${!isManualModuleSetup}`)
|
|
setIsManualModuleSetup(!isManualModuleSetup)
|
|
}
|
|
|
|
const handleManualModuleLayoutSetup = () => {
|
|
setManualSetupMode(`manualLayoutSetup_${!isManualModuleLayoutSetup}`)
|
|
setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
|
|
}
|
|
|
|
const updateObjectDataApi = async (params) => {
|
|
const res = await updateObjectDate(params)
|
|
}
|
|
|
|
//팝업 닫기 버튼 이벤트
|
|
const handleClosePopup = (id) => {
|
|
if (tabNum == 3) {
|
|
if (isManualModuleSetup) {
|
|
setIsManualModuleSetup(false)
|
|
}
|
|
if (isManualModuleLayoutSetup) {
|
|
setIsManualModuleLayoutSetup(false)
|
|
}
|
|
}
|
|
setIsClosePopup({ close: true, id: id })
|
|
}
|
|
|
|
const orientationProps = {
|
|
roofs,
|
|
setRoofs,
|
|
tabNum,
|
|
setTabNum,
|
|
compasDeg, // 방위각
|
|
setCompasDeg,
|
|
moduleSelectionInitParams,
|
|
selectedModules,
|
|
moduleSelectionData,
|
|
setModuleSelectionData,
|
|
roughnessCodes, // 면조도 목록
|
|
windSpeedCodes, // 기준풍속 목록
|
|
managementState,
|
|
setManagementState,
|
|
moduleList, // 모듈 리스트
|
|
setSelectedModules,
|
|
selectedSurfaceType,
|
|
setSelectedSurfaceType,
|
|
installHeight, // 설치높이
|
|
setInstallHeight,
|
|
standardWindSpeed, // 기준풍속
|
|
setStandardWindSpeed,
|
|
verticalSnowCover, // 적설량
|
|
setVerticalSnowCover,
|
|
currentCanvasPlan,
|
|
loginUserState,
|
|
handleChangeModule,
|
|
handleChangeSurfaceType,
|
|
handleChangeWindSpeed,
|
|
handleChangeInstallHeight,
|
|
handleChangeVerticalSnowCover,
|
|
orientationTrigger,
|
|
nextStep,
|
|
updateObjectDataApi,
|
|
}
|
|
const trestleProps = {
|
|
roofs,
|
|
setRoofs,
|
|
setTabNum,
|
|
moduleSelectionData,
|
|
setModuleSelectionData,
|
|
trestleTrigger,
|
|
}
|
|
const placementProps = {}
|
|
|
|
useEffect(() => {
|
|
if (basicSetting.roofSizeSet !== '3') {
|
|
if (manualSetupMode.indexOf('manualSetup') > -1) {
|
|
manualModuleSetup()
|
|
} else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
|
|
manualModuleLayoutSetup(layoutSetup)
|
|
} else if (manualSetupMode.indexOf('off') > -1) {
|
|
manualModuleSetup()
|
|
manualModuleLayoutSetup(layoutSetup)
|
|
}
|
|
} else {
|
|
manualFlatroofModuleSetup(placementFlatRef)
|
|
}
|
|
|
|
if (isClosePopup.close) {
|
|
closePopup(isClosePopup.id)
|
|
}
|
|
}, [manualSetupMode, isClosePopup])
|
|
|
|
useEffect(() => {
|
|
if (isManualModuleLayoutSetup) {
|
|
manualModuleLayoutSetup(layoutSetup)
|
|
}
|
|
}, [layoutSetup])
|
|
|
|
useEffect(() => {
|
|
setIsManualModuleSetup(false)
|
|
setIsManualModuleLayoutSetup(false)
|
|
setManualSetupMode(`off`)
|
|
}, [checkedModules])
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className={basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' ? 'll' : 'lx-2'}>
|
|
<WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="roof-module-tab">
|
|
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
|
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
|
<>
|
|
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
|
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
|
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
|
</>
|
|
)}
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
|
<>
|
|
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
{tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
|
|
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
|
|
<Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
|
|
)}
|
|
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
|
{/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
|
|
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
|
|
)}
|
|
|
|
<div className="grid-btn-wrap">
|
|
{/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}
|
|
|
|
{tabNum !== 1 && (
|
|
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
|
|
{getMessage('modal.module.basic.setting.prev')}
|
|
</button>
|
|
)}
|
|
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
|
|
{tabNum !== 3 && (
|
|
<button className="btn-frame modal" onClick={handleBtnNextStep}>
|
|
Next
|
|
</button>
|
|
)}
|
|
|
|
{tabNum === 3 && (
|
|
<>
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
|
<>
|
|
<button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
|
|
{getMessage('modal.module.basic.setting.row.batch')}
|
|
</button>
|
|
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
|
{getMessage('modal.module.basic.setting.passivity.placement')}
|
|
</button>
|
|
<button className="btn-frame modal act" onClick={() => autoModuleSetup()}>
|
|
{getMessage('modal.module.basic.setting.auto.placement')}
|
|
</button>
|
|
</>
|
|
)}
|
|
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
|
<>
|
|
<button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.row.batch')}</button>
|
|
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
|
{getMessage('modal.module.basic.setting.passivity.placement')}
|
|
</button>
|
|
<button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
|
|
{getMessage('modal.module.basic.setting.auto.placement')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|