R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Header table is generated

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-14 16:44:07 +02:00
parent fb1c08fd5d
commit 161b921a3a
4 changed files with 52 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/resources/static/html/mock.html
View File

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

88
src/main/resources/static/js/datatransfer.js
View File

@@ -1,7 +1,6 @@
//TODO: Add delete buttons for messages //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 clientUUID = '';
var advancedDisplayed = false; var advancedDisplayed = false;
var json = {}; var json = {};
@@ -10,11 +9,9 @@ var lastId = 1;
var htable_row = 0; var htable_row = 0;
var host = getDomain(); var host = getDomain();
var dataModified = false; var dataModified = false;
// TODO: Remove discard changes
const addMessageName = 'addMessage'; const addMessageName = 'addMessage';
const loadMessageName = 'changeMessage'; const loadMessageName = 'changeMessage';
const removeMessageName = 'removeMessage'; const removeMessageName = 'removeMessage';
// TODO: Add last given command
const C_UUID = 'mock-uuid'; const C_UUID = 'mock-uuid';
const C_ID = 'last-displayed-id'; const C_ID = 'last-displayed-id';
@@ -33,9 +30,8 @@ const dataRefresh = function(){
getData(); getData();
} }
$('#btn-newtile').click(function(){callAddMessage()}); $('#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(){ function getData(){
$.getJSON(host + '/api/mock/'+clientUUID, function(data) { $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -229,68 +225,36 @@ function createLink(uuid, id){
} }
function fillHeaderTable(headers){ function fillHeaderTable(headers){
var innerHTML = $('#httpStatusValues').html(); var innerHTML = buildHeaderMapHtml(headers);
innerHTML += generateHeaderTable(headers); $('#headerMapTable').html(innerHTML);
$('#httpStatusValues').html(innerHTML);
$('.tableField').change(function(){setDataModified()}); $('.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; 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); console.log(this);
loadMessage(parseInt($(this).attr('tileid'))); 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){ function generateMessageTileHtml(id, httpStatus, mediaType){
var innerHTML = '' + var innerHTML = '' +
'<div tileid="' + id + '" class="tile">' + '<div tileid="' + id + '" class="tile">' +

2
target/classes/static/html/mock.html
View File

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

88
target/classes/static/js/datatransfer.js
View File

@@ -1,7 +1,6 @@
//TODO: Add delete buttons for messages //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 clientUUID = '';
var advancedDisplayed = false; var advancedDisplayed = false;
var json = {}; var json = {};
@@ -10,11 +9,9 @@ var lastId = 1;
var htable_row = 0; var htable_row = 0;
var host = getDomain(); var host = getDomain();
var dataModified = false; var dataModified = false;
// TODO: Remove discard changes
const addMessageName = 'addMessage'; const addMessageName = 'addMessage';
const loadMessageName = 'changeMessage'; const loadMessageName = 'changeMessage';
const removeMessageName = 'removeMessage'; const removeMessageName = 'removeMessage';
// TODO: Add last given command
const C_UUID = 'mock-uuid'; const C_UUID = 'mock-uuid';
const C_ID = 'last-displayed-id'; const C_ID = 'last-displayed-id';
@@ -33,9 +30,8 @@ const dataRefresh = function(){
getData(); getData();
} }
$('#btn-newtile').click(function(){callAddMessage()}); $('#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(){ function getData(){
$.getJSON(host + '/api/mock/'+clientUUID, function(data) { $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -229,68 +225,36 @@ function createLink(uuid, id){
} }
function fillHeaderTable(headers){ function fillHeaderTable(headers){
var innerHTML = $('#httpStatusValues').html(); var innerHTML = buildHeaderMapHtml(headers);
innerHTML += generateHeaderTable(headers); $('#headerMapTable').html(innerHTML);
$('#httpStatusValues').html(innerHTML);
$('.tableField').change(function(){setDataModified()}); $('.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; 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); console.log(this);
loadMessage(parseInt($(this).attr('tileid'))); 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){ function generateMessageTileHtml(id, httpStatus, mediaType){
var innerHTML = '' + var innerHTML = '' +
'<div tileid="' + id + '" class="tile">' + '<div tileid="' + id + '" class="tile">' +