[WIP] Feature/Events

bower.json

@@ -11,7 +11,7 @@
     "angular-cookies": "1.4.8",
     "angular-sanitize": "1.4.8",
     "angular-route": "1.4.8",
-    "angular-material": "1.0.0-rc5",
+    "angular-material": "1.0.0",
     "angular-google-chart": "0.0.11",
     "angular-google-maps": "2.3.2",
     "font-awesome": "4.3.0",

client/app/event-map/event-map.directive.js → client/app/components/event-map/event-map.directive.js

@@ -3,7 +3,7 @@
 angular.module('fireflyApp')
   .directive('eventMap', function ($http, uiGmapGoogleMapApi, config) {
     return {
-      templateUrl: 'app/event-map/event-map.html',
+      templateUrl: 'app/components/event-map/event-map.html',
       restrict: 'EA',
       scope: {
         position: '=',

client/app/event-map/event-map.directive.spec.js → client/app/components/event-map/event-map.directive.spec.js

@@ -7,7 +7,7 @@ describe('Directive: eventMap', function () {
   //noinspection JSValidateTypes
   beforeEach(module('fireflyApp'));
   //noinspection JSValidateTypes
-  beforeEach(module('app/event-map/event-map.html'));
+  beforeEach(module('app/components/event-map/event-map.html'));
   beforeEach(inject(function ($rootScope, _$httpBackend_, config) {
     $httpBackend = _$httpBackend_;
     scope = $rootScope.$new();

client/components/footer/footer.directive.js → client/app/components/footer/footer.directive.js

@@ -3,7 +3,7 @@
 angular.module('fireflyApp')
   .directive('fireflyFooter', function (themeService) {
     return {
-      templateUrl: 'components/footer/footer.html',
+      templateUrl: 'app/components/footer/footer.html',
       restrict: 'EA',
       scope: {
         tag: '='

client/components/topNav/topNav.directive.js → client/app/components/topNav/topNav.directive.js

@@ -3,7 +3,7 @@
 angular.module('fireflyApp')
   .directive('fireflyTopNav', function () {
     return {
-      templateUrl: 'components/topNav/topNav.html',
+      templateUrl: 'app/components/topNav/topNav.html',
       restrict: 'EA',
       scope: {
         tag: '='

client/components/topNav/topNav.html → client/app/components/topNav/topNav.html

@@ -1,6 +1,6 @@
 <md-toolbar ng-style="{'background-color': tag.color}">
   <div class="md-toolbar-tools">
-    <img src="../../assets/images/logo.svg" width="191" style="padding-right: 20px">
+    <img src="app/assets/images/logo.svg" width="191" style="padding-right: 20px">
     <span style="padding-top: 5px;">{{ tag.title }}</span>
   </div>
 </md-toolbar>

client/app/firefly.config.js

@@ -3,13 +3,46 @@
 angular.module('fireflyApp')
   .constant('GOOGLE_API_KEY', 'Set in server/config/local.env.js')
   .config(function ($routeProvider, $locationProvider, $mdThemingProvider) {
-    $routeProvider.otherwise({ redirectTo: '/' });
-
     $locationProvider.html5Mode(true);
 
     $mdThemingProvider.theme('default')
         .primaryPalette('grey')
         .accentPalette('indigo');
+
+    $routeProvider
+      .when('/', {
+        templateUrl: 'app/main/main.html',
+        controller: 'MainCtrl',
+        controllerAs: 'vm'
+      })
+      .when('/:tag/events', {
+        templateUrl: 'app/main/eventList.html',
+        controller: 'MainCtrl',
+        controllerAs: 'vm'
+      })
+      .when('/event/:hash/analytics', {
+        templateUrl: 'app/shorturl/shorturlAnalytics.html',
+        controller: 'ShorturlAnalyticsCtrl',
+        controllerAs: 'vm'
+      })
+      .when('/event/:hash', {
+        templateUrl: 'app/shorturl/shorturlEvent.html',
+        controller: 'ShorturlEventCtrl',
+        controllerAs: 'vm'
+      })
+      // Deprecated routes
+      .when('/:hash/analytics', {
+        templateUrl: 'app/shorturl/shorturlAnalytics.html',
+        controller: 'ShorturlAnalyticsCtrl',
+        controllerAs: 'vm'
+      })
+      .when('/:hash/', {
+        templateUrl: 'app/shorturl/shorturlEvent.html',
+        controller: 'ShorturlEventCtrl',
+        controllerAs: 'vm'
+      })
+      // End deprecated routes
+      .otherwise({ redirectTo: '/' });
   })
   .config(function (uiGmapGoogleMapApiProvider, GOOGLE_API_KEY) {
     uiGmapGoogleMapApiProvider.configure({

client/app/main/eventList.html

@@ -0,0 +1,64 @@
+<div layout="column" layout-fill ng-show="::tag">
+  <meta view-head property="og:type" content="website">
+  <meta view-head property="og:description" content="{{ ::tag.description }}">
+  <meta view-head property="og:title" content="{{ ::tag.title }}">
+  <view-title>{{ ::tag.title }}</view-title>
+
+  <event-map position="geo" tag="vm.tag._id"></event-map>
+
+  <div layout layout-wrap layout-align="center start" id="card-box">
+
+    <md-card flex-sm="100" flex-gt-sm="45">
+      <md-card-content>
+        <h3 class="md-title">About {{ ::tag.title }}</h3>
+        <p>{{ ::tag.description }}</p>
+      </md-card-content>
+    </md-card>
+    <span flex-sm="0" flex-gt-sm="45" style="margin: 8px"></span>
+
+    <md-card flex-sm="100" flex-gt-sm="45">
+      <md-card-content>
+        <h3 class="md-title">
+          {{ ::tag.title }} Events near you
+        </h3>
+        <md-virtual-repeat-container class="eventListContainer">
+          <md-list ng-show="geo.latitude">
+            <md-list-item class="md-2-line" md-virtual-repeat="event in vm.nearEvents"
+                          ng-click="vm.openEvent(event._id)">
+              <div class="md-list-item-text">
+                  <h3 style="color: {{ ::tag.color }}">{{ ::event.title }}</h3>
+                  <p>{{ ::event.start | date : 'medium' : event.timezone }}</p>
+              </div>
+            </md-list-item>
+          </md-list>
+        </md-virtual-repeat-container>
+        <md-list class="md-2-line" ng-show="!geo.latitude">
+          Waiting for location...
+        </md-list>
+      </md-card-content>
+    </md-card>
+
+    <md-card flex-sm="100" flex-gt-sm="45">
+      <md-card-content>
+        <h3 class="md-title">
+          Upcoming {{ ::tag.title }} Events
+        </h3>
+        <md-virtual-repeat-container class="eventListContainer">
+          <md-list ng-show="vm.nextEvent">
+            <md-list-item class="md-2-line" md-virtual-repeat="event in vm.nextEvents"
+                          ng-click="vm.openEvent(event._id)">
+              <div class="md-list-item-text">
+                  <h3 style="color: {{ ::tag.color }}">{{ ::event.title }}</h3>
+                  <p>{{ ::event.start | date : 'medium' : event.timezone }}</p>
+              </div>
+            </md-list-item>
+          </md-list>
+        </md-virtual-repeat-container>
+        <md-list class="md-2-line" ng-show="!vm.nextEvent">
+          No upcoming events in this series.
+        </md-list>
+      </md-card-content>
+    </md-card>
+
+  </div>
+</div>

client/app/main/main.controller.js

@@ -1,25 +1,38 @@
 'use strict';
 
 angular.module('fireflyApp')
-  .controller('MainCtrl', function ($rootScope, $scope, $http, $location, $window, config) {
-    $scope.domain = config.DOMAIN;
-    $scope.nearEvent = undefined;
+  .controller('MainCtrl', function ($rootScope, $filter, $routeParams, $http, $location, $window, config) {
+    var vm = this;
+    vm.domain = config.DOMAIN;
+
+    if ($routeParams.tag) {
+      $rootScope.prefix = $routeParams.tag;
+      vm.all = false;
+      $http.jsonp(config.HUB_IP + 'api/v1/tags/' + $rootScope.prefix + '?callback=JSON_CALLBACK')
+        .success(function (data) {
+        $rootScope.tag = data;
+        $rootScope.tagColor = {
+            'background-color': $rootScope.tag.color,
+            height: '4px'
+          };
+      });
+    }
 
     $http.jsonp(config.HUB_IP + 'api/v1/events/stats?callback=JSON_CALLBACK')
       .success(function(data) {
-        $scope.tags = data.upcoming_top_tags; // jshint ignore:line
+        vm.tags = data.upcoming_top_tags; // jshint ignore:line
       }
     );
 
-    $scope.openEvent = function (eventId) {
-      $location.path('/' + eventId);
+    vm.openEvent = function (eventId) {
+      $location.path('/event/' + eventId);
     };
 
-    $scope.openTag = function (path) {
-      $window.location.href = 'http://' + path;
+    vm.openTag = function (path) {
+      $location.path(path + '/events/');
     };
 
-    $scope.distanceFromHere = function (_item, _startPoint) {
+    function distanceFromHere(_item, _startPoint) {
       var start = null;
 
       if (!_item.geo) {
@@ -60,25 +73,26 @@ angular.module('fireflyApp')
 
       var num = radiansTo(start, end) * 3958.8;
       return Math.round(num * 100) / 100;
-    };
+    }
 
     var processNextEvent = function(data) {
       if (data && data.items) {
-        $scope.nextEvent = data.items[0];
-        $scope.allEvents = data.items;
+        vm.nextEvent = data.items[0];
+        vm.nearEvents = $filter('orderBy')(data.items, distanceFromHere);
+        vm.nextEvents = $filter('orderBy')(data.items, 'start');
       }
     };
 
-    if ($scope.prefix) {
-      if ($scope.all) {
-        $http.jsonp(config.HUB_IP + 'api/v1/events/tag/' + $scope.prefix +
+    if ($rootScope.prefix) {
+      if (vm.all) {
+        $http.jsonp(config.HUB_IP + 'api/v1/events/tag/' + $rootScope.prefix +
           '?perpage=999&callback=JSON_CALLBACK').success(processNextEvent);
       } else {
-        $http.jsonp(config.HUB_IP + 'api/v1/events/tag/' + $scope.prefix +
+        $http.jsonp(config.HUB_IP + 'api/v1/events/tag/' + $rootScope.prefix +
           '/upcoming?perpage=999&callback=JSON_CALLBACK').success(processNextEvent);
       }
     } else {
-      if ($scope.all) {
+      if (vm.all) {
         $http.jsonp(config.HUB_IP + 'api/v1/events?perpage=100&callback=JSON_CALLBACK')
           .success(processNextEvent);
       } else {

client/app/main/main.controller.spec.js

@@ -6,7 +6,6 @@ describe('Controller: MainCtrl', function () {
   // load the controller's module
   //noinspection JSValidateTypes
   beforeEach(module('fireflyApp'));
-
   // Initialize the controller and a mock scope
   beforeEach(inject(function (_$httpBackend_, $controller, $rootScope, _config_) {
     $httpBackend = _$httpBackend_;
@@ -29,6 +28,6 @@ describe('Controller: MainCtrl', function () {
       .respond([]);
 
     $httpBackend.flush();
-    expect(scope.tags.length).toBe(4);
+    expect(MainCtrl.tags.length).toBe(4);
   });
 });

client/app/main/main.css

@@ -1,18 +1,15 @@
 .thing-form {
     margin: 20px 0;
 }
-
 #banner {
     border-bottom: none;
     margin-top: -20px;
 }
-
 #banner h1 {
     font-size: 60px;
     line-height: 1;
     letter-spacing: -1px;
 }
-
 .hero-unit {
     position: relative;
     padding: 30px 15px;
@@ -21,11 +18,9 @@
     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
     background: #4393B9;
 }
-
 #card-box {
-  margin-top: 15px;
+  margin-top: 16px;
 }
-
-md-card {
-  margin-top: 15px;
+.eventListContainer {
+  height: 400px;
 }

client/app/main/main.html

@@ -1,8 +1,8 @@
-<div layout="column" layout-fill ng-show="tag">
+<div layout="column" layout-fill ng-show="::tag">
   <meta view-head property="og:type" content="website">
-  <meta view-head property="og:description" content="{{tag.description}}">
-  <meta view-head property="og:title" content="{{tag.title}}">
-  <view-title>{{tag.title}}</view-title>
+  <meta view-head property="og:description" content="{{ ::tag.description }}">
+  <meta view-head property="og:title" content="{{ ::tag.title }}">
+  <view-title>{{ ::tag.title }}</view-title>
 
   <event-map position="geo" tag="prefix"></event-map>
 
@@ -11,14 +11,14 @@
     <md-card flex-sm="100" flex-gt-sm="45">
       <md-card-content>
         <h3 class="md-title">
-          {{tag.title}} Events near you
+          {{ ::tag.title }} Events near you
         </h3>
         <md-list ng-if="geo.latitude">
-          <md-list-item class="md-2-line" ng-repeat="event in allEvents | orderBy:distanceFromHere | limitTo:5"
-                        ng-click="openEvent(event._id)">
+          <md-list-item class="md-2-line" ng-repeat="event in vm.nearEvents | limitTo:5"
+                        ng-click="vm.openEvent(event._id)">
             <div class="md-list-item-text">
-                <h3 style="color: {{ tag.color }}">{{ event.title }}</h3>
-                <p>{{event.start | date : 'medium' : event.timezone}}</p>
+                <h3 style="color: {{ ::tag.color }}">{{ ::event.title }}</h3>
+                <p>{{ ::event.start | date : 'medium' : event.timezone }}</p>
             </div>
           </md-list-item>
         </md-list>
@@ -31,39 +31,39 @@ <h3 style="color: {{ tag.color }}">{{ event.title }}</h3>
     <md-card flex-sm="100" flex-gt-sm="45">
       <md-card-content>
         <h3 class="md-title">
-          Upcoming {{tag.title}} Events
+          Upcoming {{ ::tag.title }} Events
         </h3>
-        <md-list ng-if="nextEvent">
-          <md-list-item class="md-2-line" ng-repeat="event in allEvents | orderBy:'start' | limitTo:5"
-                        ng-click="openEvent(event._id)">
+        <md-list ng-if="vm.nextEvent">
+          <md-list-item class="md-2-line" ng-repeat="event in vm.nextEvents | limitTo:5"
+                        ng-click="vm.openEvent(event._id)">
             <div class="md-list-item-text">
-              <h3 style="color: {{ tag.color }}">{{ event.title }}</h3>
-              <p>{{event.start | date : 'medium' : event.timezone}}</p>
+              <h3 style="color: {{ ::tag.color }}">{{ ::event.title }}</h3>
+              <p>{{ ::event.start | date : 'medium' : event.timezone }}</p>
             </div>
           </md-list-item>
         </md-list>
-        <md-list class="md-2-line" ng-if="!nextEvent">
+        <md-list class="md-2-line" ng-if="!vm.nextEvent">
           No upcoming events in this series.
         </md-list>
       </md-card-content>
     </md-card>
 
     <md-card flex-sm="100" flex-gt-sm="45">
       <md-card-content>
-        <h3 class="md-title">About {{tag.title}}</h3>
-        <p>{{tag.description}}</p>
+        <h3 class="md-title">About {{ ::tag.title }}</h3>
+        <p>{{ ::tag.description }}</p>
       </md-card-content>
     </md-card>
 
     <md-card flex-sm="100" flex-gt-sm="45">
       <md-card-content>
         <h3 class="md-title">Popular topics</h3>
         <md-list>
-          <md-list-item class="md-2-line" ng-repeat="(key, value) in tags" ng-click="openTag(key + '.' + domain)"
+          <md-list-item class="md-2-line" ng-repeat="(key, value) in vm.tags" ng-click="vm.openTag(key)"
                         style="display: inline-block;" >
             <div class="md-list-item-text">
-              <h3 style="color: {{ tag.color }}">{{ key }}</h3>
-              <p>{{ value }} events</p>
+              <h3 style="color: {{ ::tag.color }}">{{ ::key }}</h3>
+              <p>{{ ::value }} events</p>
             </div>
           </md-list-item>
         </md-list>