T157 html and css modified for creating json based on table

This commit is contained in:
2021-02-02 13:03:57 +01:00
parent 3c72ddc63a
commit e3d5532397
4 changed files with 39 additions and 29 deletions

4
.idea/workspace.xml generated
View File

@@ -21,6 +21,7 @@
<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/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/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>
@@ -307,7 +308,8 @@
<workItem from="1611757446709" duration="6743000" />
<workItem from="1611826821050" duration="10679000" />
<workItem from="1611915874625" duration="15194000" />
<workItem from="1612178634549" duration="19873000" />
<workItem from="1612178634549" duration="20097000" />
<workItem from="1612259068808" duration="7541000" />
</task>
<task id="LOCAL-00077" summary="testing jenkins docker">
<created>1601453886631</created>

View File

@@ -197,17 +197,13 @@
margin-bottom: 20px;
}
.headerName {
height: 20px;
padding: 5px;
.tableHead {
font-size: 24px;
width: 240px;
font-size: 18px;
background: #f0f0f0;
border: 1px solid lightgray;
border-radius: 5px;
padding: 5px;
}
.headerField {
.tableField {
height: 20px;
padding: 5px;
width: 240px;
@@ -217,3 +213,12 @@
border-radius: 5px;
}
.headerName {
background: #f0f0f0;
}
.httpStatusValue {
}

View File

@@ -15,7 +15,7 @@ function getData(uuid){
function clearMock(){
fillStaticFields('','','','');
$('#headerTable').html('');
$('#httpStatusValues').html('');
}
function initializeMock(index){
@@ -43,9 +43,9 @@ function createLink(uuid, id){
}
function fillHeaderTable(headers){
var innerHTML = $('#headerTable').html();
var innerHTML = $('#httpStatusValues').html();
innerHTML += generateHeaderTable(headers);
$('#headerTable').html(innerHTML);
$('#httpStatusValues').html(innerHTML);
}
function generateHeaderTable(headers){
@@ -67,8 +67,10 @@ function generateHeaderTable(headers){
for(let i=0; i<count; i++){
innerHTML+=
'<tr>' +
'<td class="headerName">' + keys[i] + '</td>' +
'<td class="headerField">' + values[i] + '</td>' +
'<td>' +
'<input type="text" name="headerKey" placeholder="key" class="tableField headerName httpStatusValue" value="' + keys[i] + '"/></td>' +
'<td>' +
'<input type="text" name="headerKey" placeholder="key" class="tableField" value="' + values[i] + '"/></td>' +
'</tr>';
}
return innerHTML;

View File

@@ -54,21 +54,22 @@
</div>
<div id="headers">
<table id="headerTable">
<th>
<td>Name</td>
<td>Value</td>
</th>
</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>
<thead>
<tr>
<td class="tableHead">Header</td>
<td class="tableHead">Value</td>
</tr>
</thead>
<tbody id="httpStatusValues">
</tbody>
<tfoot>
<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>
</tr>
</tfoot>
<!-- <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;"/>-->
</table>
</div>
<div id="history" style="display:none;"></div>