디스플레이 설정 조회/등록/수정 적용
This commit is contained in:
changkyu choi
parent
34d7372c35
commit
06a2e595f5
@ -3,10 +3,13 @@ import { useState } from 'react'
|
||||
import MenuDepth01 from './MenuDepth01'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { post } from '@/lib/Axios'
|
||||
|
||||
export default function CanvasMenu() {
|
||||
const [objectNo, setObjectNo] = useState('test123240912001')
|
||||
const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
const [vertical, setVertical] = useState(true)
|
||||
@ -18,6 +21,54 @@ export default function CanvasMenu() {
|
||||
setMenuNumber(null)
|
||||
}
|
||||
}
|
||||
|
||||
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
|
||||
|
||||
// 저장버튼(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 요청 보내기
|
||||
const response = await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
|
||||
|
||||
// 응답 처리
|
||||
console.log('서버 응답:', response.data)
|
||||
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">
|
||||
@ -98,7 +149,7 @@ export default function CanvasMenu() {
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn07"></button>
|
||||
<button className="btn08"></button>
|
||||
<button className="btn08" onClick={handleSaveSettings}></button>
|
||||
<button className="btn09"></button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { get } from '@/lib/Axios'
|
||||
|
||||
export default function FirstOption() {
|
||||
const [objectNo, setObjectNo] = useState('test123240912001')
|
||||
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
|
||||
const { option1, option2 } = settingsModalOptions
|
||||
const { getMessage } = useMessage()
|
||||
@ -12,6 +15,54 @@ export default function FirstOption() {
|
||||
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">
|
||||
|
||||
@ -4,22 +4,22 @@ export const settingModalFirstOptionsState = atom({
|
||||
key: 'settingModalFirstOptions',
|
||||
default: {
|
||||
option1: [
|
||||
{ id: 1, name: 'modal.canvas.setting.first.option.alloc', selected: false },
|
||||
{ id: 2, name: 'modal.canvas.setting.first.option.outline', selected: false },
|
||||
{ id: 3, name: 'modal.canvas.setting.first.option.plan', selected: false },
|
||||
{ id: 4, name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 5, name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 6, name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 7, name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 8, name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 9, name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 10, name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
{ id: 11, name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
|
||||
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
|
||||
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
|
||||
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
|
||||
{ id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
|
||||
{ id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
|
||||
{ id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
|
||||
{ id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
|
||||
{ id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
|
||||
{ id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
|
||||
{ id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
|
||||
{ id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
|
||||
],
|
||||
option2: [
|
||||
{ id: 1, name: 'modal.canvas.setting.first.option.border', selected: false },
|
||||
{ id: 2, name: 'modal.canvas.setting.first.option.line', selected: false },
|
||||
{ id: 3, name: 'modal.canvas.setting.first.option.all', selected: false },
|
||||
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
|
||||
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
|
||||
{ id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
|
||||
],
|
||||
},
|
||||
dangerouslyAllowMutability: true,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user