배치면 초기 설정 CRUD 팝업 화면 추가
This commit is contained in:
changkyu choi
parent
42b92a414a
commit
7eff8eefd8
16
src/app/[locale]/initSettingsModal/page.jsx
Normal file
16
src/app/[locale]/initSettingsModal/page.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import Hero from '@/components/Hero'
|
||||
import InitSettingsModal from '@/components/InitSettingsModal'
|
||||
import { initCheck } from '@/util/session-util'
|
||||
|
||||
export default async function InitSettingsModalPage() {
|
||||
await initCheck()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero title="Basic Settings" />
|
||||
<div className="flex flex-col justify-center my-8">
|
||||
<InitSettingsModal />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -10,6 +10,7 @@ export default function Headers() {
|
||||
<div className="space-x-4 text-xl">
|
||||
<Link href="/intro">Intro</Link>
|
||||
<Link href="/playground">Playground</Link>
|
||||
<Link href="/initSettingsModal">Basic Settings</Link>
|
||||
<Link href="/settings">Canvas Settings</Link>
|
||||
<Link href="/roof">Roof</Link>
|
||||
<Link href="/roof2">Roof2</Link>
|
||||
|
||||
@ -1,22 +1,31 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, memo, useCallback } from 'react'
|
||||
import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { modalContent, modalState } from '@/store/modalAtom'
|
||||
import { canvasSettingState } from '@/store/canvasAtom'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { get, post } from '@/lib/Axios'
|
||||
|
||||
export default function InitSettingsModal(props) {
|
||||
const [objectNo, setObjectNo] = useState('test123240909001') // 후에 삭제 필요
|
||||
const [open, setOpen] = useRecoilState(modalState)
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const [roofMaterials, setRoofMaterials] = useState([])
|
||||
const [basicSetting, setBasicSettings] = useState({
|
||||
type: '1',
|
||||
inputType: '1',
|
||||
angleType: 'slope',
|
||||
roofDrawingSet: '1',
|
||||
roofSizeSet: '1',
|
||||
roofAngleSet: 'slope',
|
||||
roofs: [],
|
||||
})
|
||||
|
||||
const { get, post } = useAxios()
|
||||
const modelProps = {
|
||||
open,
|
||||
setOpen,
|
||||
}
|
||||
|
||||
//const { get, post } = useAxios()
|
||||
|
||||
useEffect(() => {
|
||||
get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
|
||||
@ -26,6 +35,41 @@ export default function InitSettingsModal(props) {
|
||||
setRoofMaterials(res)
|
||||
})
|
||||
|
||||
get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
|
||||
if (!res) return
|
||||
|
||||
// 'roofs' 배열을 생성하여 각 항목을 추가
|
||||
const roofsRow = res.map((item) => {
|
||||
return {
|
||||
roofDrawingSet: String(item.roofDrawingSet),
|
||||
roofSizeSet: String(item.roofSizeSet),
|
||||
roofAngleSet: item.roofAngleSet,
|
||||
}
|
||||
})
|
||||
|
||||
const roofsArray = res.map((item) => {
|
||||
return {
|
||||
roofSeq: String(item.roofSeq),
|
||||
roofType: String(item.roofType),
|
||||
roofWidth: String(item.roofWidth),
|
||||
roofHeight: String(item.roofHeight),
|
||||
roofGap: String(item.roofGap),
|
||||
roofLayout: item.roofLayout,
|
||||
}
|
||||
})
|
||||
|
||||
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
||||
const patternData = {
|
||||
roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
|
||||
roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
|
||||
roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
|
||||
roofs: roofsArray, // 만들어진 roofs 배열
|
||||
}
|
||||
|
||||
// 데이터 설정
|
||||
setBasicSettings({ ...patternData })
|
||||
})
|
||||
|
||||
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
||||
setBasicSettings({ ...canvasSetting })
|
||||
}
|
||||
@ -46,12 +90,12 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
//기본값
|
||||
const newRoofSettings = {
|
||||
id: basicSetting.roofs.length + 1,
|
||||
roofId: '3',
|
||||
width: '200',
|
||||
height: '200',
|
||||
gap: '0',
|
||||
layout: 'parallel',
|
||||
roofSeq: basicSetting.roofs.length + 1,
|
||||
roofType: '3',
|
||||
roofWidth: '200',
|
||||
roofHeight: '200',
|
||||
roofGap: '0',
|
||||
roofLayout: 'parallel',
|
||||
}
|
||||
|
||||
setBasicSettings((prevState) => ({
|
||||
@ -62,19 +106,45 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
//배열 값 변경 함수
|
||||
const handleRoofSettings = (id, event) => {
|
||||
const roof = basicSetting.roofs.map((roof, i) => (id === roof.id ? { ...roof, [event.target.name]: event.target.value } : roof))
|
||||
const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
|
||||
setBasicSettings((prevState) => ({
|
||||
...prevState,
|
||||
roofs: [...roof],
|
||||
}))
|
||||
}
|
||||
|
||||
const submitCanvasConfig = () => {
|
||||
post({ url: '/api/canvas-config', data: basicSetting }).then((res) => {
|
||||
if (!res) {
|
||||
setCanvasSetting({ ...basicSetting })
|
||||
//저장
|
||||
const submitCanvasConfig = async () => {
|
||||
if (!objectNo) {
|
||||
alert('object_no를 입력하세요.')
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
const patternData = {
|
||||
objectNo,
|
||||
roofDrawingSet: basicSetting.roofDrawingSet,
|
||||
roofSizeSet: basicSetting.roofSizeSet,
|
||||
roofAngleSet: basicSetting.roofAngleSet,
|
||||
roofMaterialsAddList: basicSetting.roofs,
|
||||
}
|
||||
await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
|
||||
|
||||
//Recoil 설정
|
||||
setCanvasSetting({ ...basicSetting })
|
||||
|
||||
// 저장 후 재조회
|
||||
//await handleSelect()
|
||||
}
|
||||
|
||||
// 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
|
||||
const onRemove = async (targetId) => {
|
||||
console.log(targetId)
|
||||
|
||||
setBasicSettings((prevState) => ({
|
||||
...prevState,
|
||||
roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId),
|
||||
}))
|
||||
// setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
|
||||
}
|
||||
|
||||
return (
|
||||
@ -84,7 +154,13 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup label="도면 작성방법" name="type" orientation="horizontal" value={basicSetting.type} onChange={handleBasicSetting}>
|
||||
<RadioGroup
|
||||
label="도면 작성방법"
|
||||
name="roofDrawingSet"
|
||||
orientation="horizontal"
|
||||
value={basicSetting.roofDrawingSet}
|
||||
onChange={handleBasicSetting}
|
||||
>
|
||||
<Radio value="1">치수 입력에 의한 물건작성</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
@ -92,7 +168,13 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup label="치수 입력방법" name="inputType" orientation="horizontal" value={basicSetting.inputType} onChange={handleBasicSetting}>
|
||||
<RadioGroup
|
||||
label="치수 입력방법"
|
||||
name="roofSizeSet"
|
||||
orientation="horizontal"
|
||||
value={basicSetting.roofSizeSet}
|
||||
onChange={handleBasicSetting}
|
||||
>
|
||||
<Radio value="1">복사도 입력</Radio>
|
||||
<Radio value="2">실측값 입력</Radio>
|
||||
<Radio value="3">육지붕</Radio>
|
||||
@ -102,13 +184,20 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup label="지붕각도 설정" name="angleType" orientation="horizontal" value={basicSetting.angleType} onChange={handleBasicSetting}>
|
||||
<RadioGroup
|
||||
label="지붕각도 설정"
|
||||
name="roofAngleSet"
|
||||
orientation="horizontal"
|
||||
value={basicSetting.roofAngleSet}
|
||||
onChange={handleBasicSetting}
|
||||
>
|
||||
<Radio value="slope">경사</Radio>
|
||||
<Radio value="angle">각도</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4">지붕재 추가(단위 : mm)</div>
|
||||
<div className="flex items-center mb-4">
|
||||
<button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
|
||||
Add
|
||||
@ -118,7 +207,7 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
{basicSetting.roofs &&
|
||||
basicSetting.roofs.map((roof, index) => {
|
||||
return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} />
|
||||
return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} onRemove={onRemove} />
|
||||
})}
|
||||
|
||||
<div className="flex gap-4 items-right">
|
||||
@ -128,6 +217,7 @@ export default function InitSettingsModal(props) {
|
||||
<Button size="sm" onClick={() => setOpen(!open)}>
|
||||
취소
|
||||
</Button>
|
||||
<input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -137,15 +227,16 @@ export default function InitSettingsModal(props) {
|
||||
const RoofSelectBox = (props) => {
|
||||
return (
|
||||
<div className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
|
||||
<span> 타입 : </span>
|
||||
<Select
|
||||
aria-label="roofMaterial"
|
||||
className={'w-52'}
|
||||
name="roofId"
|
||||
onChange={(e) => props.onChange(props.roof.id, e)}
|
||||
name="roofType"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
items={props.roofMaterials}
|
||||
defaultSelectedKeys={props.roof.roofId ? props.roof.roofId : ''}
|
||||
selectedKeys={props.roof.roofId}
|
||||
value={props.roof.roofId}
|
||||
defaultSelectedKeys={props.roof.roofType ? props.roof.roofType : ''}
|
||||
selectedKeys={props.roof.roofType}
|
||||
value={props.roof.roofType}
|
||||
>
|
||||
{(roofMaterial) => (
|
||||
<SelectItem key={roofMaterial.id} value={roofMaterial.id}>
|
||||
@ -153,37 +244,58 @@ const RoofSelectBox = (props) => {
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
<span> 너비 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="width"
|
||||
name="roofWidth"
|
||||
placeholder="너비"
|
||||
value={props.roof.width}
|
||||
value={props.roof.roofWidth}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.id, e)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
name="height"
|
||||
placeholder="높이"
|
||||
value={props.roof.height}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.id, e)}
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<Input type="text" name="gap" placeholder="간격" value={props.roof.gap} className="w-24" onChange={(e) => props.onChange(props.roof.id, e)} />
|
||||
<span> 높이 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofHeight"
|
||||
placeholder="높이"
|
||||
value={props.roof.roofHeight}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<span> 서까래 간격 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofGap"
|
||||
placeholder="간격"
|
||||
value={props.roof.roofGap}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
name="layout"
|
||||
value={props.roof.layout}
|
||||
name="roofLayout"
|
||||
value={props.roof.roofLayout}
|
||||
defaultValue="parallel"
|
||||
onChange={(e) => props.onChange(props.roof.id, e)}
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
>
|
||||
<Radio value="parallel">병렬식</Radio>
|
||||
<Radio value="cascade">계단식</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
props.onRemove(props.roof.roofSeq)
|
||||
}}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,12 +6,57 @@ import { Button } from '@nextui-org/react'
|
||||
import { get, post } from '@/lib/Axios'
|
||||
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 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
|
||||
@ -48,6 +93,21 @@ export default function Settings() {
|
||||
|
||||
// 클릭 시 상태 변경 함수
|
||||
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]] : []
|
||||
@ -61,6 +121,24 @@ export default function Settings() {
|
||||
})
|
||||
}
|
||||
|
||||
// '실선 그리드' 클릭 시 팝업을 열기 위한 함수
|
||||
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 {
|
||||
@ -221,6 +299,10 @@ export default function Settings() {
|
||||
<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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user