From bb30effea5c71bb77d976711aefe5b7f0324160e Mon Sep 17 00:00:00 2001
From: ray310 <60367095+Ray310@users.noreply.github.com>
Date: Mon, 16 Mar 2020 16:11:10 -0400
Subject: [PATCH] Fixed undesired behavior on "Add or Modify Sensors" page
 where submitting new sensor (leading to post and reset view) would reset view

---
 mercury/static/mercury/js/sensor.js | 46 ++++++++++++++++++-----------
 mercury/templates/sensor.html       |  6 ++--
 2 files changed, 31 insertions(+), 21 deletions(-)
diff --git a/mercury/static/mercury/js/sensor.js b/mercury/static/mercury/js/sensor.js
index 8cc2bc7e..b19b8260 100644
--- a/mercury/static/mercury/js/sensor.js
+++ b/mercury/static/mercury/js/sensor.js
@@ -48,28 +48,38 @@ add_field_button.onclick = function() {
   addRow();
 }
 
-function displayCurrentSensors() {
+/*
+selectView displays the correct view of the "Add or Modify Sensors" page
+-the default view is to show existing sensors
+-if a user submits a new sensor which posts and reloads page, then the add new sensor view should remain
+*/
+function selectView() {
   var newSensorDiv = document.getElementById("add-new-sensor");
   var existingSensorDiv = document.getElementById("existing-sensors");
   var modifyButton = document.getElementById("current-sensor-btn");
   var newButton = document.getElementById("add-sensor-btn");
-  if (existingSensorDiv.style.display === "none") {
-    newSensorDiv.style.display = "none";
-    existingSensorDiv.style.display = 'block';
-    modifyButton.style.backgroundColor = 'var(--green)';
-    newButton.style.backgroundColor = 'var(--light-accent)';
-  }
+    if (sessionStorage.getItem('viewing') == 'addingNew'){
+        newSensorDiv.style.display = "block";
+        existingSensorDiv.style.display = 'none';
+
+        modifyButton.style.backgroundColor = 'var(--light-accent)';
+        newButton.style.backgroundColor = 'var(--green)';
+    }
+    else {
+        newSensorDiv.style.display = "none";
+        existingSensorDiv.style.display = 'block';
+
+        modifyButton.style.backgroundColor = 'var(--green)';
+        newButton.style.backgroundColor = 'var(--light-accent)';
+    }
+}
+
+function displayCurrentSensors() {
+  sessionStorage.setItem('viewing', 'existing');
+  selectView()
 }
 
 function displayAddNewSensor() {
-  var newSensorDiv = document.getElementById("add-new-sensor");
-  var existingSensorDiv = document.getElementById("existing-sensors");
-  var modifyButton = document.getElementById("current-sensor-btn");
-  var newButton = document.getElementById("add-sensor-btn");
-  if (newSensorDiv.style.display === "none") {
-    newSensorDiv.style.display = "block";
-    existingSensorDiv.style.display = 'none';
-    modifyButton.style.backgroundColor = 'var(--light-accent)';
-    newButton.style.backgroundColor = 'var(--green)';
-  }
-}
\ No newline at end of file
+  sessionStorage.setItem('viewing', 'addingNew');
+  selectView()
+}
diff --git a/mercury/templates/sensor.html b/mercury/templates/sensor.html
index 260fb282..d1b9f291 100644
--- a/mercury/templates/sensor.html
+++ b/mercury/templates/sensor.html
@@ -10,7 +10,7 @@
     <script src="{% static "mercury/js/sensor.js" %}" defer></script>
 </head>
 
-<body>
+<body onload="selectView();">
     {% include 'sidebar.html' %}
     <div id="grafana-base"> <!-- app default background -->
         <div class="panel">
@@ -23,7 +23,7 @@ <h1> Add or Modify Sensors </h1>
         <div class="panel">
             <nav>
                 <ul>
-                    <li><button onclick="displayCurrentSensors()" id="current-sensor-btn" class="grafana-btn" style="background-color:var(--green);"> Modify Current Sensors </button></li>
+                    <li><button onclick="displayCurrentSensors()" id="current-sensor-btn" class="grafana-btn"> Modify Current Sensors </button></li>
                     <li><button onclick="displayAddNewSensor()" id="add-sensor-btn" class="grafana-btn"> Add New Sensor </button></li>
                 </ul>
             </nav>
@@ -78,7 +78,7 @@ <h4 class="inline-block-child"><u>Field Unit</u></h4>
             {% endif%}
         </div> <!-- end existing sensors -->
 
-        <div class="panel" id="add-new-sensor" style="display:none;">
+        <div class="panel" id="add-new-sensor">
             <h2>Add a New Sensor</h2>
             <br>
 
