289 lines
11 KiB
JavaScript
289 lines
11 KiB
JavaScript
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
|
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
|
|
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import FontSetting from '@/components/common/font/FontSetting'
|
|
import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
|
|
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
|
|
|
export default function SecondOption() {
|
|
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
|
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
|
|
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
|
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
|
|
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
|
|
|
|
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
const { option3, option4 } = settingModalSecondOptions
|
|
const { getMessage } = useMessage()
|
|
const { get, post } = useAxios()
|
|
const { swalFire } = useSwal()
|
|
const { addPopup, closePopup, closePopups } = usePopup()
|
|
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
|
|
const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
|
|
const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
|
|
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
|
|
|
|
// 데이터를 최초 한 번만 조회
|
|
useEffect(() => {
|
|
console.log('SecondOption useEffect 실행')
|
|
fetchSettings()
|
|
}, [objectNo])
|
|
|
|
// Canvas Setting 조회 및 초기화
|
|
const fetchSettings = async () => {
|
|
try {
|
|
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
|
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
|
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
|
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
|
...item,
|
|
selected: res[item.column],
|
|
}))
|
|
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
|
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
|
|
|
setSettingModalFirstOptions({
|
|
option1: optionData1,
|
|
option2: optionData2,
|
|
dimensionDisplay: optionData5,
|
|
})
|
|
setSettingModalSecondOptions({
|
|
option3: optionData3,
|
|
option4: optionData4,
|
|
})
|
|
} catch (error) {
|
|
console.error('Data fetching error:', error)
|
|
}
|
|
}
|
|
|
|
const onClickOption = async (option) => {
|
|
// option4에서 한 개만 선택 가능하도록 처리
|
|
const updatedOption4 = option4.map((item) =>
|
|
item.id === option.id
|
|
? { ...item, selected: true }
|
|
: {
|
|
...item,
|
|
selected: false,
|
|
},
|
|
)
|
|
|
|
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
|
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,
|
|
})),
|
|
firstOption3: dimensionDisplay.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,
|
|
//디스플레이 설정(다중)
|
|
allocDisplay: dataToSend.firstOption1[0].selected,
|
|
outlineDisplay: dataToSend.firstOption1[1].selected,
|
|
gridDisplay: dataToSend.firstOption1[2].selected,
|
|
lineDisplay: dataToSend.firstOption1[3].selected,
|
|
wordDisplay: dataToSend.firstOption1[4].selected,
|
|
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
|
flowDisplay: dataToSend.firstOption1[6].selected,
|
|
trestleDisplay: dataToSend.firstOption1[7].selected,
|
|
totalDisplay: dataToSend.firstOption1[8].selected,
|
|
//차수 표시(다건)
|
|
corridorDimension: dataToSend.firstOption3[0].selected,
|
|
realDimension: dataToSend.firstOption3[1].selected,
|
|
noneDimension: dataToSend.firstOption3[2].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) => {
|
|
swalFire({ text: getMessage(res.returnMessage) })
|
|
})
|
|
} catch (error) {
|
|
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
|
}
|
|
setAdsorptionRange(option.range)
|
|
}
|
|
let dimensionId = null
|
|
let fontId = null
|
|
let planSizeId = null
|
|
const [pixel, setPixel] = useState(dimensionSettings.pixel)
|
|
const [color, setColor] = useState(dimensionSettings.color)
|
|
const [font, setFont] = useState(null)
|
|
const [fontSize, setFontSize] = useState(dimensionSettings.fontSize)
|
|
const [fontColor, setFontColor] = useState(dimensionSettings.fontColor)
|
|
|
|
useEffect(() => {
|
|
dimensionId = uuidv4()
|
|
fontId = uuidv4()
|
|
planSizeId = uuidv4()
|
|
}, [])
|
|
|
|
const dimensionProps = {
|
|
color,
|
|
setColor,
|
|
pixel,
|
|
setPixel,
|
|
font,
|
|
setFont,
|
|
fontSize,
|
|
setFontSize,
|
|
fontColor,
|
|
setFontColor,
|
|
id: dimensionId,
|
|
isShow: showDimensionLineSettingModal,
|
|
setIsShow: setShowDimensionLineSettingModal,
|
|
}
|
|
|
|
const [horizon, setHorizon] = useState(1600)
|
|
const [vertical, setVertical] = useState(1600)
|
|
|
|
const fontProps = {
|
|
id: fontId,
|
|
pos: { x: 745, y: 180 },
|
|
setIsShow: setShowFontSettingModal,
|
|
}
|
|
const planSizeProps = {
|
|
id: planSizeId,
|
|
horizon,
|
|
setHorizon,
|
|
vertical,
|
|
setVertical,
|
|
setIsShow: setShowPlanSizeSettingModal,
|
|
pos: { x: 1025, y: 180 },
|
|
}
|
|
|
|
const handlePopup = (type) => {
|
|
setShowPlanSizeSettingModal(false)
|
|
setShowFontSettingModal(false)
|
|
|
|
switch (type) {
|
|
case 'dimensionLine':
|
|
if (!showDimensionLineSettingModal) {
|
|
setShowDimensionLineSettingModal(true)
|
|
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
|
|
} else {
|
|
setShowDimensionLineSettingModal(false)
|
|
closePopup(dimensionId)
|
|
}
|
|
|
|
break
|
|
case 'font1': {
|
|
//문자 글꼴변경
|
|
setShowFontSettingModal(true)
|
|
fontProps.type = 'commonText'
|
|
fontProps.id = fontId + 1
|
|
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
|
|
break
|
|
}
|
|
case 'font2': {
|
|
//흐름 방향 글꼴 변경
|
|
setShowFontSettingModal(true)
|
|
fontProps.type = 'flowText'
|
|
fontProps.id = fontId + 2
|
|
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
|
|
break
|
|
}
|
|
case 'font3': {
|
|
//치수 글꼴변경
|
|
setShowFontSettingModal(true)
|
|
fontProps.type = 'lengthText'
|
|
fontProps.id = fontId + 3
|
|
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
|
|
break
|
|
}
|
|
case 'font4': //회로번호 글꼴변경
|
|
setShowFontSettingModal(true)
|
|
fontProps.type = 'circuitNumberText'
|
|
fontProps.id = fontId
|
|
addPopup(fontId, 2, <FontSetting {...fontProps} />)
|
|
break
|
|
case 'planSize':
|
|
setShowPlanSizeSettingModal(true)
|
|
|
|
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
|
|
break
|
|
}
|
|
}
|
|
|
|
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">
|
|
{settingModalSecondOptions &&
|
|
settingModalSecondOptions.option3.map((item) => (
|
|
<button key={item.id} className="arr-btn" onClick={() => handlePopup('font' + item.id)}>
|
|
<span>{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<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">
|
|
{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>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex-check-box for-line">
|
|
{/*<button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>*/}
|
|
<button className={`arr-btn ${showDimensionLineSettingModal ? 'act' : ''}`} onClick={() => handlePopup('dimensionLine')}>
|
|
<span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
|
|
</button>
|
|
<button className={`arr-btn ${showPlanSizeSettingModal ? 'act' : ''}`} onClick={() => handlePopup('planSize')}>
|
|
<span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
|
|
</button>
|
|
<button
|
|
className="adsorption-point act"
|
|
onClick={(e) => {
|
|
setAdsorptionPointMode(!adsorptionPointMode)
|
|
}}
|
|
>
|
|
<span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
|
|
<i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|