Added thymeleaf related buttons.

src/main/resources/static/css/main.css

@@ -189,3 +189,23 @@
     margin-bottom: 20px;
 }
 
+.headerName {
+    height: 20px;
+    padding: 5px;
+    width: 240px;
+    font-size: 18px;
+    background: #f0f0f0;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+}
+
+.headerField {
+    height: 20px;
+    padding: 5px;
+    width: 240px;
+    font-size: 18px;
+    background: white;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+}
+

src/main/resources/static/js/uianimation.js

@@ -27,3 +27,24 @@ function createMessageTab() {
 
 $("#optional").click(changeAdvancedVisibility);
 $(".menuFactory").click(createMessageTab);
+
+// var key = $("#headerKey");
+// var value = $("#headerValue");
+// function addHeaderTableRow(){
+//     var headerTable = document.getElementById("headerTable");
+//     headerTable.innerHTML +=
+//         '<tr>' +
+//             '<td>' +
+//                 '<input type="text" name="value" class="headerName" value="' + key.val() + '"\n disabled="disabled"/>' +
+//             '</td>' +
+//             '<td>' +
+//                 '<input type="text" name="httpHeaders[' + key.val() + ']" class="headerField" id="httpHeaders' + key.val() + '" value="' + value.val() +'"/>' +
+//             '</td>' +
+//         '</tr>';
+//     key.html("");
+//     value.html("");
+//     // alert("key: " + key.val() +
+//     // "\n" + "value: " + value.val());
+// }
+
+// key.keypress(function(e){ if(e.key == 'Enter') addHeaderTableRow()});

src/main/resources/templates/mock.html

@@ -60,18 +60,27 @@
                                 <td>Value</td>
                             </tr>
                             <tr th:each="entry, stats : *{httpHeaders}">
-                                <td><input type="text" name="value" th:value="${entry.key}"
+                                <td><input type="text" name="value" class="headerName" th:value="${entry.key}"
                                                              disabled="disabled"/></td>
                                 <td>
-                                    &#9;
-                                    <input type="text" name="value"
-                                           th:field="*{httpHeaders[__${entry.key}__]}"/>
+                                    <input type="text" name="value" class="headerField" th:field="*{httpHeaders[__${entry.key}__]}"/>
                                     <button type="submit" name="removeHeader" th:value="${entry.key}">
                                         <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
                                     </button>
                                 </td>
                             </tr>
                         </table>
+                        <table id="nextHeaderTable">
+                            <tr>
+                                <td>
+                                    <input type="text" name="headerKey" id="headerKey" class="headerField" placeholder="next header"/>
+                                </td>
+                                <td>
+                                    <input type="text" name="headerValue" id="headerValue" class="headerField" placeholder="value"/>
+                                    <input type="image" name="addHeader" src="/img/icons8-plus-48.png" style="width: 20px;"/>
+                                </td>
+                            </tr>
+                        </table>
                     </div>
                     <div id="history" style="display:none;"></div>
                 </div>