diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index eceef021..d8b7510c 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -46,6 +46,7 @@ export default function CanvasMenu(props) { setShowEavesGableEditModal, setShowMovementModal, setShowWallLineOffsetSettingModal, + setShowRoofAllocationSettingModal, } = props const [menuNumber, setMenuNumber] = useState(null) @@ -99,6 +100,7 @@ export default function CanvasMenu(props) { setShowPlacementSurfaceSettingModal, setShowPlaceShapeDrawingModal, setShowWallLineOffsetSettingModal, + setShowRoofAllocationSettingModal, setShowObjectSettingModal, type, } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 9e6a541e..2902fcf0 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -25,6 +25,7 @@ import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting' import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting' import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting' import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting' +import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) @@ -41,6 +42,7 @@ export default function FloorPlan() { const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false) const [showMovementModal, setShowMovementModal] = useState(false) const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false) + const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -78,6 +80,7 @@ export default function FloorPlan() { setShowEavesGableEditModal, setShowMovementModal, setShowWallLineOffsetSettingModal, + setShowRoofAllocationSettingModal, } useEffect(() => { @@ -147,6 +150,7 @@ export default function FloorPlan() { {showPlaceShapeDrawingModal && } {showEavesGableEditModal && } {showMovementModal && } + {showRoofAllocationSettingModal && } {showWallLineOffsetSettingModal && } {showObjectSettingModal && } {showPlacementSurfaceSettingModal && } diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 9ce635ef..8cb10b38 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -20,6 +20,7 @@ export default function MenuDepth01(props) { setShowPlacementSurfaceSettingModal, setShowPlaceShapeDrawingModal, setShowWallLineOffsetSettingModal, + setShowRoofAllocationSettingModal, setShowObjectSettingModal, } = props const { getMessage } = useMessage() @@ -38,6 +39,7 @@ export default function MenuDepth01(props) { setShowEavesGableEditModal(id === 4) setShowMovementModal(id === 5) setShowWallLineOffsetSettingModal(id === 6) + setShowRoofAllocationSettingModal(id === 7) setShowPlaceShapeDrawingModal(false) } @@ -49,7 +51,8 @@ export default function MenuDepth01(props) { setShowEavesGableEditModal(false) setShowMovementModal(false) setShowWallLineOffsetSettingModal(false) - + setShowRoofAllocationSettingModal(false) + setShowSlopeSettingModal(id === 0) setShowPlaceShapeDrawingModal(id === 1) setShowPlacementSurfaceSettingModal(id === 2) diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx new file mode 100644 index 00000000..d42f7fb2 --- /dev/null +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -0,0 +1,222 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useState } from 'react' +import QSelectBox from '@/components/common/select/QSelectBox' + +export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) { + const { getMessage } = useMessage() + const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(null) + const [values, setValues] = useState([ + { + id: '1', + type: 'A', + roofMaterial: { name: '기와1' }, + width: { name: '200' }, + length: { name: '250' }, + rafter: { name: '300' }, + alignType: 'stairs', + }, + ]) + + const roofMaterials = [ + { + id: 'A', + name: '기와1', + type: 'A', + width: '200', + length: '200', + alignType: 'parallel', + }, + { + id: 'B', + name: '기와2', + type: 'B', + rafter: '200', + alignType: 'parallel', + }, + { + id: 'C', + name: '기와3', + type: 'C', + hajebichi: '200', + alignType: 'stairs', + }, + { + id: 'D', + name: '기와4', + type: 'D', + length: '200', + alignType: 'stairs', + }, + ] + const widths = [ + { name: '200', id: 'q' }, + { name: '250', id: 'q1' }, + { name: '300', id: 'q2' }, + ] + const lengths = [ + { name: '200', id: 'w' }, + { name: '250', id: 'w1' }, + { name: '300', id: 'w2' }, + ] + const rafters = [ + { name: '200', id: 'e' }, + { name: '250', id: 'e1' }, + { name: '300', id: 'e2' }, + ] + + const onAddRoofMaterial = () => { + setValues([...values, selectedRoofMaterial]) + } + + const onDeleteRoofMaterial = (id) => { + setValues(values.filter((value) => value.id !== id)) + } + + return ( + +
+
+

{getMessage('plan.menu.estimate.roof.alloc')}

+ +
+
+
{getMessage('modal.roof.alloc.info')}
+
+ {getMessage('modal.roof.alloc.select.roof.material')} +
+ setSelectedRoofMaterial(e)} /> +
+ +
+
+ {values.map((value, index) => ( +
+
+ + +
+
+
+
+
+ +
+ {index === 0 && 基本屋根材} + {index !== 0 && } +
+
+
+ {value.type === 'A' ? ( + <> +
+ W +
+ +
+
+
+ L +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : value.type === 'B' ? ( + <> +
+ {getMessage('hajebichi')} +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : value.type === 'C' ? ( + <> +
+ {getMessage('hajebichi')} +
+ +
+
+ + ) : value.type === 'D' ? ( + <> +
+ L +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+ + ) : ( + '' + )} +
+
+
+ + +
+
+
+
+ ))} +
+
+ +
+
+
+ + ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index fb925f64..46891fce 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -84,6 +84,11 @@ "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用", "plan.menu.estimate": "見積", "plan.menu.estimate.roof.alloc": "屋根面の割り当て", + "modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。", + "modal.roof.alloc.select.roof.material": "屋根材の選択", + "modal.roof.alloc.select.parallel": "並列式", + "modal.roof.alloc.select.stairs": "カスケード", + "modal.roof.alloc.apply": "選択した屋根材として割り当て", "plan.menu.estimate.save": "保存", "plan.menu.estimate.reset": "初期化", "plan.menu.estimate.copy": "コピー", @@ -120,6 +125,7 @@ "modal.grid.copy.length": "長さ", "modal.grid.copy.save": "保存", "modal.common.save": "保存", + "modal.common.add": "追加", "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更", "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更", "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更", diff --git a/src/locales/ko.json b/src/locales/ko.json index cf63e56c..b9616eb8 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -87,6 +87,11 @@ "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용", "plan.menu.estimate": "견적서", "plan.menu.estimate.roof.alloc": "지붕면 할당", + "modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나, 지붕재를 추가하여 할당할 수 있습니다.", + "modal.roof.alloc.select.roof.material": "지붕재 선택", + "modal.roof.alloc.select.parallel": "병렬식", + "modal.roof.alloc.select.stairs": "계단식", + "modal.roof.alloc.apply": "선택한 지붕재로 할당", "plan.menu.estimate.save": "저장", "plan.menu.estimate.reset": "초기화", "plan.menu.estimate.copy": "복사", @@ -123,6 +128,7 @@ "modal.grid.copy.length": "길이", "modal.grid.copy.save": "저장", "modal.common.save": "저장", + "modal.common.add": "추가", "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경", "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경", "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",