Canvas 설정 화면 수정
This commit is contained in:
changkyu choi
parent
e791ba24d2
commit
33d2ba50e9
@ -3,8 +3,12 @@ import { useEffect, useState } from 'react'
|
||||
import MenuDepth01 from './MenuDepth01'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { post } from '@/lib/Axios'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
|
||||
export default function CanvasMenu(props) {
|
||||
const [objectNo] = useState('test123240912001')
|
||||
const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
const [vertical, setVertical] = useState(true)
|
||||
@ -21,8 +25,55 @@ export default function CanvasMenu(props) {
|
||||
setShowOutlineModal,
|
||||
type,
|
||||
}
|
||||
|
||||
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
|
||||
|
||||
useEffect(() => {}, [menuNumber, type])
|
||||
|
||||
// 저장버튼(btn08) 클릭 시 호출되는 함수
|
||||
const handleSaveSettings = async () => {
|
||||
try {
|
||||
// 서버에 전송할 데이터
|
||||
const dataToSend = {
|
||||
option1: settingsModalOptions[0].option1.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
option2: settingsModalOptions[0].option2.map((item) => ({
|
||||
column: item.column,
|
||||
selected: item.selected,
|
||||
})),
|
||||
}
|
||||
|
||||
const patternData = {
|
||||
objectNo,
|
||||
assignDisplay: dataToSend.option1[0].selected,
|
||||
drawDisplay: dataToSend.option1[1].selected,
|
||||
gridDisplay: dataToSend.option1[2].selected,
|
||||
charDisplay: dataToSend.option1[3].selected,
|
||||
flowDisplay: dataToSend.option1[4].selected,
|
||||
hallwayDimenDisplay: dataToSend.option1[5].selected,
|
||||
actualDimenDisplay: dataToSend.option1[6].selected,
|
||||
noDimenDisplay: dataToSend.option1[7].selected,
|
||||
trestleDisplay: dataToSend.option1[8].selected,
|
||||
coordiDisplay: dataToSend.option1[9].selected,
|
||||
drawConverDisplay: dataToSend.option1[10].selected,
|
||||
onlyBorder: dataToSend.option2[0].selected,
|
||||
lineHatch: dataToSend.option2[1].selected,
|
||||
allPainted: dataToSend.option2[2].selected,
|
||||
}
|
||||
|
||||
// HTTP POST 요청 보내기
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
|
||||
|
||||
// 응답 처리
|
||||
alert('설정이 저장되었습니다.')
|
||||
} catch (error) {
|
||||
console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
|
||||
alert('설정을 저장하는 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
||||
<div className="canvas-menu-inner">
|
||||
@ -104,7 +155,7 @@ export default function CanvasMenu(props) {
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn07"></button>
|
||||
<button className="btn08"></button>
|
||||
<button className="btn08" onClick={handleSaveSettings}></button>
|
||||
<button className="btn09"></button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -5,64 +5,60 @@ import React, { useEffect, useState } from 'react'
|
||||
import { get } from '@/lib/Axios'
|
||||
|
||||
export default function FirstOption() {
|
||||
const [objectNo, setObjectNo] = useState('test123240912001')
|
||||
const [objectNo] = useState('test123240912001')
|
||||
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
|
||||
const { option1, option2 } = settingsModalOptions
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
// 초기 조회
|
||||
useEffect(() => {
|
||||
console.log('useEffect 실행')
|
||||
fetchSettings()
|
||||
}, [])
|
||||
|
||||
// Canvas Setting 조회 및 초기화
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
|
||||
// console.log(res)
|
||||
|
||||
const options1 = [
|
||||
'assignDisplay',
|
||||
'drawDisplay',
|
||||
'gridDisplay',
|
||||
'charDisplay',
|
||||
'flowDisplay',
|
||||
'hallwayDimenDisplay',
|
||||
'actualDimenDisplay',
|
||||
'noDimenDisplay',
|
||||
'trestleDisplay',
|
||||
'coordiDisplay',
|
||||
'drawConverDisplay',
|
||||
]
|
||||
const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
|
||||
|
||||
const options2 = ['onlyBorder', 'lineHatch', 'allPainted']
|
||||
const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
|
||||
|
||||
// 데이터 설정
|
||||
setSettingModalOptions({
|
||||
option1,
|
||||
option2,
|
||||
// rangeSetting: data.rangeSetting,
|
||||
// gridSettings: data.gridSettings,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const onClickOption = (option) => {
|
||||
option.selected = !option.selected
|
||||
|
||||
setSettingModalOptions({ option1, option2 })
|
||||
}
|
||||
|
||||
// 초기 조회
|
||||
useEffect(() => {
|
||||
// Canvas Setting 조회 및 초기화
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
|
||||
// console.log(res)
|
||||
|
||||
const data = {
|
||||
option1: [
|
||||
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay },
|
||||
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay },
|
||||
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay },
|
||||
{ id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay },
|
||||
{ id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay },
|
||||
{ id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay },
|
||||
{ id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay },
|
||||
{ id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay },
|
||||
{ id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay },
|
||||
{ id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay },
|
||||
{ id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay },
|
||||
],
|
||||
option2: [
|
||||
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: res.onlyBorder },
|
||||
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: res.lineHatch },
|
||||
{ id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: res.allPainted },
|
||||
],
|
||||
|
||||
//rangeSetting: res.adsorpRangeSetting,
|
||||
//gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
|
||||
}
|
||||
|
||||
// 데이터 설정
|
||||
setSettingModalOptions({
|
||||
option1: data.option1,
|
||||
option2: data.option2,
|
||||
// rangeSetting: data.rangeSetting,
|
||||
// gridSettings: data.gridSettings,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
fetchSettings()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-check-btn-wrap">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user