From e723851628b15f7032e6406875cbde6853bb5b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=ED=98=95?=
 <147372294+blissyou@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:08:53 +0900
Subject: [PATCH] =?UTF-8?q?save=20=EC=97=94=EB=93=9C=ED=8F=AC=EC=9D=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/index.html | 265 +++++----------------------
 1 file changed, 46 insertions(+), 219 deletions(-)

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 1bd9a55..c6d227d 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -239,7 +239,6 @@
         <section id="page-ssid" class="page">
             <div class="card">
                 <h3>SSID List</h3>
-
                 <template id="ssid-template">
                     <div class="ssid-row">
                         <input class="ssid-name" placeholder="Name"/>
@@ -265,8 +264,8 @@
                     <input type="file" class="upload-input-device" accept=".json" style="display: none;">
                     <button class="select-file-btn-device">Load Local Device File</button>
                 </div>
-                <button id="saveDeviceBtn_ssid">Save to Device</button>
-                <button id="downloadDeviceBtn">Download Device File</button>
+                <button class="save-file">Save to Device</button>
+                <button class="download-device-file">Download Device File</button>
             </div>
         </section>
 
@@ -281,12 +280,12 @@
                     </div>
                 </div>
 
-                <div class="grid-3-col"><span>IP</span><input id="wifi_ip" placeholder="000.000.000.000"/></div>
-                <div class="grid-3-col"><span>SUBNET</span><input id="wifi_netmask" placeholder="255.255.255.0"/></div>
-                <div class="grid-3-col"><span>GATEWAY</span><input id="wifi_gateway" placeholder="000.000.000.001"/>
+                <div class="grid-3-col"><span>IP</span><input id="wifi_ip" /></div>
+                <div class="grid-3-col"><span>SUBNET</span><input id="wifi_netmask" /></div>
+                <div class="grid-3-col"><span>GATEWAY</span><input id="wifi_gateway" />
                 </div>
-                <div class="grid-3-col"><span>DNS #1</span><input id="wifi_dns1" placeholder="008.008.008.008"/></div>
-                <div class="grid-3-col"><span>DNS #2</span><input id="wifi_dns2" placeholder="008.008.004.004"/></div>
+                <div class="grid-3-col"><span>DNS #1</span><input id="wifi_dns1" /></div>
+                <div class="grid-3-col"><span>DNS #2</span><input id="wifi_dns2" /></div>
             </div>
 
             <div class="card">
@@ -313,8 +312,8 @@
                     <input type="file" class="upload-input-device" accept=".json" style="display: none;">
                     <button class="select-file-btn-device">Load Local Device File</button>
                 </div>
-                <button id="saveDeviceBtn_network">Save to Device</button>
-                <button id="downloadDeviceBtn">Download Device File</button>
+                <button class="save-file">Save to Device</button>
+                <button class="download-device-file">Download Device File</button>
             </div>
         </section>
 
@@ -332,10 +331,6 @@
                                     class="colon">:</span><input id="eth_netmask"></div>
                             <div class="io-row"><span class="label-inline">GATEWAY</span><span
                                     class="colon">:</span><input id="eth_gateway"></div>
-                            <div class="io-row"><span class="label-inline">SERVER IP</span><span
-                                    class="colon">:</span><input id="protocol_server_ip"></div>
-                            <div class="io-row"><span class="label-inline">SERVER PORT</span><span
-                                    class="colon">:</span><input id="protocol_server_port"></div>
                         </div>
                     </div>
 
@@ -450,8 +445,8 @@
                     <input type="file" class="upload-input-device" accept=".json" style="display: none;">
                     <button class="select-file-btn-device">Load Local Device File</button>
                 </div>
-                <button id="saveDeviceBtn_io">Save to Device</button>
-                <button id="downloadDeviceBtn">Download Device File</button>
+                <button class="save-file">Save to Device</button>
+                <button class="download-device-file">Download Device File</button>
             </div>
         </section>
 
@@ -588,8 +583,8 @@
                     <input type="file" class="upload-input-protocol" accept=".json" style="display: none;">
                     <button class="select-file-btn-protocol">Load Local Protocol File</button>
                 </div>
-                    <button id="saveProtocolBtn">Save to Protocol</button>
-                    <button id="downloadProtocolBtn">Download Device File</button>
+                    <button class="save-file">Save to Protocol</button>
+                    <button class="download-protocol-file">Download Device File</button>
             </div>
         </section>
 
@@ -677,8 +672,8 @@
                     <input type="file" class="upload-input-protocol" accept=".json" style="display: none;">
                     <button class="select-file-btn-protocol">Load Local Protocol File</button>
                 </div>
-                <button id="saveModbusBtn">Save Protocol File</button>
-                <button id="downloadProtocolBtn">Download Device File</button>
+                <button class="save-file">Save Protocol File</button>
+                <button class="download-protocol-file">Download Device File</button>
             </div>
 
         </section>
@@ -759,8 +754,8 @@
                 <input type="file" class="upload-input-protocol" accept=".json" style="display: none;">
                     <button class="select-file-btn-protocol">Load Local Protocol File</button>
                 </div>
-                <button id="saveOpcUaFileBtn">Save to Protocol</button>
-                <button id="downloadProtocolBtn">Download Device File</button>
+                <button class="save-file">Save to Protocol</button>
+                <button class="download-protocol-file">Download Device File</button>
             </div>
 
         </section>
@@ -834,8 +829,8 @@
                 <input type="file" class="upload-input-protocol" accept=".json" style="display: none;">
                     <button class="select-file-btn-protocol">Load Local Protocol File</button>
                 </div>
-                <button id="saveCanBtn">Save Protocol File</button>
-                <button id="downloadProtocolBtn">Download Device File</button>
+                <button class="save-file">Save Protocol File</button>
+                <button class="download-protocol-file">Download Device File</button>
             </div>
 
         </section>
@@ -1010,14 +1005,7 @@
         }
     }
 
-    /* (A) 고정 data 객체 그대로 저장 */
-    document.getElementById('downloadDeviceBtn')?.addEventListener('click', () => {
-        downloadDeviceJson(collectData(data));
-    });
 
-    document.getElementById('downloadProtocolBtn')?.addEventListener('click', () => {
-        downloadProtocolJson(collectConfigData(configData));
-    })
 
     function showPage(pageName) {
         Object.values(pages).forEach(p => p.style.display = 'none');
@@ -1068,7 +1056,7 @@
     document.getElementById('delete-ssid').addEventListener('click', () => {
         if (ssidList.children.length > 1) {
             ssidList.removeChild(ssidList.lastElementChild);
-        } else if (ssidList.children.length == 1) {
+        } else if (ssidList.children.length === 1) {
             const firstRow = ssidList.firstElementChild;
             firstRow.querySelector('.ssid-name').value = '';
             firstRow.querySelector('.ssid-pw').value = '';
@@ -2066,192 +2054,48 @@
             toggleProtocolMenus();
         }
 
-        document.querySelectorAll('.js-save').forEach(btn=>btn.addEventListener('click', () => {saveToConfig()}))
-        document.getElementById('loadDeviceBtn_ssid')?.addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/get-device')
-                .then(res => {
-                    if (!res.ok) {
-                        console.error(`HTTP error! status: ${res.status}`);
-                        throw new Error('Device file not found or server error');
-                    }
-                    return res.json();
-                })
-                .then(({body}) => {
-                    loadFromData(body);
-                    alert('Device 설정 파일 로드 완료');
-                })
-                .catch(error => {
-                    console.error('Device 설정 파일 로드 중 오류 발생:', error);
-                    alert('Device 설정 파일 로드 실패! 기본값으로 시작합니다.');
-                    loadFromData(data); // 오류 발생 시 data의 초기값으로 UI 초기화
-                });
-        });
-
-        document.getElementById('loadDeviceBtn_network')?.addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/get-device')
-                .then(res => {
-                    if (!res.ok) {
-                        console.error(`HTTP error! status: ${res.status}`);
-                        throw new Error('Device file not found or server error');
-                    }
-                    return res.json();
-                })
-                .then(({body}) => {
-                    loadFromData(body);
-                    alert('Device 설정 파일 로드 완료');
-                })
-                .catch(error => {
-                    console.error('Device 설정 파일 로드 중 오류 발생:', error);
-                    alert('Device 설정 파일 로드 실패! 기본값으로 시작합니다.');
-                    loadFromData(data); // 오류 발생 시 data의 초기값으로 UI 초기화
-                });
-        });
-
-        document.getElementById('loadDeviceBtn_io')?.addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/get-device')
-                .then(res => {
-                    if (!res.ok) {
-                        console.error(`HTTP error! status: ${res.status}`);
-                        throw new Error('Device file not found or server error');
-                    }
-                    return res.json();
-                })
-                .then(deviceJsonData => {
-                    loadFromData(deviceJsonData);
-                    alert('Device 설정 파일 로드 완료');
-                })
-                .catch(error => {
-                    console.error('Device 설정 파일 로드 중 오류 발생:', error);
-                    alert('Device 설정 파일 로드 실패! 기본값으로 시작합니다.');
-                    loadFromData(data); // 오류 발생 시 data의 초기값으로 UI 초기화
-                });
-        });
-
-
-        document.getElementById('saveDeviceBtn_ssid').addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/device', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(collectData())
-            })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Device config successfully');
-                    } else {
-                        alert('Device config failed: ' + res.statusText);
-                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
-                    }
-                })
-                .catch(error => {
-                    console.error('Device config failed::', error); // 네트워크 오류 로깅
-                    alert('Device config failed:');
-                });
-        });
-
-        document.getElementById('saveDeviceBtn_network').addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/device', {
+        function saveToConfig() {
+            fetch('http://localhost:8080/setting/device',{
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(collectData())
-            })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Device config successfully');
-                    } else {
-                        alert('Device config failed: ' + res.statusText);
-                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
-                    }
-                })
-                .catch(error => {
-                    console.error('Device config failed::', error); // 네트워크 오류 로깅
-                    alert('Device config failed:');
-                });
-        });
-
-        document.getElementById('saveDeviceBtn_io').addEventListener('click', () => {
-            fetch('http://localhost:8080/setting/device', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(collectData())
-            })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Device config successfully');
-                    } else {
-                        alert('Device config failed: ' + res.statusText);
-                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
-                    }
-                })
-                .catch(error => {
-                    console.error('Device config failed::', error); // 네트워크 오류 로깅
-                    alert('Device config failed:');
-                });
-        });
-
+            }).then(res => {
+                if(!res.ok) {
+                    alert('전송 실패')
+                }
+            }).catch(()=>{
+                alert('device 설정 전송 중 통신 오류 발생');
+            });
 
-        document.getElementById('saveProtocolBtn').addEventListener('click', () => {
-            console.log('버튼 클릭 됨');
-            console.log(collectConfigData());
             fetch('http://localhost:8080/setting/protocol', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(collectConfigData())
-            })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Register 설정 전송 완료');
-                    } else {
+            }).then(res => {
+                    if (!res.ok) {
                         alert('Register 설정 전송 실패: ' + res.statusText);
-                        console.error('Register 설정 전송 실패:', res); // 응답 객체 자체를 로깅
                     }
                 })
                 .catch(error => {
                     console.error('Register 설정 전송 중 오류 발생:', error); // 네트워크 오류 로깅
                     alert('Register 설정 전송 중 통신 오류 발생');
-                });
-        });
-
-        document.getElementById('saveModbusBtn').addEventListener('click', () => {
-            console.log('버튼 클릭 됨');
-            fetch('http://localhost:8080/setting/protocol', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(collectConfigData())
+                }).finally(()=>{
+                    alert('저장 완료');
             })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Register 설정 전송 완료');
-                    } else {
-                        alert('Register 설정 전송 실패: ' + res.statusText);
-                        console.error('Register 설정 전송 실패:', res); // 응답 객체 자체를 로깅
-                    }
-                })
-                .catch(error => {
-                    console.error('Register 설정 전송 중 오류 발생:', error); // 네트워크 오류 로깅
-                    alert('Register 설정 전송 중 통신 오류 발생');
-                });
-        });
+        }
+
+
+        document.querySelectorAll('.save-file').forEach(btn=>btn.addEventListener('click', () => {saveToConfig()}))
+
+
+        document.querySelectorAll('.download-device-file').forEach(btn=>{btn.addEventListener('click', () => {
+            downloadDeviceJson(collectData(data));
+        })})
+
+        document.querySelectorAll('.download-protocol-file').forEach(btn=>{btn.addEventListener('click', () => {
+            downloadProtocolJson(collectData(data));
+        })})
 
-        document.getElementById('saveOpcUaFileBtn').addEventListener('click', () => {
-            console.log('버튼 클릭 됨');
-            fetch('http://localhost:8080/setting/protocol', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(collectConfigData())
-            })
-                .then(res => {
-                    if (res.ok) {
-                        alert('Register 설정 전송 완료');
-                    } else {
-                        alert('Register 설정 전송 실패: ' + res.statusText);
-                        console.error('Register 설정 전송 실패:', res); // 응답 객체 자체를 로깅
-                    }
-                })
-                .catch(error => {
-                    console.error('Register 설정 전송 중 오류 발생:', error); // 네트워크 오류 로깅
-                    alert('Register 설정 전송 중 통신 오류 발생');
-                });
-        });
 
         document.getElementById('reg_can_input')?.addEventListener('change', toggleProtocolMenus);//--------------------------------
 
@@ -2280,23 +2124,6 @@
             document.getElementById('can_mask_input').value = tr.querySelector('.can-mask-display').textContent;
         });
     });
-
-    document.getElementById('saveCanBtn').addEventListener('click', () => {
-        fetch('http://localhost:8080/setting/protocol', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(collectConfigData())
-        })
-            .then(res => {
-                if (res.ok) {
-                    alert('Register 설정 전송 완료');
-                } else {
-                    alert('Register 설정 전송 실패: ' + res.statusText);
-                }
-            });
-    });
-
-
 </script>
 </body>
 </html>
\ No newline at end of file