93 lines
4.4 KiB
JavaScript
93 lines
4.4 KiB
JavaScript
import { useRecoilState } from 'recoil'
|
|
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { get } from '@/lib/Axios'
|
|
|
|
export default function FirstOption() {
|
|
const [objectNo, setObjectNo] = useState('test123240912001')
|
|
const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
|
|
const { option1, option2 } = settingsModalOptions
|
|
const { getMessage } = useMessage()
|
|
const onClickOption = (option) => {
|
|
option.selected = !option.selected
|
|
|
|
setSettingModalOptions({ option1, option2 })
|
|
}
|
|
|
|
// 초기 조회
|
|
useEffect(() => {
|
|
// Canvas Setting 조회 및 초기화
|
|
const fetchSettings = async () => {
|
|
try {
|
|
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
|
|
|
// console.log(res)
|
|
|
|
const data = {
|
|
option1: [
|
|
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay },
|
|
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay },
|
|
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay },
|
|
{ id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay },
|
|
{ id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay },
|
|
{ id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay },
|
|
{ id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay },
|
|
{ id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay },
|
|
{ id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay },
|
|
{ id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay },
|
|
{ id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay },
|
|
],
|
|
option2: [
|
|
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: res.onlyBorder },
|
|
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: res.lineHatch },
|
|
{ id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: res.allPainted },
|
|
],
|
|
|
|
//rangeSetting: res.adsorpRangeSetting,
|
|
//gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
|
|
}
|
|
|
|
// 데이터 설정
|
|
setSettingModalOptions({
|
|
option1: data.option1,
|
|
option2: data.option2,
|
|
// rangeSetting: data.rangeSetting,
|
|
// gridSettings: data.gridSettings,
|
|
})
|
|
} catch (error) {
|
|
console.error('Data fetching error:', error)
|
|
}
|
|
}
|
|
|
|
fetchSettings()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
|
|
<div className="flex-check-box for2">
|
|
{settingsModalOptions?.option1?.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="modal-check-btn-wrap">
|
|
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
|
|
<div className="flex-check-box for-line">
|
|
{settingsModalOptions?.option2?.map((item) => (
|
|
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
|
<span className="check-area"></span>
|
|
<span className="title-area">{getMessage(item.name)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|