T158 added option to add and remove headers as will

.idea/workspace.xml

@@ -21,8 +21,9 @@
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/com/release11/klaus/controller/MockController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/com/release11/klaus/controller/MockController.java" 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/java/com/release11/klaus/model/MockedMessageDto.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/com/release11/klaus/model/MockedMessageDto.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/datatransfer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/datatransfer.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>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -312,7 +313,7 @@
       <workItem from="1612279535476" duration="5692000" />
       <workItem from="1612442837870" duration="8318000" />
       <workItem from="1612609113694" duration="13936000" />
-      <workItem from="1612777983977" duration="7608000" />
+      <workItem from="1612777983977" duration="12996000" />
     </task>
     <task id="LOCAL-00077" summary="testing jenkins docker">
       <created>1601453886631</created>

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

@@ -221,4 +221,16 @@
 
 }
 
+.btn-function-table {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.btn-table-add {
+    color: green;
+}
+
+.btn-table-remove {
+    color: red;
+}
 

src/main/resources/static/js/datatransfer.js

@@ -1,4 +1,3 @@
-//TODO: Add sleep after PUT,POST,DELETE request. Data might not be processed before GET request
 //TODO: Add button to add new header
 //TODO: Update cookie when displayed message is changed
 //TODO: Add delete buttons for headers
@@ -6,6 +5,7 @@
 var clientUUID;
 var json;
 var jsonIndex = 0;
+var htable_row = 0;
 const C_UUID = 'mock-uuid';
 function getData(){
     // sleep(5000);
@@ -79,6 +79,7 @@ function addMessage(){
 
 function clearMock(){
     fillStaticFields('','','','');
+    htable_row = 0;
     $('#httpStatusValues').html('');
 }
 
@@ -128,18 +129,45 @@ function generateHeaderTable(headers){
     for(var val in headers){
         values[index++]=headers[val];
     }
+
     for(let i=0; i<count; i++){
         innerHTML+=
-            '<tr class="httpStatusValue">' +
+            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
                 '<td>' +
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + keys[i] + '"/></td>' +
+                    '<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + keys[i] + '"/></td>' +
                 '<td>' +
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField" value="' + values[i] + '"/></td>' +
+                    '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + values[i] + '"/></td>' +
+            '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
             '</tr>';
+        htable_row++;
     }
     return innerHTML;
 }
 
+function removeRow(row){
+    $('#hrow' + row).remove();
+}
+
+function addRow(){
+    var table = $('#httpStatusValues');
+    var hkey = $('#headerKeyInput');
+    var hval = $('#headerValueInput');
+    if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
+    var innerHtml =
+        '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
+        '<td>' +
+        '<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + hkey.val() +
+        '"/></td>' +
+        '<td>' +
+        '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +
+        '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
+        '</tr>';
+    htable_row++;
+    table.append(innerHtml);
+    hkey.val('');
+    hval.val('');
+}
+
 function fillMessageList(){
     $("#listItems").html('');
     var innerHTML = '';

src/main/resources/templates/mock.html

@@ -59,6 +59,7 @@
                                 <tr>
                                     <td class="tableHead">Header</td>
                                     <td class="tableHead">Value</td>
+                                    <td></td>
                                 </tr>
                             </thead>
                             <tbody id="httpStatusValues">
@@ -67,6 +68,7 @@
                                 <tr>
                                     <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
                                     <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
+                                    <td id="btn-addRow" onclick="addRow()" class="btn-function-table btn-table-add">+</td>
                                 </tr>
                             </tfoot>
 <!--                        <input type="text" name="headerValue" id="headerValue" class="headerField" placeholder="value"/>-->