show modal

template/app_view.html

@@ -39,11 +39,11 @@
         {{ range $i, $v := .Apps }}
         <tr id="app-list-{{ $v.Id }}">
             <td> {{ inc $i }}</td>
-            <td> {{ $v.AppName }}</td>
-            <td> {{ $v.Comment }}</td>
-            <td> {{ $v.Image }}</td>
-            <td> {{ $v.Command }}</td>
-            <td> {{ $v.Env }}</td>
+            <td class="app-field-name"> {{ $v.AppName }}</td>
+            <td class="app-field-comment"> {{ $v.Comment }}</td>
+            <td class="app-field-image"> {{ $v.Image }}</td>
+            <td class="app-field-cmd"> {{ $v.Command }}</td>
+            <td class="app-field-env"> {{ $v.Env }}</td>
             <td>
                 <div class="btn-group">
                     <button class="btn btn-primary" onclick="showModal('app-list-{{ $v.Id }}')">修改</button>
@@ -83,17 +83,17 @@
                     </div>
 
                     <div class="row">
-                        <label for="app-cmd" class="form-label">镜像</label>
+                        <label for="app-cmd" class="form-label">启动命令</label>
                         <input type="text" id="app-cmd" class="form-control" placeholder="启动命令，可选" />
                     </div>
 
                     <div class="row">
-                        <label for="app-env" class="form-label">镜像</label>
+                        <label for="app-env" class="form-label">环境变量</label>
                         <input type="text" id="app-env" class="form-control" placeholder="环境变量，可选" />
                     </div>
 
                     <div class="row">
-                        <label for="app-comment" class="form-label">镜像</label>
+                        <label for="app-comment" class="form-label">描述</label>
                         <textarea type="text" id="app-comment" class="form-control" placeholder="应用描述"></textarea>
                     </div>
 
@@ -109,10 +109,42 @@
 </body>
 
 <script>
-    function showModal(id) {
-        const modal = new bootstrap.Modal("#edit-modal")
-        console.log(modal)
-        modal.show()
+    function updateModalField(classString, value) {
+        const classArray = classString.split(' ')
+        for (let c of classArray) {
+            if (c.startsWith("app-field-")) {
+                const k = c.replace("app-field-", "app-")
+                const ele = document.getElementById(k)
+                if (!ele) {
+                    console.log("Cannot fine element ", k)
+                } else {
+                    ele.value = value
+                }
+                return
+            }
+        }
     }
+
+    function clearModalField() {
+        const id_list = ["app-name", "app-image", "app-cmd", "app-env", "app-comment"]
+        for (const k of id_list) {
+            document.getElementById(k).value = ""
+        }
+    }
+
+    function showModal(id) {
+        if (id) {
+            const list_tr = document.getElementById(id)
+            const values = list_tr.children
+            for (let a of values) {
+                updateModalField(a.className, a.innerHTML.trim())
+            }
+        } else {
+            clearModalField()
+        }
+
+        (new bootstrap.Modal("#edit-modal")).show()
+    }
+    
 </script>
 </html>