Last opened page is now stored (solves #166) (#178)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #178
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/assets/css/frame.css

@@ -41,7 +41,7 @@ div#header {
     grid-column: 1;
 }
 
-iframe#frame {
+iframe#iframe {
     flex-grow: 1;
     background-color: #FFFFFF;
 }

Frontend/assets/scripts/dyn_host.js

@@ -1,6 +0,0 @@
-$(document).ready( function() {
-    document.getElementById("rest-mock").href =
-        window.location.protocol + "//" + window.location.hostname + ":8097";
-    
-});
-        

Frontend/assets/scripts/frame.js

@@ -1,6 +1,51 @@
+const tools = new Map();
 
+/**
+ * This functions imports other js file. I hate this solution, but other didn't work.
+ * 
+ * @function
+ * @name importScript
+ * @kind function
+ * @param {any} url
+ * @returns {void}
+ */
+function importScript(url) {
+    var script = document.createElement("script");
+    script.src = url;
+    document.head.appendChild(script);
+}
+
+/**
+ * Get address of Mock Services
+ * 
+ * @function
+ * @name getMockHost
+ * @kind function
+ * @returns {string}
+ */
+function getMockHost() {
+    return window.location.protocol + "//" + window.location.hostname + ":8097";
+}
+
+/**
+ * Function called after page is loaded
+ * 
+ * @function
+ * @name init
+ * @kind function
+ * @returns {void}
+ */
 function init() {
-    changeActiveTools('xmlTool', 'XML');
+    
+    tools.set("xpath", "tools/xpath.html");
+    tools.set("xsd", "tools/xsd.html");
+    tools.set("xslt", "tools/xslt.html");
+    tools.set("xmlform", "tools/xmlFormatter.html");
+    tools.set("jsonform", "tools/jsonFormatter.html");
+    tools.set("mock", getMockHost());
+
+    changeActiveTools('XML');
+    loadLastPage();
 }
 
 /**
@@ -12,26 +57,65 @@ function init() {
  * @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) {
+function changeActiveTools(activeCategoryButton) {
-    let tools = document.getElementById("toolList").children
+    let toolList = document.getElementById("toolList").children;
+    let categoryToClass = new Map([["XML",  "xmlTool"],
+                                   ["JSON", "jsonTool"],
+                                   ["REST", "restTool"]]);
     
-    for (i = 0; i < tools.length; i++) {
+    let activeClass = categoryToClass.get(activeCategoryButton.toUpperCase());
-        if (tools[i].classList.contains(activeClass)) {
+    if(activeClass == null) return;
-            tools[i].style.display = "block";
+
-        }
+    for (i = 0; i < toolList.length; i++) {
-        else {
+        if (toolList[i].classList.contains(activeClass))
-            tools[i].style.display = "none";
+            toolList[i].style.display = "block";
-        }
+        else
+            toolList[i].style.display = "none";
     }
 
-    let categories = document.getElementById("menu").children
+    let categoryList = document.getElementById("menu").children;
 
-    for (i = 0; i < categories.length; i++) {
+    for (i = 0; i < categoryList.length; i++) {
-        if (categories[i].innerText == activeCategoryButton) {
+        if (categoryList[i].innerText == activeCategoryButton)
-            categories[i].classList.add("active")
+            categoryList[i].classList.add("active");
-        }
+        else
-        else {
+            categoryList[i].classList.remove("active");
-            categories[i].classList.remove("active")
-        }
     }
+}
+
+/**
+ * Function that changes active tool
+ * 
+ * @function
+ * @name changeTool
+ * @kind function
+ * @param {any} tool
+ * @returns {void}
+ */
+function changeTool(tool) {
+    const url = tools.get(tool);
+    localStorage.setItem("lastPage", tool);
+    document.getElementById("iframe").src = url;
+}
+
+/**
+ * Function that loads last used tool and sets active category accordingly
+ * 
+ * @function
+ * @name loadLastPage
+ * @kind function
+ * @returns {void}
+ */
+function loadLastPage() {
+    const lastPage = localStorage.getItem("lastPage");
+    switch (lastPage) { // XML category is default.
+        case "jsonform":
+            changeActiveTools('JSON');
+            break;
+        case "mock":
+            changeActiveTools('REST');
+            break;
+                    
+    }
+    document.getElementById("iframe").src = tools.get(lastPage);
 }

Frontend/index.html

@@ -4,7 +4,6 @@
 <head>
     <link rel="stylesheet" href="assets/css/frame.css">
     <script src="assets/scripts/common/jquery-3.6.0.slim.min.js"></script>
-    <script src="assets/scripts/dyn_host.js"></script>
     <script src="assets/scripts/frame.js"></script>
     <!-- <link rel="stylesheet" href="common.css"> -->
     <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> 
@@ -22,9 +21,9 @@
         <div id="leftElements">
             <div id="logo"><a href="http://release11.com/"><img src="assets/images/logo_czarne.svg" alt="Release11"></a></div>
             <div id="menu">
-                <a href="#" onclick="changeActiveTools('xmlTool', 'XML')" class="active">XML</a>
+                <a href="#" onclick="changeActiveTools('XML')" class="active">XML</a>
-                <a href="#" onclick="changeActiveTools('jsonTool', 'JSON')">JSON</a>
+                <a href="#" onclick="changeActiveTools('JSON')">JSON</a>
-                <a href="#" onclick="changeActiveTools('restTool', 'REST')">REST</a>
+                <a href="#" onclick="changeActiveTools('REST')">REST</a>
             </div>
         </div>
         
@@ -34,14 +33,12 @@
     <div id="content">
         <div id="leftBar">
             <ul id="toolList">
-                <li class="dynamic restTool toolListRow" style="display: none;">
+                <li class="toolListRow restTool"><a href="#" onclick="changeTool('mock');">REST Mock</a></li>
-                    <a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a>
+                <li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xpath');">XPath</a></li>
-                </li>
+                <li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xslt');">XSLT</a></li>
-                <li class="toolListRow xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
+                <li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xsd');">XSD</a></li>
-                <li class="toolListRow xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
+                <li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xmlform');">XML Formatter</a></li>
-                <li class="toolListRow xmlTool"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
+                <li class="toolListRow jsonTool"><a href="#" onclick="changeTool('jsonform');">JSON Formatter</a></li>
-                <li class="toolListRow xmlTool"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
-                <li class="toolListRow jsonTool" style="display: none;"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
             </ul>
             <div id="copyright">
                 Build: [:VERSION:]<br>
@@ -53,7 +50,7 @@
                 <a href="mailto:bugs@release11.com">Found a bug?</a>
             </div>
         </div>
-        <iframe id="frame" name="iframe" src="./tools/xpath.html" frameborder="0"></iframe>
+        <iframe id="iframe" name="iframe" frameborder="0"></iframe>
     </div>
 
 </body>