GUI -- ButtonService - Fixed radio buttons selection bug.

Change-Id: Ibdf77e231ce58d4863b11daecb0b8106f8e979a6

web/gui/src/main/webapp/app/fw/widget/button.css

@@ -28,54 +28,66 @@
 .button,
 .toggleButton,
 .radioSet,
+.radioButton,
 .separator {
     display: inline-block;
 }
 .button,
-.toggleButton {
+.toggleButton,
+.radioSet {
     padding: 0 4px 0 4px;
 }
-.radioSet .toggleButton {
-    padding: 0 0 0 4px;
+.radioButton {
+    padding: 0 4px 0 0;
 }
 
 .button svg.embeddedIcon,
-.toggleButton svg.embeddedIcon {
+.toggleButton svg.embeddedIcon,
+.radioButton svg.embeddedIcon {
     cursor: pointer;
 }
 .button svg.embeddedIcon .icon rect,
-.toggleButton svg.embeddedIcon .icon rect {
+.toggleButton svg.embeddedIcon .icon rect,
+.radioButton svg.embeddedIcon .icon rect{
     stroke: none;
 }
 
 /* Selected button color */
 .light .button svg.embeddedIcon,
-.light .toggleButton.selected svg.embeddedIcon {
+.light .toggleButton.selected svg.embeddedIcon,
+.light .radioButton.selected svg.embeddedIcon {
     fill: #838383;
 }
 .light .button svg.embeddedIcon .glyph,
-.light .toggleButton.selected svg.embeddedIcon .glyph {
+.light .toggleButton.selected svg.embeddedIcon .glyph,
+.light .radioButton.selected svg.embeddedIcon .glyph {
     fill: white;
 }
 .dark .button svg.embeddedIcon,
-.dark .toggleButton.selected svg.embeddedIcon {
+.dark .toggleButton.selected svg.embeddedIcon,
+.dark .radioButton.selected svg.embeddedIcon{
     fill: #151515;
 }
 .dark .button svg.embeddedIcon .glyph,
-.dark .toggleButton.selected svg.embeddedIcon .glyph {
+.dark .toggleButton.selected svg.embeddedIcon .glyph,
+.dark .radioButton.selected svg.embeddedIcon .glyph {
     fill: #B2B2B2;
 }
 
 /* Unselected button color */
-.light .toggleButton svg.embeddedIcon {
+.light .toggleButton svg.embeddedIcon,
+.light .radioButton svg.embeddedIcon {
     fill: #eee;
 }
-.light .toggleButton svg.embeddedIcon .glyph {
+.light .toggleButton svg.embeddedIcon .glyph,
+.light .radioButton svg.embeddedIcon .glyph {
     fill: #bbb;
 }
-.dark .toggleButton svg.embeddedIcon {
+.dark .toggleButton svg.embeddedIcon,
+.dark .radioButton svg.embeddedIcon {
     fill: #303030;
 }
-.dark .toggleButton svg.embeddedIcon .glyph {
+.dark .toggleButton svg.embeddedIcon .glyph,
+.dark .radioButton svg.embeddedIcon .glyph {
     fill: #565656;
 }

web/gui/src/main/webapp/app/fw/widget/button.js

@@ -85,7 +85,6 @@
         }
     }
 
-    // TODO: fix radio button on click selecting functionality
     function radioSet(div, id, rset) {
         if (!div) {
             $log.warn('Radio buttons cannot append to div');
@@ -100,34 +99,64 @@
             return null;
         }
         var rDiv = div.append('div').classed('radioSet', true),
-            sel = 0,
-            rads = [];
+            rads = [],
+            sel;
+
+        function _selected() {
+            var curr = d3.select(this),
+                currId = curr.attr('id');
+
+            // I have it going by id's because I couldn't think of a way
+            // to get the radio button's index from the div element
+                // We could look at the end of the radio button id for its number
+                // but I didn't know how to get the end of the string's number
+            if (sel !== currId) {
+                var selIndex = _getIndex(),
+                    currIndex = _getIndex(currId);
+                rads[selIndex].el.classed('selected', false);
+                curr.classed('selected', true);
+                rads[currIndex].cb();
+                sel = currId;
+            }
+        }
+
+        // given the id, will get the index of element
+        // without the id, will get the index of sel
+        function _getIndex(id) {
+            if (!id) {
+                for (var i = 0; i < rads.length; i++) {
+                    if (rads[i].id === sel) { return i; }
+                }
+            } else {
+                for (var j = 0; j < rads.length; j++) {
+                    if (rads[j].id === id) { return j; }
+                }
+            }
+        }
 
         rset.forEach(function (btn, index) {
             var rid = {id: id + '-' + index},
                 rbtn = angular.extend({}, btn, rid),
                 istate = (index === 0),
-                rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
-                    rbtn.cb, rbtn.tooltip);
+                rBtnDiv = createDiv(rDiv, 'radioButton', rbtn.id);
 
-            rtog.el.classed('radioButton', true);
-            rads.push(rtog);
+            if (istate) { rBtnDiv.classed('selected', true); }
+            is.loadIcon(rBtnDiv, rbtn.gid, btnSize, true);
+            rbtn.el = rBtnDiv;
+            rbtn.cb = fs.isF(rbtn.cb) || noop;
+
+            rBtnDiv.on('click', _selected);
+
+            rads.push(rbtn);
         });
+        sel = rads[0].id;
+        rads[0].cb();
 
         return {
             rads: rads,
             selected: function (i) {
-                if (i === undefined) { return sel; }
-                else if (i < 0 || i >= rads.length) {
-                    $log.error('Cannot select radio button of index ' + i);
-                }
-                else {
-                    if (i !== sel) {
-                        rads[sel].toggle(false);
-                        rads[i].toggle(true);
-                        sel = i;
-                    }
-                }
+                if (i === undefined) { _getIndex(); }
+                else { _selected(); }
             }
         }
     }

web/gui/src/main/webapp/app/view/sample/sample.js

@@ -21,14 +21,26 @@
 (function () {
     'use strict';
     var $log, tbs, flash,
-        sampleDiv;
+        togFnDiv, radFnP;
 
     function btnFn() {
         flash.flash('Hi there friends!');
     }
     function togFn(display) {
-        if (display) { sampleDiv.style('display', 'block'); }
-        else { sampleDiv.style('display', 'none'); }
+        if (display) { togFnDiv.style('display', 'block'); }
+        else { togFnDiv.style('display', 'none'); }
+    }
+    function checkFn() {
+        radFnP.text('Checkmark radio button active.')
+            .style('color', 'green');
+    }
+    function xMarkFn() {
+        radFnP.text('Xmark radio button active.')
+            .style('color', 'red');
+    }
+    function birdFn() {
+        radFnP.text('Bird radio button active.')
+            .style('color', '#369');
     }
 
     angular.module('ovSample', ['onosUtil'])
@@ -41,7 +53,7 @@
 
                 self.message = 'Hey there folks!';
 
-                sampleDiv = d3.select('#ov-sample')
+                togFnDiv = d3.select('#ov-sample')
                     .append('div')
                     .text('Look at me!')
                     .style({
@@ -49,14 +61,19 @@
                         'color': 'rgb(204, 89, 81)',
                         'font-size': '20pt'
                     });
+                radFnP = d3.select('#ov-sample')
+                    .append('p')
+                    .style('font-size', '16pt');
 
                 var toolbar = tbs.createToolbar('sample'),
-                    rset = [{ gid: 'switch', cb: function () {}},
-                        { gid: 'bird', cb: function () {}}];
-                toolbar.addButton('hello-btn', 'crown', btnFn);
-                toolbar.addToggle('sample-tog', 'chain', false, togFn);
+                    rset = [{ gid: 'checkMark', cb: checkFn },
+                        { gid: 'xMark', cb: xMarkFn },
+                        { gid: 'bird', cb: birdFn }
+                    ];
+                toolbar.addButton('hello-button', 'crown', btnFn);
+                toolbar.addToggle('look-toggle', 'chain', false, togFn);
                 toolbar.addSeparator();
-                toolbar.addRadioSet('some-rad', rset);
+                toolbar.addRadioSet('something-radio', rset);
                 toolbar.hide();
 
              $log.log('OvSampleCtrl has been created');