dev (#81)

Co-authored-by: mikolaj widla <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#81

Backend-libXML/Parser.py

@@ -2,10 +2,27 @@ from lxml import etree
 
 
 def prettify(source: str) -> str:
+    """Method used to pretty format given XML
+
+    :param source: XML
+    :return: prettified XML
+    """
+    prolog = ""
+    prolog_start = source.find("<?")
+    
+    if prolog_start != -1:
+        prolog_end = source.find("?>") + 2
+        prolog = source[prolog_start:prolog_end] + "\n"
+        source = source[prolog_end: ]
     xml = etree.XML(source)
-    return etree.tostring(xml, pretty_print=True).decode()
+    return prolog + etree.tostring(xml, pretty_print=True).decode()
 
 def minimize(source: str) -> str:
+    """Method used to minimize XML by deleting not needed whitespaces.
+
+    :param source: XML
+    :return: minimized XML
+    """
     result = source
     
     to_remove = ["   ", "  ", "\t", "\n"]

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -167,7 +167,7 @@
                         </div>
                     </div> -->
                 </div>
-                <div class="max-width centered-content small-vertical-margin">
+                <div id="new-tile" class="max-width centered-content small-vertical-margin">
                     <button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
                 </div>
             </div>
@@ -190,6 +190,18 @@
                         <p>To save message, the message must be changed!</p>
                     </div>
                 </div>
+                <div class="large-vertical-margin">
+                    <div id="btn-newTileTip" class="tip">
+                        <h3>Add new message</h3>
+                        <p>This button adds new message.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="messagesTip" class="tip">
+                        <h3>Message</h3>
+                        <p>This is saved messages, with unique id.</p>
+                    </div>
+                </div>
                 <div class="large-vertical-margin">
                     <div id="httpStatusTip" class="tip">
                         <h3>Http Status</h3>

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

@@ -119,3 +119,13 @@ $('#btnSave').mouseover(function(){showTip('btnSaveTip');});
 $('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
 $('#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')});

Frontend/Dockerfile

@@ -3,9 +3,13 @@ FROM nginx:stable-alpine
 COPY ./tools/ /usr/share/nginx/html/tools/
 COPY ./assets/ /usr/share/nginx/html/assets/
 COPY ./index.html /usr/share/nginx/html
-#COPY ./logo.png /usr/share/nginx/html
+
-#COPY ./styles.css /usr/share/nginx/html
+RUN mkdir -p /scripts
-#COPY ./common.css /usr/share/nginx/html
+COPY insert_version.sh /scripts/
-#COPY ./favicon.ico /usr/share/nginx/html
+WORKDIR /scripts
+
+RUN chmod +x insert_version.sh
+RUN ./insert_version.sh
+
 
 EXPOSE 80

Frontend/assets/css/tools/r11form.css

@@ -330,6 +330,10 @@
     height: 300px;
 }
 
+.textarea-800 {
+    height: 800px;
+}
+
 .centered-content {
     display: flex;
     justify-content: center;

Frontend/assets/scripts/tools/scripts.js

@@ -11,6 +11,11 @@ function clearDefaultContent(element, text) {
     }
 }
 
+function clearDataField(){
+    document.getElementById("xmlArea").value = "";
+    document.getElementById("transformArea").value = "";
+}
+
 function fillDefaultXML(element) {
     if(element.classList.contains("active")){
         const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
@@ -91,22 +96,38 @@ function refreshTooltip() {
     document.getElementById("xsltelementsheader").innerText = XSLTheader;
 }
 
+
+
 function performRequest(endpoint, checkXML, checkTransform){
-    var xmlData = document.getElementById("xmlArea").value.trim();
+    var xmlData = document.getElementById(sourceId).value.trim();
-    var transformData = document.getElementById("transformArea").value.trim();
+    var transformData = document.getElementById(targetId).value.trim();
+    
+    var port = 8081
+    if (getProcessor() == "libxml") {
+        port = 8082
+    }
 
     var empty = false;
     if (defaultStrings.includes(xmlData) && checkXML) {
-            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            document.getElementById(sourceId).style.backgroundColor = color_red;
             xmlData = "";
             empty = true;
     }
     if (defaultStrings.includes(transformData) && checkTransform) {
-        document.getElementById("transformArea").style.backgroundColor = color_red;
+        document.getElementById(targetId).style.backgroundColor = color_red;
         empty = true;
     }
     if (!empty) {
-        restRequest(endpoint, xmlData, transformData);
+        restRequest(port, endpoint, xmlData, transformData).then(function(result) {
+            document.getElementById("resultArea").value = result.result;
+            document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
+            if (result.status = "OK") {
+                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
+                procinfo.style.color = "#30aa58";
+            } else {
+                procinfo.style.color = "#aa3030";
+            }
+        });
     }else{
         document.getElementById("resultArea").value = "No data provided!";
         return false;
@@ -114,33 +135,35 @@ function performRequest(endpoint, checkXML, checkTransform){
     
 }
 
-function performFormatRequest(endpoint, checkXML){
+function performFormatRequest(endpoint, checkXML, sourceId, targetId){
-    var xmlData = document.getElementById("xmlArea").value.trim();
+    const port = 8082;
+    var xmlData = document.getElementById(sourceId).value.trim();
     
     var empty = false;
     if (defaultStrings.includes(xmlData) && checkXML) {
-            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            document.getElementById(sourceId).style.backgroundColor = color_red;
             xmlData = "";
             empty = true;
     }
+
     if (!empty) {
-        restRequest(endpoint, xmlData, null);
+        restRequest(port, endpoint, xmlData, "").then(function(result) {
+            document.getElementById(targetId).value = result.result;
+            
+        });
     }else{
-        document.getElementById("resultArea").value = "No data provided!";
+        document.getElementById(targetId).value = "No data provided!";
         return false;
     }
     
 }
 
 
-//Form REST request, send, receive and display in resultArea
+//Form REST request, send and return received data
-async function restRequest(endpoint, xmlData, transformData) {
+async function restRequest(port, endpoint, xmlData, transformData) {
     const escapeChar = "specialEscapeChar";
-    var port = ":8081/"
+    
-    if (getProcessor() == "libxml") {
+    const addr = window.location.protocol + "//" + window.location.hostname + ":" + port + "/" + endpoint;
-        port = ":8082/"
-    }
-    const addr = window.location.protocol + "//" + window.location.hostname + port + endpoint;
 
     if(defaultStrings.includes(xmlData)){
         xmlData = "<empty/>";
@@ -167,21 +190,11 @@ async function restRequest(endpoint, xmlData, transformData) {
     var request = new Request(addr, init);
 
     
-
+    var result = await fetch(request).then(response => {
-    await fetch(request).then(response => {
+        return response.text().then(function(text) {
-        console.log(response.status);
+            return JSON.parse(text);
-        response.text().then(function (text) {
-            console.log(text);
-            var result = JSON.parse(text);
-            document.getElementById("resultArea").value = result.result;
-            document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
-            if (response.ok) {
-                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
-                procinfo.style.color = "#30aa58";
-            } else {
-                procinfo.style.color = "#aa3030";
-            }
         });
         
     });
+    return result;
 }

Frontend/index.html

@@ -27,15 +27,15 @@
                 <li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
                 <li id="toolListRow"><a href="./tools/formatter.html" target="iframe">Formatter</a></li>
             </ul>
-            <div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
+            <div id="copyright">
+                Build: [:VERSION:]<br>
+                Copyright © 2023<br>
+                <a href="http://release11.com/">Release11 Sp. z. o. o.</a>
+            </div>
         </div>
         <iframe id="frame" name="iframe" src="http://tools.zipper.release11.com:8097/" frameborder="0"></iframe>
     </div>
 
-    <script>
-        
-    </script>
-
 </body>
 
 </html>

Frontend/insert_version.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+input="$(date +'%Y-%m-%d %H:%M')"
+
+sed -i "s/\[\:VERSION\:\]/$input/g" /usr/share/nginx/html/index.html

Frontend/tools/formatter.html

@@ -24,19 +24,14 @@
 
                 <label for="xmlArea"><b>Insert your XML:</b></label>
                 <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
+                    class="textarea-800 bordered-field vertically-resizeable max-width"
                     onblur="setDefaultContent(this, 'Insert XML here');"
                     onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
                 <br><br>
                 <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('prettifypost', true)">Prettify XML</button>
+                    onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Prettify XML</button>
                 <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('minimizepost', true)">Minimize XML</button>
+                    onclick="performFormatRequest('minimizepost', true, 'xmlArea', 'xmlArea')">Minimize XML</button>
-                <br><br>
-
-                <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
-                <textarea id="resultArea" name="resultArea" rows="2"
-                    class="bordered-field textarea-300 vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
                 
             </div>
         </div>

Frontend/tools/xpath.html

@@ -17,7 +17,7 @@
         <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
-                    <h1>Online XPath tester <span class="versionInfo"><span class="version-span">v0.4</span></span></h1>
+                    <h1>Online XPath tester</h1>
                 </div>
 
                 <div class="display-space-between">
@@ -36,8 +36,14 @@
                             <option class="hideable saxon" value="3.1">3.1</option>
                         </select>
                     </div>
-                    <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                    <div>
-                        onclick="fillDefaultXML(this)">Insert default XML</button>
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
+                            onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                            onclick="fillDefaultXML(this)">Insert default XML</button>
+                    </div>
                 </div>
                 <!-- <br><br> -->
                 <label for="xmlArea"><b>Insert your XML:</b></label>
@@ -57,7 +63,7 @@
                     expression</button>
                 <br><br>
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea id="resultArea" name="resultArea"
+                <textarea disabled id="resultArea" name="resultArea"
                     class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;" rows="10" cols="100"></textarea>
 
             </div>

Frontend/tools/xsd.html

@@ -14,8 +14,7 @@
         <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
-                    <h1>Online XSD tester <span class="versionInfo"><span class="version-span">v0.4 BETA</span></span>
+                    <h1>Online XSD tester</h1>
-                    </h1>
                 </div>
                 <div class="display-space-between">
                     <div style="text-align: center;">
@@ -25,8 +24,14 @@
                     <option value="libxml">libXML</option>
                 </select>
                     </div>
-                    <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px; float: right;"
+                    <div>
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
+                            onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                             onclick="fillDefaultXML(this)">Insert default XML</button>
+                    </div>
                 </div>
 
                 <!-- <span id="processorTooltipInfo">procInfo</span><br> -->
@@ -49,7 +54,7 @@
                 <br><br>
 
                 <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
-                <textarea id="resultArea" name="resultArea" rows="2"
+                <textarea disabled id="resultArea" name="resultArea" rows="2"
                     class="bordered-field vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
 
             </div>

Frontend/tools/xslt.html

@@ -14,7 +14,7 @@
         <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
-                    <h1>Online XSLT tester <span class="versionInfo"><span class="version-span">v0.4</span></span></h1>
+                    <h1>Online XSLT tester</h1>
                 </div>
                 <div class="display-space-between">
                     <div style="text-align: center;">
@@ -25,8 +25,14 @@
                     <option value="libxml">libXML</option>
                 </select>
                     </div>
-                    <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px; float: right;"
+                    <div>
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
+                            onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                             onclick="fillDefaultXML(this)">Insert default XML</button>
+                    </div>
                 </div>
 
                 <span id="processorTooltipInfo">procInfo</span><br>
@@ -50,7 +56,7 @@
                 <br><br>
 
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea id="resultArea" name="resultArea" rows="10"
+                <textarea disabled id="resultArea" name="resultArea" rows="10"
                     class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;" ></textarea>
 
             </div>