Merge branch 'dev' into feature/test-jy
# Conflicts: # src/app/roof2/page.jsx # src/util/canvas-util.js
This commit is contained in:
Jaeyoung Lee
commit
da26628f69
10656
package-lock.json
generated
Normal file
10656
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -28,6 +28,7 @@
|
||||
"react-draggable": "^4.4.6",
|
||||
"react-hook-form": "^7.53.0",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-loading-skeleton": "^3.5.0",
|
||||
"react-responsive-modal": "^6.4.2",
|
||||
"recoil": "^0.7.7",
|
||||
"sweetalert2": "^11.14.1",
|
||||
|
||||
6
public/static/images/canvas/img_check_fail.svg
Normal file
6
public/static/images/canvas/img_check_fail.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M6.73735 6.73726L11.2628 11.2627M11.2628 6.73726L6.73735 11.2627" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Ellipse 1334" d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 431 B |
4
public/static/images/canvas/img_check_success.svg
Normal file
4
public/static/images/canvas/img_check_success.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 9.5L7.5 12L13 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 332 B |
4
public/static/images/canvas/img_edit_ico.svg
Normal file
4
public/static/images/canvas/img_edit_ico.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.00078 5.7998V12.1998M12.2008 8.9998L5.80078 8.9998" stroke="#141B34" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="#141B34"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 371 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
|
||||
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 1.56205L17.865 11H2.13504L10 1.56205Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 177 B After Width: | Height: | Size: 189 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
|
||||
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4907 1L18.7587 16H1V5.63636H8.14815H9.14815V4.63636V1H15.4907Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 203 B After Width: | Height: | Size: 214 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
|
||||
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5093 16H19V10H10H8.958L9.00085 8.95888L9.32837 1H1.24132L4.5093 16Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 218 B |
@ -1,3 +1,3 @@
|
||||
<svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
|
||||
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.8546 3.62169L11.1523 4.0594H11.6816H14.4443L20.3269 15H1.76631L9.65389 1.8558L10.8546 3.62169Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 230 B After Width: | Height: | Size: 246 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.083 3.75037L11.379 4.06002L11.8074 4.0594L19 4.04906V15H1.69884L9.09691 1.67251L11.083 3.75037Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 247 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
|
||||
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.05791 12H1V1H19V12H13.9421L10.7183 8.67188L10 7.93037L9.28173 8.67188L6.05791 12Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 227 B After Width: | Height: | Size: 232 B |
@ -1,3 +1,3 @@
|
||||
<svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
|
||||
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 1.299L14 6.68809V18H1V6.68809L7.5 1.299Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 193 B |
@ -1,5 +1,3 @@
|
||||
<svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
|
||||
<path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
|
||||
<rect x="11" y="28" width="33" height="1" fill="#313131"/>
|
||||
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.96963 10.3554L4.07692 10.1429V9.90476V1H15.9231V9.90476V10.1429L16.0304 10.3554L18.375 15H1.625L3.96963 10.3554Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 263 B |
@ -1,3 +1,3 @@
|
||||
<svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
|
||||
<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.8541 6.14406L17.5432 14H1.70065L8.93284 1H16.9517L20.8541 6.14406Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 218 B |
@ -1,3 +1,3 @@
|
||||
<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
|
||||
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.6552 7.73365L14.6298 17H1.88045L12.3752 1.43676L20.6552 7.73365Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 216 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
|
||||
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="18" height="10" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 180 B After Width: | Height: | Size: 178 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
|
||||
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.98369 1.72462C4.10657 1.29565 4.4988 1 4.94502 1H15.055C15.5012 1 15.8934 1.29565 16.0163 1.72462L18.308 9.72462C18.491 10.3636 18.0113 11 17.3466 11H2.65336C1.98869 11 1.50899 10.3636 1.69202 9.72462L3.98369 1.72462Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 188 B After Width: | Height: | Size: 368 B |
@ -1,3 +1,3 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.12132 11.2929L11.2929 2.12132C11.9229 1.49136 13 1.93752 13 2.82843V12C13 12.5523 12.5523 13 12 13H2.82843C1.93752 13 1.49136 11.9229 2.12132 11.2929Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 168 B After Width: | Height: | Size: 301 B |
@ -1,3 +1,3 @@
|
||||
<svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
|
||||
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2.11305V16H1V11.132L12 2.11305Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 175 B After Width: | Height: | Size: 183 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
|
||||
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.22928 12L3.51619 1H18.7707L16.4838 12H1.22928Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 197 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
|
||||
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.18518 8.17647H5.18518V9.17647V12H1V1H19V12H14.8148V9.17647V8.17647H13.8148H6.18518Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 234 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
|
||||
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.125 5V1H19V16H1V6H8.125H9.125V5Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 183 B |
@ -1,3 +1,3 @@
|
||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
|
||||
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1111 9.27023L12.0905 1H19V16H1.8753L5.71843 10.2727H11.1111H12.1136L12.1111 9.27023Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 236 B |
@ -1,11 +1,5 @@
|
||||
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="ico">
|
||||
<circle id="Ellipse 2012" cx="11.5" cy="12" r="11.5" fill="#45576F"/>
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M9.66678 12.8193C9.7612 12.9739 9.87323 13.1202 10.0029 13.2552C10.8079 14.093 12.0349 14.224 12.9718 13.6481C13.1454 13.5414 13.3091 13.4104 13.4582 13.2552L15.6178 11.0076C16.572 10.0145 16.572 8.40447 15.6178 7.41141C14.6637 6.41836 13.1166 6.41836 12.1625 7.41142L11.6868 7.90648" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_2" d="M10.313 16.0933L9.83718 16.5885C8.88301 17.5816 7.33598 17.5816 6.3818 16.5885C5.42762 15.5955 5.42762 13.9854 6.3818 12.9924L8.54141 10.7448C9.49559 9.75174 11.0426 9.75174 11.9968 10.7448C12.1264 10.8797 12.2384 11.026 12.3328 11.1806" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_3" d="M17.0003 14.6666H15.6143M13.6669 18L13.6669 16.614" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_4" d="M5 9.33333H6.38593M8.33333 6L8.33333 7.38593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</g>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#0191C9"/>
|
||||
<path d="M13.186 5.7898C12.6312 5.20223 11.7307 5.20223 11.1759 5.7898L6.99193 10.2206C6.03462 11.2344 6.03462 12.8767 6.99193 13.8905C7.94924 14.9043 9.50003 14.9043 10.4573 13.8905L13.9136 10.2303C14.1615 9.96779 14.5663 9.96779 14.8141 10.2303C15.062 10.4928 15.062 10.9214 14.8141 11.1839L11.3578 14.8441C9.90251 16.3853 7.54676 16.3853 6.09147 14.8441C4.63618 13.303 4.63618 10.8082 6.09147 9.26705L10.2754 4.8362C11.3282 3.72127 13.0337 3.72127 14.0865 4.8362C15.1393 5.95114 15.1393 7.75719 14.0865 8.87212L10.0844 13.1103C9.43409 13.799 8.379 13.799 7.72867 13.1103C7.07834 12.4216 7.07834 11.3043 7.72867 10.6156L11.0031 7.14795C11.2509 6.88547 11.6557 6.88547 11.9035 7.14795C12.1514 7.41042 12.1514 7.83906 11.9035 8.10154L8.62913 11.5692C8.47678 11.7305 8.47678 11.9954 8.62913 12.1567C8.78148 12.3181 9.03161 12.3181 9.18396 12.1567L13.186 7.91853C13.7408 7.33096 13.7408 6.37736 13.186 5.7898Z" fill="#0191C9" stroke="white" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
7
public/static/images/sub/change_ico.svg
Normal file
7
public/static/images/sub/change_ico.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#909000"/>
|
||||
<path d="M4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4" stroke="#909000" stroke-linecap="round"/>
|
||||
<path d="M5.58914 5.8473C5.67215 5.75932 5.75769 5.67375 5.84566 5.59071M7.5684 4.43768C7.67731 4.38873 7.78788 4.34282 7.9 4.30005M4.3 7.90005C4.34317 7.78681 4.38955 7.67516 4.43904 7.5652" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.99999 7.59961V12.3996M12.4 9.99961L7.59999 9.99961" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 772 B |
@ -1,4 +1,5 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7.5" r="6.5" fill="white" stroke="#F16A6A"/>
|
||||
<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#F16A6A"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#F16A6A"/>
|
||||
<path d="M9.47136 11.228L9.24036 7.169L9.18536 5.629H10.8134L10.7584 7.169L10.5274 11.228H9.47136ZM9.99936 14.154C9.70602 14.154 9.46402 14.0513 9.27336 13.846C9.09002 13.6407 8.99836 13.3913 8.99836 13.098C8.99836 12.79 9.09002 12.537 9.27336 12.339C9.46402 12.141 9.70602 12.042 9.99936 12.042C10.2927 12.042 10.531 12.141 10.7144 12.339C10.905 12.537 11.0004 12.79 11.0004 13.098C11.0004 13.3913 10.905 13.6407 10.7144 13.846C10.531 14.0513 10.2927 14.154 9.99936 14.154Z" fill="#F16A6A"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 738 B |
6
public/static/images/sub/open_ico.svg
Normal file
6
public/static/images/sub/open_ico.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#3BBB48"/>
|
||||
<path d="M11.3571 4.95962C10.7174 4.31987 10.3975 4 10 4C9.60251 4 9.28264 4.31987 8.64289 4.95962C8.25899 5.34352 7.87857 5.52175 7.33125 5.52175C6.85336 5.52175 6.17346 5.42907 5.8 5.80567C5.4295 6.17929 5.52177 6.85639 5.52177 7.33123C5.52177 7.87857 5.34352 8.25899 4.95961 8.6429C4.31987 9.28264 4.00001 9.60251 4 9.99999C4.00001 10.3975 4.31988 10.7174 4.95963 11.3571C5.38969 11.7872 5.52177 12.0649 5.52177 12.6687C5.52177 13.1466 5.42908 13.8265 5.80569 14.2C6.17931 14.5705 6.85641 14.4782 7.33124 14.4782C7.91409 14.4782 8.19477 14.5922 8.61074 15.0082C8.96495 15.3624 9.43978 16 10 16C10.5602 16 11.0351 15.3624 11.3893 15.0082C11.8052 14.5922 12.0859 14.4782 12.6688 14.4782C13.1436 14.4782 13.8207 14.5705 14.1943 14.2M15.0404 8.6429C15.6801 9.28264 16 9.60251 16 9.99999C16 10.3975 15.6801 10.7174 15.0404 11.3571C14.6103 11.7871 14.4782 12.0649 14.4782 12.6687C14.4782 13.1466 14.5709 13.8265 14.1943 14.2M14.1943 14.2H14.2" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.9 8.49998L10 10.6L15.4002 4.59998" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,15 +1,28 @@
|
||||
'use client'
|
||||
|
||||
// import { useEffect } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
import ServerError from './error'
|
||||
|
||||
import '@/styles/common.scss'
|
||||
|
||||
export const QcastProvider = ({ children }) => {
|
||||
const [planSave, setPlanSave] = useState(false)
|
||||
const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan()
|
||||
const { commonCode, findCommonCode } = useCommonCode()
|
||||
|
||||
useEffect(() => {
|
||||
const targetElement = document.getElementById('canvas')
|
||||
if (!targetElement && currentCanvasPlan?.id && planSave) {
|
||||
setPlanSave((prev) => !prev)
|
||||
checkUnsavedCanvasPlan(currentCanvasPlan.userId)
|
||||
} else if (targetElement && currentCanvasPlan?.id) {
|
||||
setPlanSave(true)
|
||||
}
|
||||
}, [modifiedPlans])
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('commonCode', commonCode)
|
||||
// console.log(findCommonCode(113600))
|
||||
|
||||
12
src/app/floor-plan/estimate/[mid]/[pid]/page.jsx
Normal file
12
src/app/floor-plan/estimate/[mid]/[pid]/page.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import Estimate from '@/components/estimate/Estimate'
|
||||
|
||||
export default function EstimatePage({ params }) {
|
||||
//floor-plan/estimate/mid/pid
|
||||
//mid :5 견적탭
|
||||
//pid : 넘어온 플랜번호
|
||||
return (
|
||||
<>
|
||||
<Estimate params={params} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,11 +1,17 @@
|
||||
'use client'
|
||||
import FloorPlan from '@/components/floor-plan/FloorPlan'
|
||||
import { FloorPlanProvider } from './FloorPlanProvider'
|
||||
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
|
||||
|
||||
export default function FloorPlanLayout({ children }) {
|
||||
console.log('FloorPlanLayout')
|
||||
return (
|
||||
<>
|
||||
<FloorPlanProvider>{children}</FloorPlanProvider>
|
||||
<FloorPlanProvider>
|
||||
<FloorPlan>
|
||||
<CanvasLayout>{children}</CanvasLayout>
|
||||
</FloorPlan>
|
||||
</FloorPlanProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import FloorPlan from '@/components/floor-plan/FloorPlan'
|
||||
import CanvasFrame from '@/components/floor-plan/CanvasFrame'
|
||||
|
||||
export default function FloorPlanPage() {
|
||||
return (
|
||||
<>
|
||||
<FloorPlan />
|
||||
<CanvasFrame />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -46,6 +46,7 @@ export default async function RootLayout({ children }) {
|
||||
storeLvl: session.storeLvl,
|
||||
groupId: session.groupId,
|
||||
pwdInitYn: session.pwdInitYn,
|
||||
custCd: session.custCd,
|
||||
isLoggedIn: session.isLoggedIn,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { fabric } from 'fabric'
|
||||
|
||||
export const MENU = {
|
||||
PLAN_DRAWING: 'planDrawing',
|
||||
INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
|
||||
@ -118,3 +120,45 @@ export const POLYGON_TYPE = {
|
||||
WALL: 'wall',
|
||||
TRESTLE: 'trestle',
|
||||
}
|
||||
|
||||
export const SAVE_KEY = [
|
||||
'selectable',
|
||||
'name',
|
||||
'parentId',
|
||||
'id',
|
||||
'length',
|
||||
'idx',
|
||||
'direction',
|
||||
'parentDirection',
|
||||
'lines',
|
||||
'points',
|
||||
'lockMovementX',
|
||||
'lockMovementY',
|
||||
'lockRotation',
|
||||
'lockScalingX',
|
||||
'lockScalingY',
|
||||
'opacity',
|
||||
'cells',
|
||||
'maxX',
|
||||
'maxY',
|
||||
'minX',
|
||||
'minY',
|
||||
'x',
|
||||
'y',
|
||||
'x1',
|
||||
'x2',
|
||||
'y1',
|
||||
'y2',
|
||||
'attributes',
|
||||
'stickeyPoint',
|
||||
'text',
|
||||
'pitch',
|
||||
'uuid',
|
||||
'originText',
|
||||
'groupYn',
|
||||
'groupName',
|
||||
'lineDirection',
|
||||
'groupId',
|
||||
]
|
||||
|
||||
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]
|
||||
|
||||
@ -1,53 +1,173 @@
|
||||
'use client'
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import { isObjectNotEmpty, inputTelNumberCheck, inputNumberCheck } from '@/util/common-utils'
|
||||
|
||||
export default function Join() {
|
||||
const { getMessage } = useMessage()
|
||||
const { promisePost } = useAxios()
|
||||
const router = useRouter()
|
||||
|
||||
const storeQcastNmRef = useRef()
|
||||
const storeQcastNmKanaRef = useRef()
|
||||
const postCdRef = useRef()
|
||||
const addrRef = useRef()
|
||||
const telNoRef = useRef()
|
||||
const faxRef = useRef()
|
||||
const userNmRef = useRef()
|
||||
const userIdRef = useRef()
|
||||
const emailRef = useRef()
|
||||
const userTelNoRef = useRef()
|
||||
const userFaxRef = useRef()
|
||||
|
||||
// 가입 신청 유효성 검사
|
||||
const joinValidation = (formData) => {
|
||||
// 판매대리점 정보 - 판매대리점명
|
||||
const storeQcastNm = formData.get('storeQcastNm')
|
||||
if (!isObjectNotEmpty(storeQcastNm)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.storeQcastNm')]))
|
||||
storeQcastNmRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 판매대리점 정보 - 판매대리점명 후리가나
|
||||
const storeQcastNmKana = formData.get('storeQcastNmKana')
|
||||
if (!isObjectNotEmpty(storeQcastNmKana)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.storeQcastNmKana')]))
|
||||
storeQcastNmKanaRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 판매대리점 정보 - 우편번호
|
||||
const postCd = formData.get('postCd')
|
||||
if (!isObjectNotEmpty(postCd)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.postCd')]))
|
||||
postCdRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 판매대리점 정보 - 주소
|
||||
const addr = formData.get('addr')
|
||||
if (!isObjectNotEmpty(addr)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.addr')]))
|
||||
addrRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 판매대리점 정보 - 전화번호
|
||||
const telNo = formData.get('telNo')
|
||||
if (!isObjectNotEmpty(telNo)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.telNo')]))
|
||||
telNoRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 판매대리점 정보 - FAX 번호
|
||||
const fax = formData.get('fax')
|
||||
if (!isObjectNotEmpty(fax)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub1.fax')]))
|
||||
faxRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 담당자 정보 - 담당자명
|
||||
const userNm = formData.get('userNm')
|
||||
if (!isObjectNotEmpty(userNm)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub2.userNm')]))
|
||||
userNmRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 담당자 정보 - 신청 ID
|
||||
const userId = formData.get('userId')
|
||||
if (!isObjectNotEmpty(userId)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub2.userId')]))
|
||||
userIdRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 담당자 정보 - 이메일 주소
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
||||
|
||||
const email = formData.get('email')
|
||||
if (!isObjectNotEmpty(email)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub2.email')]))
|
||||
emailRef.current.focus()
|
||||
return false
|
||||
} else {
|
||||
// 이메일 정규식 검사
|
||||
if (!emailRegex.test(email)) {
|
||||
alert(getMessage('join.validation.check1', [getMessage('join.sub2.email')]))
|
||||
emailRef.current.focus()
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 담당자 정보 - 전화번호
|
||||
const userTelNo = formData.get('userTelNo')
|
||||
if (!isObjectNotEmpty(userTelNo)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub2.telNo')]))
|
||||
userTelNoRef.current.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
// 담당자 정보 - FAX 번호
|
||||
const userFax = formData.get('userFax')
|
||||
if (!isObjectNotEmpty(userFax)) {
|
||||
alert(getMessage('common.message.required.data', [getMessage('join.sub2.fax')]))
|
||||
userFaxRef.current.focus()
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 가입 신청
|
||||
const joinProcess = async (e) => {
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.target)
|
||||
|
||||
const param = {
|
||||
storeQcastNm: formData.get('storeQcastNm'),
|
||||
storeQcastNmKana: formData.get('storeQcastNmKana'),
|
||||
postCd: formData.get('postCd'),
|
||||
addr: formData.get('addr'),
|
||||
telNo: formData.get('telNo'),
|
||||
fax: formData.get('fax'),
|
||||
bizNo: formData.get('bizNo'),
|
||||
userInfo: {
|
||||
userId: formData.get('userId'),
|
||||
userNm: formData.get('userNm'),
|
||||
userNmKana: formData.get('userNmKana'),
|
||||
telNo: formData.get('userTelNo'),
|
||||
fax: formData.get('userFax'),
|
||||
email: formData.get('email'),
|
||||
category: formData.get('category'),
|
||||
},
|
||||
}
|
||||
|
||||
await promisePost({ url: '/api/login/v1.0/user/join', data: param })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.data.result.resultCode == 'S') {
|
||||
Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
|
||||
router.push('/join/complete')
|
||||
} else {
|
||||
alert(res.data.result.resultMsg)
|
||||
}
|
||||
if (joinValidation(formData)) {
|
||||
if (confirm(getMessage('join.complete.save.confirm'))) {
|
||||
const param = {
|
||||
storeQcastNm: formData.get('storeQcastNm'),
|
||||
storeQcastNmKana: formData.get('storeQcastNmKana'),
|
||||
postCd: formData.get('postCd'),
|
||||
addr: formData.get('addr'),
|
||||
telNo: formData.get('telNo'),
|
||||
fax: formData.get('fax'),
|
||||
bizNo: formData.get('bizNo'),
|
||||
userInfo: {
|
||||
userId: formData.get('userId'),
|
||||
userNm: formData.get('userNm'),
|
||||
userNmKana: formData.get('userNmKana'),
|
||||
telNo: formData.get('userTelNo'),
|
||||
fax: formData.get('userFax'),
|
||||
email: formData.get('email'),
|
||||
category: formData.get('category'),
|
||||
},
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.response.data.message)
|
||||
})
|
||||
|
||||
await promisePost({ url: '/api/login/v1.0/user/join', data: param })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
if (res.data.result.resultCode == 'S') {
|
||||
Cookies.set('joinEmail', formData.get('email'), { expires: 1 })
|
||||
router.push('/join/complete')
|
||||
} else {
|
||||
alert(res.data.result.resultMsg)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.response.data.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@ -71,6 +191,7 @@ export default function Join() {
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
{/* 판매대리점명 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.storeQcastNm')} <span className="important">*</span>
|
||||
@ -81,14 +202,16 @@ export default function Join() {
|
||||
type="text"
|
||||
id="storeQcastNm"
|
||||
name="storeQcastNm"
|
||||
required
|
||||
alt={getMessage('join.sub1.storeQcastNm')}
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
|
||||
maxLength={30}
|
||||
ref={storeQcastNmRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 판매대리점명 후리가나 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.storeQcastNmKana')} <span className="important">*</span>
|
||||
@ -99,13 +222,15 @@ export default function Join() {
|
||||
type="text"
|
||||
id="storeQcastNmKana"
|
||||
name="storeQcastNmKana"
|
||||
required
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
|
||||
maxLength={30}
|
||||
ref={storeQcastNmKanaRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 우편번호/주소 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} <span className="important">*</span>
|
||||
@ -117,9 +242,11 @@ export default function Join() {
|
||||
type="text"
|
||||
id="postCd"
|
||||
name="postCd"
|
||||
required
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.postCd_placeholder')}
|
||||
onChange={inputNumberCheck}
|
||||
maxLength={7}
|
||||
ref={postCdRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '495px' }}>
|
||||
@ -127,14 +254,16 @@ export default function Join() {
|
||||
type="text"
|
||||
id="addr"
|
||||
name="addr"
|
||||
required
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.addr_placeholder')}
|
||||
maxLength={50}
|
||||
ref={addrRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 전화번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.telNo')} <span className="important">*</span>
|
||||
@ -145,13 +274,16 @@ export default function Join() {
|
||||
type="text"
|
||||
id="telNo"
|
||||
name="telNo"
|
||||
required
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.telNo_placeholder')}
|
||||
></input>
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={telNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub1.fax')} <span className="important">*</span>
|
||||
@ -162,18 +294,21 @@ export default function Join() {
|
||||
type="text"
|
||||
id="fax"
|
||||
name="fax"
|
||||
required
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
></input>
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={faxRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 법인번호 */}
|
||||
<tr>
|
||||
<th>{getMessage('join.sub1.bizNo')}</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="bizNo" name="bizNo" className="input-light" />
|
||||
<input type="text" id="bizNo" name="bizNo" className="input-light" maxLength={15} onChange={inputTelNumberCheck} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -196,44 +331,49 @@ export default function Join() {
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
{/* 담당자명 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.userNm')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="userNm" name="userNm" className="input-light" required />
|
||||
<input type="text" id="userNm" name="userNm" className="input-light" maxLength={20} ref={userNmRef} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 담당자명 후리가나 */}
|
||||
<tr>
|
||||
<th>{getMessage('join.sub2.userNmKana')}</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="userNmKana" name="userNmKana" className="input-light" />
|
||||
<input type="text" id="userNmKana" name="userNmKana" maxLength={20} className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 신청 ID */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.userId')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="userId" name="userId" className="input-light" required />
|
||||
<input type="text" id="userId" name="userId" className="input-light" maxLength={20} ref={userIdRef} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 이메일 주소 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.email')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="email" name="email" className="input-light" required />
|
||||
<input type="text" id="email" name="email" className="input-light" maxLength={30} ref={emailRef} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 전화번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.telNo')} <span className="important">*</span>
|
||||
@ -246,11 +386,14 @@ export default function Join() {
|
||||
name="userTelNo"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub2.telNo_placeholder')}
|
||||
required
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={userTelNoRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* FAX 번호 */}
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('join.sub2.fax')} <span className="important">*</span>
|
||||
@ -263,16 +406,19 @@ export default function Join() {
|
||||
name="userFax"
|
||||
className="input-light"
|
||||
placeholder={getMessage('join.sub1.fax_placeholder')}
|
||||
required
|
||||
maxLength={15}
|
||||
onChange={inputTelNumberCheck}
|
||||
ref={userFaxRef}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* 부서명 */}
|
||||
<tr>
|
||||
<th>{getMessage('join.sub2.category')}</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" id="category" name="category" className="input-light" />
|
||||
<input type="text" id="category" name="category" className="input-light" maxLength={20} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -98,6 +98,7 @@ export default function Login() {
|
||||
pwdInitYn: 'Y',
|
||||
storeLvl: '1',
|
||||
groupId: '60000',
|
||||
custCd: '100000',
|
||||
})
|
||||
setSessionState({
|
||||
userId: 'NEW016610',
|
||||
@ -115,6 +116,7 @@ export default function Login() {
|
||||
pwdInitYn: 'Y',
|
||||
storeLvl: '1',
|
||||
groupId: '60000',
|
||||
custCd: '100000',
|
||||
})
|
||||
if (chkLoginId) {
|
||||
Cookies.set('chkLoginId', formData.get('id'), { expires: 7 })
|
||||
@ -331,7 +333,15 @@ export default function Login() {
|
||||
></button>
|
||||
</div>
|
||||
<div className="pwreset-btn-box">
|
||||
<button type="button" className="login-btn light mr5" onClick={() => setPasswordReset(1)}>
|
||||
<button
|
||||
type="button"
|
||||
className="login-btn light mr5"
|
||||
onClick={() => {
|
||||
setPasswordReset(1)
|
||||
setCheckEmail('')
|
||||
setCheckId('')
|
||||
}}
|
||||
>
|
||||
{getMessage('login.init_password.btn.back')}
|
||||
</button>
|
||||
<button type="button" className="login-btn" onClick={initPasswordProcess}>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import '@/styles/contents.scss'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
|
||||
|
||||
export default function QContextMenu(props) {
|
||||
const { contextRef, canvasProps } = props
|
||||
|
||||
// const children = useRecoilValue(modalContent)
|
||||
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
|
||||
|
||||
const { contextRef, canvasProps, handleKeyup } = props
|
||||
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
|
||||
const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
|
||||
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
|
||||
|
||||
let contextType = ''
|
||||
@ -21,13 +21,23 @@ export default function QContextMenu(props) {
|
||||
}
|
||||
}
|
||||
|
||||
const getYPosition = (e) => {
|
||||
const contextLength = contextMenuList.reduce((acc, cur, index) => {
|
||||
return acc + cur.length
|
||||
}, 0)
|
||||
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!contextRef.current) return
|
||||
|
||||
const handleContextMenu = (e) => {
|
||||
// e.preventDefault() //기존 contextmenu 막고
|
||||
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
|
||||
// console.log(111, canvasProps)
|
||||
const position = {
|
||||
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
|
||||
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
|
||||
}
|
||||
setContextMenu({ visible: true, ...position })
|
||||
document.addEventListener('keyup', (e) => handleKeyup(e))
|
||||
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export default function QSelectBox({ title = '', options, onChange, value }) {
|
||||
export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
|
||||
const [openSelect, setOpenSelect] = useState(false)
|
||||
const [selected, setSelected] = useState(title === '' ? options[0].name : title)
|
||||
|
||||
const handleClickSelectOption = (option) => {
|
||||
setSelected(option.name)
|
||||
onChange?.(option)
|
||||
onChange?.(option, params)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -15,7 +15,7 @@ export default function QSelectBox({ title = '', options, onChange, value }) {
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
|
||||
<div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
|
||||
<p>{selected}</p>
|
||||
<ul className="select-item-wrap">
|
||||
{options?.map((option) => (
|
||||
|
||||
@ -81,11 +81,11 @@ export default function Table({ clsCode }) {
|
||||
{/* 번호 */}
|
||||
{board.rowNumber}
|
||||
</td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
<td>
|
||||
{/* 제목 */}
|
||||
<div className="text-frame">
|
||||
<div className="text-overflow">{board.title}</div>
|
||||
{board.attachYn && <span className="clip"></span>}
|
||||
{board.attachYn === 'Y' && <span className="clip"></span>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-c">
|
||||
|
||||
@ -3,8 +3,11 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { handleFileDown } from '@/util/board-utils'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function BoardDetailModal({ noticeNo, setOpen }) {
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
// api 조회 관련
|
||||
const { get } = useAxios()
|
||||
const [boardDetail, setBoardDetail] = useState({})
|
||||
@ -46,7 +49,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) {
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
{getMessage('board.sub.btn.close')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
@ -55,7 +58,7 @@ export default function BoardDetailModal({ noticeNo, setOpen }) {
|
||||
|
||||
{boardDetail.listFile && (
|
||||
<dl className="community_detail-file-wrap">
|
||||
<dt>첨부파일 목록</dt>
|
||||
<dt>{getMessage('board.sub.fileList')}</dt>
|
||||
{boardDetail.listFile.map((boardFile) => (
|
||||
<dd key={boardFile.encodeFileNo}>
|
||||
<button type="button" className="down" onClick={() => handleFileDown(boardFile)}>
|
||||
|
||||
354
src/components/estimate/Estimate.jsx
Normal file
354
src/components/estimate/Estimate.jsx
Normal file
@ -0,0 +1,354 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
||||
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
|
||||
import EstimateFileUploader from './EstimateFileUploader'
|
||||
|
||||
export default function Estimate({ params }) {
|
||||
const [objectNo, setObjectNo] = useState('')
|
||||
const [files, setFiles] = useState([]) //첨부파일
|
||||
|
||||
const sessionState = useRecoilValue(sessionStore)
|
||||
const objectRecoil = useRecoilValue(floorPlanObjectState)
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const { setMenuNumber } = useCanvasMenu()
|
||||
|
||||
const fileUploadProps = {
|
||||
// objectNo: '',
|
||||
// planNo: params.pid,
|
||||
// category: '10',
|
||||
uploadFiles: files,
|
||||
setUploadFiles: setFiles,
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setObjectNo(objectRecoil.floorPlanObjectNo)
|
||||
}, [objectRecoil])
|
||||
|
||||
useEffect(() => {
|
||||
if (objectNo) {
|
||||
//Q101X278191023001
|
||||
console.log('세션정보::::', sessionState)
|
||||
//상세API호출
|
||||
}
|
||||
}, [objectNo])
|
||||
|
||||
useEffect(() => {
|
||||
setMenuNumber(5)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="sub-content estimate">
|
||||
<div className="sub-content-inner">
|
||||
{/* 물건번호, 견적서번호, 등록일, 변경일시 시작 */}
|
||||
<div className="sub-content-box">
|
||||
<div className="sub-table-box">
|
||||
<div className="estimate-list-wrap one">
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
|
||||
<div className="estimate-name">
|
||||
{objectNo} (Plan No: {params.pid})
|
||||
</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
|
||||
<div className="estimate-name">5242310200065242</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.createDatetime')}</div>
|
||||
<div className="estimate-name">9999.09.28</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.lastEditDatetime')}</div>
|
||||
<div className="estimate-name">9999.09.28 06:36</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 물건번호, 견적서번호, 등록일, 변경일시 끝 */}
|
||||
{/* 기본정보 시작 */}
|
||||
<div className="sub-content-box">
|
||||
<div className="sub-table-box">
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.title')}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* 1차 판매점명 */}
|
||||
<th>{getMessage('estimate.detail.saleStoreId')}</th>
|
||||
<td></td>
|
||||
{/* 견적일 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.estimateDate')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="date-picker" style={{ width: '350px' }}>
|
||||
<SingleDatePicker />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 2차 판매점명 */}
|
||||
<th>{getMessage('estimate.detail.otherSaleStoreId')}</th>
|
||||
<td></td>
|
||||
{/* 담당자 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.receiveUser')} <span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap" style={{ width: '350px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'물건정보에서 입력한 담당자명 표시'} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 안건명 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.title')} <span className="important">*</span>
|
||||
</th>
|
||||
<td colSpan={3}>
|
||||
<div className="form-flex-wrap">
|
||||
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'안건명:::'} />
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'경칭?'} />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 메모 */}
|
||||
<th>{getMessage('estimate.detail.remarks')}</th>
|
||||
<td colSpan={3}>물건정보에서 입력한 메모 표시</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 주문분류 */}
|
||||
<th>
|
||||
{getMessage('estimate.detail.orderType')} <span className="important">*</span>
|
||||
</th>
|
||||
<td colSpan={3}>
|
||||
<div className="radio-wrap"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 지붕재・사양시공 최대4개*/}
|
||||
<th>{getMessage('estimate.detail.roofCns')}</th>
|
||||
<td colSpan={3}>
|
||||
<div className="form-flex-wrap mb5">
|
||||
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly />
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" defaultValue={'標準施工'} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-flex-wrap mb5"></div>
|
||||
<div className="form-flex-wrap mb5"></div>
|
||||
{/* 마지막div엔 mb5 제외 */}
|
||||
<div className="form-flex-wrap"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* 비고 */}
|
||||
<th>{getMessage('estimate.detail.note')}</th>
|
||||
<td colSpan={3}>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 파일첨부 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.fileList1')}</h3>
|
||||
<div className="d-check-box light mr5">
|
||||
<input type="checkbox" id="next" />
|
||||
<label htmlFor="next" style={{ color: '#101010' }}>
|
||||
{getMessage('estimate.detail.nextSubmit')}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="common-table mb10">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('estimate.detail.header.fileList1')}</th>
|
||||
<td>
|
||||
<EstimateFileUploader {...fileUploadProps} />
|
||||
{/* <div className="drag-file-box">
|
||||
<div className="btn-area">
|
||||
<Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
|
||||
{getMessage('estimate.detail.fileList.btn')}
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
id="fileUpload"
|
||||
name="fileUpload"
|
||||
ref={fileInputRef}
|
||||
onChange={onChangeFiles}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="drag-file-area">
|
||||
<p>Drag file here</p>
|
||||
<ul className="file-list"></ul>
|
||||
</div>
|
||||
</div> */}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 첨부파일 목록 시작 */}
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('estimate.detail.header.fileList2')}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 첨부파일 목록 끝 */}
|
||||
{/* 파일첨부 끝 */}
|
||||
{/* 견적특이사항 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
|
||||
<div className="product_tit">{getMessage('estimate.detail.header.specialEstimateProductInfo')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 공통코드영역시작 */}
|
||||
<div className="special-note-check-wrap"></div>
|
||||
{/* 공통코드영역끝 */}
|
||||
{/* 견적특이사항 내용영역시작 */}
|
||||
<div className="calculation-estimate"></div>
|
||||
{/* 견적특이사항 내용영역끝 */}
|
||||
{/* 견적특이사항 끝 */}
|
||||
{/* 제품정보 시작 */}
|
||||
<div className="table-box-title-wrap">
|
||||
<div className="title-wrap">
|
||||
<h3>{getMessage('estimate.detail.header.specialEstimateProductInfo')}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="estimate-wrap">
|
||||
<div className="estimate-list-wrap one">
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPcs')}</div>
|
||||
<div className="estimate-name blue">74</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vol')}</div>
|
||||
<div className="estimate-name blue">8300</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.netAmt')}</div>
|
||||
<div className="estimate-name blue">6,798,900</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vat')}</div>
|
||||
<div className="estimate-name blue">679,890</div>
|
||||
</div>
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPrice')}</div>
|
||||
<div className="estimate-name red">7,478,790</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* YJOD면 아래영역 숨김 */}
|
||||
<div className="common-table bt-able">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice')}
|
||||
<span className="important">*</span>
|
||||
</th>
|
||||
<td>
|
||||
<div className="input-wrap">
|
||||
<input type="text" className="input-light" />
|
||||
</div>
|
||||
</td>
|
||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
|
||||
<td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula1')}</td>
|
||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
|
||||
<td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula2')}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 제품정보 끝 */}
|
||||
{/* 가격표시영역시작 */}
|
||||
<div className="estimate-product-option">
|
||||
<div className="product-price-wrap">
|
||||
<div className="product-price-tit">{getMessage('estimate.detail.header.showPrice')}</div>
|
||||
<div className="select-wrap"></div>
|
||||
<button className="btn-origin grey ml5">{getMessage('estimate.detail.showPrice.btn1')}</button>
|
||||
</div>
|
||||
<div className="product-edit-wrap">
|
||||
<div className="product-edit-explane">
|
||||
<div className="click-check">
|
||||
<span className="ico"></span>
|
||||
{getMessage('estimate.detail.showPrice.description')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-edit-btn">
|
||||
<button className="btn-origin navy mr5">
|
||||
<span className="plus"></span>
|
||||
{getMessage('estimate.detail.showPrice.btn2')}
|
||||
</button>
|
||||
<button className="btn-origin grey">
|
||||
<span className="minus"></span>
|
||||
{getMessage('estimate.detail.showPrice.btn3')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 가격표시영역끝 */}
|
||||
{/* html테이블시작 */}
|
||||
<div className="q-grid no-cols"></div>
|
||||
{/* html테이블끝 */}
|
||||
</div>
|
||||
</div>
|
||||
{/* 기본정보끝 */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
91
src/components/estimate/EstimateFileUploader.jsx
Normal file
91
src/components/estimate/EstimateFileUploader.jsx
Normal file
@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
|
||||
import { useContext, useRef } from 'react'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { SessionContext } from '@/app/SessionProvider'
|
||||
|
||||
export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
|
||||
const fileInputRef = useRef(null)
|
||||
const { getMessage } = useMessage()
|
||||
const { session } = useContext(SessionContext)
|
||||
|
||||
const handleButtonClick = (e) => {
|
||||
e.preventDefault()
|
||||
fileInputRef.current.click()
|
||||
}
|
||||
|
||||
const onChangeFiles = async (e) => {
|
||||
// const formData = new FormData()
|
||||
// formData.append('file', e.target.files[0])
|
||||
// formData.append('objectNo', objectNo) // 받아와야 하는 값
|
||||
// formData.append('planNo', planNo) // 받아와야 하는 값
|
||||
// formData.append('category', category) // 받아와야 하는 값
|
||||
// formData.append('userId', session.userId)
|
||||
|
||||
// await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
|
||||
// if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
|
||||
// })
|
||||
setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
|
||||
}
|
||||
|
||||
const deleteFile = (id) => {
|
||||
setUploadFiles(uploadFiles.filter((file) => file.id !== id))
|
||||
}
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
const fileList = []
|
||||
Array.from(e.dataTransfer.files).forEach((file) => {
|
||||
fileList.push({ data: file, id: uuidv4() })
|
||||
})
|
||||
setUploadFiles([...uploadFiles, ...fileList])
|
||||
}
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const handleDragEnd = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
const handleDragLeave = (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="drag-file-box">
|
||||
<div className="btn-area">
|
||||
<label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
|
||||
{getMessage('estimate.detail.fileList.btn')}
|
||||
</label>
|
||||
<input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
|
||||
</div>
|
||||
<div
|
||||
className="drag-file-area"
|
||||
draggable
|
||||
onDrop={(e) => handleDrop(e)}
|
||||
onDragOver={(e) => handleDragOver(e)}
|
||||
onDragEnd={(e) => handleDragEnd(e)}
|
||||
onDragLeave={(e) => handleDragLeave(e)}
|
||||
>
|
||||
<p>Drag file here</p>
|
||||
<ul className="file-list">
|
||||
{uploadFiles.length > 0 &&
|
||||
uploadFiles.map((file) => (
|
||||
<li className="file-item" key={file.id}>
|
||||
<span>
|
||||
{file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -12,7 +12,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
|
||||
idx: 0,
|
||||
area: 0,
|
||||
children: [],
|
||||
initialize: function (points, options, canvas) {
|
||||
initialize: function (points, options, length = 0) {
|
||||
this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
|
||||
if (options.id) {
|
||||
this.id = options.id
|
||||
@ -21,13 +21,15 @@ export const QLine = fabric.util.createClass(fabric.Line, {
|
||||
}
|
||||
this.line = this
|
||||
// 소수점 전부 제거
|
||||
points.forEach((point) => {
|
||||
point = Math.round(point)
|
||||
})
|
||||
points = points.map((point) => Math.round(point))
|
||||
|
||||
this.idx = options.idx ?? 0
|
||||
this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
|
||||
this.setLength()
|
||||
if (length !== 0) {
|
||||
this.length = length
|
||||
} else {
|
||||
this.setLength()
|
||||
}
|
||||
|
||||
this.startPoint = { x: this.x1, y: this.y1 }
|
||||
this.endPoint = { x: this.x2, y: this.y2 }
|
||||
@ -37,12 +39,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
|
||||
}
|
||||
},
|
||||
|
||||
toObject: function (propertiesToInclude) {
|
||||
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
||||
type: this.type,
|
||||
text: this.text,
|
||||
})
|
||||
},
|
||||
init: function () {
|
||||
this.addLengthText()
|
||||
|
||||
@ -148,7 +144,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
|
||||
|
||||
getLength() {
|
||||
//10배 곱해진 값 return
|
||||
return Number(this.length.toFixed(0) * 10)
|
||||
return Number(this.length.toFixed(1)) * 10
|
||||
},
|
||||
|
||||
setViewLengthText(bool) {
|
||||
|
||||
@ -34,8 +34,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
|
||||
// 소수점 전부 제거
|
||||
points.forEach((point) => {
|
||||
point.x = Math.round(point.x)
|
||||
point.y = Math.round(point.y)
|
||||
point.x = Number(point.x.toFixed(1))
|
||||
point.y = Number(point.y.toFixed(1))
|
||||
})
|
||||
options.selectable = options.selectable ?? true
|
||||
options.sort = options.sort ?? true
|
||||
@ -111,17 +111,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
|
||||
this.shape = shape
|
||||
},
|
||||
|
||||
toObject: function (propertiesToInclude) {
|
||||
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
||||
id: this.id,
|
||||
type: this.type,
|
||||
text: this.text,
|
||||
hips: this.hips,
|
||||
ridges: this.ridges,
|
||||
connectRidges: this.connectRidges,
|
||||
})
|
||||
},
|
||||
init: function () {
|
||||
this.addLengthText()
|
||||
|
||||
@ -215,7 +204,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
addLengthText() {
|
||||
this.canvas
|
||||
?.getObjects()
|
||||
.filter((obj) => obj.name === 'lengthText' && obj.parent === this)
|
||||
.filter((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
|
||||
.forEach((text) => {
|
||||
this.canvas.remove(text)
|
||||
})
|
||||
@ -226,7 +215,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
const end = points[(i + 1) % points.length]
|
||||
const dx = end.x - start.x
|
||||
const dy = end.y - start.y
|
||||
const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) * 10
|
||||
const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
|
||||
|
||||
let midPoint
|
||||
|
||||
|
||||
@ -2,72 +2,77 @@
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
import { useRecoilValue } from 'recoil'
|
||||
|
||||
import { useCanvas } from '@/hooks/useCanvas'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
import { useContextMenu } from '@/hooks/useContextMenu'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { currentObjectState } from '@/store/canvasAtom'
|
||||
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
||||
import { currentMenuState } from '@/store/canvasAtom'
|
||||
import QContextMenu from '@/components/common/context-menu/QContextMenu'
|
||||
import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
|
||||
import { MENU } from '@/common/common'
|
||||
import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
|
||||
|
||||
export default function CanvasFrame({ plan }) {
|
||||
export default function CanvasFrame() {
|
||||
const canvasRef = useRef(null)
|
||||
const { canvas } = useCanvas('canvas')
|
||||
const { handleZoomClear } = useCanvasEvent()
|
||||
const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
|
||||
externalFn: {
|
||||
handleZoomClear,
|
||||
},
|
||||
})
|
||||
const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
|
||||
const { canvasLoadInit } = useCanvasConfigInitialize()
|
||||
const currentObject = useRecoilValue(currentObjectState)
|
||||
|
||||
const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
|
||||
const currentMenu = useRecoilValue(currentMenuState)
|
||||
const { contextMenu, handleClick, handleKeyup } = useContextMenu()
|
||||
const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
|
||||
useEvent()
|
||||
|
||||
const loadCanvas = () => {
|
||||
if (canvas) {
|
||||
canvas?.clear() // 캔버스를 초기화합니다.
|
||||
if (plan?.canvasStatus) {
|
||||
canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
|
||||
canvas?.renderAll() // 캔버스를 다시 그립니다.
|
||||
if (selectedPlan?.canvasStatus) {
|
||||
canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () {
|
||||
canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
|
||||
canvas?.renderAll() // 캔버스를 다시 그립니다.
|
||||
})
|
||||
}
|
||||
gridInit()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadCanvas()
|
||||
}, [plan, canvas])
|
||||
if (modifiedPlanFlag && selectedPlan?.id) {
|
||||
checkCanvasObjectEvent(selectedPlan.id)
|
||||
}
|
||||
}, [modifiedPlanFlag])
|
||||
|
||||
const onClickContextMenu = (index) => {}
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
resetModifiedPlans()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadCanvas()
|
||||
resetModifiedPlans()
|
||||
}, [selectedPlan, canvas])
|
||||
|
||||
return (
|
||||
<div className="canvas-frame">
|
||||
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
|
||||
|
||||
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
|
||||
{contextMenu.map((menus, index) => (
|
||||
<QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
|
||||
{contextMenu?.map((menus, index) => (
|
||||
<ul key={index}>
|
||||
{menus.map((menu) => (
|
||||
<li
|
||||
key={menu.id}
|
||||
onClick={(e) => {
|
||||
if (menu.fn) {
|
||||
menu.fn()
|
||||
}
|
||||
handleClick(e, menu)
|
||||
}}
|
||||
>
|
||||
<li key={menu.id} onClick={(e) => handleClick(e, menu)}>
|
||||
{menu.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</QContextMenu>
|
||||
{[
|
||||
MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING,
|
||||
MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
|
||||
MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
|
||||
].includes(currentMenu) && <PanelBatchStatistics />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,9 +8,11 @@ import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { SessionContext } from '@/app/SessionProvider'
|
||||
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
||||
|
||||
export default function CanvasLayout(props) {
|
||||
const { menuNumber } = props
|
||||
export default function CanvasLayout({ children }) {
|
||||
// const { menuNumber } = props
|
||||
const { menuNumber } = useCanvasMenu()
|
||||
const { session } = useContext(SessionContext)
|
||||
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
@ -58,7 +60,7 @@ export default function CanvasLayout(props) {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
|
||||
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import MenuDepth01 from './MenuDepth01'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
@ -11,70 +12,52 @@ import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { canvasState, canvasZoomState, currentCanvasPlanState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
||||
import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
import { outerLinePointsState } from '@/store/outerLineAtom'
|
||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||
import { settingModalFirstOptionsState, wordDisplaySelector } from '@/store/settingAtom'
|
||||
import { MENU } from '@/common/common'
|
||||
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
||||
|
||||
import KO from '@/locales/ko.json'
|
||||
import JA from '@/locales/ja.json'
|
||||
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
||||
import { popupState } from '@/store/popupAtom'
|
||||
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
|
||||
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
||||
import { useCommonUtils } from '@/hooks/common/useCommonUtils'
|
||||
|
||||
const canvasMenus = [
|
||||
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
|
||||
{ index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING },
|
||||
{ index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
|
||||
{ index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
|
||||
{ index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
|
||||
{ index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
|
||||
{ index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
|
||||
]
|
||||
import { commonUtilsState } from '@/store/commonUtilsAtom'
|
||||
import { menusState, menuTypeState } from '@/store/menuAtom'
|
||||
import useMenu from '@/hooks/common/useMenu'
|
||||
import { MENU } from '@/common/common'
|
||||
|
||||
export default function CanvasMenu(props) {
|
||||
const { menuNumber, setMenuNumber } = props
|
||||
|
||||
const { addPopup, closePopup } = usePopup()
|
||||
const [type, setType] = useState('')
|
||||
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { addPopup } = usePopup()
|
||||
const canvasMenus = useRecoilValue(menusState)
|
||||
const [type, setType] = useRecoilState(menuTypeState)
|
||||
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
|
||||
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
||||
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
||||
const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
|
||||
const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
|
||||
const canvasSetting = useRecoilValue(canvasSettingState)
|
||||
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
||||
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
||||
const { handleZoomClear } = useCanvasEvent()
|
||||
|
||||
const sessionState = useRecoilValue(sessionStore)
|
||||
const globalLocale = useRecoilValue(globalLocaleStore)
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const sessionState = useRecoilValue(sessionStore)
|
||||
const { handleZoomClear } = useCanvasEvent()
|
||||
const { handleMenu } = useMenu()
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { saveCanvas } = usePlan()
|
||||
const { currentCanvasPlan, saveCanvas } = usePlan()
|
||||
const { swalFire } = useSwal()
|
||||
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
|
||||
|
||||
const [commonFunctionState, setCommonFunctionState] = useState({
|
||||
text: false,
|
||||
dimension: false,
|
||||
distance: false,
|
||||
})
|
||||
|
||||
const { commonFunctions } = useCommonUtils({
|
||||
commonFunctionState,
|
||||
setCommonFunctionState,
|
||||
})
|
||||
|
||||
const [popup, setPopup] = useRecoilState(popupState)
|
||||
|
||||
const commonUtils = useRecoilValue(commonUtilsState)
|
||||
const { commonFunctions } = useCommonUtils()
|
||||
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
||||
|
||||
const onClickNav = (menu) => {
|
||||
@ -96,9 +79,8 @@ export default function CanvasMenu(props) {
|
||||
setType('module')
|
||||
break
|
||||
}
|
||||
}
|
||||
const menuProps = {
|
||||
type,
|
||||
|
||||
if (pathname !== '/floor-plan') router.push('/floor-plan')
|
||||
}
|
||||
|
||||
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
|
||||
@ -130,7 +112,6 @@ export default function CanvasMenu(props) {
|
||||
}
|
||||
const onClickPlacementInitialMenu = () => {
|
||||
addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
|
||||
// setShowPlaceShapeModal(true)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
@ -157,7 +138,19 @@ export default function CanvasMenu(props) {
|
||||
} else {
|
||||
setAppMessageState(JA)
|
||||
}
|
||||
}, [menuNumber, type, globalLocale])
|
||||
}, [type, globalLocale])
|
||||
|
||||
useEffect(() => {
|
||||
if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString())) {
|
||||
setMenuNumber(3)
|
||||
setType('surface')
|
||||
setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
|
||||
} else {
|
||||
setMenuNumber(2)
|
||||
setType('outline')
|
||||
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
||||
}
|
||||
}, [canvasSetting])
|
||||
|
||||
return (
|
||||
<div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
||||
@ -168,9 +161,12 @@ export default function CanvasMenu(props) {
|
||||
<li
|
||||
key={`canvas-menu-${menu.index}`}
|
||||
className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
|
||||
onClick={() => onClickNav(menu)}
|
||||
onClick={() => {
|
||||
if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2) return
|
||||
onClickNav(menu)
|
||||
}}
|
||||
>
|
||||
<button>
|
||||
<button className={['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2 ? 'no-click' : ''}>
|
||||
<span className={`menu-icon ${menu.icon}`}></span>
|
||||
{getMessage(menu.name)}
|
||||
</button>
|
||||
@ -188,9 +184,9 @@ export default function CanvasMenu(props) {
|
||||
</div>
|
||||
}
|
||||
<div className="btn-from">
|
||||
<button className={`btn01 ${commonFunctionState.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
|
||||
<button className={`btn02 ${commonFunctionState.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
||||
<button className={`btn03 ${commonFunctionState.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
||||
<button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
|
||||
<button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
||||
<button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
||||
</div>
|
||||
<div className="select-box">
|
||||
<QSelectBox title={'瓦53A'} option={SelectOption} />
|
||||
@ -224,7 +220,7 @@ export default function CanvasMenu(props) {
|
||||
<div className="ico-btn-from">
|
||||
<button className="btn-frame gray ico-flx act">
|
||||
<span className="ico ico01"></span>
|
||||
<span>{getMessage('plan.menu.estimate.roof.alloc')}</span>
|
||||
<span>{getMessage('plan.menu.estimate.docDown')}</span>
|
||||
</button>
|
||||
<button className="btn-frame gray ico-flx">
|
||||
<span className="ico ico02"></span>
|
||||
@ -258,7 +254,7 @@ export default function CanvasMenu(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
||||
{(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 {...menuProps} />}
|
||||
{(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -2,64 +2,35 @@
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
|
||||
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
|
||||
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
|
||||
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
import '@/styles/contents.scss'
|
||||
|
||||
export default function FloorPlan() {
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
const { get } = useAxios(globalLocaleState)
|
||||
export default function FloorPlan({ children }) {
|
||||
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
|
||||
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
const { menuNumber, setMenuNumber } = useCanvasMenu()
|
||||
|
||||
const { fetchSettings } = useCanvasSetting()
|
||||
|
||||
const modalProps = {
|
||||
menuNumber,
|
||||
setMenuNumber,
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('FloorPlan 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 optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
||||
...item,
|
||||
}))
|
||||
// 데이터 설정
|
||||
setSettingModalFirstOptions({
|
||||
option1: optionData1,
|
||||
option2: optionData2,
|
||||
dimensionDisplay: optionData5,
|
||||
})
|
||||
setSettingModalSecondOptions({
|
||||
option3: optionData3,
|
||||
option4: optionData4,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Data fetching error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="canvas-wrap">
|
||||
<CanvasMenu {...modalProps} />
|
||||
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
||||
<CanvasLayout menuNumber={menuNumber} />
|
||||
</div>
|
||||
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,150 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { MENU } from '@/common/common'
|
||||
import { currentMenuState } from '@/store/canvasAtom'
|
||||
import { useSetRecoilState } from 'recoil'
|
||||
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
|
||||
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
|
||||
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
|
||||
import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
|
||||
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
|
||||
import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
|
||||
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
|
||||
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
|
||||
import Slope from '@/components/floor-plan/modal/Slope'
|
||||
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
|
||||
import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
|
||||
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
|
||||
import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
|
||||
import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { menuTypeState, subMenusState } from '@/store/menuAtom'
|
||||
import useMenu from '@/hooks/common/useMenu'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export default function MenuDepth01(props) {
|
||||
const { type } = props
|
||||
export default function MenuDepth01() {
|
||||
const type = useRecoilValue(menuTypeState)
|
||||
const { getMessage } = useMessage()
|
||||
const [activeMenu, setActiveMenu] = useState()
|
||||
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
||||
const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
|
||||
const { addPopup } = usePopup()
|
||||
const [outlineId, setOutlineId] = useState(uuidv4())
|
||||
const onClickMenu = ({ id, menu, name }) => {
|
||||
setActiveMenu(menu)
|
||||
setCurrentMenu(menu)
|
||||
if (type === 'outline') {
|
||||
switch (id) {
|
||||
case 0:
|
||||
addPopup(outlineId, 1, <WallLineSetting id={outlineId} />)
|
||||
break
|
||||
case 1:
|
||||
addPopup(outlineId, 1, <RoofShapeSetting id={outlineId} />)
|
||||
break
|
||||
case 2:
|
||||
addPopup(outlineId, 1, <RoofShapePassivitySetting id={outlineId} />)
|
||||
break
|
||||
case 3:
|
||||
addPopup(outlineId, 1, <AuxiliaryDrawing id={outlineId} />)
|
||||
break
|
||||
case 4:
|
||||
addPopup(outlineId, 1, <EavesGableEdit id={outlineId} />)
|
||||
break
|
||||
case 5:
|
||||
addPopup(outlineId, 1, <MovementSetting id={outlineId} />)
|
||||
break
|
||||
case 6:
|
||||
addPopup(outlineId, 1, <WallLineOffsetSetting id={outlineId} />)
|
||||
break
|
||||
case 7:
|
||||
addPopup(outlineId, 1, <RoofAllocationSetting id={outlineId} />)
|
||||
break
|
||||
}
|
||||
}
|
||||
const { handleMenu } = useMenu()
|
||||
const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
|
||||
const subMenus = useRecoilValue(subMenusState)
|
||||
|
||||
if (type === 'surface') {
|
||||
switch (id) {
|
||||
case 0:
|
||||
addPopup(outlineId, 1, <Slope id={outlineId} />)
|
||||
break
|
||||
case 1:
|
||||
addPopup(outlineId, 1, <PlacementShapeDrawing id={outlineId} />)
|
||||
break
|
||||
case 2:
|
||||
addPopup(outlineId, 1, <PlacementSurfaceSetting id={outlineId} />)
|
||||
break
|
||||
case 3:
|
||||
addPopup(outlineId, 1, <ObjectSetting id={outlineId} />)
|
||||
break
|
||||
case 4:
|
||||
deleteAllSurfacesAndObjects()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'module') {
|
||||
switch (id) {
|
||||
case 0:
|
||||
addPopup(outlineId, 1, <BasicSetting id={outlineId} />)
|
||||
break
|
||||
case 1:
|
||||
addPopup(outlineId, 1, <CircuitTrestleSetting id={outlineId} />)
|
||||
break
|
||||
}
|
||||
const onClickMenu = ({ id, menu }) => {
|
||||
if (menu === currentMenu) {
|
||||
handleMenu(type)
|
||||
} else {
|
||||
setCurrentMenu(menu)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setActiveMenu(null)
|
||||
}, [type])
|
||||
|
||||
const menuInfo = {
|
||||
outline: [
|
||||
// 지붕덮개
|
||||
{ id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
|
||||
{ id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
|
||||
{
|
||||
id: 2,
|
||||
name: 'plan.menu.roof.cover.roof.shape.passivity.setting',
|
||||
menu: MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS,
|
||||
},
|
||||
{ id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
|
||||
{ id: 4, name: 'plan.menu.roof.cover.eaves.kerava.edit', menu: MENU.ROOF_COVERING.EAVES_KERAVA_EDIT },
|
||||
{ id: 5, name: 'plan.menu.roof.cover.movement.shape.updown', menu: MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN },
|
||||
{ id: 6, name: 'plan.menu.roof.cover.outline.edit.offset', menu: MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET },
|
||||
{ id: 7, name: 'plan.menu.roof.cover.roof.surface.alloc', menu: MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC },
|
||||
],
|
||||
surface: [
|
||||
// 배치면
|
||||
{ id: 0, name: 'plan.menu.placement.surface.slope.setting', menu: MENU.BATCH_CANVAS.SLOPE_SETTING },
|
||||
{ id: 1, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
|
||||
{ id: 2, name: 'plan.menu.placement.surface.arrangement', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
|
||||
{ id: 3, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
|
||||
{ id: 4, name: 'plan.menu.placement.surface.all.remove', menu: MENU.BATCH_CANVAS.ALL_REMOVE },
|
||||
],
|
||||
module: [
|
||||
// 모듈, 회로 구성
|
||||
|
||||
{ id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
|
||||
{
|
||||
id: 1,
|
||||
name: 'plan.menu.module.circuit.setting.circuit.trestle.setting',
|
||||
menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'plan.menu.module.circuit.setting.plan.orientation',
|
||||
menu: MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
|
||||
},
|
||||
],
|
||||
}
|
||||
handleMenu(type)
|
||||
}, [currentMenu])
|
||||
return (
|
||||
<div className="canvas-depth2-inner">
|
||||
<ul className="canvas-depth2-list">
|
||||
{menuInfo[type].map((menu) => {
|
||||
{subMenus[type]?.map((menu) => {
|
||||
return (
|
||||
<li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
|
||||
<li key={menu.id} className={`canvas-depth2-item ${menu.menu === currentMenu ? 'active' : ''}`}>
|
||||
<button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
|
||||
</li>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { globalPitchState } from '@/store/canvasAtom'
|
||||
import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { useRef } from 'react'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
@ -8,7 +8,8 @@ import { usePopup } from '@/hooks/usePopup'
|
||||
export default function Slope({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
|
||||
const [globalPitch, setGlobalPitch] = useRecoilState(pitchSelector)
|
||||
const pitchText = useRecoilState(pitchTextSelector)
|
||||
const inputRef = useRef()
|
||||
|
||||
return (
|
||||
@ -29,7 +30,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
|
||||
</div>
|
||||
<span className="thin">{getMessage('size.angle')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
|
||||
@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function AuxiliaryCopy(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [arrow1, setArrow1] = useState(null)
|
||||
const [arrow2, setArrow2] = useState(null)
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線のコピー </h1>
|
||||
<h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">コピーする方向を入力してください</div>
|
||||
<div className="grid-option-tit">{getMessage('modal.auxiliary.copy.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">長さ</p>
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,52 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function AuxiliaryMove(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [arrow1, setArrow1] = useState(null)
|
||||
const [arrow2, setArrow2] = useState(null)
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線の移動 </h1>
|
||||
<h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">移動する方向を入力してください</div>
|
||||
<div className="grid-option-tit">{getMessage('modal.auxiliary.move.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">長さ</p>
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,9 +11,9 @@ export default function AuxiliarySize(props) {
|
||||
const { closePopup } = usePopup()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線サイズ変更 </h1>
|
||||
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
@ -22,7 +22,7 @@ export default function AuxiliarySize(props) {
|
||||
<div className="discrimination-box mb10">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">1支店</label>
|
||||
<label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
@ -31,7 +31,7 @@ export default function AuxiliarySize(props) {
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>長さ</span>
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
@ -41,7 +41,7 @@ export default function AuxiliarySize(props) {
|
||||
<div className="discrimination-box ">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">2支店</label>
|
||||
<label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
@ -50,7 +50,7 @@ export default function AuxiliarySize(props) {
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>長さ</span>
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
</div>
|
||||
@ -58,7 +58,7 @@ export default function AuxiliarySize(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,71 +1,144 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
|
||||
import { defaultSlope } from '@/store/commonAtom'
|
||||
|
||||
export default function DimensionLineSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, setIsShow, pos = contextPopupPosition } = props
|
||||
let { id, setIsShow, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const pitchText = useRecoilState(pitchTextSelector)
|
||||
const SelectOption01 = defaultSlope
|
||||
const [basicLength, setBasicLength] = useState(0)
|
||||
const [slopeAble, setSlopeAble] = useState(false)
|
||||
const changeSlopeRef = useRef()
|
||||
|
||||
let slopeInput1, slopeInput2
|
||||
|
||||
useEffect(() => {
|
||||
if (canvas) {
|
||||
const dimensionObject = canvas.getActiveObject()
|
||||
const id = dimensionObject.groupId
|
||||
const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
|
||||
setBasicLength(parseInt(textObj.text))
|
||||
}
|
||||
|
||||
return () => {
|
||||
setBasicLength(0)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleChangeLength = () => {
|
||||
const changeLength = changeSlopeRef.current
|
||||
|
||||
if (canvas) {
|
||||
const dimensionObject = canvas.getActiveObject()
|
||||
const id = dimensionObject.groupId
|
||||
const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
|
||||
let resultText = changeLength.value > 0 ? changeLength.value : '0'
|
||||
|
||||
if (slopeAble) {
|
||||
if (slopeInput1) {
|
||||
resultText = calculateLength(basicLength, slopeInput1.angleValue).toFixed(0)
|
||||
|
||||
if (slopeInput2) {
|
||||
const length = calculateLength(basicLength, slopeInput1.angleValue, slopeInput2.angleValue)
|
||||
resultText = length.toFixed(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textObj.set({
|
||||
text: String(resultText),
|
||||
})
|
||||
|
||||
canvas.renderAll()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectbox = (option, params) => {
|
||||
const index = params.index
|
||||
if (index === 1) slopeInput1 = option
|
||||
if (index === 2) slopeInput2 = option
|
||||
}
|
||||
|
||||
function calculateLength(originalLength, angle) {
|
||||
const angleInRadians = angle * (Math.PI / 180)
|
||||
const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
|
||||
return result
|
||||
}
|
||||
|
||||
function calculateLength(originalLength, angle1, angle2) {
|
||||
const numerator = Math.sqrt(Math.pow(angle1, 2) + 100 + Math.pow((10 * angle1) / angle2, 2)) * originalLength
|
||||
const denominator = Math.sqrt(Math.pow((10 * angle1) / angle2, 2) + 100)
|
||||
const result = numerator / denominator
|
||||
return result
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">表示の変更 </h1>
|
||||
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="guide">寸法線に表示する数値を入力してください</div>
|
||||
<div className="guide">{getMessage('modal.display.edit.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="slope-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">既存の長さ</span>
|
||||
<span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={5933} readOnly />
|
||||
<input type="text" className="input-origin block" value={basicLength} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">変更の長さ</span>
|
||||
<span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={0} />
|
||||
<input type="text" className="input-origin block" ref={changeSlopeRef} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" />
|
||||
<label htmlFor="ch99">コーナー・ゴールの場合</label>
|
||||
<input type="checkbox" id="ch99" onChange={() => setSlopeAble(!slopeAble)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slope-wrap">
|
||||
<div className="warning">傾斜を着せてください。</div>
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
|
||||
<div className="display-change-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">傾斜</span>
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox title={'0'} option={SelectOption01} />
|
||||
<QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">傾斜</span>
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox title={'0'} option={SelectOption01} />
|
||||
<QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act" onClick={handleChangeLength}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,25 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
|
||||
export default function Distance(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, distance } = props
|
||||
const { id, pos = contextPopupPosition, distance, deleteDistance } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
const handleClose = () => {
|
||||
deleteDistance()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">距離測定 </h1>
|
||||
<h1 className="title">{getMessage('modal.distance')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
@ -23,7 +28,7 @@ export default function Distance(props) {
|
||||
<div className="slope-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">2点間距離</div>
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
@ -34,7 +39,7 @@ export default function Distance(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">水平距離</div>
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
@ -45,7 +50,7 @@ export default function Distance(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">垂直距離</div>
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
@ -58,7 +63,7 @@ export default function Distance(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">確認</button>
|
||||
<button className="btn-frame modal act" onClick={handleClose}>{getMessage('common.require')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,12 +11,13 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(id)
|
||||
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText } = useEavesGableEdit(id)
|
||||
const eavesProps = {
|
||||
pitchRef,
|
||||
offsetRef,
|
||||
widthRef,
|
||||
radioTypeRef,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
const gableProps = {
|
||||
@ -24,6 +25,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
|
||||
offsetRef,
|
||||
widthRef,
|
||||
radioTypeRef,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
const wallMergeProps = {
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
|
||||
|
||||
export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
|
||||
export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
const [type, setType] = useState('1')
|
||||
const onChange = (e) => {
|
||||
setType(e.target.value)
|
||||
radioTypeRef.current = e.target.value
|
||||
}
|
||||
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
||||
return (
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
@ -17,9 +20,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="number" className="input-origin block" defaultValue={4} ref={pitchRef} />
|
||||
<input type="number" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
|
||||
</div>
|
||||
<span className="thin">寸</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: '24px' }}>
|
||||
|
||||
@ -1,14 +1,18 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
|
||||
|
||||
export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
|
||||
export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
const [type, setType] = useState('1')
|
||||
const onChange = (e) => {
|
||||
setType(e.target.value)
|
||||
radioTypeRef.current = e.target.value
|
||||
}
|
||||
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="outline-wrap">
|
||||
@ -57,9 +61,15 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={4.5} ref={pitchRef} readOnly={type === '1'} />
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
|
||||
ref={pitchRef}
|
||||
readOnly={type === '1'}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">寸</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
|
||||
@ -1,24 +1,68 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
|
||||
const SelectOption01 = [{ name: 'M' }, { name: 'M' }, { name: 'M' }, { name: 'M' }]
|
||||
|
||||
export default function FlowDirectionSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { id, pos = contextPopupPosition, target } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [compasDeg, setCompasDeg] = useState(0)
|
||||
const [compasDeg, setCompasDeg] = useState(360)
|
||||
const orientations = [
|
||||
{ name: `${getMessage('commons.south')}`, value: 360 },
|
||||
{ name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
|
||||
{ name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
|
||||
{ name: `${getMessage('commons.east')}`, value: 270 },
|
||||
{ name: `${getMessage('commons.west')}`, value: 90 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
|
||||
{ name: `${getMessage('commons.north')}`, value: 180 },
|
||||
]
|
||||
const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
|
||||
const [type, setType] = useState('0')
|
||||
useEffect(() => {
|
||||
if (target?.angle === 0) {
|
||||
setCompasDeg(360)
|
||||
} else {
|
||||
setCompasDeg(target?.angle ?? 360)
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
if (type === '0') {
|
||||
setCompasDeg(selectedOrientation.value)
|
||||
}
|
||||
}, [selectedOrientation])
|
||||
|
||||
useEffect(() => {
|
||||
if (type === '1') {
|
||||
if ([15, 345, 360].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[0])
|
||||
} else if ([30, 45, 60].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[2])
|
||||
} else if ([75, 90, 105].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[4])
|
||||
} else if ([120, 135, 150].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[6])
|
||||
} else if ([165, 180, 195].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[7])
|
||||
} else if ([210, 225, 240].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[5])
|
||||
} else if ([255, 270, 285].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[3])
|
||||
} else if ([300, 315, 330].includes(compasDeg)) {
|
||||
setSelectedOrientation(orientations[1])
|
||||
}
|
||||
}
|
||||
}, [compasDeg])
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lx`}>
|
||||
<div className={`modal-pop-wrap lx mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">面フローの設定 </h1>
|
||||
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
@ -26,113 +70,59 @@ export default function FlowDirectionSetting(props) {
|
||||
<div className="modal-body">
|
||||
<div className="drawing-flow-wrap">
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">流れ方向の設定</div>
|
||||
<div className="guide">流れ方向を選択してください。</div>
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
|
||||
<div className="object-direction-wrap">
|
||||
<div className="plane-direction">
|
||||
<span className="top">北</span>
|
||||
<span className="right">ドン</span>
|
||||
<span className="bottom">南</span>
|
||||
<span className="left">立つ</span>
|
||||
<span className="top">{getMessage('commons.north')}</span>
|
||||
<button className="plane-btn up"></button>
|
||||
<span className="right">{getMessage('commons.east')}</span>
|
||||
<button className="plane-btn right"></button>
|
||||
<span className="bottom">{getMessage('commons.south')}</span>
|
||||
<button className="plane-btn down act"></button>
|
||||
<span className="left">{getMessage('commons.west')}</span>
|
||||
<button className="plane-btn left"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">方位設定</div>
|
||||
<div className="guide">シミュレーション計算の方向を指定します。面が向いている方位を選択してください。</div>
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop mb15">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">8方位に選ぶ</label>
|
||||
<input type="radio" name="radio01" id="ra01" value={0} checked={type === '0'} onChange={(e) => setType(e.target.value)} />
|
||||
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
|
||||
</div>
|
||||
<div className="grid-select ">
|
||||
<QSelectBox title={'M'} options={SelectOption01} />
|
||||
<QSelectBox title={''} options={orientations} value={selectedOrientation} onChange={(e) => setSelectedOrientation(e)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio02" id="ra02" />
|
||||
<label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
|
||||
<input type="radio" name="radio01" id="ra02" value={1} checked={type === '1'} onChange={(e) => setType(e.target.value)} />
|
||||
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}>
|
||||
<i>13</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}>
|
||||
<i>12</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}>
|
||||
<i>11</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}>
|
||||
<i>10</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}>
|
||||
<i>9</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}>
|
||||
<i>8</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}>
|
||||
<i>7</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}>
|
||||
<i>6</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}>
|
||||
<i>5</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}>
|
||||
<i>4</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}>
|
||||
<i>3</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}>
|
||||
<i>2</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}>
|
||||
<i>1</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}>
|
||||
<i>24</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}>
|
||||
<i>23</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}>
|
||||
<i>22</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}>
|
||||
<i>21</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}>
|
||||
<i>20</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}>
|
||||
<i>19</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}>
|
||||
<i>18</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}>
|
||||
<i>17</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}>
|
||||
<i>16</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}>
|
||||
<i>15</i>
|
||||
</div>
|
||||
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}>
|
||||
<i>14</i>
|
||||
</div>
|
||||
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
|
||||
onClick={() => setCompasDeg(15 * (12 + index))}
|
||||
>
|
||||
<i>{13 - index}</i>
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
|
||||
onClick={() => setCompasDeg(15 * (index + 1))}
|
||||
>
|
||||
<i>{24 - index}</i>
|
||||
</div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
|
||||
</div>
|
||||
@ -141,7 +131,7 @@ export default function FlowDirectionSetting(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,7 +71,7 @@ export default function DotLineGrid(props) {
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('DotLineGrid useEffect 실행')
|
||||
// fetchGridSettings()
|
||||
fetchGridSettings()
|
||||
}, [objectNo])
|
||||
|
||||
const HandleClickClose = () => {
|
||||
@ -100,9 +100,9 @@ export default function DotLineGrid(props) {
|
||||
const patternData = {
|
||||
INTERVAL: {
|
||||
type: res.gridType,
|
||||
horizontalInterval: res.gridHorizon,
|
||||
verticalInterval: res.gridVertical,
|
||||
ratioInterval: res.gridRatio,
|
||||
horizontalInterval: res.gridHorizon * 10,
|
||||
verticalInterval: res.gridVertical * 10,
|
||||
ratioInterval: res.gridRatio * 10,
|
||||
},
|
||||
dimension: res.gridDimen,
|
||||
DOT: res.dotGridDisplay,
|
||||
|
||||
@ -34,20 +34,22 @@ export default function GridMove(props) {
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
|
||||
42
src/components/floor-plan/modal/image/ImageSizeSetting.jsx
Normal file
42
src/components/floor-plan/modal/image/ImageSizeSetting.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useState } from 'react'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function ImageSizeSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, size, setSize } = props
|
||||
const [sizeValue, setSizeValue] = useState(100)
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.image.size.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="range-wrap">
|
||||
<input
|
||||
type="range"
|
||||
id="size"
|
||||
name="volume"
|
||||
min="20"
|
||||
max="200"
|
||||
step={10}
|
||||
value={sizeValue}
|
||||
onChange={(e) => setSizeValue(e.target.value)}
|
||||
/>
|
||||
<label htmlFor="size">{sizeValue}%</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -3,99 +3,70 @@ import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function LinePropertySetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const properties = [
|
||||
{ name: getMessage('eaves.line'), value: 'eaves' },
|
||||
{ name: getMessage('ridge'), value: 'ridge' },
|
||||
{ name: getMessage('oneside.flow.ridge'), value: 'onesideFlowRidge' },
|
||||
{ name: getMessage('gable'), value: 'gable' },
|
||||
{ name: getMessage('gable.left'), value: 'gableLeft' },
|
||||
{ name: getMessage('gable.right'), value: 'gableRight' },
|
||||
{ name: getMessage('yosemune'), value: 'yosemune' },
|
||||
{ name: getMessage('valley'), value: 'valley' },
|
||||
{ name: getMessage('l.abandon.valley'), value: 'lAbandonValley' },
|
||||
{ name: getMessage('mansard'), value: 'mansard' },
|
||||
{ name: getMessage('wall.merge'), value: 'wallCollection' },
|
||||
{ name: getMessage('wall.merge.type'), value: 'wallCollectionType' },
|
||||
{ name: getMessage('wall.merge.flow'), value: 'wallCollectionFlow' },
|
||||
{ name: getMessage('wall.merge.flow.left'), value: 'wallCollectionFlowLeft' },
|
||||
{ name: getMessage('wall.merge.flow.right'), value: 'wallCollectionFlowRight' },
|
||||
{ name: getMessage('no.setting'), value: 'noSetting' },
|
||||
]
|
||||
const [selectedProperty, setSelectedProperty] = useState(null)
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">各辺属性の変更 </h1>
|
||||
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="guide">
|
||||
<span className="mb10">属性を変更する辺を選択してください。</span>
|
||||
<span>選択した値 [龍丸]</span>
|
||||
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
|
||||
<span>
|
||||
{getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
|
||||
</span>
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="radio-grid-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">軒先</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">ケラバ</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra03" />
|
||||
<label htmlFor="ra03">龍丸</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra04" />
|
||||
<label htmlFor="ra04">ケラバ左</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra05" />
|
||||
<label htmlFor="ra05">ヨセムネ</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra06" />
|
||||
<label htmlFor="ra06">ケラバ右</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra07" />
|
||||
<label htmlFor="ra07">片側の流れ</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra08" />
|
||||
<label htmlFor="ra08">谷</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra09" />
|
||||
<label htmlFor="ra09">壁取り</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra10" />
|
||||
<label htmlFor="ra10">Lの捨て渓谷</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra11" />
|
||||
<label htmlFor="ra11">壁取り(型)</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra12" />
|
||||
<label htmlFor="ra12">マンサード</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra13" />
|
||||
<label htmlFor="ra13">壁取合(流れ)</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra14" />
|
||||
<label htmlFor="ra14">設定なし</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra15" />
|
||||
<label htmlFor="ra15">壁取合(流れ左)</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra16" />
|
||||
<label htmlFor="ra16">壁取り(流れ右)</label>
|
||||
</div>
|
||||
{properties.map((property, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
|
||||
onChange={(e) => setSelectedProperty(property)}
|
||||
/>
|
||||
<label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,6 +19,7 @@ export default function Angle({ props }) {
|
||||
className="input-origin block"
|
||||
value={angle1}
|
||||
ref={angle1Ref}
|
||||
onFocus={(e) => (angle1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
||||
placeholder="45"
|
||||
/>
|
||||
@ -38,6 +39,7 @@ export default function Angle({ props }) {
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onFocus={(e) => (length1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
|
||||
@ -35,6 +35,7 @@ export default function Diagonal({ props }) {
|
||||
className="input-origin block"
|
||||
value={outerLineDiagonalLength}
|
||||
ref={outerLineDiagonalLengthRef}
|
||||
onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -56,6 +57,7 @@ export default function Diagonal({ props }) {
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onFocus={(e) => (length1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
|
||||
@ -55,6 +55,7 @@ export default function DoublePitch({ props }) {
|
||||
className="input-origin block"
|
||||
value={angle1}
|
||||
ref={angle1Ref}
|
||||
onFocus={(e) => (angle1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
||||
placeholder="45"
|
||||
/>
|
||||
@ -71,6 +72,7 @@ export default function DoublePitch({ props }) {
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onFocus={(e) => (length1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -128,9 +130,9 @@ export default function DoublePitch({ props }) {
|
||||
className="input-origin block"
|
||||
value={angle2}
|
||||
ref={angle2Ref}
|
||||
onFocus={(e) => (angle2Ref.current.value = '')}
|
||||
onChange={(e) => {
|
||||
onlyNumberWithDotInputChange(e, setAngle2)
|
||||
console.log(getLength2())
|
||||
setLength2(getLength2())
|
||||
}}
|
||||
placeholder="45"
|
||||
@ -153,6 +155,7 @@ export default function DoublePitch({ props }) {
|
||||
className="input-origin block"
|
||||
value={length2}
|
||||
ref={length2Ref}
|
||||
onFocus={(e) => (length2Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
||||
readOnly={true}
|
||||
placeholder="3000"
|
||||
|
||||
@ -18,6 +18,7 @@ export default function OuterLineWall({ props }) {
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onFocus={(e) => (length1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
|
||||
@ -15,6 +15,7 @@ export default function RightAngle({ props }) {
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onFocus={(e) => (length1Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -70,6 +71,7 @@ export default function RightAngle({ props }) {
|
||||
className="input-origin block"
|
||||
value={length2}
|
||||
ref={length2Ref}
|
||||
onFocus={(e) => (length2Ref.current.value = '')}
|
||||
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
||||
placeholder="3000"
|
||||
/>
|
||||
|
||||
48
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
Normal file
48
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function CircuitNumberEdit(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const { getMessage } = useMessage()
|
||||
const handleApply = () => {
|
||||
if (apply) apply()
|
||||
closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.circuit.number')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
78
src/components/floor-plan/modal/module/PanelEdit.jsx
Normal file
78
src/components/floor-plan/modal/module/PanelEdit.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function PanelEdit(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, type = 'move', apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const [length, setLength] = useState(0)
|
||||
const [direction, setDirection] = useState('')
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const handleApply = () => {
|
||||
apply()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('margin')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-direction">
|
||||
<button
|
||||
className={`direction up ${direction === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('↑')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${direction === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('↓')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction left ${direction === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('←')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${direction === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('→')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
export default function ColumnInsert(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const [selectedType, setSelectedType] = useState(1)
|
||||
const { getMessage } = useMessage()
|
||||
const handleApply = () => {
|
||||
if (apply) apply()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
const HandleRadioChange = (e) => {
|
||||
setSelectedType(Number(e.target.value))
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
|
||||
<label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
|
||||
<label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === 1 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional-edit01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 2 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional-edit02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
118
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
Normal file
118
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
Normal file
@ -0,0 +1,118 @@
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
export default function ColumnRemove(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const [selectedType, setSelectedType] = useState(1)
|
||||
const { getMessage } = useMessage()
|
||||
const types = [
|
||||
{ name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
|
||||
{ name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
|
||||
{ name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
|
||||
{ name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
|
||||
]
|
||||
const handleApply = () => {
|
||||
if (apply) apply()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={(e) => setSelectedType(Number(e.target.value))}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === 1 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 2 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 3 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del03.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 4 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del04.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
95
src/components/floor-plan/modal/module/row/RowInsert.jsx
Normal file
95
src/components/floor-plan/modal/module/row/RowInsert.jsx
Normal file
@ -0,0 +1,95 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function RowInsert(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const [selectedType, setSelectedType] = useState(1)
|
||||
const { getMessage } = useMessage()
|
||||
const handleApply = () => {
|
||||
if (apply) apply()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
const HandleRadioChange = (e) => {
|
||||
setSelectedType(Number(e.target.value))
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.row.insert')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
|
||||
<label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
|
||||
<label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === 1 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 2 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
118
src/components/floor-plan/modal/module/row/RowRemove.jsx
Normal file
118
src/components/floor-plan/modal/module/row/RowRemove.jsx
Normal file
@ -0,0 +1,118 @@
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function RowRemove(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition, apply } = props
|
||||
const { closePopup } = usePopup()
|
||||
const [selectedType, setSelectedType] = useState(1)
|
||||
const { getMessage } = useMessage()
|
||||
const types = [
|
||||
{ name: getMessage('modal.row.remove.type.up'), value: 1 },
|
||||
{ name: getMessage('modal.row.remove.type.down'), value: 2 },
|
||||
{ name: getMessage('modal.row.remove.type.side'), value: 3 },
|
||||
{ name: getMessage('modal.row.remove.type.none'), value: 4 },
|
||||
]
|
||||
const handleApply = () => {
|
||||
if (apply) apply()
|
||||
closePopup(id)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('modal.row.remove')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={() => setSelectedType(Number(e.target.value))}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage(type.name)}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === 1 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 2 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 3 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del03.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === 4 && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del04.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -4,15 +4,18 @@ import { useState } from 'react'
|
||||
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
|
||||
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
|
||||
|
||||
export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [buttonAct, setButtonAct] = useState(1)
|
||||
const buttonMenu = [
|
||||
{ id: 1, name: getMessage('modal.movement.flow.line.move') },
|
||||
{ id: 2, name: getMessage('modal.movement.flow.line.updown') },
|
||||
]
|
||||
const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)
|
||||
|
||||
const flowLineProps = {
|
||||
FLOW_LINE_REF,
|
||||
}
|
||||
const updownProps = {
|
||||
UP_DOWN_REF,
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
@ -25,19 +28,21 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
|
||||
{buttonType.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{buttonAct === 1 && <FlowLine />}
|
||||
{buttonAct === 2 && <Updown />}
|
||||
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
|
||||
{type === TYPE.UP_DOWN && <Updown {...updownProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,25 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
|
||||
export default function FlowLine({}) {
|
||||
const FLOW_LINE_TYPE = {
|
||||
DOWN_LEFT: 'downLeft',
|
||||
UP_RIGHT: 'upRight',
|
||||
}
|
||||
|
||||
export default function FlowLine({ FLOW_LINE_REF }) {
|
||||
const { getMessage } = useMessage()
|
||||
const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
|
||||
|
||||
useEffect(() => {
|
||||
if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
|
||||
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
|
||||
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
|
||||
} else {
|
||||
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
|
||||
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
|
||||
}
|
||||
}, [type])
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -11,14 +29,23 @@ export default function FlowLine({}) {
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
defaultChecked={true}
|
||||
ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
|
||||
onChange={() => {
|
||||
setType(FLOW_LINE_TYPE.DOWN_LEFT)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
<input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,14 +53,27 @@ export default function FlowLine({}) {
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
|
||||
onChange={() => {
|
||||
setType(FLOW_LINE_TYPE.UP_RIGHT)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
|
||||
ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,28 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
|
||||
export default function Updown({}) {
|
||||
const UP_DOWN_TYPE = {
|
||||
UP: 'up',
|
||||
DOWN: 'down',
|
||||
}
|
||||
|
||||
export default function Updown({ UP_DOWN_REF }) {
|
||||
const { getMessage } = useMessage()
|
||||
const [type, setType] = useState(UP_DOWN_TYPE.UP)
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
|
||||
useEffect(() => {
|
||||
if (type === UP_DOWN_TYPE.UP) {
|
||||
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
|
||||
UP_DOWN_REF.UP_INPUT_REF.current.focus()
|
||||
} else {
|
||||
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
|
||||
UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
|
||||
}
|
||||
}, [type])
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -11,14 +32,23 @@ export default function Updown({}) {
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
ref={UP_DOWN_REF.UP_RADIO_REF}
|
||||
defaultChecked={true}
|
||||
onChange={() => {
|
||||
setType(UP_DOWN_TYPE.UP)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,14 +56,22 @@ export default function Updown({}) {
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
ref={UP_DOWN_REF.DOWN_RADIO_REF}
|
||||
onChange={() => {
|
||||
setType(UP_DOWN_TYPE.DOWN)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={100} />
|
||||
<input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function DormerOffset(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [arrow1, setArrow1] = useState(null)
|
||||
const [arrow2, setArrow2] = useState(null)
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">도머 오프셋 </h1>
|
||||
<h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">移動する方向を入力してください</div>
|
||||
<div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">長さ</p>
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
<input type="text" className="input-origin" defaultValue={0} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" defaultValue={910} />
|
||||
<input type="text" className="input-origin" defaultValue={0} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="direction-move-wrap">
|
||||
<button className="direction up"></button>
|
||||
<button className="direction down act"></button>
|
||||
<button className="direction left"></button>
|
||||
<button className="direction right"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">保存</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,8 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const [buttonAct, setButtonAct] = useState(1)
|
||||
const { swalFire } = useSwal()
|
||||
const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
|
||||
const [isHidden, setIsHidden] = useState(false)
|
||||
const { applyOpeningAndShadow, applyDormers } = useObjectBatch({ isHidden, setIsHidden })
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
||||
@ -63,6 +64,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
} else {
|
||||
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
|
||||
}
|
||||
setIsHidden(true)
|
||||
}
|
||||
|
||||
const buttonMenu = [
|
||||
@ -71,9 +73,10 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
{ id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
|
||||
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
|
||||
]
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lrr`}>
|
||||
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
|
||||
@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm`}>
|
||||
<div className={`modal-pop-wrap xxxm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">変更 </h1>
|
||||
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">ストレージ</button>
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,25 +2,42 @@
|
||||
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
import { useState } from 'react'
|
||||
import { useRef, useState, useEffect } from 'react'
|
||||
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
|
||||
export default function SizeSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const [settingTarget, setSettingTarget] = useState(1)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const { id, pos = contextPopupPosition, target } = props
|
||||
const { getMessage } = useMessage()
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const { closePopup } = usePopup()
|
||||
const { reSizeObjectBatch } = useObjectBatch({})
|
||||
|
||||
const widthRef = useRef(null)
|
||||
const heightRef = useRef(null)
|
||||
|
||||
const { initEvent } = useEvent()
|
||||
|
||||
useEffect(() => {
|
||||
initEvent()
|
||||
}, [])
|
||||
|
||||
const handleReSizeObject = () => {
|
||||
const width = widthRef.current.value
|
||||
const height = heightRef.current.value
|
||||
|
||||
reSizeObjectBatch(settingTarget, target, width, height)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ssm`}>
|
||||
<div className={`modal-pop-wrap ssm mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">サイズ変更 </h1>
|
||||
<h1 className="title">{getMessage('modal.size.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
@ -30,11 +47,11 @@ export default function SizeSetting(props) {
|
||||
<div className="size-option-top">
|
||||
<div className="size-option-wrap">
|
||||
<div className="size-option mb5">
|
||||
<input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
|
||||
<input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
<div className="size-option">
|
||||
<input type="text" className="input-origin mr5" defaultValue={1000} />
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,11 +60,11 @@ export default function SizeSetting(props) {
|
||||
<div className="size-option-side">
|
||||
<div className="size-option-wrap">
|
||||
<div className="size-option mb5">
|
||||
<input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
|
||||
<input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
<div className="size-option">
|
||||
<input type="text" className="input-origin mr5" defaultValue={1000} />
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,7 +79,9 @@ export default function SizeSetting(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">作成</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleReSizeObject()}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +38,7 @@ const PentagonDormer = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ const PentagonDormer = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} />
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -38,7 +38,7 @@ const TriangleDormer = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '60px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
|
||||
export default function PanelBatchStatistics() {
|
||||
const { getMessage } = useMessage()
|
||||
const [isFold, setIsFold] = useState(false)
|
||||
const [pos, setPos] = useState({
|
||||
x: 0,
|
||||
y: 30,
|
||||
})
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
|
||||
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
|
||||
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
|
||||
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
|
||||
<div className="penal-table-wrap">
|
||||
<table className="penal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{getMessage('modal.panel.batch.statistic.roof.shape')}</th>
|
||||
<th>{getMessage('modal.panel.batch.statistic.power.generation.amount')} (kW)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{getMessage('modal.panel.batch.statistic.total')}</td>
|
||||
<td className="al-r">0.000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -8,6 +8,7 @@ import { useMessage } from '@/hooks/useMessage'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { basicSettingState } from '@/store/settingAtom'
|
||||
|
||||
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
|
||||
const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
|
||||
@ -16,22 +17,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const { closePopup } = usePopup()
|
||||
const [basicSetting, setBasicSettings] = useState({
|
||||
roofSizeSet: 1,
|
||||
roofAngleSet: 'slope',
|
||||
roofs: [
|
||||
{
|
||||
roofApply: true,
|
||||
roofSeq: 1,
|
||||
roofType: 1,
|
||||
roofWidth: 200,
|
||||
roofHeight: 200,
|
||||
roofHajebichi: 200,
|
||||
roofGap: 0,
|
||||
roofLayout: 'parallel',
|
||||
},
|
||||
],
|
||||
})
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
const [image, setImage] = useState(null)
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
@ -493,6 +480,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{getMessage('common.input.file')}</th>
|
||||
<td>
|
||||
<div className="flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.input.file.load')}
|
||||
</label>
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => setImage(e.target.files[0])} />
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
<input type="text" className="input-origin al-l" defaultValue={''} value={image ? image.name : ''} readOnly />
|
||||
{image && <button className="img-check" onClick={() => setImage(null)}></button>}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
|
||||
{lines?.map((line, index) => (
|
||||
<div className="eaves-keraba-item" id={index} key={index}>
|
||||
<div className="eaves-keraba-th">
|
||||
{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
|
||||
{/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
|
||||
{num[index]}
|
||||
</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
|
||||
@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
|
||||
<div className={`modal-pop-wrap l-2`}>
|
||||
<div className={`modal-pop-wrap lr-2`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="plane-shape-menu">
|
||||
{types.map((type) => (
|
||||
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
|
||||
<div className="shape-box">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
transform: getInversionState(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="shape-library">
|
||||
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
||||
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
||||
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
|
||||
</div>
|
||||
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={applySurfaces}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
<div className="plane-frame-wrap">
|
||||
<div className="plane-shape-wrap">
|
||||
<div className="plane-shape-menu">
|
||||
{types.map((type) => (
|
||||
<button
|
||||
key={type.id}
|
||||
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
|
||||
onClick={() => setSelectedType(type)}
|
||||
>
|
||||
<div className="shape-box">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
transform: getInversionState(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="shape-library">
|
||||
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
||||
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
||||
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plane-detail-wrap">
|
||||
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
||||
<div className="plane-shape-btn">
|
||||
<button className="btn-frame modal act" onClick={applySurfaces}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ml`}>
|
||||
<div className={`modal-pop-wrap ml mount`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
|
||||
@ -7,18 +7,21 @@ import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePass
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
|
||||
export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting(id)
|
||||
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
|
||||
useRoofShapePassivitySetting(id)
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
const eavesProps = {
|
||||
offsetRef,
|
||||
pitchRef,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
const gableProps = {
|
||||
offsetRef,
|
||||
pitchRef,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
const shedProps = {
|
||||
|
||||
@ -38,11 +38,14 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
buttonMenu,
|
||||
handleConfirm,
|
||||
handleRollBack,
|
||||
pitchText,
|
||||
shedPitch,
|
||||
setShedPitch,
|
||||
} = useRoofShapeSetting(id)
|
||||
const { closePopup } = usePopup()
|
||||
|
||||
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
|
||||
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
|
||||
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
|
||||
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
|
||||
const sideProps = {
|
||||
pitch,
|
||||
setPitch,
|
||||
@ -60,6 +63,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
setHipAndGableWidth,
|
||||
shedWidth,
|
||||
setShedWidth,
|
||||
shedPitch,
|
||||
setShedPitch,
|
||||
hasSleeve,
|
||||
setHasSleeve,
|
||||
buttonAct,
|
||||
@ -67,6 +72,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
buttonMenu,
|
||||
handleConfirm,
|
||||
handleRollBack,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
const directionProps = {
|
||||
@ -78,6 +84,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
setGableOffset,
|
||||
shedWidth,
|
||||
setShedWidth,
|
||||
pitchText,
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
|
||||
|
||||
export default function Eaves({ offsetRef, pitchRef }) {
|
||||
export default function Eaves({ offsetRef, pitchRef, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
||||
return (
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
@ -9,9 +12,9 @@ export default function Eaves({ offsetRef, pitchRef }) {
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
|
||||
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
|
||||
</div>
|
||||
<span className="thin">寸</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{ width: '63px' }}>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
|
||||
|
||||
export default function Gable({ offsetRef, pitchRef }) {
|
||||
export default function Gable({ offsetRef, pitchRef, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
||||
return (
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
@ -9,9 +12,9 @@ export default function Gable({ offsetRef, pitchRef }) {
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
|
||||
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
|
||||
</div>
|
||||
<span className="thin">寸</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{ width: '63px' }}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }) {
|
||||
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<div className="setting-box">
|
||||
@ -12,7 +12,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
|
||||
</div>
|
||||
<span className="thin">{getMessage('size')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{ width: '60px' }}>
|
||||
|
||||
@ -3,7 +3,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu
|
||||
|
||||
export default function Pattern(props) {
|
||||
const { getMessage } = useMessage()
|
||||
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset } = props
|
||||
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText } = props
|
||||
return (
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
@ -13,7 +13,7 @@ export default function Pattern(props) {
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
|
||||
</div>
|
||||
<span className="thin"> {getMessage('size')}</span>
|
||||
<span className="thin"> {pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{ width: '60px' }}>
|
||||
|
||||
@ -4,7 +4,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu
|
||||
|
||||
export default function Ridge(props) {
|
||||
const { getMessage } = useMessage()
|
||||
const { pitch, setPitch, eavesOffset, setEavesOffset } = props
|
||||
const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText } = props
|
||||
|
||||
return (
|
||||
<div className="setting-box">
|
||||
@ -15,7 +15,7 @@ export default function Ridge(props) {
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
|
||||
</div>
|
||||
<span className="thin">{getMessage('size')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: '24px' }}>
|
||||
|
||||
@ -32,14 +32,17 @@ export default function Side(props) {
|
||||
buttonMenu,
|
||||
handleConfirm,
|
||||
handleRollBack,
|
||||
pitchText,
|
||||
shedPitch,
|
||||
setShedPitch,
|
||||
} = props
|
||||
|
||||
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset }
|
||||
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
|
||||
const gableProps = { gableOffset, setGableOffset }
|
||||
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
|
||||
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }
|
||||
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }
|
||||
const shedProps = { shedWidth, setShedWidth }
|
||||
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
|
||||
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
|
||||
const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset }) {
|
||||
export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
@ -12,7 +12,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset })
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
|
||||
</div>
|
||||
<span className="thin">{getMessage('size')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: '24px' }}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }) {
|
||||
export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
@ -12,7 +12,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
|
||||
</div>
|
||||
<span className="thin">{getMessage('size')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{ width: '60px' }}>
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }) {
|
||||
export default function Jerkinhead({
|
||||
gableOffset,
|
||||
setGableOffset,
|
||||
jerkinHeadWidth,
|
||||
setJerkinHeadWidth,
|
||||
jerkinHeadPitch,
|
||||
setJerkinHeadPitch,
|
||||
pitchText,
|
||||
}) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
@ -35,7 +43,7 @@ export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidt
|
||||
onChange={(e) => onlyNumberWithDotInputChange(e, setJerkinHeadPitch)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">{getMessage('size')}</span>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { onlyNumberInputChange } from '@/util/input-utils'
|
||||
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||
|
||||
export default function Shed({ shedWidth, setShedWidth }) {
|
||||
export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" value={shedPitch} onChange={(e) => onlyNumberWithDotInputChange(e, setShedPitch)} />
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('shed.width')}</span>
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
|
||||
@ -1,211 +1,20 @@
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { 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 { useFirstOption } from '@/hooks/option/useFirstOption'
|
||||
import { setSurfaceShapePattern } from '@/util/canvas-util'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function FirstOption() {
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
|
||||
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
||||
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
||||
const { option3, option4 } = settingModalSecondOptions
|
||||
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
|
||||
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
const { swalFire } = useSwal()
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
|
||||
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('FirstOption 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) => {
|
||||
option.selected = !option.selected
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
||||
setSettingModalSecondOptions({ option3, option4 })
|
||||
|
||||
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].option1.map((item) => ({
|
||||
// name: item.id,
|
||||
// name: item.name,
|
||||
// // 필요한 경우 데이터 항목 추가
|
||||
// })),
|
||||
secondOption2: option4.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' })
|
||||
}
|
||||
}
|
||||
|
||||
const onClickOnlyOne = async (item) => {
|
||||
//화면 표시
|
||||
if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
|
||||
const options2 = settingModalFirstOptions?.option2.map((option2) => {
|
||||
option2.selected = option2.id === item.id
|
||||
return option2
|
||||
})
|
||||
|
||||
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
||||
|
||||
polygons.forEach((polygon) => {
|
||||
setSurfaceShapePattern(polygon, item.column)
|
||||
})
|
||||
|
||||
//치수 표시
|
||||
} else {
|
||||
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
||||
option.selected = option.id === item.id
|
||||
return option
|
||||
})
|
||||
}
|
||||
|
||||
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
||||
|
||||
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].option1.map((item) => ({
|
||||
// name: item.id,
|
||||
// name: item.name,
|
||||
// // 필요한 경우 데이터 항목 추가
|
||||
// })),
|
||||
secondOption2: option4.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' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-check-btn-wrap">
|
||||
@ -225,7 +34,7 @@ export default function FirstOption() {
|
||||
<div className="flex-check-box for-line">
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.dimensionDisplay.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
|
||||
@ -237,7 +46,7 @@ export default function FirstOption() {
|
||||
<div className="flex-check-box for-line">
|
||||
{settingModalFirstOptions &&
|
||||
settingModalFirstOptions.option2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user