T198 T136 T191 save disabled, onclick removed, confirm. placeholder

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

@@ -1,10 +1,17 @@
 //TODO: Add delete buttons for messages
-var clientUUID;
-var json;
+var clientUUID = '';
+var json = {};
 var jsonIndex = 0;
 var htable_row = 0;
 var host = getDomain();
+var dataModified = false;
 const C_UUID = 'mock-uuid';
+
+$('#iconPlus').click(function(){addMessage()});
+$('#btn-addRow').click(function(){addRow()});
+//TODO remove later save onclick init
+$('#btn-save').click(function(){updateData()});
+
 function getData(){
     loadCookies();
     $.getJSON(host + '/mock/json/'+clientUUID, function(data) {
@@ -14,6 +21,7 @@ function getData(){
         console.log(JSON.stringify(json));
         console.log("Json received");
         refreshData();
+        setDataOrigin();
     });
 }
 
@@ -24,6 +32,28 @@ function getDomain(){
     return result;
 }
 
+function setDataModified(){
+    if(dataModified) return;
+    dataModified = true;
+    $('#btn-save').removeClass('btn-inactive');
+    $('#btn-save').addClass('btn-action');
+    $('#btn-save').click(function(){updateData()});
+}
+
+//Adding change listener to fields
+$('.field').change(function(){setDataModified()});
+
+function setDataOrigin(){
+    dataModified = false;
+    $('#btn-save').addClass('btn-inactive');
+    $('#btn-save').removeClass('btn-action');
+    $('#btn-save').off('click');
+}
+
+function displayDataLossWarn(){
+    if(dataModified) alert('Data modification lost');
+}
+
 function refreshData(){
     fillMessageList();
     console.log("List initiated");
@@ -55,6 +85,10 @@ function getCookie(cname) {
     return '';
 }
 
+function displaySaveConfirmation(){
+    alert('message has been saved');
+}
+
 function updateData(){
     var updatedJson = generateJson();
     var request = $.ajax({
@@ -66,11 +100,12 @@ function updateData(){
     });
     request.done(function () {
         getData();
+        displaySaveConfirmation();
     });
 }
 
 function addMessage(){
-
+    displayDataLossWarn();
     var request = $.ajax({
         url: host + '/mock/json/'+clientUUID,
         type: 'POST',
@@ -81,6 +116,7 @@ function addMessage(){
 }
 
 function removeTile(id){
+    displayDataLossWarn();
     var jsonObject = findJsonById(id);
     var request = $.ajax({
         url: host + '/mock/json/'+clientUUID + '/' + id,
@@ -126,6 +162,7 @@ function fillHeaderTable(headers){
     var innerHTML = $('#httpStatusValues').html();
     innerHTML += generateHeaderTable(headers);
     $('#httpStatusValues').html(innerHTML);
+    $('.tableField').change(function(){setDataModified()});
 }
 //TODO: Add addRow() to generate new rows and populate them with data
 function generateHeaderTable(headers){
@@ -161,6 +198,7 @@ function generateHeaderTable(headers){
 
 function removeRow(row){
     $('#hrow' + row).remove();
+    setDataModified();
 }
 
 function addRow(){
@@ -181,6 +219,7 @@ function addRow(){
     table.append(innerHtml);
     hkey.val('');
     hval.val('');
+    setDataModified();
 }
 
 function fillMessageList(){
@@ -204,6 +243,7 @@ function findJsonIndexById(id){
 }
 
 function loadMessage(id){
+    displayDataLossWarn();
     for(let i=0; i<json.length; i++){
         if(id == json[i].mockedResponseId){
             jsonIndex = i;