254 lines
8.8 KiB
JavaScript
254 lines
8.8 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState, memo, useCallback } from 'react'
|
|
import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { modalContent, modalState } from '@/store/modalAtom'
|
|
import { canvasSettingState } from '@/store/canvasAtom'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
|
|
export default function InitSettingsModal(props) {
|
|
const [objectNo, setObjectNo] = useState('test123240909003') // 후에 삭제 필요
|
|
const [open, setOpen] = useRecoilState(modalState)
|
|
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
|
const [roofMaterials, setRoofMaterials] = useState([])
|
|
const [basicSetting, setBasicSettings] = useState({
|
|
roofDrawingSet: '1',
|
|
roofSizeSet: '1',
|
|
roofAngleSet: 'slope',
|
|
roofs: [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }],
|
|
})
|
|
|
|
const modelProps = {
|
|
open,
|
|
setOpen,
|
|
}
|
|
|
|
const { get, post } = useAxios()
|
|
|
|
useEffect(() => {
|
|
get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
|
|
if (res.length == 0) return
|
|
|
|
// 'roofs' 배열을 생성하여 각 항목을 추가
|
|
const roofsRow = res.map((item) => {
|
|
return {
|
|
roofDrawingSet: String(item.roofDrawingSet),
|
|
roofSizeSet: String(item.roofSizeSet),
|
|
roofAngleSet: item.roofAngleSet,
|
|
}
|
|
})
|
|
|
|
const roofsArray = res.some((item) => !item.roofSeq)
|
|
? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
|
|
[{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }]
|
|
: res.map((item) => ({
|
|
roofSeq: String(item.roofSeq),
|
|
roofType: String(item.roofType),
|
|
roofWidth: String(item.roofWidth),
|
|
roofHeight: String(item.roofHeight),
|
|
roofGap: String(item.roofGap),
|
|
roofLayout: item.roofLayout,
|
|
}))
|
|
|
|
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
|
const patternData = {
|
|
roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
|
|
roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
|
|
roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
|
|
roofs: roofsArray, // 만들어진 roofs 배열
|
|
}
|
|
|
|
// 데이터 설정
|
|
setBasicSettings({ ...patternData })
|
|
})
|
|
|
|
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
|
setBasicSettings({ ...canvasSetting })
|
|
}
|
|
}, [])
|
|
|
|
//기본 설정값 변경 함수
|
|
const handleBasicSetting = (event) => {
|
|
const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value }
|
|
setBasicSettings(newBasicSetting)
|
|
}
|
|
|
|
//배열 값 변경 함수
|
|
const handleRoofSettings = (id, event) => {
|
|
// 기본 세팅에서 roofs 배열을 복사
|
|
const updatedRoofs = [...basicSetting.roofs]
|
|
|
|
// roofSeq가 id와 일치하는 항목의 인덱스 찾기
|
|
const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)
|
|
|
|
if (index !== -1) {
|
|
// 해당 인덱스의 항목을 수정
|
|
updatedRoofs[index] = {
|
|
...updatedRoofs[index],
|
|
[event.target.name]: event.target.value,
|
|
}
|
|
|
|
// 수정된 배열을 상태에 반영
|
|
setBasicSettings((prevState) => ({
|
|
...prevState,
|
|
roofs: updatedRoofs,
|
|
}))
|
|
}
|
|
}
|
|
|
|
//저장
|
|
const submitCanvasConfig = async () => {
|
|
if (!objectNo) {
|
|
alert('object_no를 입력하세요.')
|
|
return
|
|
}
|
|
|
|
const patternData = {
|
|
objectNo,
|
|
roofDrawingSet: basicSetting.roofDrawingSet,
|
|
roofSizeSet: basicSetting.roofSizeSet,
|
|
roofAngleSet: basicSetting.roofAngleSet,
|
|
roofMaterialsAddList: basicSetting.roofs,
|
|
}
|
|
await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
|
|
|
|
//Recoil 설정
|
|
setCanvasSetting({ ...basicSetting })
|
|
|
|
// 저장 후 재조회
|
|
//await handleSelect()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
|
|
<div className="text-lg font-semibold mb-4">배치면 초기설정</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="도면 작성방법"
|
|
name="roofDrawingSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofDrawingSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="1">치수 입력에 의한 물건작성</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="치수 입력방법"
|
|
name="roofSizeSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofSizeSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="1">복사도 입력</Radio>
|
|
<Radio value="2">실측값 입력</Radio>
|
|
<Radio value="3">육지붕</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
label="지붕각도 설정"
|
|
name="roofAngleSet"
|
|
orientation="horizontal"
|
|
value={basicSetting.roofAngleSet}
|
|
onChange={handleBasicSetting}
|
|
>
|
|
<Radio value="slope">경사</Radio>
|
|
<Radio value="angle">각도</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
<RadioGroup label="지붕재 추가(단위 : mm)" />
|
|
{/* Roofs Array Rendering */}
|
|
{basicSetting.roofs &&
|
|
basicSetting.roofs.map((roof, index) => {
|
|
return (
|
|
<div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
|
|
<span> 타입 : </span>
|
|
<Select
|
|
aria-label="roofMaterial"
|
|
className={'w-52'}
|
|
name="roofType"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
items={roofMaterials}
|
|
defaultSelectedKeys={roof.roofType ? [roof.roofType] : []}
|
|
selectedKeys={roof.roofType}
|
|
value={roof.roofType}
|
|
>
|
|
{(roofMaterial) => (
|
|
<SelectItem key={roofMaterial.id} value={roofMaterial.id}>
|
|
{roofMaterial.name}
|
|
</SelectItem>
|
|
)}
|
|
</Select>
|
|
<span> 너비 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofWidth"
|
|
placeholder="너비"
|
|
value={roof.roofWidth}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<span> 높이 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofHeight"
|
|
placeholder="높이"
|
|
value={roof.roofHeight}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<span> 서까래 간격 : </span>
|
|
<Input
|
|
type="text"
|
|
name="roofGap"
|
|
placeholder="간격"
|
|
value={roof.roofGap}
|
|
className="w-24"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
/>
|
|
mm
|
|
<div className="flex space-x-4">
|
|
<RadioGroup
|
|
orientation="horizontal"
|
|
name="roofLayout"
|
|
value={roof.roofLayout}
|
|
defaultValue="parallel"
|
|
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
|
>
|
|
<Radio value="parallel">병렬식</Radio>
|
|
<Radio value="cascade">계단식</Radio>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
<div className="flex gap-4 items-right">
|
|
<Button size="sm" color="secondary" onClick={submitCanvasConfig}>
|
|
저장
|
|
</Button>
|
|
<Button size="sm" onClick={() => setOpen(!open)}>
|
|
취소
|
|
</Button>
|
|
<input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|