qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Canvas 설정 화면 수정

Browse Source
This commit is contained in:
changkyu choi 2024-09-19 16:08:52 +09:00
parent 6601f5cf3f
commit 372528ddb8
4 changed files with 94 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/floor-plan/CanvasMenu.jsx
View File

@ -1,15 +1,16 @@
'use client'
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'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { verticalHorizontalModeState } from '@/store/canvasAtom'
export default function CanvasMenu(props) {
const [objectNo] = useState('test123240912001')
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
const [menuNumber, setMenuNumber] = useState(null)
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
@ -28,7 +29,8 @@ export default function CanvasMenu(props) {
type,
}
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
const firstOptions = useRecoilState(settingModalFirstOptionsState)
const secondOptions = useRecoilState(settingModalSecondOptionsState)
useEffect(() => {}, [menuNumber, type])
@ -37,11 +39,19 @@ export default function CanvasMenu(props) {
try {
// 서버에 전송할 데이터
const dataToSend = {
option1: settingsModalOptions[0].option1.map((item) => ({
firstOption1: firstOptions[0].option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
option2: settingsModalOptions[0].option2.map((item) => ({
firstOption2: firstOptions[0].option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.name,
// // 필요한 경우 추가 데이터 항목
// })),
secondOption2: secondOptions[0].option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
@ -49,20 +59,24 @@ export default function CanvasMenu(props) {
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,
assignDisplay: dataToSend.firstOption1[0].selected,
drawDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
charDisplay: dataToSend.firstOption1[3].selected,
flowDisplay: dataToSend.firstOption1[4].selected,
hallwayDimenDisplay: dataToSend.firstOption1[5].selected,
actualDimenDisplay: dataToSend.firstOption1[6].selected,
noDimenDisplay: dataToSend.firstOption1[7].selected,
trestleDisplay: dataToSend.firstOption1[8].selected,
coordiDisplay: dataToSend.firstOption1[9].selected,
drawConverDisplay: dataToSend.firstOption1[10].selected,
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
// HTTP POST 요청 보내기

21
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -5,24 +5,27 @@ import React, { useEffect, useState } from 'react'
import { get } from '@/lib/Axios'
export default function FirstOption() {
const [objectNo] = useState('test123240912001')
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
const { option1, option2 } = settingsModalOptions
const { getMessage } = useMessage()
// 초기 조회
const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('useEffect 실행')
fetchSettings()
}, [])
console.log('FirstOption useEffect 실행')
if (!isFetched) {
// 조회가 안 되었을 때만 fetchSettings 실행
fetchSettings()
}
}, [isFetched]) // isFetched 상태가 변할 때마다 확인
// 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',
@ -45,9 +48,9 @@ export default function FirstOption() {
setSettingModalOptions({
option1,
option2,
// rangeSetting: data.rangeSetting,
// gridSettings: data.gridSettings,
})
setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
} catch (error) {
console.error('Data fetching error:', error)
}

52
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -1,23 +1,61 @@
import { useRecoilState } from 'recoil'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { get } from '@/lib/Axios'
export default function SecondOption() {
const [objectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2 } = settingsModalOptions
const { getMessage } = useMessage()
const onClickOption = (option) => {
option.selected = !option.selected
setSettingModalOptions({ option1: option1, option2: option2 })
const [isFetched, setIsFetched] = useState(false) // 조회 여부 상태
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('SecondOption useEffect 실행')
if (!isFetched) {
// 조회가 안 되었을 때만 fetchSettings 실행
fetchSettings()
}
}, [isFetched]) // isFetched 상태가 변할 때마다 확인
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
//const options1 = ['1', '2', '3', '4']
//const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
const options2 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge']
const option2 = settingsModalOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
// 데이터 설정
setSettingModalOptions({
option1,
option2,
})
setIsFetched(true) // 조회가 완료되면 isFetched를 true로 설정
} catch (error) {
console.error('Data fetching error:', error)
}
}
const onClickOption = (option) => {
// option2에서 한 개만 선택 가능하도록 처리
const updatedOption2 = option2.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
setSettingModalOptions({ option1, option2: updatedOption2 })
}
return (
<>
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
<div className="flex-check-box for2">
{settingsModalOptions.option1.map((item) => (
<button className="arr-btn">
{settingsModalOptions.option1.map((item, index) => (
<button key={item.id || index} className="arr-btn">
<span>{getMessage(item.name)}</span>
</button>
))}
@ -26,8 +64,8 @@ export default function SecondOption() {
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
<div className="flex-check-box for-line">
{settingsModalOptions.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
{settingsModalOptions.option2.map((item, index) => (
<button key={item.id || index} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>

8
src/store/settingAtom.js
View File

@ -35,10 +35,10 @@ export const settingModalSecondOptionsState = atom({
{ id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
],
option2: [
{ id: 1, name: 'modal.canvas.setting.font.plan.absorption.small', selected: false },
{ id: 2, name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
{ id: 3, name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
{ id: 4, name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
{ id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true },
{ id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
{ id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
{ id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
],
},
dangerouslyAllowMutability: true,