From e7cccb2b620ca35a98ab714f4f26e9636dcacc0b Mon Sep 17 00:00:00 2001
From: Jyri Eerola <jyri.eerola@jrd.fi>
Date: Wed, 27 Mar 2019 20:47:23 +0100
Subject: [PATCH] Started toggle rework

Signed-off-by: Jyri Eerola <jyri.eerola@jrd.fi>
---
 index.html | 88 ++++++++++++++++++------------------------------------
 1 file changed, 29 insertions(+), 59 deletions(-)

diff --git a/index.html b/index.html
index 97ce1b3..366c480 100644
--- a/index.html
+++ b/index.html
@@ -11,20 +11,20 @@
       <div class="col-2">
 	<br /><br />
 	<h3>HF enable</h3>
-	<button id="2" class="hf-enable primary">On</button>
+	<button id="2" class="rf-button secondary">Off</button>
       </div>
       <div class="col-2">
 	<div class="row">
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>50/70M</h3>
-	      <button id="0" class="disabled-on-hf-enable row-button">Off</button>
+	      <button id="0" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>spare</h3>
-	      <button id="1" class="disabled-on-hf-enable row-button">Off</button>
+	      <button id="1" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	</div>
@@ -32,37 +32,37 @@
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF1</h3>
-	      <button id="3" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="3" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF2</h3>
-	      <button id="4" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="4" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF3</h3>
-	      <button id="5" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="5" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF4</h3>
-	      <button id="6" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="6" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF5</h3>
-	      <button id="7" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="7" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	  <div class="col-sm">
 	    <div class="card">
 	      <h3>HF6</h3>
-	      <button id="8" class="enabled-on-hf-enable row-button">Off</button>
+	      <button id="8" class="rf-button secondary">Off</button>
 	    </div>
 	  </div>
 	</div>
@@ -73,43 +73,43 @@
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF1</h3>
-	  <button id="9" class="secondary row-button">Off</button>
+	  <button id="9" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF2</h3>
-	  <button id="10" class="secondary row-button">Off</button>
+	  <button id="10" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF3</h3>
-	  <button id="11" class="secondary row-button">Off</button>
+	  <button id="11" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF4</h3>
-	  <button id="12" class="secondary row-button">Off</button>
+	  <button id="12" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF5</h3>
-	  <button id="13" class="secondary row-button">Off</button>
+	  <button id="13" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF6</h3>
-	  <button id="14" class="secondary row-button">Off</button>
+	  <button id="14" class="rf-button secondary">Off</button>
 	</div>
       </div>
       <div class="col-sm">
 	<div class="card">
 	  <h3>VUHF Spare</h3>
-	  <button id="15" class="secondary row-button">Off</button>
+	  <button id="15" class="rf-button secondary">Off</button>
 	</div>
       </div>
     </div>
@@ -123,17 +123,19 @@
       <button id="secret-save">Save</button>
     </footer>
     <script>
-      hf_enable_button = document.getElementsByClassName("hf-enable")[0];
-      enabled_on_hf_enable = document.getElementsByClassName("enabled-on-hf-enable");
-      disabled_on_hf_enable = document.getElementsByClassName("disabled-on-hf-enable");
-      row_buttons = document.getElementsByClassName("row-button");
+      rf_buttons = document.getElementsByClassName("rf-button");
+
+      for(b of rf_buttons) {
+	  b.addEventListener("click", button_toggle);
+      }
       
       function button_toggle(button) {
 	  // toggle colour and text
-	  if(button.classList.contains("secondary")) {
-	      button.textContent = "On";
-	      button.classList.remove("secondary");
-	      button.classList.add("tertiary");
+	  target = button.currentTarget;
+	  if(target.classList.contains("secondary")) {
+	      target.textContent = "On";
+	      target.classList.remove("secondary");
+	      target.classList.add("tertiary");
 
 	      payload = 1 << parseInt(button.id);
 	      
@@ -149,37 +151,12 @@
                   console.log("Set failed:", error);
               });
           } else {
-              button.textContent = "Off";
-              button.classList.add("secondary");
-              button.classList.remove("tertiary");
+              target.textContent = "Off";
+              target.classList.add("secondary");
+              target.classList.remove("tertiary");
           }
       }
       
-      function toggle_hf_enable(e) {
-          // hf is enabled if the button is green
-          hf_enabled = this.classList.contains("tertiary");
-
-          // toggle hf enable button text and color
-          button_toggle(hf_enable_button);
-
-          for(b of enabled_on_hf_enable) {
-              b.disabled = hf_enabled;
-          }
-
-          for(b of disabled_on_hf_enable) {
-              b.disabled = !hf_enabled;
-          }
-      }
-
-      function toggle_in_row(event) {
-          button = event.target;
-          previously_on = button.closest(".row").querySelector(".tertiary");
-          if(previously_on != null) {
-              button_toggle(previously_on);
-          }
-          button_toggle(button);
-      }
-
       function getRemoteState() {
           fetch_url = localStorage.getItem("board-url") + "/GetAll/" + localStorage.getItem("secret");
 	  fetch(fetch_url)
@@ -197,13 +174,6 @@
 	  	  console.log("GetAll failed:", error);
 	      });
       }
-      
-      // add event listeners
-      hf_enable_button.addEventListener("click", toggle_hf_enable, false);
-
-      for(b of row_buttons) {
-	  b.addEventListener("click", toggle_in_row, false);
-      }
 
       // add listener to save secret token to local storage
       password_input = document.getElementById("secret");