Make choice handling more generic

Author: Deni90

firmware/data/web_server/index.html

@@ -105,23 +105,23 @@ <h3>Sleep after</h3>
 	<div class="tabcontent" id="tabBacklight">
 		<h2>Backlight configuration</h2>
 		<div class="field-container">
-			<label for="ssid">Backlight type:</label>
+			<label for="backlightType">Backlight type:</label>
 			<div class="choice-container">
-				<div class="choice" onclick="selectBacklightChoice(event, 'radioChoiceOff')">
-					<input id="radioChoiceOff" type="radio" name="backlightType" />
-					<label for="radioChoiceOff">Off</label>
+				<div class="choice" onclick="selectBacklightChoice(event)" name="backlightTypeChoice" value="0">
+					<input id="backlightTypeOff" type="radio"/>
+					<label for="backlightTypeOff">Off</label>
 				</div>
-				<div class="choice" onclick="selectBacklightChoice(event, 'radioChoiceOn')">
-					<input id="radioChoiceOn" type="radio" value="1" />
-					<label for="radioChoiceOn">On</label>
+				<div class="choice" onclick="selectBacklightChoice(event)" name="backlightTypeChoice" value="1">
+					<input id="backlightTypeOn" type="radio"/>
+					<label for="backlightTypeOn">On</label>
 				</div>
-				<div class="choice" onclick="selectBacklightChoice(event, 'radioChoiceFade')">
-					<input id="radioChoiceFade" type="radio" value="2" />
-					<label for="radioChoiceFade">Fade</label>
+				<div class="choice" onclick="selectBacklightChoice(event)" name="backlightTypeChoice" value="2">
+					<input id="backlightTypeFade" type="radio"/>
+					<label for="backlightTypeFade">Fade</label>
 				</div>
-				<div class="choice" onclick="selectBacklightChoice(event, 'radioChoicePulse')">
-					<input id="radioChoicePulse" type="radio" value="3" />
-					<label for="radioChoicePulse">Pulse</label>
+				<div class="choice" onclick="selectBacklightChoice(event)" name="backlightTypeChoice" value="3">
+					<input id="backlightTypePulse" type="radio"/>
+					<label for="backlightTypePulse">Pulse</label>
 				</div>
 			</div>
 		</div>

firmware/data/web_server/server.js

@@ -260,8 +260,7 @@ function getLedInfo() {
         })
         .then(data => {
             ledInfo = new LedInfo.Builder().fromJson(data);
-            choices = document.getElementsByClassName("choice");
-            choices[ledInfo.state].className += " active";
+            selectRadioChoiceByName("backlightTypeChoice", ledInfo.state);
             var hsv = RGBtoHSV(ledInfo.r, ledInfo.g, ledInfo.b);
             document.getElementById("sliderHue").value = hsv.h * 360;
             document.getElementById("sliderSaturation").value = hsv.s * 100;
@@ -363,14 +362,29 @@ function setWifiInfo() {
         });
 }
 
-function selectBacklightChoice(evt, choiceName) {
-    var i, choiceContent, choices;
-    choices = document.getElementsByClassName("choice");
+function selectRadioChoiceByName(name, value) {
+    let choices = document.getElementsByName(name);
     for (i = 0; i < choices.length; i++) {
+        if(choices[i].getAttribute("value") == value) {
+            choices[i].className += " active";
+            break;
+        }
+    }
+}
+
+function selectRadioChoiceByEvent(evt) {
+    var i, choices;
+    choices = document.getElementsByName(evt.currentTarget.getAttribute("name"));
+    for (i = 0; i < choices.length; i++) {
+
         choices[i].className = choices[i].className.replace(" active", "");
     }
     evt.currentTarget.className += " active";
-    ledInfo.state = document.getElementById(choiceName).value;
+    return evt.currentTarget.getAttribute("value");
+}
+
+function selectBacklightChoice(evt) {
+    ledInfo.state = selectRadioChoiceByEvent(evt);
 }
 
 function updateSleepBefore() {