Added thymeleaf related buttons.

.idea/workspace.xml

@@ -20,7 +20,12 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-cancel-64.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-down-arrow-40.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/icons8-plus-48.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/main/resources/static/img/update-button.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/resources/static/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/main.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" />
     </list>
@@ -76,7 +81,7 @@
     <property name="aspect.path.notification.shown" value="true" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrary" value="JUnit5" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrarySuperClass.JUnit5" value="" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/main/resources/static/Dependency" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/main/resources/static" />
     <property name="restartRequiresConfirmation" value="false" />
     <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
   </component>
@@ -100,8 +105,8 @@
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\css" />
     </key>
     <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\Dependency" />
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static" />
+      <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\Dependency" />
       <recent name="C:\Users\Gabriel Modzelewski\.phabricator\mockedservices\src\main\resources\static\dependency" />
       <recent name="D:\phabricator\mockedservices-master\src" />
       <recent name="D:\phabricator\mockedservices-master\src\main\resources" />
@@ -301,7 +306,7 @@
       <workItem from="1610986449789" duration="3336000" />
       <workItem from="1611052879244" duration="4081000" />
       <workItem from="1611059169455" duration="5146000" />
-      <workItem from="1611126794919" duration="8797000" />
+      <workItem from="1611126794919" duration="19071000" />
     </task>
     <task id="LOCAL-00077" summary="testing jenkins docker">
       <created>1601453886631</created>

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" class="headerField" th:field="*{httpHeaders[__${entry.key}__]}"/>
-                                    <input type="text" name="value"
-                                           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>