UUID switching, and add new message button fix (#96)

Co-authored-by: mikolaj widla <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#96
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Backend/mocked-services/src/main/resources/static/js/datatransfer.js

@@ -102,6 +102,7 @@ const idToDisplay = function(){
 }
 
 function refreshData(){
+    $("#uuid-input").val(clientUUID);
     fillMessageList();
     console.log("List initiated");
     let id = idToDisplay();
@@ -226,12 +227,99 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
     $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
+    $('#uuid-input').val(uuid);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
     $('#mockedMessageId').html(id);
 
 }
 
+function changeEditionOfUUID(element){
+
+    var inputFieldId= "#uuid-input"
+    var inputFieldDiv = "#uuid-edit-field"
+    if(element.checked){
+        $(inputFieldId).removeAttr('disabled');
+        $(inputFieldDiv).removeClass('disabled');
+    } else{
+        $(inputFieldId).attr('disabled', true);
+        $(inputFieldDiv).addClass('disabled');
+    }
+}
+
+function copyUUIDToClipboard(){
+    navigator.clipboard.writeText( document.getElementById('uuid-input').value );
+}
+
+
+async function fetchUUIDCheck(givenUUID , strategy){
+    var newUUID = "UUID" ;
+    url = host + "/api/mock/check/";
+
+    switch(strategy){
+        case "new":{
+            await fetch(url + givenUUID+ "/", { method : "GET" })
+                .then ( response => response.text() )
+                .then ( data => {
+                    newUUID = data;
+                    console.log("newUUID: "+newUUID);
+                } )
+            break;
+        }
+        case "restore":{
+            await fetch(url + givenUUID + "/" + clientUUID + "/" , { method: "GET" })
+                .then (response => response.text() )
+                .then (data => {
+                    newUUID = data;
+                    console.log("restoreUUID: "+newUUID);
+                } )
+            break;
+        }
+    }
+    return newUUID ;
+}
+
+function checkUUIDChars(uuid) {
+    console.log("UUID in check: " + uuid);
+    const regex = new RegExp("^[A-z0-9-]+$");
+    if(regex.test(uuid)){
+        return uuid ;
+    } 
+    return "invalid";
+ }
+
+function changeUUID(element){
+
+    const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val();
+    // const givenUUID = checkUUIDChars(element.value);
+    const givenUUID = element.value;
+    console.log(givenUUID);
+
+    if( givenUUID == clientUUID ){
+        $("#uuid-input").attr("disabled", true);
+        uuidChangeModalDisplay("noChg");
+        return;
+    }
+
+    var newUUID = fetchUUIDCheck(givenUUID , uuidStrategy);
+    var changeMessage = uuidStrategy;
+    newUUID
+    .then( data => {
+        if (givenUUID == data) { 
+            changeMessage = "success";
+        }
+        clientUUID = data;
+        $("#uuid-input").attr("disabled", true);
+        $("#editable").attr("checked", false);
+        
+        uuidChangeModalDisplay(changeMessage);
+        document.cookie = C_UUID + '=' + data ;
+    } )
+    loadCookies();
+    refreshData();
+}
+
+
 function createLink(uuid, id){
     var link =  host + '/api/mock/r/'+uuid+'/'+id;
     return link;

Backend/mocked-services/src/main/resources/static/js/modal.js

@@ -7,6 +7,7 @@ var methodToCall = {
 const overlay = $('#overlay');
 const savedModal = $('#modal-confirm');
 const dataLossModal = $('#modal-query');
+const uuidChangeModal = $('#modal-uuidChanged')
 const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
@@ -23,6 +24,37 @@ const dataLossModalDisplay = function(){
     showModal(dataLossModal);
 }
 
+const uuidChangeModalDisplay = function(addidionalMessage){
+
+    switch(addidionalMessage){
+        case "success":{
+            console.log("success");
+            $(".uuid-modal-body").removeClass("active");
+            $("#changeUUIDSuccess").addClass("active");
+            break;
+        }
+        case "new":{
+            console.log("new UUID");
+            $(".uuid-modal-body").removeClass("active");
+            $("#newUUID").addClass("active");
+            break;
+        }
+        case "restore":{
+            console.log("restoredUUID");
+            $(".uuid-modal-body").removeClass("active");
+            $("#restoredUUID").addClass("active");
+            break;
+        }
+        case "noChg":{
+            console.log("No changes");
+            $(".uuid-modal-body").removeClass("active");
+            $("#noChgUUID").addClass("active");
+            break;
+        }
+    }
+    showModal(uuidChangeModal);
+}
+
 function setMethodToCall(name, id){
     methodToCall.name = name;
     methodToCall.id = id;

Backend/mocked-services/src/main/resources/static/js/uianimation.js

@@ -3,12 +3,14 @@ var selectMenu = $("#selectMenuContent");
 var advancedTab = $("#advanced");
 var basicID = $("#basicItemData")
 var advancedID = $("#advancedItemData");
+var advancedUUIDOptions = $("#uuid-validation-strategy");
 var focusedField = false;
 function changeAdvancedVisibility(){
     if(advancedVisibility){
         selectMenu.removeClass('active');
         advancedTab.removeClass('active');
         advancedID.removeClass('active');
+        advancedUUIDOptions.removeClass('active');
         basicID.addClass('active');
         advancedVisibility = false;
     }
@@ -16,6 +18,7 @@ function changeAdvancedVisibility(){
         selectMenu.addClass('active');
         advancedTab.addClass('active');
         advancedID.addClass('active');
+        advancedUUIDOptions.addClass('active');
         basicID.removeClass('active');
         advancedVisibility = true;
     }
@@ -121,11 +124,18 @@ $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
 $('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
 
 $('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
-$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
 $('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
 $('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
 
 $('#listItems').mouseover(function(){showTip('messagesTip');});
-$('#listItems').focusin(function(){focusInTip('messagesTip')});
 $('#listItems').mouseleave(function(){hidTip('messagesTip')});
-$('#listItems').focusout(function(){focusOutTip('messagesTip')});
+
+
+$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
+$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });
+
+$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
+$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });
+
+$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } );
+$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') });