Merge pull request #52 from jnaulty/ui-button-fix

Fix Issue #41 -- Button Connect/Connected
marionleborgne · Aug 31, 2015 · ea8c87d · ea8c87d
2 parents 213b139 + b577c8c
commit ea8c87d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,7 @@ cloudbrain/subscribers/bin/osx
 cloudbrain/subscribers/bin/ubuntu
 cloudbrain/publishers/bin/osx
 cloudbrain/publishers/bin/ubuntu
-dist/
+/dist/
 build/
 cloudbrain.egg-info/
 cloudbrain/datastore/cassandra_schema.cql

diff --git a/cloudbrain/ui/controllers/chartController.js b/cloudbrain/ui/controllers/chartController.js
@@ -14,12 +14,6 @@ function   ( $scope , $http , $interval , $log , apiService , dataService ) {
       deviceNames: [],
     };
 
-    $scope.changeColor = function () {
-        var color_val = 'rgba(255, 255, 255, 0.8)';
-        $scope.chartPolar.options.chart.backgroundColor = color_val;
-        $scope.chartBar.options.chart.backgroundColor = color_val;
-      };
-
 
     apiService.refreshDeviceIds().then(function(response) {
       angular.copy(response.data, $scope.model.deviceIds);
@@ -56,8 +50,26 @@ function   ( $scope , $http , $interval , $log , apiService , dataService ) {
       //$scope.url = 'http://mock.cloudbrain.rocks/data?device_name=openbci&metric=eeg&device_id=marion&callback=JSON_CALLBACK';
       $scope.showClick = false;
       $scope.chartMuse = false;
+      $scope.button = 'Connect';
+      $scope.disableButton = function () {
+        if ($scope.deviceIdForm.$invalid || $scope.deviceIdForm.$pristine) {
+            return true;
+        } else if ($scope.deviceIdForm.$valid && $scope.deviceIdForm.$dirty) {
+            $scope.button = 'Connect';
+            return false
+        } else {
+          $scope.button = 'Connected';
+          return false
+        }
+      }
+
       $scope.getData = function (device, url) {
 
+        //Button UI Logic
+        $scope.deviceIdForm.$setPristine();
+        $scope.button = 'Connected';
+
+
         dataService.startPowerBand(device.name, device.id, function(data) {
           updatePowerBandGraph('chartPolar', data);
           updatePowerBandGraph('chartBar', data);

diff --git a/cloudbrain/ui/index.html b/cloudbrain/ui/index.html
@@ -26,17 +26,17 @@
         <ng-form name="deviceIdForm" role="form">
 
         <div  class="nav_button navbar-form navbar-right">
-            <button type="submit" ng-click="getData(device)" class="btn btn-success">Connect</button>
+            <button type="submit" ng-click="getData(device)" class="btn btn-success" ng-disabled="disableButton()">{{button}}</button>
           </div>
           <div class="navbar-form navbar-right" style="padding-right: 10px;"><!--DeviceName-->
-            <select ng-model='device.name' id="deviceName" class="form-control">
+            <select ng-model='device.name' id="deviceName" name="deviceName" class="form-control" required>
               <option selected="selected" value="">Select Device Name</option>
               <option ng-repeat="deviceName in model.deviceNames">{{deviceName}}</option>
             </select>
           </div><!--DeviceName -->
           <div class="navbar-form navbar-right"><!--DeviceId-->
             <div class="form-group">
-              <select ng-model='device.id' id="registeredDevices" class="form-control">
+              <select ng-model='device.id' name="registeredDevices" id="registeredDevices" class="form-control" required>
               <option selected="selected" value="">Select Device ID</option>
               <option ng-repeat="deviceId in model.deviceIds">{{deviceId}}</option>
             </select>