release11-tools/Frontend/assets/scripts/tools/mock/uianimation.js

var advancedVisibility = false;
var focusedField = false;
/*
Listeners
*/ 
$("#optional").click(changeAdvancedVisibility);

$('#historyTab').click(showHistory);

$('.tooltipped').on("mouseenter" , (event) => {showTip(event.currentTarget.id+'Tip')})
                .on( "mouseleave", (event) => {hideTip(event.currentTarget.id+'Tip')});

/*
Functions
*/

function changeAdvancedVisibility(){
    if(advancedVisibility){
        $("#advanced").removeClass('active');
        advancedVisibility = false;
    }
    else {
        $('#advanced').addClass('active');
        advancedVisibility = true;
    }
    setCookie();
}

const tabitem = $('.tabitem');
function showHistory(){
    $('#headersTab').click(showHeaders);
    tabitem.removeClass('active');
    $('.tabcontent').removeClass('active');
    $('#history').addClass('active');
    $('#historyTab').addClass('active');
    $('#historyTab').off('click');
    getHistoryData();
}

function showHeaders(){
    $('#historyTab').click(showHistory);
    tabitem.removeClass('active');
    $('.tabcontent').removeClass('active');
    $('#headers').addClass('active');
    $('#headersTab').addClass('active');
    $('#headersTab').off('click');
}

function showHeadersHistory(record){
   historyTable = '';
   headers = parseHeaders(record.id)
   headers.forEach(
    (value,key) => {
        historyTable +=
        '<tr>' +
        '<td class="history-header-name">'+ key + '</td>' +
        '<td class="history-header-value">'+ value + '</td>' +
        '</tr>'
    }
   );
    document.getElementById('header-history-table-body').innerHTML = historyTable;
    switchPopups('history-headers-table');
    showPopup();
}

async function formatJSON(json) {
    const backend = "java";
    const address = window.location.protocol + "//" + window.location.hostname + "/" + backend + "/json/formatting";

    var init = {
        body: json,
        method: "POST"
    };
    var request = new Request(address, init);
    
    var result = await fetch(request).then(response => {
        return response.text().then(function (text) {
            var json = JSON.parse(text);
            json.status = response.status;
            return json;
        });
        
    });
    return result;
}

async function formatXML(xml) {
    const backend = "libxml";
    const address = window.location.protocol + "//" + window.location.hostname + "/" + backend + "/prettify";
    var data = {
        data: xml,
        process: "",
        processor: "libxml",
        version: "1.0"
    }

    var init = {
        body: JSON.stringify(data),
        method: "POST"
    };
    var request = new Request(address, init);
    
    var result = await fetch(request).then(response => {
        return response.text().then(function (text) {
            return JSON.parse(text);
        });
        
    });
    return result;
}

function showRequestBody(element){
    var historyRequestBody = historyJson[element.id].requestBody;
    const popupContent = document.getElementById('code-highlight-content')
    
    document.getElementById('code-highlight-content').innerText = "Loading...";
    switch(historyJson[element.id].headers["content-type"]){
        case "application/json":{
            formatJSON(historyRequestBody).then(function(result) {
                
                if (result.status == "200") {
                    popupContent.innerText = result.data;
                    highlightSyntax('code-highlight-content');
                }
                else {
                    popupContent.innerText = historyRequestBody;
                }
            });
            break;
        }
        case "application/xml": {
            formatXML(historyRequestBody).then(function(result) {
                if (result.status == "OK") {
                    popupContent.innerText = result.result;
                    highlightSyntax('code-highlight-content');
                }
                else {
                    popupContent.innerText = historyRequestBody;
                }
                
            });
            
            break;
        }
        default:{
            popupContent.innerText = historyRequestBody;
            highlightSyntax('code-highlight-content');
        }
    }
    switchPopups('history-request-body');
    showPopup();
}

function refreshHistoryRecords(){
    getHistoryData();
}

function hideTip(element){
    $('#'+element).removeClass('active');
}

function showTip(element){
    $('.tip').removeClass('active');
    $('#'+element).addClass('active');
}