wip

9 files changed, 278 insertions, 247 deletions

diff --git a/src/BeerDuke.js b/src/BeerDuke.js
index 82f37c2..6f88016 100644
--- a/src/BeerDuke.js
+++ b/src/BeerDuke.js
@@ -1,166 +1,191 @@
-import angular from 'angular';
+(function () {
+  'use strict';
 
-class SettingsController {
-  constructor(BeerDukeSettings) {
-    this.settings = BeerDukeSettings;
-  }
-}
+  function SettingsController($log, $location, BeerDukeSettings) {
+    var ctrl = this;
 
-class BeerDukeSettings {
-  constructor() {
-    this.clientId = BeerDukeSettings.load('clientId') || 'beer-duke-' + Math.round(Math.random() * 100000);
-    console.log('this =', this);
-    this.showSettings = BeerDukeSettings.load('showSettings') == 'true' || false;
-  }
+    ctrl.clientId = BeerDukeSettings.clientId();
+    ctrl.showSettings = BeerDukeSettings.showSettings();
 
-  save() {
-    BeerDukeSettings.store('clientId', clientId);
-    BeerDukeSettings.store('showSettings', showSettings);
-  }
+    ctrl.save = function () {
+      BeerDukeSettings.clientId(ctrl.clientId);
+      BeerDukeSettings.showSettings(ctrl.showSettings);
+      BeerDukeSettings.save();
 
-  static store(key, value) {
-    window.localStorage[key] = angular.toJson(value);
-    return value;
+      $location.path('/')
+    }
   }
 
-  static load(key) {
-    let x = window.localStorage[key];
-    console.log('key =', key, 'x =', x);
-    return angular.fromJson(x);
-  }
-}
+  function BeerDukeSettings() {
 
-class BeerDukeService {
-  constructor($timeout, $rootScope, BeerDukeSettings) {
-    this.$timeout = $timeout;
-    this.$rootScope = $rootScope;
+    function save() {
+      store('clientId', clientId_);
+      store('showSettings', showSettings_);
+    }
 
-    this.connected_ = false;
-    this.messages = [];
-  }
+    function store(key, value) {
+      window.localStorage[key] = angular.toJson(value);
+      return value;
+    }
 
-  static xxx() {
-    return new BeerDukeSettings();
-  }
+    function load(key) {
+      var x = window.localStorage[key];
+      if (typeof x === 'undefined') {
+        return x;
+      }
 
-  connect(type, opts) {
-    this.opts = opts || {};
-
-    console.log('BeerDukeSettings =', BeerDukeSettings);
-    let clientId = BeerDukeSettings.clientId + "-" + type;
-    console.log('clientId =', clientId);
-    let client = new Paho.MQTT.Client("wss://trygvis.io:9001/", clientId);
-    client.onConnectionLost = (a) => {
-      this.$timeout(() => {
-        this.$rootScope.$apply(() => {
-          this.onConnectionLost(a);
-        })
-      });
-    };
-    client.onMessageArrived = (a) => {
-      this.$timeout(() => {
-        this.$rootScope.$apply(() => {
-          this.onMessageArrived(a);
-        })
-      });
-    };
+      return angular.fromJson(x);
+    }
 
-    this.client = client;
+    var clientId_ = load('clientId') || 'beer-duke-' + Math.round(Math.random() * 100000);
+    var showSettings_ = load('showSettings') || false;
+    save();
 
-    this.client.connect({
-      onSuccess: () => {
-        this.$timeout(() => {
-          this.$rootScope.$apply(() => {
-            this.onConnect();
-          })
-        });
+    function clientId(x) {
+      if (x) {
+        clientId_ = x;
       }
-    });
-  }
+      return clientId_;
+    }
 
-  get connected() {
-    return this.connected_;
+    function showSettings(x) {
+      if (x) {
+        showSettings_ = x;
+      }
+      return showSettings_;
+    }
+
+    return {
+      clientId: clientId,
+      showSettings: showSettings,
+      load: load,
+      save: save
+    }
   }
 
-  onConnect() {
-    console.log('Connected');
+  function BeerDukeService($log, $timeout, $rootScope, BeerDukeSettings) {
+    var self = this;
+    var connected_ = false;
+    var messages = [];
+    var callbacks = {};
+
+    function connect(type) {
+      var clientId = BeerDukeSettings.clientId() + "-" + type;
+      var client = new Paho.MQTT.Client("wss://trygvis.io:9001/", clientId);
+      client.onConnectionLost = function (a) {
+        $timeout(function () {
+          $rootScope.$apply(function () {
+            onConnectionLost(a);
+          })
+        });
+      };
+      client.onMessageArrived = function () {
+        var args = arguments;
+        $timeout(function () {
+          $rootScope.$apply(function () {
+            onMessageArrived.apply(self, args);
+          })
+        });
+      };
+
+      self.client = client;
+
+      self.client.connect({
+        onSuccess: function () {
+          var args = arguments;
+          $timeout(function () {
+            $rootScope.$apply(function () {
+              onConnect.apply(self, args);
+            })
+          });
+        }
+      });
+    }
 
-    this.connected_ = true;
+    function subscribe(name) {
+      return self.client.subscribe(name);
+    }
 
-    if (this.opts.onConnect) {
-      try {
-        this.opts.onConnect();
-      } catch (e) {
-      }
+    function connected() {
+      return self.connected_;
     }
 
-    //this.client.subscribe("/beer-duke");
-  }
+    function onConnect() {
+      $log.info('Connected');
 
-  onConnectionLost(responseObject) {
-    this.connected_ = false;
+      self.connected_ = true;
 
-    //if (responseObject.errorCode !== 0)
-    console.log("onConnectionLost:", responseObject);
-    console.log("onConnectionLost:", responseObject.errorMessage);
-  }
+      invoke('onConnect');
+    }
 
-  onMessageArrived(message) {
-    console.log("onMessageArrived:" + message.payloadString);
+    function invoke(name, args) {
+      var fn = callbacks[name];
 
-    this.messages.push(message);
+      if (typeof fn === 'function') {
+        try {
+          return fn.apply(undefined, args);
+        } catch (e) {
+          $log.warn('exception calling ' + name, e);
+        }
+      }
+    }
+
+    function onConnectionLost(responseObject) {
+      self.connected_ = false;
 
-    if (this.opts.onMessageArrived) {
+      //if (responseObject.errorCode !== 0)
+      $log.warn("onConnectionLost:", responseObject);
+      $log.warn("onConnectionLost:", responseObject.errorMessage);
+    }
+
+    function onMessageArrived(message) {
+      messages.push(message);
       try {
-        let m = angular.fromJson(message);
-        this.opts.onMessageArrived(m);
+        var m = angular.fromJson(message);
+        invoke('onMessageArrived', [m]);
       } catch (e) {
+        $log.warn('could not parse json', e);
       }
     }
-  }
 
-  requestBeer(code) {
-    let message = new Paho.MQTT.Message(angular.toJson({code: code}));
-    message.destinationName = "/beer-duke";
-    this.client.send(message);
+    function submit(destination, payload) {
+      var message = new Paho.MQTT.Message(angular.toJson(payload));
+      message.destinationName = destination;
+      self.client.send(message);
+    }
+
+    return {
+      messages: messages,
+      submit: submit,
+      connect: connect,
+      subscribe: subscribe,
+      connected: connected,
+      callbacks: callbacks
+    }
   }
-}
 
-class MqttController {
-  constructor(BeerDukeService) {
-    this.BeerDukeService = BeerDukeService;
+  function config($routeProvider) {
+    $routeProvider
+      .when('/settings', {
+        controller: SettingsController,
+        controllerAs: 'ctrl',
+        templateUrl: 'templates/settings.html'
+      })
+      .otherwise({
+        redirectTo: '/'
+      })
   }
 
-  get connected() {
-    return this.BeerDukeService.connected;
+  function run($rootScope, BeerDukeSettings, BeerDukeService) {
+    $rootScope.settings = BeerDukeSettings;
+    $rootScope.mqtt = {
+      connected: BeerDukeService.connected
+    }
   }
-}
-
-function config($routeProvider) {
-  console.log('BeerDuke: config');
-  $routeProvider
-    .when('/settings', {
-      controller: SettingsController,
-      controllerAs: 'ctrl',
-      templateUrl: 'templates/settings.html'
-    })
-    .otherwise({
-      redirectTo: '/'
-    })
-}
-
-function run($rootScope, BeerDukeSettings, BeerDukeService) {
-  $rootScope.settings = BeerDukeSettings;
-  $rootScope.mqtt = {
-    get connected() {
-      return BeerDukeService.connected
-    }
-  };
-}
-
-angular.module('BeerDuke', ['ngRoute'])
-  .controller('MqttController', MqttController)
-  .service('BeerDukeService', BeerDukeService)
-  .factory('BeerDukeSettings', () => new BeerDukeSettings())
-  .config(config)
-  .run(run);
+
+  angular.module('BeerDuke', ['ngRoute'])
+    .factory('BeerDukeService', BeerDukeService)
+    .factory('BeerDukeSettings', BeerDukeSettings)
+    .config(config)
+    .run(run);
+}());
diff --git a/src/BeerDukeController.js b/src/BeerDukeController.js
index 85a47f4..8aeafb8 100644
--- a/src/BeerDukeController.js
+++ b/src/BeerDukeController.js
@@ -1,46 +1,43 @@
-import angular from 'angular';
-import 'angular-route';
-import './BeerDuke.js';
-
-class BeerDukeControllerController {
-  constructor(BeerDukeService) {
-    this.BeerDukeService = BeerDukeService;
-
-    this.BeerDukeService.connect('controller', {
-      onConnect: this.onConnect,
-      onMessageArrived: this.onMessageArrived
-    });
+(function () {
+  'use strict';
+
+  function BeerDukeControllerController($log, BeerDukeService, BeerDukeSettings) {
+    var ctrl = this;
+
+    if (BeerDukeSettings.showSettings()) {
+      ctrl.code = 123;
+      ctrl.email = 'foo@example.org';
+    }
+
+    ctrl.requestBeer = function () {
+      var payload = {
+        code: this.code,
+        email: this.email
+      };
+      $log.info('payload', payload);
+
+      BeerDukeService.submit('/beer-duke', payload);
+    };
+
+    BeerDukeService.callbacks.onMessageArrived = function (m) {
+      ctrl.lastCode = m.code;
+    }
   }
 
-  requestBeer() {
-    let code = this.code;
-
-    console.log('code', code);
-    this.BeerDukeService.requestBeer(code);
+  function run(BeerDukeService) {
+    BeerDukeService.connect('controller');
   }
 
-  onConnect() {
-    console.log('onConnect');
+  function config($routeProvider) {
+    $routeProvider
+      .when('/', {
+        controller: BeerDukeControllerController,
+        controllerAs: 'ctrl',
+        templateUrl: 'templates/controller.html'
+      });
   }
 
-  onMessageArrived(msg) {
-    console.log('msg =', msg);
-  }
-}
-
-function run(BeerDukeService) {
-  //BeerDukeService.connect('controller');
-}
-
-function config($routeProvider) {
-  $routeProvider
-    .when('/', {
-      controller: BeerDukeControllerController,
-      controllerAs: 'ctrl',
-      templateUrl: 'templates/controller.html'
-    });
-}
-angular.module('BeerDukeController', ['ngRoute', 'BeerDuke'])
-  .run(run)
-  .config(config)
-  .controller('BeerDukeControllerController', BeerDukeControllerController);
+  angular.module('BeerDukeController', ['ngRoute', 'BeerDuke'])
+    .run(run)
+    .config(config);
+}());
diff --git a/src/BeerDukeTap.js b/src/BeerDukeTap.js
index 3392e85..ed12a17 100644
--- a/src/BeerDukeTap.js
+++ b/src/BeerDukeTap.js
@@ -1,45 +1,54 @@
-import angular from 'angular';
-import 'angular-route';
-import './BeerDuke.js';
+(function () {
+  'use strict';
 
-class BeerDukeTapController {
-  constructor($timeout, BeerDukeSettings) {
-    console.log('BeerDukeTapController', this);
+  function BeerDukeTapController($log, $timeout, BeerDukeService) {
+    var ctrl = this;
 
-    this.$timeout = $timeout;
-    this.settings = BeerDukeSettings;
+    rotateCode();
+    self.count = 0;
+    self.code = '';
 
-    this.rotateCode();
-    this.count = 0;
-    this.code = '';
+    function rotateCode() {
+      self.code = '' + self.count++;
+      $timeout(function () {
+        rotateCode();
+      }, 1000);
+    }
+
+    BeerDukeService.callbacks.onConnect = function () {
+      BeerDukeService.subscribe('/beer-duke');
+    };
+    BeerDukeService.callbacks.onMessageArrived = function (m) {
+      $log.info('m.payloadString =', m.payloadString);
+      var payload = angular.fromJson(m.payloadString);
+
+      var code = payload.code;
+      var email = payload.email;
+
+      if (typeof code !== 'string' && typeof email !== 'string') {
+        $log.warn('bad payload', payload.code);
+        return;
+      }
+
+      ctrl.message = payload;
+    };
+
+    BeerDukeService.connect('tap');
   }
-   
-  rotateCode() {
-    this.code = '' + this.count++;
-    this.$timeout(() => {
-      this.rotateCode();
-    }, 1000);
+
+  function run(BeerDukeService) {
   }
-}
 
-class TapSettingsController {
-  constructor() {
+  function config($routeProvider) {
+    $routeProvider
+      .when('/', {
+        controller: BeerDukeTapController,
+        controllerAs: 'ctrl',
+        templateUrl: 'templates/tap.html'
+      });
   }
-}
-
-function run(BeerDukeService) {
-  BeerDukeService.connect('tap');
-}
-
-function config($routeProvider) {
-  $routeProvider
-    .when('/', {
-      controller: BeerDukeTapController,
-      controllerAs: 'ctrl',
-      templateUrl: 'templates/tap.html'
-    });
-}
-
-angular.module('BeerDukeTap', ['BeerDuke', 'ngRoute'])
-  .run(run)
-  .config(config);
+
+  angular.module('BeerDukeTap', ['BeerDuke', 'ngRoute'])
+    .run(run)
+    .config(config);
+}());
diff --git a/src/controller.html b/src/controller.html
index bbb34ca..33477f9 100644
--- a/src/controller.html
+++ b/src/controller.html
@@ -1,18 +1,12 @@
 <html>
 <head>
-  <script type="application/javascript" src="jspm_packages/system.src.js"></script>
   <script type="application/javascript" src="mqttws31.js"></script>
-  <script type="application/javascript" src="config.js"></script>
-  <script type="text/ecmascript">
-    Promise.all([
-      System.import('angular'),
-      System.import('BeerDukeController')])
-        .then(function (modules) {
-          modules[0].bootstrap(document, ['BeerDukeController']);
-        });
-  </script>
+  <script type="application/javascript" src="bower_components/angular/angular.js"></script>
+  <script type="application/javascript" src="bower_components/angular-route/angular-route.js"></script>
+  <script type="application/javascript" src="BeerDuke.js"></script>
+  <script type="application/javascript" src="BeerDukeController.js"></script>
 </head>
-<body>
+<body ng-app="BeerDukeController">
 <div ng-view></div>
 </body>
 </html>
diff --git a/src/tap.html b/src/tap.html
index 47a05ca..5196b97 100644
--- a/src/tap.html
+++ b/src/tap.html
@@ -1,18 +1,12 @@
 <html>
 <head>
-  <script type="application/javascript" src="jspm_packages/system.src.js"></script>
   <script type="application/javascript" src="mqttws31.js"></script>
-  <script type="application/javascript" src="config.js"></script>
-  <script type="text/ecmascript">
-    Promise.all([
-      System.import('angular'),
-      System.import('BeerDukeTap')])
-        .then(function (modules) {
-          modules[0].bootstrap(document, ['BeerDukeTap']);
-        });
-  </script>
+  <script type="application/javascript" src="bower_components/angular/angular.js"></script>
+  <script type="application/javascript" src="bower_components/angular-route/angular-route.js"></script>
+  <script type="application/javascript" src="BeerDuke.js"></script>
+  <script type="application/javascript" src="BeerDukeTap.js"></script>
 </head>
-<body>
+<body ng-app="BeerDukeTap">
 <div ng-view></div>
 </body>
 </html>
diff --git a/src/templates/controller.html b/src/templates/controller.html
index eb0efab..bd8cbf5 100644
--- a/src/templates/controller.html
+++ b/src/templates/controller.html
@@ -1,9 +1,13 @@
-<div ng-controller="MqttController as mqtt">
-  <div ng-controller="BeerDukeControllerController as ctrl">
+<div>
+  <div>
     <label>
       Code from tap:
       <input type="number" ng-model="ctrl.code">
     </label>
+    <label>
+      Your email address
+      <input type="email" ng-model="ctrl.email">
+    </label>
     <button ng-click="ctrl.requestBeer()">Request Beer!</button>
   </div>
 
diff --git a/src/templates/footer.html b/src/templates/footer.html
index 17483ae..182554d 100644
--- a/src/templates/footer.html
+++ b/src/templates/footer.html
@@ -1,5 +1,5 @@
-<div ng-if="settings.showSettings">
+<div ng-if="settings.showSettings()">
   <hr/>
   <a href="#/settings">settings</a><br/>
-  connected = {{mqtt.connected}}
+  connected = {{mqtt.connected()}}
 </div>
diff --git a/src/templates/settings.html b/src/templates/settings.html
index 5147065..f118e47 100644
--- a/src/templates/settings.html
+++ b/src/templates/settings.html
@@ -1,14 +1,22 @@
-<div>
+<div ng-init="clientId = ctrl.settings.clientId(); showSettings = ctrl.settings.showSettings()">
   <h2>Settings</h2>
-  <a href="#/">back</a>
-  <label>
-    showSettings
-    <input type="checkbox" ng-model="ctrl.settings.showSettings">
-  </label>
-
-  <label>
-    clientId
-    <input type="text" ng-model="ctrl.settings.clientId">
-  </label>
+
+  <p>
+    <button ng-click="ctrl.save()">back</button>
+  </p>
+
+  <p>
+    <label>
+      showSettings
+      <input type="checkbox" ng-model="ctrl.showSettings">
+    </label>
+  </p>
+
+  <p>
+    <label>
+      clientId
+      <input type="text" ng-model="ctrl.clientId">
+    </label>
+  </p>
 
 </div>
diff --git a/src/templates/tap.html b/src/templates/tap.html
index c266f2d..48d5e37 100644
--- a/src/templates/tap.html
+++ b/src/templates/tap.html
@@ -1,5 +1,5 @@
 <div>
-  Code: {{ctrl.code}}
+  Last: {{ctrl.message | json}}
 
   <ng-include src="'templates/footer.html'"/>
 </div>