save ui 수정

src/main/resources/static/index.html

@@ -143,7 +143,7 @@
         .reg-io-grid .io-fieldset .io-row input,
         .reg-io-grid .io-fieldset .io-row select {padding: 4px 6px;border: 1px solid #aaa;border-radius: 4px;font-size: 14px;width: 100%;box-sizing: border-box;}
         .reg-io-grid .io-fieldset .io-row.checkbox-group {display: flex;align-items: center;gap: 16px;grid-column: 2 / 3;}
-        .reg-io-grid .io-fieldset .io-row .checkbox-with-text {display: flex;align-items: center;gap: 10px;width: 10%;}
+        .reg-io-grid .io-fieldset .io-row .checkbox-with-text {display: flex;align-items: center;gap: 10px;width: 100%;}
         .reg-io-grid .io-fieldset .io-row .checkbox-with-text input[type="checkbox"] {width: auto;margin: 0;}
 
         /* 비활성 input 시각화 */
@@ -153,7 +153,27 @@
         .actions button {min-width: 140px;padding: 10px 18px;font-size: 16px;border: 1px solid #bbb;background: #d9d9d9;border-radius: 4px;cursor: pointer}
         .config-actions{display: flex;gap: 24px;justify-content: center;background: #f7f7f7;border: 1px solid #bbb;border-radius: 4px;margin: 24px 0 0 0;padding: 20px 0;}
         .config-actions button{min-width:140px;padding:10px 18px;font-size:16px;border:1px solid #bbb;background:#d9d9d9;border-radius:4px;cursor:pointer}
+        .topbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 32px;
+            height: 68px;
+            background: #d9d9d9;
+            font-size: 28px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .15) inset;
+        }
 
+        .save-file {
+            font-size: 16px;
+            padding: 8px 16px;
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
         /* MODBUS 화면 심플 스타일 */
         #page-modbus .card {background: #f7f7f7;border: 1px solid #bbb;box-shadow: none;padding: 24px;border-radius: 4px;display: flex;flex-direction: column;}
         #page-modbus table {width: 100%;border-collapse: collapse;background: #fff;border: 1px solid #bbb;}
@@ -232,14 +252,16 @@
 
 <!-- ───── Content ───── -->
 <div class="content">
-    <header class="topbar" id="page-title">SSID</header>
+    <header class="topbar">
+        <span id="page-title">SSID</span>
+        <button class="save-file">Save</button>
+    </header>
     <main class="board">
 
         <!-- ▽ SSID PAGE ▽ -->
         <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"/>
@@ -332,10 +354,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>
 
@@ -362,12 +380,14 @@
                         <div class="io-fieldset">
                             <div class="io-row"><span class="label-inline">Mode</span><span class="colon">:</span>
                                 <select id="rs485_mode">
+                                    <option value="">NONE</option>
                                     <option value="half">half</option>
                                     <option value="full">full</option>
                                 </select>
                             </div>
                             <div class="io-row"><span class="label-inline">Speed</span><span
                                     class="colon">:</span><select id="rs485_baudrate">
+                                <option value="">NONE</option>
                                 <option value="9600">9600</option>
                                 <option value="115200">115200</option>
                             </select></div>
@@ -385,31 +405,28 @@
                     </div>
                     <!-- CAN -->
                     <div class="io-group">
-                        <h4>CAN</h4>
+                        <h4>CAN / IMU Re-map</h4>
                         <div class="io-fieldset">
-                            <div class="io-row"><span class="label-inline">Type</span><span class="colon">:</span>
+                            <div class="io-row"><span class="label-inline">Can Type</span><span class="colon">:</span>
                                 <select id="can_bus_type">
+                                    <option value="">NONE</option>
                                     <option value="extended">extended</option>
                                     <option value="standard">standard</option>
                                 </select>
                             </div>
 
-                            <div class="io-row"><span class="label-inline">Speed</span><span class="colon">:</span>
+                            <div class="io-row"><span class="label-inline">Can Speed</span><span class="colon">:</span>
                                 <select id="can_baudrate">
+                                    <option value="">NONE</option>
                                     <option value="1000">100kb/s</option>
                                     <option value="2500">250kb/s</option>
                                     <option value="5000">500kb/s</option>
                                     <option value="10000">1M/s</option>
                                 </select>
-
                             </div>
-                        </div>
+                            <div class="io-row"><span class="label-inline">imu re-map x</span><span class="colon">:</span>
-                        <!-- IMU -->
-                        <div class="io-group">
-                            <h4>IMU Re-map</h4>
-                            <div class="io-fieldset">
-                                <div class="io-row"><span class="label-inline">X</span><span class="colon">:</span>
                                     <select id="imu_remap_x">
+                                        <option value="">NONE</option>
                                         <option value="x">x</option>
                                         <option value="y">y</option>
                                         <option value="z">z</option>
@@ -418,8 +435,9 @@
                                         <option value="-z">-z</option>
                                     </select>
                                 </div>
-                                <div class="io-row"><span class="label-inline">Y</span><span
+                                <div class="io-row"><span class="label-inline">imu re-map y</span><span
                                         class="colon">:</span><select id="imu_remap_y">
+                                    <option value="">NONE</option>
                                     <option value="x">x</option>
                                     <option value="y">y</option>
                                     <option value="z">z</option>
@@ -427,8 +445,9 @@
                                     <option value="-y">-y</option>
                                     <option value="-z">-z</option>
                                 </select></div>
-                                <div class="io-row"><span class="label-inline">Z</span><span
+                                <div class="io-row"><span class="label-inline">imu re-map z</span><span
                                         class="colon">:</span><select id="imu_remap_z">
+                                    <option value="">NONE</option>
                                     <option value="x">x</option>
                                     <option value="y">y</option>
                                     <option value="z">z</option>
@@ -440,7 +459,6 @@
                         </div>
                     </div>
                 </div>
-            </div>
             <div class="actions">
                 <div class="file-upload-wrapper-device"
                      data-file-type="device"
@@ -450,7 +468,6 @@
                     <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 class="save-file">Save to Device</button>
                 <button class="download-device-file">Download Device File</button>
             </div>
         </section>
@@ -600,10 +617,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 class="save-file">Save to Protocol</button>
                     <button class="download-protocol-file">Download Device File</button>
             </div>
-
         </section>
 
         <template id="modbus-row-template">
@@ -690,7 +705,6 @@
                     <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 class="save-file">Save Protocol File</button>
                 <button class="download-protocol-file">Download Device File</button>
             </div>
 
@@ -772,7 +786,6 @@
                 <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 class="save-file">Save to Protocol</button>
                 <button class="download-protocol-file">Download Device File</button>
             </div>
 
@@ -847,7 +860,6 @@
                 <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 class="save-file">Save Protocol File</button>
                 <button class="download-protocol-file">Download Device File</button>
             </div>
 
@@ -894,37 +906,6 @@
         WIFI_SSID: [{wifi_ssid: '', wifi_password: '', wifi_security: 'none'}],
     };
 
-    const configData = {
-        analog_input_level: '',
-        ai0: 0,
-        ai1: 0,
-        ai2: 0,
-        ai3: 0,
-        di0: 0,
-        di1: 0,
-        di2: 0,
-        di3: 0,
-        can_input: '',
-        device_type: '',
-        dr_on: '',
-        equipment: '',
-        two_byte: '',
-        four_byte: '',
-        input_data_type: '',
-        output_data_type: '',
-        protocol: '',
-        speed_data_source: '',
-        version: '',
-        equipment_id: '',
-        meid: '',
-        heading_on: '',
-        heading_imu_on: '',
-        fixmode_on: '',
-        MODBUS: [],
-        OPC_UA: [],
-        CAN: []
-    };
-
     const configIdMap = {
         'reg_analog_input_level': 'analog_input_level',
         'ai0': 'ai0',
@@ -963,6 +944,7 @@
         opcua: document.getElementById('page-opcua'),
         can: document.getElementById('page-can')
     };
+
     const titleEl = document.getElementById('page-title');
 
     function downloadDeviceJson(obj, filename = 'deviceConfig.json') {
@@ -974,9 +956,9 @@
         a.href = url;
         a.download = filename;
         document.body.appendChild(a);
-        a.click();                        // 가짜 클릭 → 다운로드 시작
+        a.click();
         document.body.removeChild(a);
-        URL.revokeObjectURL(url);         // 메모리 해제
+        URL.revokeObjectURL(url);
     }
     function downloadProtocolJson(obj, filename = 'protocolConfig.json') {
         const json = JSON.stringify(obj, null, 2);        // 보기 좋게 들여쓰기 2칸
@@ -2104,9 +2086,8 @@
                 .catch(error => {
                     console.error('Register 설정 전송 중 오류 발생:', error); // 네트워크 오류 로깅
                     alert('Register 설정 전송 중 통신 오류 발생');
-                }).finally(()=>{
+                })
-                    alert('저장 완료');
+
-            })
         }