From b577c8c166fee29120777c8022bfffa9fe7db3c8 Mon Sep 17 00:00:00 2001
From: jnaulty <jnaulty@gmail.com>
Date: Sun, 30 Aug 2015 21:22:48 -0700
Subject: [PATCH] Fix Issue #41 -- Button Connect/Connected

---
 .gitignore                                   |  2 +-
 cloudbrain/ui/controllers/chartController.js | 24 +++++++++++++++-----
 cloudbrain/ui/index.html                     |  6 ++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index df544f2..33d27ef 100644
--- 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
index 616b707..13a38e9 100644
--- 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
index 1cf24d4..598a08b 100644
--- 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>