Start to use primus on the front end.

eiriksm · Jun 20, 2014 · 10f272b · 10f272b
1 parent b3727b0
commit 10f272b
Show file tree

Hide file tree

Showing 13 changed files with 5,540 additions and 15 deletions.
diff --git a/static/index.html b/static/index.html
@@ -7,12 +7,16 @@
       font-family: 'Lato', sans-serif;
     }
   </style>
+  <script src="/js/primus.js"></script>
   <script src="/js/build/lib/lib.min.js"></script>
   <script src="/js/app.js"></script>
-  <script src="/js/controllers.js"></script>
+  <!-- inject:js -->
+  <script src="/js/components/clock/clockDirective.js"></script>
+  <script src="/js/components/brew/brewCtrl.js"></script>
+  <script src="/js/components/index/indexCtrl.js"></script>
+  <!-- endinject -->
   <script src="/js/services.js"></script>
-  <body data-ng-controller="mainCtrl">
-    <h1>Brewers beard</h1>
+  <body>
     <div ng-view ng-class="slide"></div>
   </body>
 </html>
diff --git a/static/js/app.js b/static/js/app.js
@@ -6,21 +6,37 @@
       'ngAnimate',
       'ngResource',
       'brewersBeard.controllers',
-      'brewersBeard.services'
+      'brewersBeard.services',
+      'primus',
+      'brewClockDirective'
   ]).
-  config(function($routeProvider, $locationProvider) {
+  config(function($routeProvider, $locationProvider, primusProvider) {
     $locationProvider.html5Mode(true);
     $routeProvider.when('/brew', {
-      templateUrl: '/partials/brew.html',
+      templateUrl: '/js/components/brew/brew.html',
       controller: 'brewCtrl'});
     $routeProvider.when('/brew/:id', {
-      templateUrl: '/partials/brew.html',
+      templateUrl: '/js/components/brew/brew.html',
       controller: 'brewCtrl'});
     $routeProvider.when('/', {
-      templateUrl: '/partials/main.html',
+      templateUrl: '/js/components/index/main.html',
       controller: 'mainCtrl'});
     $routeProvider.otherwise({redirectTo: '/'});
+    primusProvider
+      // Define Primus endpoint.
+      .setEndpoint()
+      // Define Primus options.
+      .setOptions({
+        reconnect: {
+          minDelay: 100,
+          maxDelay: 60000,
+          retries: 100
+        }
+      })
+      // Define default multiplex option for resources.
+      .setDefaultMultiplex(false);
   });
   angular.module('brewersBeard.controllers', [], function(){});
   angular.module('brewersBeard.services', [], function(){});
+
 })(angular);
diff --git a/static/js/build/lib/lib.min.js b/static/js/build/lib/lib.min.js
diff --git a/static/partials/brew.html → static/js/components/brew/brew.html b/static/partials/brew.html → static/js/components/brew/brew.html
@@ -1,20 +1,16 @@
 <input class="topcoat-text-input" type="text" placeholder="Brew name" data-ng-model="createdName" />
 <button class="topcoat-button--cta" data-ng-click="addBrew()">Add brew</button>
 
-
 <div data-ng-show="id">
   {{brew.name}}
 </div>
 
-
 <div data-ng-show="!id" class="topcoat-list">
   <ul class="topcoat-list__container">
     <h3 class="topcoat-list__header">My brews</h3>
     <li data-ng-repeat="brew in brews" class="topcoat-list__item">
       <button class="topcoat-button--cta" data-ng-click="deleteBrew(brew.id)">Delete</button>
-      <button class="topcoat-button" data-ng-click="updateBrew(brew)">Update</button>
-      <input class="topcoat-text-input" ng-model="brew.name" value="{{brew.name}}" />
-      <a href="/brew/{{brew.id}}">{{brew.name}}</a>
+      <a href="/brew/{{brew.id}}">{{brew.id}}</a>
     </li>
   </ul>
 </div>
diff --git a/static/js/components/brew/brewCtrl.js b/static/js/components/brew/brewCtrl.js
@@ -0,0 +1,41 @@
+;(function(angular) {
+  'use strict';
+  angular.module('brewersBeard.controllers', [])
+  .controller('brewCtrl', function($scope, $routeParams, $http, BrewService) {
+    var makeList = function() {
+      $scope.brews = BrewService.query();
+    };
+    var loadBrew = function(id) {
+      $scope.brew = BrewService.get({brewId: id}, function(d) {
+        console.log(d);
+      });
+    };
+    $scope.deleteBrew = function(id) {
+      BrewService.delete({brewId: id}, function() {
+        refreshView();
+      });
+    };
+    $scope.updateBrew = function(brew) {
+      console.log(brew);
+      BrewService.update({ brewId:brew.id }, brew, function() {
+        refreshView();
+      });
+    };
+    $scope.id = $routeParams.id;
+    var refreshView = function() {
+      if (!$scope.id) {
+        makeList();
+      }
+      else {
+        loadBrew($scope.id);
+      }
+    };
+    refreshView();
+    $scope.addBrew = function() {
+      BrewService.save({name: $scope.createdName}, function() {
+        refreshView();
+      });
+    };
+
+  });
+})(angular);
diff --git a/static/js/components/clock/clock.html b/static/js/components/clock/clock.html
@@ -0,0 +1,6 @@
+<div class="forever">
+  <h1>CLOCK</h1>
+  <input data-ng-model="clock.text" />
+  {{clock.elapsed()}}
+  <button ng-click="clock.start()">Start</button>
+</div>
diff --git a/static/js/components/clock/clockDirective.js b/static/js/components/clock/clockDirective.js
@@ -0,0 +1,33 @@
+;(function(angular) {
+  'use strict';
+
+  angular.module('brewClockDirective', [])
+  .directive('brewClock', ['$interval' ,function ($interval) {
+    return {
+      restrict: 'A',
+      scope: {},
+      link: function(scope, elm) {
+        function Clock() {
+          this.started = false;
+          this.startTime;
+        }
+        Clock.prototype.start = function() {
+          if (this.started) {
+            throw new Error('Please do not start a running clock!');
+          }
+          this.started = true;
+          this.startTime = Date.now();
+        };
+        Clock.prototype.elapsed = function() {
+          if (!this.startTime) {
+            return 0;
+          }
+          return Date.now() - this.startTime;
+        };
+
+        scope.clock = new Clock();
+      },
+      templateUrl: '/js/components/clock/clock.html'
+    };
+  }]);
+})(angular);
diff --git a/static/js/components/index/indexCtrl.js b/static/js/components/index/indexCtrl.js
@@ -0,0 +1,15 @@
+;(function(angular) {
+  'use strict';
+  angular.module('brewersBeard.controllers')
+  .controller('mainCtrl', ['$scope', 'primus', function ($scope, primus) {
+      primus.send('auth', 'myauth');
+      primus.$on('authed', function(msg) {
+        $scope.client = true;
+      });
+      primus.send('gettemp');
+      primus.$on('newtemp', function(msg) {
+        console.log('new temp ' + msg);
+        $scope.temp =  msg;
+      });
+  }]);
+})(angular);
diff --git a/static/js/components/index/main.html b/static/js/components/index/main.html
@@ -0,0 +1,9 @@
+<a href="/brew"></a>
+<div ng-show="client" class="connected">
+  Client connected
+</div>
+<h1>{{temp}}</h1>
+<div brew-clock>
+</div>
+<div brew-clock>
+</div>
diff --git a/static/js/lib/angular-primus.js b/static/js/lib/angular-primus.js
@@ -0,0 +1,119 @@
+/*! Angular primus v0.2.2 | (c) 2013 Greg Bergé | License MIT */
+
+angular
+.module('primus', [])
+.provider('primus', primusProvider);
+
+function primusProvider() {
+  var provider = this;
+
+  /**
+   * Expose primus service.
+   */
+
+  this.$get = ['$rootScope', '$q', primusService];
+
+  /**
+   * Create a new Primus service.
+   */
+
+  function primusService($rootScope, $q) {
+    var primus = new Primus(this.endpoint, this.options);
+    var resourceDefers = {};
+
+    /**
+     * Listen on events of a given type.
+     * This event make an $rootScope.$apply on the listener.
+     *
+     * @param {String} event
+     * @param {Function} listener
+     * @returns {Function} Deregistration function for this listener.
+     */
+
+    primus.$on = function $on(event, listener) {
+      // Wrap primus event with $rootScope.$apply.
+      primus.on(event, applyListener);
+
+      function applyListener() {
+        var args = arguments;
+        $rootScope.$apply(function () {
+          listener.apply(null, args);
+        });
+      }
+
+      // Return the deregistration function
+      return function $off() {
+        primus.removeListener(event, applyListener);
+      };
+    };
+
+    /**
+     * Get a resource with promise.
+     * Promise is resolved with resource when the resource is ready.
+     *
+     * @param {String} name
+     * @param {Boolean} multiplex
+     * @returns {Promise}
+     */
+
+    primus.$resource = function $resource(name, multiplex) {
+      multiplex = typeof multiplex === 'undefined' ? provider.multiplex : multiplex;
+
+      // If already defined, return promise.
+      if (resourceDefers[name]) return resourceDefers[name].promise;
+
+      // Register a new deferred.
+      resourceDefers[name] = $q.defer();
+
+      // Create a new resource.
+      var resource = primus.resource(name, multiplex);
+
+      // Resolve promise when resource is ready.
+      resource.once('ready', function onReady() {
+        resourceDefers[name].resolve(resource);
+        $rootScope.$apply();
+      });
+
+      // Return promise.
+      return resourceDefers[name].promise;
+    };
+
+    return primus;
+  }
+
+  /**
+   * Define options.
+   *
+   * @param {Object} options
+   * @returns {primusProvider}
+   */
+
+  this.setOptions = function setOptions(options) {
+    this.options = options;
+    return this;
+  };
+
+  /**
+   * Define endpoint.
+   *
+   * @param {String} endpoint
+   * @returns {primusProvider}
+   */
+
+  this.setEndpoint = function setEndpoint(endpoint) {
+    this.endpoint = endpoint;
+    return this;
+  };
+
+  /**
+   * Set the default multiplex option for resource.
+   *
+   * @param {Boolean} multiplex
+   * @returns {primusProvider}
+   */
+
+  this.setDefaultMultiplex = function setDefaultMultiplex(multiplex) {
+    this.multiplex = multiplex;
+    return this;
+  };
+}