Canvas Settings CRU 화면 추가
This commit is contained in:
changkyu choi
parent
00b8c8bf5b
commit
807053af65
16
src/app/[locale]/settings/page.jsx
Normal file
16
src/app/[locale]/settings/page.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import Hero from '@/components/Hero'
|
||||
import Settings from '@/components/Settings'
|
||||
import { initCheck } from '@/util/session-util'
|
||||
|
||||
export default async function SettingsPage() {
|
||||
await initCheck()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero title="Canvas Setting" />
|
||||
<div className="flex flex-col justify-center my-8">
|
||||
<Settings />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
362
src/components/Settings.jsx
Normal file
362
src/components/Settings.jsx
Normal file
@ -0,0 +1,362 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
//import { useMutation } from "react-query";
|
||||
|
||||
import { Button } from '@nextui-org/react'
|
||||
|
||||
import { get, post } from '@/lib/Axios'
|
||||
|
||||
export default function Settings() {
|
||||
|
||||
//초기 상태 설정
|
||||
//화면 표시1
|
||||
const [selectedIndices1, setSelectedIndices1] = useState(['N','N','N','N','N','N','N','N','N','N','N']);
|
||||
//화면 표시2
|
||||
const [selectedIndices2, setSelectedIndices2] = useState(['N','N','N']);
|
||||
//흡착 범위 설정 (default:극소)
|
||||
const [selectedIndices3, setSelectedIndices3] = useState(0);
|
||||
//그리드 설정
|
||||
const [selectedIndices4, setSelectedIndices4] = useState([]);
|
||||
|
||||
const [gridItems1, setGridItems1] = useState([
|
||||
'할당 표시',
|
||||
'도면 표시',
|
||||
'그리드 표시',
|
||||
'문자 표시',
|
||||
'흐름방향 표시',
|
||||
'복도치수 표시',
|
||||
'실제치수 표시',
|
||||
'치수 표시 없음',
|
||||
'가대 표시',
|
||||
'좌표 표시',
|
||||
'도면전환 표시']);
|
||||
const [gridItems2, setGridItems2] = useState(['테두리만', '라인해치', 'All Painted']);
|
||||
const [gridItems3, setGridItems3] = useState(['극소', '소', '중', '대']);
|
||||
const [gridItems4, setGridItems4] = useState(['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가']);
|
||||
|
||||
// 클릭 시 상태 변경 함수
|
||||
//화면 표시1
|
||||
const handleClick1 = (index) => {
|
||||
setSelectedIndices1((prevSelectedIndices) => {
|
||||
if (prevSelectedIndices.includes(index)) {
|
||||
// 이미 선택된 경우, 선택 해제 (리스트에서 제거)
|
||||
return prevSelectedIndices.filter((i) => i !== index);
|
||||
} else {
|
||||
// 선택되지 않은 경우, 리스트에 추가
|
||||
return [...prevSelectedIndices, index];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//화면 표시2
|
||||
const handleClick2 = (index) => {
|
||||
setSelectedIndices2((prevSelectedIndices) => {
|
||||
if (prevSelectedIndices.includes(index)) {
|
||||
// 이미 선택된 경우, 선택 해제 (리스트에서 제거)
|
||||
return prevSelectedIndices.filter((i) => i !== index);
|
||||
} else {
|
||||
// 선택되지 않은 경우, 리스트에 추가
|
||||
return [...prevSelectedIndices, index];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//흡착 범위 설정
|
||||
const handleClick3 = (index) => {
|
||||
setSelectedIndices3(index);
|
||||
};
|
||||
|
||||
//그리드 설정
|
||||
const handleClick4 = (index) => {
|
||||
setSelectedIndices4((prevSelectedIndices) => {
|
||||
if (prevSelectedIndices.includes(index)) {
|
||||
// 이미 선택된 경우, 선택 해제 (리스트에서 제거)
|
||||
return prevSelectedIndices.filter((i) => i !== index);
|
||||
} else {
|
||||
// 선택되지 않은 경우, 리스트에 추가
|
||||
return [...prevSelectedIndices, index];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 제출 post
|
||||
// const postMutation = useMutation(
|
||||
// (formData) =>
|
||||
// axios.post("http://서버주소", formData, {
|
||||
// headers: {
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// }),
|
||||
// {
|
||||
// onSuccess: () => {
|
||||
// alert("제출 완료 되었습니다.");
|
||||
// setShowModal(false);
|
||||
// },
|
||||
// onError: (error) => {
|
||||
// // 에러 처리
|
||||
// console.error("Error:", error);
|
||||
// },
|
||||
// },
|
||||
// );
|
||||
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
let tempCnt1 = [0,1,2,3,4,5,6,7,8,9,10]
|
||||
let display1 = ['N','N','N','N','N','N','N','N','N','N','N']
|
||||
|
||||
//화면 표시1 data
|
||||
for (let i = 0; i < tempCnt1.length; i++) {
|
||||
for (let j = 0; j < selectedIndices1.length; j++) {
|
||||
if (i == selectedIndices1[j]) {
|
||||
display1[i] = "Y"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let tempCnt2 = [0,1,2]
|
||||
let display2 = ['N','N','N']
|
||||
|
||||
//화면 표시2 data
|
||||
for (let i = 0; i < tempCnt2.length; i++) {
|
||||
for (let j = 0; j < selectedIndices2.length; j++) {
|
||||
if (i == selectedIndices2[j]) {
|
||||
display2[i] = "Y"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//흡착 범위 설정
|
||||
let rangeSetting = selectedIndices3
|
||||
|
||||
//견적서 번호 << objectNo 받아와야 함.
|
||||
let objectNo = 'test123240829010'
|
||||
|
||||
// 유저가 올린 데이터를 데이터로 만들어주는 부분
|
||||
const patternData = {
|
||||
objectNo : objectNo,
|
||||
assignDisplay : display1[0],
|
||||
drawDisplay : display1[1],
|
||||
gridDisplay : display1[2],
|
||||
charDisplay : display1[3],
|
||||
flowDisplay : display1[4],
|
||||
hallwayDimenDisplay : display1[5],
|
||||
actualDimenDisplay : display1[6],
|
||||
noDimenDisplay : display1[7],
|
||||
trestleDisplay : display1[8],
|
||||
coordiDisplay : display1[9],
|
||||
drawConverDisplay : display1[10],
|
||||
onlyBorder : display2[0],
|
||||
lineHatch : display2[1],
|
||||
allPainted : display2[2],
|
||||
adsorpRangeSetting : rangeSetting,
|
||||
}
|
||||
console.log("patternData : ", patternData)
|
||||
|
||||
// Canvas Setting 등록
|
||||
await post({ url: '/api/canvas-management/canvas-settings', data : patternData })
|
||||
|
||||
};
|
||||
|
||||
// Canvas Setting 조회
|
||||
useEffect(() => {
|
||||
get({ url: '/api/canvas-management/canvas-settings/by-object/test123240829010' }).then((res) => {
|
||||
const arrangeData = res.map((item) => {
|
||||
|
||||
console.log("item : ", item)
|
||||
|
||||
return {
|
||||
objectNo : item.objectNo,
|
||||
assignDisplay : item.assignDisplay,
|
||||
drawDisplay : item.drawDisplay,
|
||||
gridDisplay : item.gridDisplay,
|
||||
charDisplay : item.charDisplay,
|
||||
flowDisplay : item.flowDisplay,
|
||||
hallwayDimenDisplay : item.hallwayDimenDisplay,
|
||||
actualDimenDisplay : item.actualDimenDisplay,
|
||||
noDimenDisplay : item.noDimenDisplay,
|
||||
trestleDisplay : item.trestleDisplay,
|
||||
coordiDisplay : item.coordiDisplay,
|
||||
drawConverDisplay : item.drawConverDisplay,
|
||||
onlyBorder : item.onlyBorder,
|
||||
lineHatch : item.lineHatch,
|
||||
allPainted : item.allPainted,
|
||||
adsorpRangeSetting : item.adsorpRangeSetting,
|
||||
}
|
||||
})
|
||||
|
||||
// 가공된 데이터를 상태에 저장
|
||||
//setArrangeData(arrangeData);
|
||||
|
||||
let assignDisplay = ""
|
||||
let drawDisplay = ""
|
||||
let gridDisplay = ""
|
||||
let charDisplay = ""
|
||||
let flowDisplay = ""
|
||||
let hallwayDimenDisplay = ""
|
||||
let actualDimenDisplay = ""
|
||||
let noDimenDisplay = ""
|
||||
let trestleDisplay = ""
|
||||
let coordiDisplay = ""
|
||||
let drawConverDisplay = ""
|
||||
let display1 = []
|
||||
|
||||
{arrangeData.map((gridYn1) => (
|
||||
assignDisplay = gridYn1.assignDisplay,
|
||||
drawDisplay = gridYn1.drawDisplay,
|
||||
gridDisplay = gridYn1.gridDisplay,
|
||||
charDisplay = gridYn1.charDisplay,
|
||||
flowDisplay = gridYn1.flowDisplay,
|
||||
hallwayDimenDisplay = gridYn1.hallwayDimenDisplay,
|
||||
actualDimenDisplay = gridYn1.actualDimenDisplay,
|
||||
noDimenDisplay = gridYn1.noDimenDisplay,
|
||||
trestleDisplay = gridYn1.trestleDisplay,
|
||||
coordiDisplay = gridYn1.coordiDisplay,
|
||||
drawConverDisplay = gridYn1.drawConverDisplay
|
||||
))}
|
||||
|
||||
display1 = [assignDisplay, drawDisplay, gridDisplay, charDisplay, flowDisplay, hallwayDimenDisplay,
|
||||
actualDimenDisplay, noDimenDisplay, trestleDisplay, coordiDisplay, drawConverDisplay]
|
||||
|
||||
//console.log("display1 : ", display1)
|
||||
//console.log("gridItems1 : ", gridItems1)
|
||||
|
||||
//초기화
|
||||
//배열 전체 삭제
|
||||
selectedIndices1.splice(0,11)
|
||||
|
||||
//화면 표시1 data
|
||||
for (let i = 0; i < 11; i++) {
|
||||
display1.forEach((data, i) => {
|
||||
|
||||
if ('Y' == data) {
|
||||
selectedIndices1[i] = i
|
||||
}
|
||||
})
|
||||
}
|
||||
setSelectedIndices1(selectedIndices1)
|
||||
|
||||
let onlyBorder = ""
|
||||
let lineHatch = ""
|
||||
let allPainted = ""
|
||||
let display2 = []
|
||||
|
||||
{arrangeData.map((gridYn2) => (
|
||||
onlyBorder = gridYn2.onlyBorder,
|
||||
lineHatch = gridYn2.lineHatch,
|
||||
allPainted = gridYn2.allPainted
|
||||
))}
|
||||
|
||||
display2 = [onlyBorder, lineHatch, allPainted]
|
||||
|
||||
//console.log("display2 : ", display2)
|
||||
//console.log("gridItems2 : ", gridItems2)
|
||||
|
||||
//초기화
|
||||
// 배열 전체 삭제
|
||||
selectedIndices2.splice(0,3)
|
||||
|
||||
//화면 표시2 data
|
||||
for (let i = 0; i < 3; i++) {
|
||||
display2.forEach((data, i) => {
|
||||
if ('Y' == data) {
|
||||
selectedIndices2[i] = i
|
||||
}
|
||||
})
|
||||
}
|
||||
setSelectedIndices2(selectedIndices2)
|
||||
|
||||
let adsorpRangeSetting = 0
|
||||
{arrangeData.map((gridItems3) => (
|
||||
adsorpRangeSetting = gridItems3.adsorpRangeSetting
|
||||
))}
|
||||
|
||||
setSelectedIndices3(Number(adsorpRangeSetting))
|
||||
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto p-4 m-4 border">
|
||||
<div align="right">
|
||||
<Button onClick={handleSubmit}>저장</Button>
|
||||
</div>
|
||||
<div className="container mx-auto p-4 m-4 border">
|
||||
<h1>[디스플레이 설정]</h1>
|
||||
<h1>* 도면에 표시할 항목을 클릭하면 적용 됩니다.</h1>
|
||||
<div className="grid-container2">
|
||||
{gridItems1.map((item1, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${
|
||||
selectedIndices1.includes(index) ? 'selected' : 'unselected'
|
||||
}`}
|
||||
onClick={() => handleClick1(index)}
|
||||
>
|
||||
{selectedIndices1.includes(index) ? 'Y' : 'N'} {item1}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<br/>
|
||||
<h1>* 화면 표시</h1>
|
||||
<div className="grid-container3">
|
||||
{gridItems2.map((item2, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${
|
||||
selectedIndices2.includes(index) ? 'selected' : 'unselected'
|
||||
}`}
|
||||
onClick={() => handleClick2(index)}
|
||||
>
|
||||
{selectedIndices2.includes(index) ? 'Y' : 'N'} {item2}
|
||||
</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">
|
||||
{gridItems3.map((item3, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${selectedIndices3 === index ? 'selected' : 'unselected'}`}
|
||||
onClick={() => handleClick3(index)}
|
||||
>
|
||||
{selectedIndices3 === index ? 'Y' : 'N'} {item3}
|
||||
</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">
|
||||
{gridItems4.map((item4, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid-item ${
|
||||
selectedIndices4.includes(index) ? 'selected' : 'unselected'
|
||||
}`}
|
||||
onClick={() => handleClick4(index)}
|
||||
>
|
||||
{selectedIndices4.includes(index) ? 'Y' : 'N'} {item4}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,3 +1,81 @@
|
||||
.test {
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.grid-container2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 2개의 열 */
|
||||
grid-template-rows: repeat(6, 30px); /* 6개의 행 */
|
||||
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
|
||||
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
|
||||
gap: 5px; /* 그리드 아이템 사이의 간격 */
|
||||
}
|
||||
|
||||
.grid-container3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
|
||||
grid-template-rows: repeat(6, 30px); /* 6개의 행 */
|
||||
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
|
||||
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
|
||||
gap: 5px; /* 그리드 아이템 사이의 간격 */
|
||||
}
|
||||
|
||||
.grid-container4 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 4개의 열 */
|
||||
grid-template-rows: repeat(6, 30px); /* 6개의 행 */
|
||||
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
|
||||
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
|
||||
gap: 5px; /* 그리드 아이템 사이의 간격 */
|
||||
}
|
||||
|
||||
.grid-container5 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr); /* 5개의 열 */
|
||||
grid-template-rows: repeat(5, 30px); /* 5개의 행 */
|
||||
justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
|
||||
align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
|
||||
gap: 0px; /* 그리드 아이템 사이의 간격 */
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid black; /* 그리드 외각선 */
|
||||
text-align: center; /* 그리드 내 가운데 정렬 */
|
||||
}
|
||||
|
||||
.grid-item2 {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.grid-item3 {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #000;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.grid-item.Y {
|
||||
background-color: #d3d0d0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.grid-item.N {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.grid-item.selected {
|
||||
background-color: #d3d0d0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.grid-item.unselected {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user