From 55f4ae79c08be6fc3a0bb666064f846acb5023a4 Mon Sep 17 00:00:00 2001
From: Alan Bernstein <alan.aaron.bernstein@gmail.com>
Date: Tue, 25 Apr 2017 14:55:22 -0500
Subject: [PATCH] Make nav buttons work

---
 webui/assets/main.js                          | 40 +++++++++++++++++++
 webui/assets/nav-cluster-active.svg           |  1 +
 .../{nav_cluster.svg => nav-cluster.svg}      |  0
 ...nav_console.svg => nav-console-active.svg} |  0
 webui/assets/nav-console.svg                  |  1 +
 webui/assets/nav-documentation-active.svg     |  1 +
 ...ocumentation.svg => nav-documentation.svg} |  0
 webui/assets/style.css                        | 15 ++++++-
 webui/index.html                              | 28 ++++++++-----
 9 files changed, 76 insertions(+), 10 deletions(-)
 create mode 100644 webui/assets/nav-cluster-active.svg
 rename webui/assets/{nav_cluster.svg => nav-cluster.svg} (100%)
 rename webui/assets/{nav_console.svg => nav-console-active.svg} (100%)
 create mode 100644 webui/assets/nav-console.svg
 create mode 100644 webui/assets/nav-documentation-active.svg
 rename webui/assets/{nav_documentation.svg => nav-documentation.svg} (100%)

diff --git a/webui/assets/main.js b/webui/assets/main.js
index dde813a40..b2f9cac0d 100644
--- a/webui/assets/main.js
+++ b/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')
diff --git a/webui/assets/nav-cluster-active.svg b/webui/assets/nav-cluster-active.svg
new file mode 100644
index 000000000..871d6f2af
--- /dev/null
+++ b/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>
diff --git a/webui/assets/nav_cluster.svg b/webui/assets/nav-cluster.svg
similarity index 100%
rename from webui/assets/nav_cluster.svg
rename to webui/assets/nav-cluster.svg
diff --git a/webui/assets/nav_console.svg b/webui/assets/nav-console-active.svg
similarity index 100%
rename from webui/assets/nav_console.svg
rename to webui/assets/nav-console-active.svg
diff --git a/webui/assets/nav-console.svg b/webui/assets/nav-console.svg
new file mode 100644
index 000000000..e9d2a9569
--- /dev/null
+++ b/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>
diff --git a/webui/assets/nav-documentation-active.svg b/webui/assets/nav-documentation-active.svg
new file mode 100644
index 000000000..b6e994980
--- /dev/null
+++ b/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>
diff --git a/webui/assets/nav_documentation.svg b/webui/assets/nav-documentation.svg
similarity index 100%
rename from webui/assets/nav_documentation.svg
rename to webui/assets/nav-documentation.svg
diff --git a/webui/assets/style.css b/webui/assets/style.css
index 68240ad32..15d50a6f8 100644
--- a/webui/assets/style.css
+++ b/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;
 }
diff --git a/webui/index.html b/webui/index.html
index c8c8aa2a1..25ed7e055 100644
--- a/webui/index.html
+++ b/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>