325 lines
10 KiB
JavaScript
325 lines
10 KiB
JavaScript
'use client'
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Button } from '@nextui-org/react'
|
|
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
|
|
import { useRecoilState } from 'recoil'
|
|
import { customSettingsState } from '@/store/canvasAtom'
|
|
import { modalContent, modalState } from '@/store/modalAtom'
|
|
|
|
import ColorPicker from './common/color-picker/ColorPicker'
|
|
|
|
export default function Settings() {
|
|
const [objectNo, setObjectNo] = useState('test123240829010')
|
|
const [error, setError] = useState(null)
|
|
const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)
|
|
|
|
const [color, setColor] = useState('#ff0000')
|
|
|
|
const [open, setOpen] = useRecoilState(modalState)
|
|
const [contents, setContent] = useRecoilState(modalContent)
|
|
|
|
const { get, post } = useAxios()
|
|
|
|
const handleSavePopup = () => {
|
|
console.log('color ', color)
|
|
}
|
|
|
|
const handleClosePopup = () => {
|
|
setContent('')
|
|
setOpen(false)
|
|
console.log('colorSetting ', color)
|
|
}
|
|
|
|
const colorSetting = (
|
|
<>
|
|
<br />
|
|
<h1>React ColorPicker</h1>
|
|
<ColorPicker color={color} setColor={setColor} />
|
|
<div className="p-4">{color}</div>
|
|
<div>
|
|
<button onClick={handleSavePopup}>저장</button> <p />
|
|
<button onClick={handleClosePopup}>취소</button>
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
const customStyles = {
|
|
overlay: {
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
},
|
|
content: {
|
|
width: '300px',
|
|
height: '400px',
|
|
margin: 'auto',
|
|
borderRadius: '4px',
|
|
boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
|
padding: '20px',
|
|
},
|
|
}
|
|
|
|
// 상태를 하나의 객체로 관리
|
|
const [settings, setSettings] = useState({
|
|
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: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가'],
|
|
}
|
|
|
|
// 초기 조회
|
|
useEffect(() => {
|
|
if (!objectNo) {
|
|
alert('object_no를 입력하세요.')
|
|
}
|
|
}, [])
|
|
|
|
// 클릭 시 상태 변경 함수
|
|
const handleToggle = (type, index) => {
|
|
// '실선 그리드' 클릭 시 팝업 열기
|
|
if (type === 'gridSettings' && gridItems.gridSettings[index] === '실선 그리드') {
|
|
//openGridPopup()
|
|
}
|
|
|
|
// '그리드 색 설정' 클릭 시 팝업 열기
|
|
if (type === 'gridSettings' && gridItems.gridSettings[index] === '그리드 색 설정') {
|
|
//setSelectedGridSetting(gridItems.gridSettings[index])
|
|
//setIsPopupOpen(true)
|
|
//return prevSettings // 설정은 변경하지 않음
|
|
|
|
setOpen(true)
|
|
setContent({ ...colorSetting })
|
|
}
|
|
|
|
setSettings((prevSettings) => {
|
|
// prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
|
|
let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []
|
|
|
|
if (type === 'rangeSetting') {
|
|
return { ...prevSettings, [type]: index }
|
|
}
|
|
|
|
updated[index] = updated[index] === false ? true : false
|
|
return { ...prevSettings, [type]: updated }
|
|
})
|
|
}
|
|
|
|
// '실선 그리드' 클릭 시 팝업을 열기 위한 함수
|
|
const openGridPopup = () => {
|
|
const popupWidth = 500
|
|
const popupHeight = 300
|
|
|
|
// 팝업 창 위치를 화면 중앙으로 조정하기 위해 계산
|
|
const left = window.innerWidth / 2 - popupWidth / 2
|
|
const top = window.innerHeight / 2 - popupHeight / 2
|
|
|
|
// 새 창 열기
|
|
window
|
|
.open
|
|
//'./components/intro', // 팝업으로 띄울 페이지의 URL
|
|
//'_blank', // 새 창으로 열기
|
|
//`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // 크기와 위치 지정
|
|
()
|
|
}
|
|
|
|
// Canvas Setting 조회 및 초기화
|
|
const handleSelect = async () => {
|
|
try {
|
|
if (!objectNo) {
|
|
alert('object_no를 입력하세요.')
|
|
return
|
|
}
|
|
|
|
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: [
|
|
res.assignDisplay,
|
|
res.drawDisplay,
|
|
res.gridDisplay,
|
|
res.charDisplay,
|
|
res.flowDisplay,
|
|
res.hallwayDimenDisplay,
|
|
res.actualDimenDisplay,
|
|
res.noDimenDisplay,
|
|
res.trestleDisplay,
|
|
res.coordiDisplay,
|
|
res.drawConverDisplay,
|
|
],
|
|
display2: [res.onlyBorder, res.lineHatch, res.allPainted],
|
|
rangeSetting: res.adsorpRangeSetting,
|
|
gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
|
|
}
|
|
|
|
// 데이터 설정
|
|
setSettings({
|
|
display1: data.display1,
|
|
display2: data.display2,
|
|
rangeSetting: data.rangeSetting,
|
|
gridSettings: data.gridSettings,
|
|
})
|
|
} catch (error) {
|
|
console.error('Data fetching error:', error)
|
|
}
|
|
}
|
|
|
|
// Canvas Setting 저장
|
|
const handleSubmit = async () => {
|
|
if (!objectNo) {
|
|
alert('object_no를 입력하세요.')
|
|
return
|
|
}
|
|
|
|
const patternData = {
|
|
objectNo,
|
|
assignDisplay: settings.display1[0],
|
|
drawDisplay: settings.display1[1],
|
|
gridDisplay: settings.display1[2],
|
|
charDisplay: settings.display1[3],
|
|
flowDisplay: settings.display1[4],
|
|
hallwayDimenDisplay: settings.display1[5],
|
|
actualDimenDisplay: settings.display1[6],
|
|
noDimenDisplay: settings.display1[7],
|
|
trestleDisplay: settings.display1[8],
|
|
coordiDisplay: settings.display1[9],
|
|
drawConverDisplay: settings.display1[10],
|
|
onlyBorder: settings.display2[0],
|
|
lineHatch: settings.display2[1],
|
|
allPainted: settings.display2[2],
|
|
adsorpRangeSetting: settings.rangeSetting,
|
|
randomGrid: settings.gridSettings[0],
|
|
solidGrid: settings.gridSettings[1],
|
|
dotGrid: settings.gridSettings[2],
|
|
gridColorSet: settings.gridSettings[3],
|
|
adsorpPointAdd: settings.gridSettings[4],
|
|
}
|
|
|
|
console.log('patternData', patternData)
|
|
|
|
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
|
|
|
|
//Recoil 설정
|
|
setCustomSettings({ ...patternData })
|
|
|
|
// 저장 후 재조회
|
|
await handleSelect()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="container mx-auto p-4 m-4 border">
|
|
<div align="right">
|
|
<input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
|
|
<Button onClick={handleSelect}>조회</Button>
|
|
<Button onClick={handleSubmit}>저장</Button>
|
|
</div>
|
|
<div className="container mx-auto p-4 m-4 border">
|
|
<h1>[디스플레이 설정]</h1>
|
|
<h1>* 도면에 표시할 항목을 클릭하면 적용 됩니다.</h1>
|
|
<div className="grid-container2">
|
|
{gridItems.display1.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`grid-item ${settings.display1[index] === true ? 'selected' : 'unselected'}`}
|
|
onClick={() => handleToggle('display1', index)}
|
|
>
|
|
{settings.display1[index]} {item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<br />
|
|
<h1>* 화면 표시</h1>
|
|
<div className="grid-container3">
|
|
{gridItems.display2.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`grid-item ${settings.display2[index] === true ? 'selected' : 'unselected'}`}
|
|
onClick={() => handleToggle('display2', index)}
|
|
>
|
|
{settings.display2[index]} {item}
|
|
</div>
|
|
))}
|
|
</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) => (
|
|
<div
|
|
key={index}
|
|
className={`grid-item ${settings.rangeSetting === index ? 'selected' : 'unselected'}`}
|
|
onClick={() => handleToggle('rangeSetting', index)}
|
|
>
|
|
{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>
|
|
<ColorPicker color={color} setColor={setColor} />
|
|
<div className="p-4">{color}</div>
|
|
</div>
|
|
<div className="grid-container2">
|
|
{gridItems.gridSettings.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`grid-item ${settings.gridSettings[index] === true ? 'selected' : 'unselected'}`}
|
|
onClick={() => handleToggle('gridSettings', index)}
|
|
>
|
|
{settings.gridSettings[index]} {item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|