Added Edit Miner functionality

brandon-barker · Feb 8, 2014 · e3a5cb3 · e3a5cb3
1 parent e03fc12
commit e3a5cb3
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 deletions.
diff --git a/app/scripts/controllers/MinerCtrl.js b/app/scripts/controllers/MinerCtrl.js
@@ -26,6 +26,20 @@ angular.module('nodeminerApp')
       $scope.save($scope.miners);
     };
 
+    $scope.allowEdit = function (miner) {
+      miner.allowEdit = true;
+      miner.showDetails = true;
+    };
+
+    $scope.disableEdit = function (miner) {
+      miner.allowEdit = false;
+    };
+
+    $scope.saveEdit = function (miner) {
+      $scope.disableEdit(miner);
+      $scope.save($scope.miners);
+    };
+
     $scope.save = function (miners) {
       MinerSvc.save(miners);
     };

diff --git a/app/views/index.html b/app/views/index.html
@@ -11,6 +11,7 @@
     <!-- build:css(app) styles/vendor.css -->
     <!-- bower:css -->
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="bower_components/toastr/toastr.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css({.tmp,app}) styles/main.css -->
@@ -46,6 +47,7 @@
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
+    <script src="bower_components/lodash/dist/lodash.compat.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

diff --git a/app/views/partials/miners.html b/app/views/partials/miners.html
@@ -62,31 +62,59 @@ <h2>Miners
                                                                              ng-class="{'fa-chevron-up':miner.showDetails == true, 'fa-chevron-down':miner.showDetails == false}"></i>&nbsp;<strong>{{miner.name}}</strong></span>
 
               <div class="pull-right">
-                <button class="btn btn-default btn-xs" ng-click="edit(miner)"><i class="fa fa-pencil"></i>&nbsp;Edit</button>
-                <button class="btn btn-default btn-xs" ng-click="delete(miner)"><i class="fa fa-minus-circle"></i>&nbsp;Delete</button>
+                <button class="btn btn-default btn-xs" ng-click="allowEdit(miner)"><i class="fa fa-pencil"></i>&nbsp;Edit
+                </button>
+                <button class="btn btn-default btn-xs" ng-click="delete(miner)"><i class="fa fa-minus-circle"></i>&nbsp;Delete
+                </button>
               </div>
             </div>
 
-            <table class="table table-striped table-hover" ng-show="miner.showDetails">
-              <tbody>
-              <tr>
-                <td><strong>Name</strong></td>
-                <td>{{miner.name}}</td>
-              </tr>
-              <tr>
-                <td><strong>IP Address</strong></td>
-                <td>{{miner.host}}</td>
-              </tr>
-              <tr>
-                <td><strong>RPC Port</strong></td>
-                <td>{{miner.port}}</td>
-              </tr>
-              <tr>
-                <td><strong>Miner</strong></td>
-                <td>{{miner.miner}}</td>
-              </tr>
-              </tbody>
-            </table>
+            <form class="form-horizontal" role="form">
+              <table class="table table-striped table-hover" ng-show="miner.showDetails">
+                <tbody>
+                <tr>
+                  <td><strong>Name</strong></td>
+                  <td>
+                    <div ng-show="!miner.allowEdit">{{miner.name}}</div>
+                    <div ng-show="miner.allowEdit"><input type="text" class="form-control" ng-model="miner.name"></div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><strong>IP Address</strong></td>
+                  <td>
+                    <div ng-show="!miner.allowEdit">{{miner.host}}</div>
+                    <div ng-show="miner.allowEdit"><input type="text" class="form-control" ng-model="miner.host"></div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><strong>RPC Port</strong></td>
+                  <td>
+                    <div ng-show="!miner.allowEdit">{{miner.port}}</div>
+                    <div ng-show="miner.allowEdit"><input type="text" class="form-control" ng-model="miner.port"></div>
+                  </td>
+                </tr>
+                <tr>
+                  <td><strong>Miner</strong></td>
+                  <td>
+                    <div ng-show="!miner.allowEdit">{{miner.miner}}</div>
+                    <div ng-show="miner.allowEdit">
+                      <select class="form-control" ng-model="miner.miner">
+                        <option>bfgminer</option>
+                        <option>cgminer</option>
+                      </select>
+                    </div>
+                  </td>
+                </tr>
+                <tr ng-show="miner.allowEdit">
+                  <td></td>
+                  <td>
+                    <button class="btn btn-primary btn-sm" ng-click="saveEdit(miner)">Save Changes</button>
+                    <button class="btn btn-default btn-sm" ng-click="disableEdit(miner)">Cancel</button>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </form>
           </div>
         </div>
         <div class="panel-footer"></div>