그리드 설정 수정 및 DB 컬럼 추가/타입 변경
This commit is contained in:
changkyu choi
parent
cb0775c493
commit
42b92a414a
@ -1,99 +1,127 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Button } from '@nextui-org/react'
|
||||
|
||||
import { get, post } from '@/lib/Axios';
|
||||
import { get, post } from '@/lib/Axios'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { customSettingsState } from '@/store/canvasAtom'
|
||||
|
||||
export default function Settings() {
|
||||
const [objectNo, setObjectNo] = useState('test123240829010');
|
||||
const [error, setError] = useState(null);
|
||||
const [objectNo, setObjectNo] = useState('test123240829010')
|
||||
const [error, setError] = useState(null)
|
||||
const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)
|
||||
|
||||
// 상태를 하나의 객체로 관리
|
||||
const [settings, setSettings] = useState({
|
||||
display1: Array(11).fill('N'), // 화면 표시1
|
||||
display2: Array(3).fill('N'), // 화면 표시2
|
||||
rangeSetting: 0, // 흡착 범위 설정
|
||||
gridSettings: [] // 그리드 설정
|
||||
});
|
||||
display1: Array(11).fill(false), // 화면 표시1
|
||||
display2: Array(3).fill(false), // 화면 표시2
|
||||
rangeSetting: 0, // 흡착 범위 설정
|
||||
gridSettings: Array(5).fill(false), // 그리드 설정
|
||||
})
|
||||
|
||||
const gridItems = {
|
||||
display1: [
|
||||
'할당 표시', '도면 표시', '그리드 표시', '문자 표시', '흐름방향 표시',
|
||||
'복도치수 표시', '실제치수 표시', '치수 표시 없음', '가대 표시',
|
||||
'좌표 표시', '도면전환 표시'
|
||||
'할당 표시',
|
||||
'도면 표시',
|
||||
'그리드 표시',
|
||||
'문자 표시',
|
||||
'흐름방향 표시',
|
||||
'복도치수 표시',
|
||||
'실제치수 표시',
|
||||
'치수 표시 없음',
|
||||
'가대 표시',
|
||||
'좌표 표시',
|
||||
'도면전환 표시',
|
||||
],
|
||||
display2: ['테두리만', '라인해치', 'All Painted'],
|
||||
rangeSetting: ['극소', '소', '중', '대'],
|
||||
gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가']
|
||||
};
|
||||
gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가'],
|
||||
}
|
||||
|
||||
// 초기 조회
|
||||
useEffect(() => {
|
||||
if (!objectNo) {
|
||||
alert('object_no를 입력하세요.')
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 클릭 시 상태 변경 함수
|
||||
const handleToggle = (type, index) => {
|
||||
|
||||
setSettings((prevSettings) => {
|
||||
|
||||
// prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
|
||||
let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : [];
|
||||
let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []
|
||||
|
||||
if (type === 'rangeSetting') {
|
||||
return { ...prevSettings, [type]: index };
|
||||
return { ...prevSettings, [type]: index }
|
||||
}
|
||||
|
||||
updated[index] = updated[index] === 'N' ? 'Y' : 'N';
|
||||
return { ...prevSettings, [type]: updated };
|
||||
});
|
||||
};
|
||||
updated[index] = updated[index] === false ? true : false
|
||||
return { ...prevSettings, [type]: updated }
|
||||
})
|
||||
}
|
||||
|
||||
// Canvas Setting 조회 및 초기화
|
||||
const handleSelect = async () => {
|
||||
try {
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` });
|
||||
|
||||
// 데이터가 없는 경우
|
||||
if (!res || res.length === 0) {
|
||||
|
||||
console.warn('조회 결과가 없습니다.');
|
||||
// 기본값을 설정하거나 사용자에게 알림 표시
|
||||
setSettings({
|
||||
display1: Array(11).fill('N'), // 화면 표시1 기본값
|
||||
display2: Array(3).fill('N'), // 화면 표시2 기본값
|
||||
rangeSetting: 0, // 흡착 범위 설정 기본값
|
||||
gridSettings: [] // 그리드 설정 초기화
|
||||
});
|
||||
|
||||
alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.');
|
||||
return; // 이후 코드 실행을 중단
|
||||
if (!objectNo) {
|
||||
alert('object_no를 입력하세요.')
|
||||
return
|
||||
}
|
||||
|
||||
const data = res.map((item) => ({
|
||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||
|
||||
// 데이터가 없는 경우
|
||||
if (!res) {
|
||||
console.warn('조회 결과가 없습니다.')
|
||||
// 기본값을 설정하거나 사용자에게 알림 표시
|
||||
setSettings({
|
||||
display1: Array(11).fill(false), // 화면 표시1 기본값
|
||||
display2: Array(3).fill(false), // 화면 표시2 기본값
|
||||
rangeSetting: 0, // 흡착 범위 설정 기본값
|
||||
gridSettings: Array(5).fill(false), // 그리드 설정 기본값
|
||||
})
|
||||
|
||||
alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.')
|
||||
return // 이후 코드 실행을 중단
|
||||
}
|
||||
|
||||
const data = {
|
||||
display1: [
|
||||
item.assignDisplay, item.drawDisplay, item.gridDisplay, item.charDisplay, item.flowDisplay,
|
||||
item.hallwayDimenDisplay, item.actualDimenDisplay, item.noDimenDisplay, item.trestleDisplay,
|
||||
item.coordiDisplay, item.drawConverDisplay
|
||||
res.assignDisplay,
|
||||
res.drawDisplay,
|
||||
res.gridDisplay,
|
||||
res.charDisplay,
|
||||
res.flowDisplay,
|
||||
res.hallwayDimenDisplay,
|
||||
res.actualDimenDisplay,
|
||||
res.noDimenDisplay,
|
||||
res.trestleDisplay,
|
||||
res.coordiDisplay,
|
||||
res.drawConverDisplay,
|
||||
],
|
||||
display2: [item.onlyBorder, item.lineHatch, item.allPainted],
|
||||
rangeSetting: Number(item.adsorpRangeSetting)
|
||||
}));
|
||||
|
||||
display2: [res.onlyBorder, res.lineHatch, res.allPainted],
|
||||
rangeSetting: res.adsorpRangeSetting,
|
||||
gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
|
||||
}
|
||||
|
||||
// 데이터 설정
|
||||
setSettings({
|
||||
display1: data[0].display1,
|
||||
display2: data[0].display2,
|
||||
rangeSetting: data[0].rangeSetting,
|
||||
gridSettings: [] // 초기화
|
||||
});
|
||||
display1: data.display1,
|
||||
display2: data.display2,
|
||||
rangeSetting: data.rangeSetting,
|
||||
gridSettings: data.gridSettings,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error);
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Canvas Setting 저장
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!objectNo) {
|
||||
alert('object_no를 입력하세요.');
|
||||
return;
|
||||
alert('object_no를 입력하세요.')
|
||||
return
|
||||
}
|
||||
|
||||
const patternData = {
|
||||
@ -112,23 +140,24 @@ export default function Settings() {
|
||||
onlyBorder: settings.display2[0],
|
||||
lineHatch: settings.display2[1],
|
||||
allPainted: settings.display2[2],
|
||||
adsorpRangeSetting: String(settings.rangeSetting)
|
||||
};
|
||||
adsorpRangeSetting: settings.rangeSetting,
|
||||
randomGrid: settings.gridSettings[0],
|
||||
solidGrid: settings.gridSettings[1],
|
||||
dotGrid: settings.gridSettings[2],
|
||||
gridColorSet: settings.gridSettings[3],
|
||||
adsorpPointAdd: settings.gridSettings[4],
|
||||
}
|
||||
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData });
|
||||
console.log('patternData', patternData)
|
||||
|
||||
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
|
||||
|
||||
//Recoil 설정
|
||||
setCustomSettings({ ...patternData })
|
||||
|
||||
// 저장 후 재조회
|
||||
handleSelect();
|
||||
};
|
||||
|
||||
// 초기 조회
|
||||
useEffect(() => {
|
||||
if (objectNo) {
|
||||
handleSelect(objectNo);
|
||||
} else {
|
||||
alert('object_no를 입력하세요.');
|
||||
}
|
||||
}, []);
|
||||
await handleSelect()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -145,7 +174,7 @@ export default function Settings() {
|
||||
{gridItems.display1.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${settings.display1[index] === 'Y' ? 'selected' : 'unselected'}`}
|
||||
className={`grid-item ${settings.display1[index] === true ? 'selected' : 'unselected'}`}
|
||||
onClick={() => handleToggle('display1', index)}
|
||||
>
|
||||
{settings.display1[index]} {item}
|
||||
@ -158,7 +187,7 @@ export default function Settings() {
|
||||
{gridItems.display2.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${settings.display2[index] === 'Y' ? 'selected' : 'unselected'}`}
|
||||
className={`grid-item ${settings.display2[index] === true ? 'selected' : 'unselected'}`}
|
||||
onClick={() => handleToggle('display2', index)}
|
||||
>
|
||||
{settings.display2[index]} {item}
|
||||
@ -166,6 +195,14 @@ export default function Settings() {
|
||||
))}
|
||||
</div>
|
||||
<h1>[글꼴/도면크기 설정]</h1>
|
||||
<h1>* 글꼴 및 크기 변경</h1>
|
||||
<div className="grid-container2">
|
||||
<div className="grid-item">문자 글꼴 변경</div>
|
||||
<div className="grid-item">흐름방향 글꼴 변경</div>
|
||||
<div className="grid-item">치수 글꼴 변경</div>
|
||||
<div className="grid-item">회로번호 글꼴 변경</div>
|
||||
</div>
|
||||
``
|
||||
<h1>* 흡착 범위 설정</h1>
|
||||
<div className="grid-container4">
|
||||
{gridItems.rangeSetting.map((item, index) => (
|
||||
@ -174,24 +211,29 @@ export default function Settings() {
|
||||
className={`grid-item ${settings.rangeSetting === index ? 'selected' : 'unselected'}`}
|
||||
onClick={() => handleToggle('rangeSetting', index)}
|
||||
>
|
||||
{settings.rangeSetting === index ? 'Y' : 'N'} {item}
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid-container3">
|
||||
<div className="grid-item">치수선 설정</div>
|
||||
<div className="grid-item">도면 크기 설정</div>
|
||||
<div className="grid-item">흡착점 ON</div>
|
||||
</div>
|
||||
<h1>[그리드 설정]</h1>
|
||||
<div className="grid-container2 border">
|
||||
<div className="grid-container2">
|
||||
{gridItems.gridSettings.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${settings.gridSettings.includes(index) ? 'selected' : 'unselected'}`}
|
||||
className={`grid-item ${settings.gridSettings[index] === true ? 'selected' : 'unselected'}`}
|
||||
onClick={() => handleToggle('gridSettings', index)}
|
||||
>
|
||||
{settings.gridSettings.includes(index) ? 'Y' : 'N'} {item}
|
||||
{settings.gridSettings[index]} {item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@ -119,3 +119,10 @@ export const currentPatternState = atom({
|
||||
default: {},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
// 설정
|
||||
export const customSettingsState = atom({
|
||||
key: 'customSettings',
|
||||
default: {},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user