T157 json created based on the data

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

@@ -1,12 +1,14 @@
 var json;
+var jsonIndex = 0;
 function getData(uuid){
     $.getJSON('http://localhost:8097/mock/json', function(data) {
         json = data;
         console.log("Json received");
         fillMessageList();
         console.log("List initiated");
-        loadMessage(json[0].mockedResponseId);
+        loadMessage(json[jsonIndex].mockedResponseId);
         console.log("Message loaded");
+
         // initializeMock(json, 0)
     });
 }
@@ -83,8 +85,9 @@ function fillMessageList(){
 function loadMessage(id){
     for(let i=0; i<json.length; i++){
         if(id == json[i].mockedResponseId){
+            jsonIndex = i;
             console.log("Message found");
-            initializeMock(i);
+            initializeMock(jsonIndex);
             console.log("Fields initialized");
             selectMessage(id);
             console.log("Selection complete");
@@ -115,4 +118,32 @@ function generateMessageTileHtml(id, httpStatus, mediaType){
     return innerHTML;
 }
 
-$(document).ready(getData());
+function onbuild(){
+    getData();
+    sleep(1000);
+    // $('#btn-save').bind('click', generateJson);
+}
+
+$(document).ready(onbuild());
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function saveChanges(){
+    generateJson();
+}
+
+function generateJson(){
+    console.log("Save button click");
+    var newJson =
+        {
+            clientUUID: json[jsonIndex].clientUUID,
+            mockedResponseId: json[jsonIndex].mockedResponseId,
+            mediaType: $('#typeSelector').val(),
+            messageBody: $('#bodyEditor').val(),
+            httpStatus: $('#httpStatus').val(),
+            httpHeaders: {},
+        };
+    document.write(JSON.stringify(newJson, null, 2));
+}

src/main/resources/templates/mock.html

@@ -74,7 +74,7 @@
                     <div id="history" style="display:none;"></div>
                 </div>
                 <div id="functionBar">
-                    <button type="submit" class="functionBarButton">Save</button>
+                    <button id="btn-save" type="submit" class="functionBarButton" onclick="saveChanges()">Save</button>
                     <div style="clear: both;"></div>
                 </div>
         </div>