Make nav buttons work

webui/assets/main.js

@@ -175,6 +175,46 @@ class REPL {
 
 }
 
+function setNav(e) {
+  // toggle the nav buttons
+  document.getElementsByClassName("nav-active")[0].classList.remove("nav-active")
+  e.classList.add("nav-active")
+
+  // toggle the main interface content divs
+  document.getElementsByClassName("interface-active")[0].classList.remove("interface-active")
+  name = e.id.substring(4)
+  interface_el = document.getElementById('interface-' + name)
+  interface_el.classList.add("interface-active")
+
+  // toggle svgs
+  // show all inactive images
+  inactive_images = document.getElementsByClassName("nav-image")
+  for(var i=0; i<inactive_images.length; i++) {
+    inactive_images[i].classList.add("nav-image-visible")
+  }
+  // hide all active images
+  active_images = document.getElementsByClassName("nav-image-active")
+  for(var i=0; i<active_images.length; i++) {
+    active_images[i].classList.remove("nav-image-visible")
+  }
+
+  for(var i=0; i<e.childNodes.length; i++) {
+    var node = e.childNodes[i]
+    if(node.tagName != "IMG") {
+      continue
+    }
+    // hide inactive image on clicked element
+    if(node.classList.contains("nav-image")) {
+      node.classList.remove("nav-image-visible")
+    }
+    // show active image on clicked element
+    if(node.classList.contains("nav-image-active")) {
+      node.classList.add("nav-image-visible")
+    }
+  }
+
+}
+
 
 const input = document.getElementById('query')
 const output = document.getElementById('outputs')

webui/assets/nav-cluster-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.75 36.67"><defs><style>.cls-1{fill:#1db598;}.cls-2{fill:none;stroke:#3c5f8d;stroke-miterlimit:10;stroke-width:5px;}</style></defs><title>nav_cluster_1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="55.14" cy="18.24" r="9.61"/><circle class="cls-1" cx="18.33" cy="18.33" r="9.61"/><circle class="cls-1" cx="91.14" cy="18.24" r="9.61"/><circle class="cls-2" cx="18.33" cy="18.33" r="15.83"/></g></g></svg>

webui/assets/nav-console.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.47 48.95"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#1db598;}</style></defs><title>nav_console</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="3" y="3" width="72.47" height="42.95"/><circle class="cls-2" cx="39.25" cy="25.92" r="9.61"/></g></g></svg>

webui/assets/nav-documentation-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 44.5"><defs><style>.cls-1{fill:none;stroke:#3c5f8d;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#1db598;}</style></defs><title>documentation</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" y1="2.5" x2="70" y2="2.5"/><line class="cls-1" y1="20" x2="70" y2="20"/><line class="cls-1" y1="38.5" x2="52.82" y2="38.5"/><circle class="cls-2" cx="63.5" cy="38.5" r="6"/></g></g></svg>

webui/assets/style.css

@@ -123,16 +123,29 @@ em{
   color: #1db598;
 }
 
+.nav-image,
+.nav-image-active{
+  display: none;
+}
+
+.nav-image-visible{
+  display: flex;
+}
+
 
 
 .interface{
-  display: flex;
+  display: none;
   flex: 1;
   flex-direction: column;
   align-items: center;
   background: #f2f7f9;
 }
 
+.interface-active{
+  display: flex;
+}
+
 .query{
     margin-bottom: 30px;
 }

webui/index.html

@@ -15,20 +15,23 @@
   </div>
   <div class="container">
     <div class="nav">
-      <div class="nav-item nav-active">
-        <img style='margin-bottom:10px;' height='40px' src="/assets/nav_console_active.svg" alt="">
+      <div class="nav-item nav-active" id="nav-console" onclick="setNav(this)">
+        <img style='margin-bottom:10px;' height='40px' src="/assets/nav-console.svg" alt="" class="nav-image">
+        <img style='margin-bottom:10px;' height='40px' src="/assets/nav-console-active.svg" alt="" class="nav-image nav-image-active nav-image-visible">
         Console
       </div>
-      <div class="nav-item">
-        <img style='margin-bottom:10px;' height='20px' src="/assets/nav_cluster.svg" alt="">
+      <div class="nav-item" id="nav-cluster" onclick="setNav(this)">
+        <img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster.svg" alt="" class="nav-image nav-image-visible">
+        <img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster-active.svg" alt="" class="nav-image nav-image-active">
         Cluster Admin
       </div>
-      <div class="nav-item">
-        <img style='margin-bottom:10px;' height='30px' src="/assets/nav_documentation.svg" alt="">
+      <div class="nav-item" id="nav-documentation" onclick="setNav(this)">
+        <img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation.svg" alt="" class="nav-image nav-image-visible">
+        <img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation-active.svg" alt="" class="nav-image nav-image-active">
         Documentation
       </div>
     </div>
-    <div class="interface">
+    <div class="interface interface-active" id="interface-console">
 
       <div class="query">
         <h2>Query</h2>
@@ -54,10 +57,17 @@
 
       </div>
 
-
-
       </div>
 
+      <div class="interface" id="interface-cluster">
+      cluster stats!
+      </div>
+
+      <div class="interface" id="interface-documentation">
+      docs!
+      </div>
+
+
     </div>
   </div>
   <script type="text/javascript" src="/assets/main.js"></script>