Header table is generated

2021-04-14 16:44:07 +02:00
parent fb1c08fd5d
commit 161b921a3a
4 changed files with 52 additions and 128 deletions
--- a/src/main/resources/static/html/mock.html
+++ b/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>
--- a/src/main/resources/static/js/datatransfer.js
+++ b/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: It sends request, gets responds but doesnt run a function!!
-//TODO: Warning is displayed twice
+// TODO: Add function to add row
+// TODO: Add remove closest tr function to header rows
 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()});
-//TODO remove later save onclick init
-$('#btn-save').click(getUpdate);
+// $('#btn-addRow').click(function(){addRow()});
+// $('#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();
-    innerHTML += generateHeaderTable(headers);
-    $('#httpStatusValues').html(innerHTML);
+    var innerHTML = buildHeaderMapHtml(headers);
+    $('#headerMapTable').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++){
-        innerHTML+=
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-                '<td>' +
-                    '<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++;
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
    }
    return innerHTML;
 }

-function removeRow(row){
-    $('#hrow' + row).remove();
-    setDataModified();
+// TODO: Add this click remove closest tr
+
+
+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 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 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();
+function buildRowHtml(key, value){
+    return '' + 
+    '<tr>' +
+        '<td><input class="key" value="' + key + '"></td>' +
+        '<td><input value="' + value + '"></td>' +
+        '<td><button class="modification-button btn-add"><i class="icon-plus"></i></button></td>' +
+    '</tr>';
 }


@@ -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">' +
--- a/target/classes/static/html/mock.html
+++ b/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>
--- a/target/classes/static/js/datatransfer.js
+++ b/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: It sends request, gets responds but doesnt run a function!!
-//TODO: Warning is displayed twice
+// TODO: Add function to add row
+// TODO: Add remove closest tr function to header rows
 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()});
-//TODO remove later save onclick init
-$('#btn-save').click(getUpdate);
+// $('#btn-addRow').click(function(){addRow()});
+// $('#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();
-    innerHTML += generateHeaderTable(headers);
-    $('#httpStatusValues').html(innerHTML);
+    var innerHTML = buildHeaderMapHtml(headers);
+    $('#headerMapTable').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++){
-        innerHTML+=
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-                '<td>' +
-                    '<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++;
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
    }
    return innerHTML;
 }

-function removeRow(row){
-    $('#hrow' + row).remove();
-    setDataModified();
+// TODO: Add this click remove closest tr
+
+
+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 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 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();
+function buildRowHtml(key, value){
+    return '' + 
+    '<tr>' +
+        '<td><input class="key" value="' + key + '"></td>' +
+        '<td><input value="' + value + '"></td>' +
+        '<td><button class="modification-button btn-add"><i class="icon-plus"></i></button></td>' +
+    '</tr>';
 }


@@ -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">' +