Header table is generated

src/main/resources/static/html/mock.html

@@ -89,7 +89,7 @@
                                             <th></th>
                                         </tr>
                                     </thead>
-                                    <tbody>
+                                    <tbody id="headerMapTable">
                                         <tr>
                                             <td><input class="key" value="basic value"></td>
                                             <td><input value="basic value"></td>

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

@@ -1,7 +1,6 @@
 //TODO: Add delete buttons for messages
-//TODO: Save button deactivation after swap, post or delete
+// TODO: Add function to add row
-//TODO: It sends request, gets responds but doesnt run a function!!
+// TODO: Add remove closest tr function to header rows
-//TODO: Warning is displayed twice
 var clientUUID = '';
 var advancedDisplayed = false;
 var json = {};
@@ -10,11 +9,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -33,9 +30,8 @@ const dataRefresh = function(){
     getData();
 }
 $('#btn-newtile').click(function(){callAddMessage()});
-$('#btn-addRow').click(function(){addRow()});
+// $('#btn-addRow').click(function(){addRow()});
-//TODO remove later save onclick init
+// $('#btn-save').click(getUpdate);
-$('#btn-save').click(getUpdate);
 
 function getData(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -229,68 +225,36 @@ function createLink(uuid, id){
 }
 
 function fillHeaderTable(headers){
-    var innerHTML = $('#httpStatusValues').html();
+    var innerHTML = buildHeaderMapHtml(headers);
-    innerHTML += generateHeaderTable(headers);
+    $('#headerMapTable').html(innerHTML);
-    $('#httpStatusValues').html(innerHTML);
     $('.tableField').change(function(){setDataModified()});
 }
-//TODO: Add addRow() to generate new rows and populate them with data
-function generateHeaderTable(headers){
-    let count = 0;
-    let innerHTML = '';
-    for(var item in headers){
-        if( headers.hasOwnProperty(item) ) count++;
-    }
-    var keys = new Array(count);
-    var values = new Array(count);
-    let index = 0;
-    for(var key in Object.keys(headers)){
-        keys[index++]=Object.keys(headers)[key];
-    }
-    index = 0;
-    for(var val in headers){
-        values[index++]=headers[val];
-    }
 
-    for(let i=0; i<count; i++){
+function buildHeaderMapHtml(headers){
-        innerHTML+=
+    var innerHTML = '';
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
+    for(var key in headers){
-                '<td>' +
+        innerHTML += buildRowHtml(key, headers[key]);
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
-                '<td>' +
-                    '<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
-            '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">&times;</td>' +
-            '</tr>';
-        htable_row++;
     }
     return innerHTML;
 }
 
-function removeRow(row){
+// TODO: Add this click remove closest tr
-    $('#hrow' + row).remove();
+
-    setDataModified();
+
+function addRow(key, value){
+    var headerMap = $('#headerMapTable');
+    var headersMapHtml = headerMap.html();
+    headersMapHtml += buildRowHtml(key, value);
+    headerMap.html(headersMapHtml);
 }
 
-//TODO: Change html for new html structure
+function buildRowHtml(key, value){
-function addRow(){
+    return '' + 
-    var table = $('#httpStatusValues');
+    '<tr>' +
-    var hkey = $('#headerKeyInput');
+        '<td><input class="key" value="' + key + '"></td>' +
-    var hval = $('#headerValueInput');
+        '<td><input value="' + value + '"></td>' +
-    if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
+        '<td><button class="modification-button btn-add"><i class="icon-plus"></i></button></td>' +
-    var innerHtml =
+    '</tr>';
-        '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" 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('');
-    setDataModified();
 }
 
 
@@ -305,7 +269,6 @@ function fillMessageList(){
         console.log(this);
         loadMessage(parseInt($(this).attr('tileid')));
     });
-    // $('.btn-tile').click(tileRemoval);
 }
 
 
@@ -364,7 +327,6 @@ function selectMessage(id){
 
 
 
-// TODO: Modify html for tiles
 function generateMessageTileHtml(id, httpStatus, mediaType){
     var innerHTML = '' +
     '<div tileid="' + id + '" class="tile">' +

target/classes/static/html/mock.html

@@ -89,7 +89,7 @@
                                             <th></th>
                                         </tr>
                                     </thead>
-                                    <tbody>
+                                    <tbody id="headerMapTable">
                                         <tr>
                                             <td><input class="key" value="basic value"></td>
                                             <td><input value="basic value"></td>

target/classes/static/js/datatransfer.js

@@ -1,7 +1,6 @@
 //TODO: Add delete buttons for messages
-//TODO: Save button deactivation after swap, post or delete
+// TODO: Add function to add row
-//TODO: It sends request, gets responds but doesnt run a function!!
+// TODO: Add remove closest tr function to header rows
-//TODO: Warning is displayed twice
 var clientUUID = '';
 var advancedDisplayed = false;
 var json = {};
@@ -10,11 +9,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -33,9 +30,8 @@ const dataRefresh = function(){
     getData();
 }
 $('#btn-newtile').click(function(){callAddMessage()});
-$('#btn-addRow').click(function(){addRow()});
+// $('#btn-addRow').click(function(){addRow()});
-//TODO remove later save onclick init
+// $('#btn-save').click(getUpdate);
-$('#btn-save').click(getUpdate);
 
 function getData(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -229,68 +225,36 @@ function createLink(uuid, id){
 }
 
 function fillHeaderTable(headers){
-    var innerHTML = $('#httpStatusValues').html();
+    var innerHTML = buildHeaderMapHtml(headers);
-    innerHTML += generateHeaderTable(headers);
+    $('#headerMapTable').html(innerHTML);
-    $('#httpStatusValues').html(innerHTML);
     $('.tableField').change(function(){setDataModified()});
 }
-//TODO: Add addRow() to generate new rows and populate them with data
-function generateHeaderTable(headers){
-    let count = 0;
-    let innerHTML = '';
-    for(var item in headers){
-        if( headers.hasOwnProperty(item) ) count++;
-    }
-    var keys = new Array(count);
-    var values = new Array(count);
-    let index = 0;
-    for(var key in Object.keys(headers)){
-        keys[index++]=Object.keys(headers)[key];
-    }
-    index = 0;
-    for(var val in headers){
-        values[index++]=headers[val];
-    }
 
-    for(let i=0; i<count; i++){
+function buildHeaderMapHtml(headers){
-        innerHTML+=
+    var innerHTML = '';
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
+    for(var key in headers){
-                '<td>' +
+        innerHTML += buildRowHtml(key, headers[key]);
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
-                '<td>' +
-                    '<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
-            '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">&times;</td>' +
-            '</tr>';
-        htable_row++;
     }
     return innerHTML;
 }
 
-function removeRow(row){
+// TODO: Add this click remove closest tr
-    $('#hrow' + row).remove();
+
-    setDataModified();
+
+function addRow(key, value){
+    var headerMap = $('#headerMapTable');
+    var headersMapHtml = headerMap.html();
+    headersMapHtml += buildRowHtml(key, value);
+    headerMap.html(headersMapHtml);
 }
 
-//TODO: Change html for new html structure
+function buildRowHtml(key, value){
-function addRow(){
+    return '' + 
-    var table = $('#httpStatusValues');
+    '<tr>' +
-    var hkey = $('#headerKeyInput');
+        '<td><input class="key" value="' + key + '"></td>' +
-    var hval = $('#headerValueInput');
+        '<td><input value="' + value + '"></td>' +
-    if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
+        '<td><button class="modification-button btn-add"><i class="icon-plus"></i></button></td>' +
-    var innerHtml =
+    '</tr>';
-        '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" 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('');
-    setDataModified();
 }
 
 
@@ -305,7 +269,6 @@ function fillMessageList(){
         console.log(this);
         loadMessage(parseInt($(this).attr('tileid')));
     });
-    // $('.btn-tile').click(tileRemoval);
 }
 
 
@@ -364,7 +327,6 @@ function selectMessage(id){
 
 
 
-// TODO: Modify html for tiles
 function generateMessageTileHtml(id, httpStatus, mediaType){
     var innerHTML = '' +
     '<div tileid="' + id + '" class="tile">' +