Header table now triggers modified status

This commit is contained in:
2021-04-15 17:08:00 +02:00
parent e94f533554
commit ea19c5bb69
8 changed files with 30 additions and 36 deletions

View File

@@ -187,6 +187,10 @@ body {
pointer-events: none; pointer-events: none;
} }
.tile.active .btn-tile {
opacity: 0;
}
.tile .content { .tile .content {
position: absolute; position: absolute;
left: 0; left: 0;

View File

@@ -3,12 +3,8 @@
<head> <head>
<title>R11 MockedServices</title> <title>R11 MockedServices</title>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- TODO: Remove dependency -->
<!-- <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/> -->
<link rel="stylesheet" href="/css/modal.css" type="text/css"> <link rel="stylesheet" href="/css/modal.css" type="text/css">
<link rel="stylesheet" href="/css/commons/r11form.css" type="text/css"> <link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
<!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
<body> <body>

View File

@@ -1,6 +1,3 @@
//TODO: Add delete buttons for messages
// TODO: Add function to add row
// TODO: Add remove closest tr function to header rows
var clientUUID = ''; var clientUUID = '';
var advancedDisplayed = false; var advancedDisplayed = false;
var json = {}; var json = {};
@@ -226,10 +223,15 @@ function createLink(uuid, id){
function fillHeaderTable(headers){ function fillHeaderTable(headers){
var innerHTML = buildHeaderMapHtml(headers); var innerHTML = buildHeaderMapHtml(headers);
$('#headerMapTable').html(innerHTML); refreshHeaderTable(innerHTML);
$('.tableField').change(function(){setDataModified()}); }
function refreshHeaderTable(html){
$('#headerMapTable').html(html);
$('.table-map').change(function(){setDataModified()});
$('.btn-hashmap').click(function(){ $('.btn-hashmap').click(function(){
$(this).closest('tr').remove(); $(this).closest('tr').remove();
setDataModified();
}) })
} }
@@ -241,14 +243,11 @@ function buildHeaderMapHtml(headers){
return innerHTML; return innerHTML;
} }
// TODO: Add this click remove closest tr
function addRow(key, value){ function addRow(key, value){
var headerMap = $('#headerMapTable'); var headerMap = $('#headerMapTable');
var headersMapHtml = headerMap.html(); var headersMapHtml = headerMap.html();
headersMapHtml += buildRowHtml(key, value); headersMapHtml += buildRowHtml(key, value);
headerMap.html(headersMapHtml); refreshHeaderTable(headersMapHtml);
} }
const newRowInput = function(){ const newRowInput = function(){
@@ -258,6 +257,7 @@ const newRowInput = function(){
addRow(hName.val(), hValue.val()); addRow(hName.val(), hValue.val());
hName.val(null); hName.val(null);
hValue.val(null); hValue.val(null);
setDataModified();
} }
} }
@@ -270,8 +270,8 @@ function checkIfInputValid(input){
function buildRowHtml(key, value){ function buildRowHtml(key, value){
return '' + return '' +
'<tr>' + '<tr>' +
'<td><input class="key" value="' + key + '"></td>' + '<td><input class="key data-field" value="' + key + '"></td>' +
'<td><input value="' + value + '"></td>' + '<td><input class="data-field" value="' + value + '"></td>' +
'<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' + '<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
'</tr>'; '</tr>';
} }
@@ -299,8 +299,6 @@ function fillMessageList(){
}) })
} }
//TODO: Implement methods where its possible
function findJsonById(id){ function findJsonById(id){
return json[findJsonIndexById(id)]; return json[findJsonIndexById(id)];
} }

View File

@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
const allModals = $('.modal'); const allModals = $('.modal');
const btnModalClose = $('.modal button'); const btnModalClose = $('.modal button');
//TODO: Implement in datatransfer
const closeModals = function() { const closeModals = function() {
hideModal(allModals); hideModal(allModals);
} }

View File

@@ -187,6 +187,10 @@ body {
pointer-events: none; pointer-events: none;
} }
.tile.active .btn-tile {
opacity: 0;
}
.tile .content { .tile .content {
position: absolute; position: absolute;
left: 0; left: 0;

View File

@@ -3,12 +3,8 @@
<head> <head>
<title>R11 MockedServices</title> <title>R11 MockedServices</title>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- TODO: Remove dependency -->
<!-- <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/> -->
<link rel="stylesheet" href="/css/modal.css" type="text/css"> <link rel="stylesheet" href="/css/modal.css" type="text/css">
<link rel="stylesheet" href="/css/commons/r11form.css" type="text/css"> <link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
<!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head> </head>
<body> <body>

View File

@@ -1,6 +1,3 @@
//TODO: Add delete buttons for messages
// TODO: Add function to add row
// TODO: Add remove closest tr function to header rows
var clientUUID = ''; var clientUUID = '';
var advancedDisplayed = false; var advancedDisplayed = false;
var json = {}; var json = {};
@@ -226,10 +223,15 @@ function createLink(uuid, id){
function fillHeaderTable(headers){ function fillHeaderTable(headers){
var innerHTML = buildHeaderMapHtml(headers); var innerHTML = buildHeaderMapHtml(headers);
$('#headerMapTable').html(innerHTML); refreshHeaderTable(innerHTML);
$('.tableField').change(function(){setDataModified()}); }
function refreshHeaderTable(html){
$('#headerMapTable').html(html);
$('.table-map').change(function(){setDataModified()});
$('.btn-hashmap').click(function(){ $('.btn-hashmap').click(function(){
$(this).closest('tr').remove(); $(this).closest('tr').remove();
setDataModified();
}) })
} }
@@ -241,14 +243,11 @@ function buildHeaderMapHtml(headers){
return innerHTML; return innerHTML;
} }
// TODO: Add this click remove closest tr
function addRow(key, value){ function addRow(key, value){
var headerMap = $('#headerMapTable'); var headerMap = $('#headerMapTable');
var headersMapHtml = headerMap.html(); var headersMapHtml = headerMap.html();
headersMapHtml += buildRowHtml(key, value); headersMapHtml += buildRowHtml(key, value);
headerMap.html(headersMapHtml); refreshHeaderTable(headersMapHtml);
} }
const newRowInput = function(){ const newRowInput = function(){
@@ -258,6 +257,7 @@ const newRowInput = function(){
addRow(hName.val(), hValue.val()); addRow(hName.val(), hValue.val());
hName.val(null); hName.val(null);
hValue.val(null); hValue.val(null);
setDataModified();
} }
} }
@@ -270,8 +270,8 @@ function checkIfInputValid(input){
function buildRowHtml(key, value){ function buildRowHtml(key, value){
return '' + return '' +
'<tr>' + '<tr>' +
'<td><input class="key" value="' + key + '"></td>' + '<td><input class="key data-field" value="' + key + '"></td>' +
'<td><input value="' + value + '"></td>' + '<td><input class="data-field" value="' + value + '"></td>' +
'<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' + '<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
'</tr>'; '</tr>';
} }
@@ -299,8 +299,6 @@ function fillMessageList(){
}) })
} }
//TODO: Implement methods where its possible
function findJsonById(id){ function findJsonById(id){
return json[findJsonIndexById(id)]; return json[findJsonIndexById(id)];
} }

View File

@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
const allModals = $('.modal'); const allModals = $('.modal');
const btnModalClose = $('.modal button'); const btnModalClose = $('.modal button');
//TODO: Implement in datatransfer
const closeModals = function() { const closeModals = function() {
hideModal(allModals); hideModal(allModals);
} }