Merge pull request #41 from makepanic/ajax-wrapper

Ajax wrapper

Gruntfile.js

@@ -49,6 +49,7 @@ module.exports = function(grunt) {
             // helper
             'js/helpers/formatter.js',
             'js/helpers/util.js',
+            'js/helpers/ajax.js',
             'js/helpers/handlebarsHelper.js',
             'js/helpers/dataTablesRenderer.js',
 
@@ -318,16 +319,14 @@ module.exports = function(grunt) {
                 dest : '<%= globe.test %>karma.conf.js'
             },
             app: {
-                src: '<%= globe.src %>js/application/intro.js',
-                dest: '<%= globe.tmp %>js/application/intro.js'
+                files: {
+                    '<%= globe.tmp %>js/application/intro.js': '<%= globe.src %>js/application/intro.js',
+                    '<%= globe.tmp %>js/helpers/ajax.js': '<%= globe.src %>js/helpers/ajax.js'
+                }
             }
         },
 
         env: {
-            options : {
-                /* Shared Options Hash */
-                //globalOption : 'foo'
-            },
             dev: {
                 NODE_ENV : 'DEVELOPMENT'
             },

src/js/application/intro.js

@@ -1,4 +1,4 @@
-/*global $, prepareForTesting, Ember, jQuery, InstallTrigger */
+/*global $, prepareForTesting, Ember, Em, jQuery, InstallTrigger */
 'use strict';
 
 // create ember application and set namespace
@@ -13,6 +13,9 @@ if($.isFunction(window.prepareForTesting)){
 // create Ember application with some extra methods
 GLOBE = GLOBE.reopen({
 
+    // api baseurl
+    api: 'https://onionoo.torproject.org',
+
     // model defaults
     defaults: [],
 
@@ -23,7 +26,7 @@ GLOBE = GLOBE.reopen({
     loading: 0,
 
     // application alert
-    alert: Ember.Object.create({
+    alert: Em.Object.create({
         search: null
     }),
 
@@ -49,7 +52,7 @@ GLOBE = GLOBE.reopen({
      */
     setAlert: function(location, type, msg){
         if(this.get('alert').hasOwnProperty(location)){
-            this.set('alert.' + location, Ember.Object.create({
+            this.set('alert.' + location, Em.Object.create({
                 type: type,
                 msg: msg
             }));
@@ -463,6 +466,6 @@ jQuery.fn.dataTableExt.oSort['port-asc']  = function(x,y) {
     return xInt > yInt ? 1 : xInt < yInt ? -1 : 0;
 };
 
-GLOBE.TextField = Ember.TextField.extend({
+GLOBE.TextField = Em.TextField.extend({
     attributeBindings: ['accept', 'autocomplete', 'autofocus', 'name', 'required']
 });

src/js/components/AlertBoxComponent.js

@@ -1,5 +1,5 @@
-/*global GLOBE, Ember */
-GLOBE.AlertBoxComponent = Ember.Component.extend({
+/*global GLOBE, Em */
+GLOBE.AlertBoxComponent = Em.Component.extend({
     tagName: 'div',
     baseClass: 'alert',
 

src/js/components/LoadingIndicatorComponent.js

@@ -1,5 +1,5 @@
-/*global GLOBE, Ember */
-GLOBE.LoadingIndicatorComponent = Ember.Component.extend({
+/*global GLOBE, Em */
+GLOBE.LoadingIndicatorComponent = Em.Component.extend({
     isDataLoaded: function(){
 
         // change isDataLoaded depending on GLOBE.loading number

src/js/controllers/ApplicationController.js

@@ -1,5 +1,5 @@
-/*global $, GLOBE, Ember */
-GLOBE.ApplicationController = Ember.Controller.extend({
+/*global $, GLOBE, Em */
+GLOBE.ApplicationController = Em.Controller.extend({
     needs: ['relaySearch'],
     value: '',
     query: '',

src/js/controllers/BridgeDetailController.js

@@ -1,5 +1,5 @@
-/*global $, GLOBE, Ember */
-GLOBE.BridgeDetailController = Ember.ObjectController.extend({
+/*global $, GLOBE, Em */
+GLOBE.BridgeDetailController = Em.ObjectController.extend({
     bandwidthData: {},
     weightData: {},
     content: {},

src/js/controllers/RelayDetailController.js

@@ -1,5 +1,5 @@
-/*global $, GLOBE, Ember */
-GLOBE.RelayDetailController = Ember.ObjectController.extend({
+/*global $, GLOBE, Em */
+GLOBE.RelayDetailController = Em.ObjectController.extend({
     bandwidthData: {},
     weightData: {},
     content: {},

src/js/controllers/SummarySearchController.js

@@ -1,5 +1,5 @@
-/*global GLOBE, Ember */
-GLOBE.SummarySearchController = Ember.ArrayController.extend({
+/*global GLOBE, Em */
+GLOBE.SummarySearchController = Em.ArrayController.extend({
     needs: 'application',
     content: [],
     active: 'relays',
@@ -9,13 +9,13 @@ GLOBE.SummarySearchController = Ember.ArrayController.extend({
     query: '',
 
     summaries: {},
-    relays: Ember.ArrayController.create({
-        content: Ember.A([]),
-        summaries: Ember.A([])
+    relays: Em.ArrayController.create({
+        content: Em.A([]),
+        summaries: Em.A([])
     }),
-    bridges: Ember.ArrayController.create({
-        content: Ember.A([]),
-        summaries: Ember.A([])
+    bridges: Em.ArrayController.create({
+        content: Em.A([]),
+        summaries: Em.A([])
     }),
 
     relaysActive: function () {

src/js/controllers/Top10Controller.js

@@ -1,5 +1,5 @@
-/*global GLOBE, Ember */
-GLOBE.Top10Controller = Ember.ArrayController.extend({
+/*global GLOBE, Em */
+GLOBE.Top10Controller = Em.ArrayController.extend({
     needs: ['application'],
     content: [],
     relays: [],

src/js/helpers/ajax.js

@@ -0,0 +1,52 @@
+/*global GLOBE, Em */
+
+/**
+ * $.ajax wrapper that uses Ember.run to run async code.
+ * Necessary for async Ember testing.
+ * Inspired by discourse ajax wrapper.
+ *
+ * @see {@link https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/mixins/ajax.js}
+ * @param {Object} settings
+ * @returns {Promise}
+ */
+GLOBE.ajax = function (settings) {
+    return new Em.RSVP.Promise(function(resolve, reject) {
+
+    // @if NODE_ENV == 'TESTING'
+        // only available for testing
+        var fixture = GLOBE.TESTING_FIXTURES && GLOBE.TESTING_FIXTURES[settings.url];
+        if (fixture) {
+            Em.run(null, resolve, fixture);
+        } else {
+    // @endif
+
+            // prefix url
+            settings.url = GLOBE.get('api') + settings.url;
+
+            settings.success = function(response) {
+                Em.run(null, resolve, response);
+            };
+            settings.error = function(jqXHR, textStatus) {
+                Em.run(null, reject, textStatus);
+            };
+            Em.$.ajax(settings);
+
+    // @if NODE_ENV == 'TESTING'
+        }
+    // @endif
+    });
+};
+/**
+ * Calls GLOBE.ajax with parameters to imitate $.getJSON
+ * @see {@link GLOBE.ajax}
+ * @param {String} url
+ * @param {Object} [data]
+ * @returns {Promise}
+ */
+GLOBE.getJSON = function (url, data) {
+    return GLOBE.ajax({
+        dataType: 'json',
+        data: data || {},
+        url: url
+    });
+};

src/js/helpers/dataTablesRenderer.js

@@ -67,11 +67,10 @@ GLOBE.DataTableRenderer = {
      * @returns {String} extracted port
      */
     firstPort: function (data, type) {
-        data = data[0];
         if (type === 'display') {
-            return GLOBE.Formatter.extractPort(data);
+            return GLOBE.Formatter.extractPort(data[0]);
         }
-        return data;
+        return data[0];
     },
     /**
      * @see {@link GLOBE.Formatter.extractPort}

src/js/helpers/handlebarsHelper.js

@@ -1,24 +1,24 @@
-/*global GLOBE, Handlebars, Ember, moment */
+/*global GLOBE, Handlebars, Em, moment */
 /**
  * @see {@link GLOBE.Formatter.boolean()}
  */
-Ember.Handlebars.helper('truefalse', function(value){
+Em.Handlebars.helper('truefalse', function(value){
     var wrapped = GLOBE.Formatter.boolean(value);
     return new Handlebars.SafeString(wrapped);
 });
 
 /**
  * @see {@link GLOBE.Formatter.bandwidth()}
  */
-Ember.Handlebars.helper('bandwidth', function(value){
+Em.Handlebars.helper('bandwidth', function(value){
     var formatted = GLOBE.Formatter.bandwidth(value);
     return new Handlebars.SafeString(formatted);
 });
 
 /**
  * Uses {@link GLOBE.static.countries} to get the full name for a country key
  */
-Ember.Handlebars.registerBoundHelper('fullCountry', function(value){
+Em.Handlebars.registerBoundHelper('fullCountry', function(value){
     value = Handlebars.Utils.escapeExpression(value);
 
     var fullCountry = '';
@@ -32,7 +32,7 @@ Ember.Handlebars.registerBoundHelper('fullCountry', function(value){
 /**
  * @see {@link GLOBE.Formatter.countryFlag()}
  */
-Ember.Handlebars.registerBoundHelper('prettyCountryFlag', function(value){
+Em.Handlebars.registerBoundHelper('prettyCountryFlag', function(value){
     value = Handlebars.Utils.escapeExpression(value);
 
     var countryLabel = GLOBE.Formatter.countryFlag(value);
@@ -42,7 +42,7 @@ Ember.Handlebars.registerBoundHelper('prettyCountryFlag', function(value){
 /**
  * @see {@link GLOBE.Formatter.countryFlag()}
  */
-Ember.Handlebars.registerBoundHelper('flaggifyShort', function(value){
+Em.Handlebars.registerBoundHelper('flaggifyShort', function(value){
     value = Handlebars.Utils.escapeExpression(value);
     var withImage = GLOBE.Formatter.countryFlag(value);
     return new Handlebars.SafeString(withImage);
@@ -51,7 +51,7 @@ Ember.Handlebars.registerBoundHelper('flaggifyShort', function(value){
 /**
  * Generates HTML that displays an flag icon with flag title
  */
-Ember.Handlebars.registerBoundHelper('flaggifyLong', function(value){
+Em.Handlebars.registerBoundHelper('flaggifyLong', function(value){
     var map = GLOBE.static.icons;
     value = Handlebars.Utils.escapeExpression(value);
     var withImage = value;
@@ -65,7 +65,7 @@ Ember.Handlebars.registerBoundHelper('flaggifyLong', function(value){
  * Uses the 'long' variant to generate an uptime string
  * @see {@title GLOBE.Util.UptimeCalculator}
  */
-Ember.Handlebars.helper('uptimeFull', function(value){
+Em.Handlebars.helper('uptimeFull', function(value){
     if(!value){
         return '';
     }
@@ -78,7 +78,7 @@ Ember.Handlebars.helper('uptimeFull', function(value){
  * Uses the 'short' variant to generate an uptime string
  * @see {@title GLOBE.Util.UptimeCalculator}
  */
-Ember.Handlebars.helper('uptimeShort', function(value){
+Em.Handlebars.helper('uptimeShort', function(value){
     if(!value){
         return '';
     }
@@ -90,7 +90,7 @@ Ember.Handlebars.helper('uptimeShort', function(value){
 /**
  * @see {@link GLOBE.Formatter.extractPort()}
  */
-Ember.Handlebars.helper('extractPort', function(value){
+Em.Handlebars.helper('extractPort', function(value){
     value = Handlebars.Utils.escapeExpression(value);
 
     var port = GLOBE.Formatter.extractPort(value);
@@ -101,7 +101,7 @@ Ember.Handlebars.helper('extractPort', function(value){
 /**
  * uses {@link http://momentjs.com/docs/#/displaying/fromnow/} to display the difference from now and a given time
  */
-Ember.Handlebars.helper('fromNow', function(value){
+Em.Handlebars.helper('fromNow', function(value){
     var fromNow = '',
         valMoment = moment(value);
 
@@ -114,6 +114,6 @@ Ember.Handlebars.helper('fromNow', function(value){
 /**
  * @see {@link GLOBE.Formatter.familyToFingerprint()}
  */
-Ember.Handlebars.helper('familyToFingerprint', function(value){
+Em.Handlebars.helper('familyToFingerprint', function(value){
     return new Handlebars.SafeString(GLOBE.Formatter.familyToFingerprint(value));
 });

src/js/models/OnionooBandwidthHistory.js

@@ -1,6 +1,6 @@
-/*global $, GLOBE, Ember */
+/*global GLOBE, Em */
 
-GLOBE.OnionooBandwidthHistory = Ember.Object.extend({});
+GLOBE.OnionooBandwidthHistory = Em.Object.extend({});
 GLOBE.OnionooBandwidthHistory.reopenClass({
 
     /**
@@ -18,8 +18,8 @@ GLOBE.OnionooBandwidthHistory.reopenClass({
 
         hashedFingerprint = hashedFingerprint.toUpperCase();
 
-        var url = 'https://onionoo.torproject.org/bandwidth?lookup=' + hashedFingerprint;
-        return $.getJSON(url, {}).then(function(result){
+        var url = '/bandwidth?lookup=' + hashedFingerprint;
+        return GLOBE.getJSON(url).then(function(result){
 
             var relays = {
                 history:{