renius · August 17, 2013 09:09 · Aug 16, 2013
diff --git a/app.css b/app.css
@@ -0,0 +1,10 @@
+.progress {
+  border: 1px solid #ddd;
+  width: 100px;
+  height: 10px;
+}
+.progress .bar {
+  background-color: #aae;
+  width: 10px;
+  height: 10px;
+}
diff --git a/app.html b/app.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
+    <script src="app.js"></script>
+    <style>
+      @import url("app.css");
+    </style>
+  </head>
+  <body>
+    <div ng-app="app">
+      <table ng-controller="MyCnt">
+        <tr ng-repeat="proc in processes">
+          <td>{{proc.name}}</td>
+          <td><div progress="proc.status"></div></td>
+          <td><button ng-disabled="proc.status > 50" ng-click="reset(proc)"> Stop </button>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/app.js b/app.js
@@ -0,0 +1,63 @@
+angular.module('wg', [])
+.directive('progress', function () {
+  //progress widget
+  return {
+    template: '<div class="progress">'
+    + '<div class="bar" ng-style="style"></div>'
+    + '</div>',
+    link: function ($scope, element, attrs) {
+      $scope.style = { width: 0 };
+      $scope.$watch(attrs.progress, function(val) {
+        $scope.style.width = val;
+      });
+    }
+  };
+});
+
+angular.module('app', ['wg'])
+  .factory('channel', function ($timeout) {
+    //just stub for channel
+    var listener = null;
+    var status = 0;
+    $timeout(function tick() {
+      status = status + Math.random()
+      if (status > 99) {
+        status = 0
+      }
+      listener && listener(Math.floor((Math.random() / 0.3)), status);
+      $timeout(tick, 100);
+    }, 100);
+
+    return function (listen) {
+      listener = listen;
+    }
+  })
+
+DATA = [{
+  id: 0,
+  name: 'erlang',
+  status: 30
+}, {
+  id: 1,
+  name: 'ruby',
+  status: 80
+}, {
+  id: 2,
+  name: 'clojure',
+  status: 10
+}];
+
+
+function MyCnt($scope, channel) {
+  $scope.reset = function (proc) {
+    proc.status = 0;
+  }
+  $scope.processes = DATA;
+  channel(function (proc_id, status) {
+    $scope.processes.forEach(function (proc) {
+      if (proc_id == proc.id) {
+        proc.status = status;
+      }
+    });
+  });
+}