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-23 14:47:44 +09:00
parent 8be9d2ed7f
commit 7bde2776d6
3 changed files with 182 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,20 +5,15 @@ import MenuDepth01 from './MenuDepth01'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import { MENU } from '@/common/common'
import { useAxios } from '@/hooks/useAxios'
import { toastUp } from '@/hooks/useToast'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
export default function CanvasMenu(props) {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
const [menuNumber, setMenuNumber] = useState(null)
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
@ -30,7 +25,6 @@ export default function CanvasMenu(props) {
const setPoints = useSetRecoilState(outerLinePointsState)
const globalLocale = useRecoilValue(globalLocaleStore)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
const { post } = useAxios()
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
const onClickNav = (number) => {
@ -44,9 +38,6 @@ export default function CanvasMenu(props) {
type,
}
const firstOptions = useRecoilState(settingModalFirstOptionsState)
const secondOptions = useRecoilState(settingModalSecondOptionsState)
useEffect(() => {
if (globalLocale === 'ko') {
setAppMessageState(KO)
@ -56,61 +47,7 @@ export default function CanvasMenu(props) {
}, [menuNumber, type, globalLocale])
// 저장버튼(btn08) 클릭 시 호출되는 함수
const handleSaveSettings = async () => {
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: firstOptions[0].option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
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,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
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 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
toastUp({ message: res.returnMessage, type: 'success' })
})
} catch (error) {
toastUp({ message: res.returnMessage, type: 'error' })
}
}
const handleSaveSettings = async () => {}
const handleClear = () => {
setPoints([])

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

@ -1,15 +1,18 @@
import { useRecoilState } from 'recoil'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useCallback, useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { toastUp } from '@/hooks/useToast'
export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
const { option1, option2 } = settingsModalOptions
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2 } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage()
const { get } = useAxios()
const { get, post } = useAxios()
// 데이터를 최초 한 번만 조회
useEffect(() => {
@ -18,10 +21,9 @@ export default function FirstOption() {
}, [objectNo])
// Canvas Setting 조회 및 초기화
const fetchSettings = useCallback(async () => {
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const options1 = [
'assignDisplay',
'drawDisplay',
@ -35,25 +37,90 @@ export default function FirstOption() {
'coordiDisplay',
'drawConverDisplay',
]
const option1 = settingsModalOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))
const option1 = settingModalFirstOptions.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]] }))
const option2 = settingModalFirstOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
const option3 = settingModalSecondOptions.option1.map((item) => ({ ...item }))
const options4 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge']
const option4 = settingModalSecondOptions.option2.map((item, index) => ({ ...item, selected: res[options4[index]] }))
// 데이터 설정
setSettingModalOptions({
setSettingModalFirstOptions({
option1,
option2,
})
setSettingModalSecondOptions({
option3,
option4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}, [objectNo])
}
const onClickOption = (option) => {
const onClickOption = async (option) => {
option.selected = !option.selected
setSettingModalOptions({ option1, option2 })
setSettingModalFirstOptions({ option1, option2 })
setSettingModalSecondOptions({ option3, option4 })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
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 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
toastUp({ message: res.returnMessage, type: 'success' })
})
} catch (error) {
toastUp({ message: res.returnMessage, type: 'error' })
}
}
return (
@ -61,8 +128,8 @@ export default function FirstOption() {
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
<div className="flex-check-box for2">
{settingsModalOptions &&
settingsModalOptions.option1.map((item) => (
{settingModalFirstOptions &&
settingModalFirstOptions.option1.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
@ -73,8 +140,8 @@ export default function FirstOption() {
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
<div className="flex-check-box for-line">
{settingsModalOptions &&
settingsModalOptions.option2.map((item) => (
{settingModalFirstOptions &&
settingModalFirstOptions.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>

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

@ -1,15 +1,18 @@
import { useRecoilState } from 'recoil'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useCallback, useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { toastUp } from '@/hooks/useToast'
export default function SecondOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2 } = settingsModalOptions
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2 } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage()
const { get } = useAxios()
const { get, post } = useAxios()
// 데이터를 최초 한 번만 조회
useEffect(() => {
@ -18,39 +21,115 @@ export default function SecondOption() {
}, [objectNo])
// Canvas Setting 조회 및 초기화
const fetchSettings = useCallback(async () => {
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 options1 = [
'assignDisplay',
'drawDisplay',
'gridDisplay',
'charDisplay',
'flowDisplay',
'hallwayDimenDisplay',
'actualDimenDisplay',
'noDimenDisplay',
'trestleDisplay',
'coordiDisplay',
'drawConverDisplay',
]
const option1 = settingModalFirstOptions.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]] }))
const options2 = ['onlyBorder', 'lineHatch', 'allPainted']
const option2 = settingModalFirstOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))
const option3 = settingModalSecondOptions.option1.map((item) => ({ ...item }))
const options4 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge']
const option4 = settingModalSecondOptions.option2.map((item, index) => ({ ...item, selected: res[options4[index]] }))
// 데이터 설정
setSettingModalOptions({
setSettingModalFirstOptions({
option1,
option2,
})
setSettingModalSecondOptions({
option3,
option4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}, [objectNo])
}
const onClickOption = (option) => {
// option2에서 한 개만 선택 가능하도록 처리
const updatedOption2 = option2.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
const onClickOption = async (option) => {
// option4에서 한 개만 선택 가능하도록 처리
const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
setSettingModalOptions({ option1, option2: updatedOption2 })
setSettingModalFirstOptions({ option1, option2 })
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option3.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: updatedOption4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
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 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
toastUp({ message: res.returnMessage, type: 'success' })
})
} catch (error) {
toastUp({ message: res.returnMessage, type: 'error' })
}
}
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 &&
settingsModalOptions.option1.map((item) => (
{settingModalSecondOptions &&
settingModalSecondOptions.option3.map((item) => (
<button key={item.id} className="arr-btn">
<span>{getMessage(item.name)}</span>
</button>
@ -60,8 +139,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 &&
settingsModalOptions.option2.map((item) => (
{settingModalSecondOptions &&
settingModalSecondOptions.option4.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>