add fut091 to modes, make modes a dropdown

web/src/css/style.css

@@ -16,6 +16,7 @@ label:not(.error) .error-info { display: none; }
 #content .dropdown-menu li { display: block; }
 #traffic-sniff { display: none; }
 #sniffed-traffic { max-height: 50em; overflow-y: auto; }
+.dropdown label { display: inline-block; }
 .navbar { background-color: rgba(41,41,45,.9) !important; border-radius: 0 }
 .navbar-brand, .navbar-brand:hover { color: white; }
 .btn-secondary {

web/src/index.html

@@ -113,9 +113,9 @@
       </div>
 
       <div class="col-sm-4">
-        <label for="mode">Mode</label>
+        <label for="mode">Remote Type</label>
 
-        <div class="btn-group" id="mode" data-toggle="buttons">
+        <!-- <div class="btn-group" id="mode" data-toggle="buttons">
           <label class="btn btn-secondary active">
             <input type="radio" name="mode" autocomplete="off" data-value="rgbw" checked> RGBW
           </label>
@@ -131,6 +131,35 @@
           <label class="btn btn-secondary">
             <input type="radio" name="mode" autocomplete="off" data-value="fut089"> FUT089
           </label>
+          <label class="btn btn-secondary">
+            <input type="radio" name="mode" autocomplete="off" data-value="fut091"> FUT091
+          </label>
+        </div> -->
+        <div class="dropdown">
+          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+            <label>Mode</label>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" id="mode">
+            <li data-value="rgbw">
+              <a href="#">RGBW</a>
+            </li>
+            <li data-value="cct">
+              <a href="#">CCT</a>
+            </li>
+            <li data-value="rgb_cct" class="active">
+              <a href="#">RGB+CCT</a>
+            </li>
+            <li data-value="rgb">
+              <a href="#">RGB</a>
+            </li>
+            <li data-value="fut089">
+              <a href="#">FUT089 / B8</a>
+            </li>
+            <li data-value="fut091">
+              <a href="#">FUT091 / B2</a>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -171,7 +200,7 @@
       </div>
     </div>
 
-    <div class="mode-option" data-for="cct,rgb_cct,fut089">
+    <div class="mode-option" data-for="cct,rgb_cct,fut089,fut091">
       <div class="row">
         <div class="col-sm-12">
           <h5>Color Temperature</h5>

web/src/js/script.js

@@ -288,7 +288,7 @@ var activeUrl = function() {
 }
 
 var getCurrentMode = function() {
-  return $('input[name="mode"]:checked').data('value');
+  return $('#mode li.active').data('value');
 };
 
 var updateGroup = _.throttle(
@@ -476,7 +476,10 @@ var deviceIdError = function(v) {
 };
 
 var updateModeOptions = function() {
-  var currentMode = getCurrentMode();
+  var currentMode = getCurrentMode()
+    , modeLabel = $('#mode li[data-value="' + currentMode + '"] a').html();
+
+  $('label', $('#mode').closest('.dropdown')).html(modeLabel);
 
   $('.mode-option').map(function() {
     if ($(this).data('for').split(',').includes(currentMode)) {
@@ -720,7 +723,14 @@ $(function() {
     $('#gateway-server-configs').append(gatewayServerRow('', ''));
   });
 
-  $('#mode').change(updateModeOptions);
+  $('#mode li').click(function(e) {
+    e.preventDefault();
+
+    $('li', $(this).parent()).removeClass('active');
+    $(this).addClass('active');
+
+    updateModeOptions.bind(this)();
+  });
 
   $('body').on('click', '.remove-gateway-server', function() {
     $(this).closest('tr').remove();