From 353d95e3772b5c7c5f2642de9d15f0be2dc1c2f3 Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 15 Mar 2023 15:17:31 +0100 Subject: [PATCH] Added docs in js files and fixed some minor visual bugs (#118) Co-authored-by: Adam Bem Reviewed-on: https://gitea.release11.com/R11/release11-tools-web/pulls/118 --- Frontend/assets/css/tools/r11form.css | 2 + Frontend/assets/scripts/frame.js | 14 +++ Frontend/assets/scripts/tools/scripts.js | 114 ++++++++++++++++++++++- Frontend/index.html | 6 +- Frontend/tools/xpath.html | 4 +- 5 files changed, 130 insertions(+), 10 deletions(-) diff --git a/Frontend/assets/css/tools/r11form.css b/Frontend/assets/css/tools/r11form.css index 1da4b84..909a182 100644 --- a/Frontend/assets/css/tools/r11form.css +++ b/Frontend/assets/css/tools/r11form.css @@ -260,6 +260,7 @@ .action-button.active:hover { filter: brightness(110%); + transition-duration: 0.3s; } .action-button { @@ -407,6 +408,7 @@ .section-button:hover { /* border-bottom: #3bc4f1 2px solid; */ backdrop-filter: brightness(100%); + transition-duration: 0.3s; } .section-button .active { diff --git a/Frontend/assets/scripts/frame.js b/Frontend/assets/scripts/frame.js index d40d307..15cd0fa 100644 --- a/Frontend/assets/scripts/frame.js +++ b/Frontend/assets/scripts/frame.js @@ -1,3 +1,17 @@ + +function init() { + changeActiveTools('xmlTool', 'XML'); +} + +/** + * Function that updates list of tools depending on chosen category + * + * @function + * @name changeActiveTools + * @kind function + * @param {any} activeClass class of elements that have to be shown + * @param {any} activeCategoryButton class of category button that has to be active + */ function changeActiveTools(activeClass, activeCategoryButton) { let tools = document.getElementById("toolList").children diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js index 3660e48..8b5fbaa 100644 --- a/Frontend/assets/scripts/tools/scripts.js +++ b/Frontend/assets/scripts/tools/scripts.js @@ -2,7 +2,16 @@ var defaultStrings = []; const color_grey = "#6b6b6b"; const color_red = "#ff8f8f"; -//Remove default text and set color to black +/** + * It clears default content of the element and sets it's color to black. + * + * @function + * @name clearDefaultContent + * @kind function + * @param {any} element to set + * @param {any} text to set + * @returns {void} + */ function clearDefaultContent(element, text) { if (element.value == text) { element.value = ""; @@ -11,6 +20,13 @@ function clearDefaultContent(element, text) { } } +/** + * It clears all data fields. + * + * @function + * @name clearDataField + * @kind function + */ function clearDataField(){ document.getElementById("xmlArea").value = ""; document.getElementById("xmlArea").style.color = null; @@ -34,8 +50,16 @@ function fillDefaultXML(element) { } } -//Set default text in grey -function setDefaultContent(element, text) {6543 +/** + * It sets default content for the element an changes it's color to grey + * + * @function + * @name setDefaultContent + * @kind function + * @param {any} element to set + * @param {any} text to set + */ +function setDefaultContent(element, text) { if (element.value == "") { var id = element.getAttribute('id'); if (!defaultStrings.includes(text)) { @@ -56,6 +80,15 @@ function setDefaultContent(element, text) {6543 } } +/** + * It hides list for specified version of XPath + * + * @function + * @name hideList + * @kind function + * @param {any} collList class name of list to hide + * @returns {void} + */ function hideList(collList) { for (i = 0; i < collList.length; i++) { if (collList[i].nextElementSibling !== null) { @@ -67,16 +100,45 @@ function hideList(collList) { } } +/** + * It checks if the text is a default text. + * + * @function + * @name checkDefault + * @kind function + * @param {any} text + * @returns {boolean} + */ function checkDefault(text){ return defaultStrings.includes(text); } +/** + * It show list for specified version of XPath + * + * @function + * @name showList + * @kind function + * @param {any} collList class name of list to hide + * @returns {void} + */ function showList(collList) { for (i = 0; i < collList.length; i++) { collList[i].style.display = 'block'; } } +/** + * A function that is used to fold/unfold collapsible elements. + * + * @function + * @name smoothFoldElement + * @kind function + * @param {any} element + * @param {any} toogleState + * @param {any} toggleParrent + * @returns {void} + */ function smoothFoldElement(element, toogleState, toggleParrent){ if (toogleState) { console.log("DUPA"); @@ -98,7 +160,14 @@ function smoothFoldElement(element, toogleState, toggleParrent){ } } -//Set tooltip info, function is called by onClick handlers +/** + * Set tooltip info, function is called by onClick handlers + * + * @function + * @name refreshTooltip + * @kind function + * @returns {void} + */ function refreshTooltip() { var resizeList = document.getElementsByClassName("collapsibleData"); console.log("collDataList: " + resizeList.length) @@ -108,6 +177,17 @@ function refreshTooltip() { +/** + * A function that performs a request to the server. + * + * @function + * @name performRequest + * @kind function + * @param {any} endpoint of target service + * @param {any} checkXML enable checking for empty XML + * @param {any} checkTransform enable checking for empty transform data + * @returns {false | undefined} + */ function performRequest(endpoint, checkXML, checkTransform){ const sourceId = "xmlArea"; const transformId = "transformArea"; @@ -147,6 +227,18 @@ function performRequest(endpoint, checkXML, checkTransform){ } +/** + * Function that prepares data to send and handles response + * + * @function + * @name performFormatRequest + * @kind function + * @param {any} endpoint of target service + * @param {any} checkXML enable checking for empty XML + * @param {any} sourceId ID of element to get XML from + * @param {any} targetId ID of element to write formatted XML + * @returns {void} + */ function performFormatRequest(endpoint, checkXML, sourceId, targetId){ const sourceElement = document.getElementById(sourceId); const targetElement = document.getElementById(targetId); @@ -182,7 +274,19 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId){ } -//Form REST request, send and return received data +/** + * Form REST request, send and return received data + * + * @async + * @function + * @name restRequest + * @kind function + * @param {any} port of target service + * @param {any} endpoint of target service + * @param {any} xmlData XML that will be sent + * @param {any} transformData data used to transform given XML + * @returns {Promise} + */ async function restRequest(port, endpoint, xmlData, transformData) { const escapeChar = "specialEscapeChar"; diff --git a/Frontend/index.html b/Frontend/index.html index ae58767..e458c8b 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -13,7 +13,7 @@ - +