From cfc97d433357f3eacd067e0e1a6a5f8fd3c82308 Mon Sep 17 00:00:00 2001
From: penfold42 <penfold42@users.noreply.github.com>
Date: Sun, 6 Jan 2019 20:01:02 +1100
Subject: [PATCH] html cleanups

---
 html/index.html | 27 +++++++++++++--------------
 html/script.js  | 19 +++++++++++++++----
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/html/index.html b/html/index.html
index a156e66e1..09dd0284f 100644
--- a/html/index.html
+++ b/html/index.html
@@ -154,28 +154,27 @@
               <label class="control-label col-sm-2" for="p_count">Physical Pixels</label>
               <div class="col-sm-10"><input type="text" class="form-control" id="p_count" name="p_count" placeholder="Enter number of pixels" onchange="refreshPixel()"></div>
             </div>
-            <div class="form-group">
-              <label class="control-label col-sm-2" for="p_groupMode">Output Grouping</label>
-              <div class="col-sm-10">
-                <select class="form-control" id="p_groupMode" name="p_groupMode"></select>
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="control-label col-sm-2" for="p_groupsize">Group Size</label>
-              <div class="col-sm-10"><input type="text" class="form-control" id="p_groupsize" name="p_groupsize" placeholder="Group size of pixels" onchange="refreshPixel()"></div>
-            </div>
+
             <div class="form-group">
               <label class="control-label col-sm-2" for="p_type">Pixel Type</label>
-              <div class="col-sm-10">
+              <div class="col-sm-3">
                 <select class="form-control" id="p_type" name="p_type" onclick="refreshPixel()"></select>
               </div>
-            </div>
-            <div class="form-group">
               <label class="control-label col-sm-2" for="p_color">Color Order</label>
-              <div class="col-sm-10">
+              <div class="col-sm-3">
                 <select class="form-control" id="p_color" name="p_color"></select>
               </div>
             </div>
+
+            <div class="form-group" id="o_grouping">
+              <label class="control-label col-sm-2" for="p_groupMode">Output Grouping</label>
+              <div class="col-sm-3">
+                <select class="form-control" id="p_groupMode" name="p_groupMode"></select>
+              </div>
+              <label class="control-label col-sm-2" for="p_groupSize">Group Size</label>
+              <div class="col-sm-3"><input type="text" class="form-control" id="p_groupSize" name="p_groupSize" placeholder="Group size of pixels" onchange="refreshPixel()"></div>
+            </div>
+
             <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                 <div class="checkbox"><label><input type="checkbox" id="p_gamma" name="p_gamma"> Gamma Correction</label></div>
diff --git a/html/script.js b/html/script.js
index 369fe6621..8dff5cbba 100644
--- a/html/script.js
+++ b/html/script.js
@@ -157,12 +157,23 @@ $(function() {
        }
     });
 
+    // Group type toggles
+    $('#p_groupMode').change(function() {
+        if ($('select[name=p_groupMode]').val() == '0')
+            $('#p_groupSize').prop('disabled', true);
+        else
+            $('#p_groupSize').prop('disabled', false);
+    });
+
     // Pixel type toggles
     $('#p_type').change(function() {
-        if ($('select[name_type]').val() == '1')
+        if ($('select[name=p_type]').val() == '1') {
             $('#p_color').prop('disabled', true);
-        else
+            $('#o_grouping').addClass('hidden');
+        } else {
             $('#p_color').prop('disabled', false);
+            $('#o_grouping').removeClass('hidden');
+        }
     });
 
     // Serial protocol toggles
@@ -527,10 +538,10 @@ function getConfig(data) {
         mode = 'pixel';
         $('#o_pixel').removeClass('hidden');
         $('#p_count').val(config.e131.channel_count / 3);
-        $('#p_groupsize').val(config.pixel.groupSize);
         $('#p_type').val(config.pixel.type);
         $('#p_color').val(config.pixel.color);
         $('#p_groupMode').val(config.pixel.groupMode);
+        $('#p_groupSize').val(config.pixel.groupSize);
         $('#p_gamma').prop('checked', config.pixel.gamma);
         $('#p_gammaVal').val(config.pixel.gammaVal);
         $('#p_briteVal').val(config.pixel.briteVal);
@@ -725,8 +736,8 @@ function submitConfig() {
             'pixel': {
                 'type': parseInt($('#p_type').val()),
                 'color': parseInt($('#p_color').val()),
-                'groupSize': parseInt($('#p_groupsize').val()),
                 'groupMode': parseInt($('#p_groupMode').val()),
+                'groupSize': parseInt($('#p_groupSize').val()),
                 'gamma': $('#p_gamma').prop('checked'),
                 'gammaVal': parseFloat($('#p_gammaVal').val()),
                 'briteVal': parseFloat($('#p_briteVal').val())