Add incubator filtering

frontend/app/index.html

@@ -7,9 +7,12 @@
   <link rel="stylesheet" href="css/app.css"/>
   <link rel="stylesheet" href="css/angular-busy.min.css"/>
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen"/>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-resource.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
+  <script src="//code.jquery.com/jquery.js"></script>
+  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
   <script src="js/app.js"></script>
   <script src="js/services.js"></script>
   <script src="js/controllers.js"></script>
@@ -25,34 +28,49 @@
     <div class="page-header">
       <h1>PredictionIO Sample Project with Public AngelList Data</h1>
       <p class="lead">A showcase on how to use PredictionIO to generate predictions and display them.</p>
+      <p>Visit <a href="http://prediction.io">http://prediction.io</a> for more information on PredictionIO.</p>
     </div>
 
     <div class="row">
       <div class="col-md-6">
         <div class="panel panel-default">
           <div class="panel-heading">
-            <h3 class="panel-title">Select a Startup</h3>
+            <h3 class="panel-title">If you follow...</h3>
           </div>
           <div class="panel-body" cg-busy="'startups'">
+            <div class="form-group">
+              <input ng-model="query" class="form-control input-sm" placeholder="Filter by startup name"/>
+            </div>
+            Filter by incubators:
+            <ul class="nav nav-pills">
+              <li class="active"><a ng-click="setIncubator('')" data-toggle="pill"><div style="height: 50px">All</div></a></li>
+              <li><a ng-click="setIncubator('500startups')" data-toggle="pill"><img src="img/500co.png" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('alchemist-accelerator')" data-toggle="pill"><img src="img/alchemist_acclerator_logo.gif" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('AngelPad')" data-toggle="pill"><img src="img/angelpad.png" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('dreamit-ventures')" data-toggle="pill"><img src="img/dreamit.png" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('startx')" data-toggle="pill"><img src="img/startx.png" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('techstars')" data-toggle="pill"><img src="img/techstars.png" class="img-responsive"/></a></li>
+              <li><a ng-click="setIncubator('y-combinator')" data-toggle="pill"><img src="img/yc500.gif" class="img-responsive"/></a></li>
+            </ul>
             <ul class="list-unstyled get-similar-startups">
-              <li ng-repeat="startup in startups | orderBy: 'name' | startFrom: (currentPage-1)*20 | limitTo: 20">
-                <a ng-click="getSimilarStartups(startup.id)">{{startup.name}}</a> (<a href="{{startup.url}}">AL</a>)
+              <li ng-repeat="startup in startups | orderBy: 'name' | startFrom: (currentPage-1)*10 | limitTo: 10">
+                <a ng-click="getSimilarStartups(startup.id)">{{startup.name}}</a> (<a href="{{startup.url}}">AngelList</a>)
               </li>
             </ul>
             <p class="text-center">
-              <pagination total-items="totalItems" page="currentPage" boundary-links="true" max-size=5 items-per-page=20></pagination>
+              <pagination total-items="totalItems" page="currentPage" boundary-links="true" max-size="5" items-per-page="10"></pagination>
             </p>
           </div>
         </div>
       </div>
       <div class="col-md-6">
         <div class="panel panel-default">
           <div class="panel-heading">
-            <h3 class="panel-title">Similar Startup(s)</h3>
+            <h3 class="panel-title">You may also follow...</h3>
           </div>
           <div class="panel-body" cg-busy="'similarStartups'">
             <ul class="list-unstyled">
-              <li ng-repeat="similarStartup in similarStartups"><a href="{{similarStartup.url}}">{{similarStartup.name}}</a></li>
+              <li ng-repeat="similarStartup in similarStartups">{{similarStartup.name}} (<a href="{{similarStartup.url}}">AngelList</a>)</li>
             </ul>
           </div>
         </div>

frontend/app/js/controllers.js

@@ -3,7 +3,7 @@
 /* Controllers */
 
 angular.module('pioALDemo.controllers', []).
-  controller('StartupCtrl', ['$scope', 'Startup', 'SimilarStartups', function($scope, Startup, SimilarStartups) {
+  controller('StartupCtrl', ['$scope', '$filter', 'Startup', 'SimilarStartups', function($scope, $filter, Startup, SimilarStartups) {
     var startupsHash = new Object();
     var startups = Startup.query(function() {
       for (var i = 0; i < startups.length; i++) {
@@ -13,6 +13,8 @@ angular.module('pioALDemo.controllers', []).
         startupsHash[id] = {name: name, url: url};
       }
       $scope.totalItems = startups.length;
+      $scope.query = "";
+      $scope.incubator = "";
     });
 
     $scope.startups = startups;
@@ -22,7 +24,7 @@ angular.module('pioALDemo.controllers', []).
     $scope.getSimilarStartups = function(startupId) {
       var similarStartupResult = SimilarStartups.get({
         pio_iid: startupId,
-        pio_appkey: 'QOxO1EGRYzfmTROjKFpkVVHLxy13EOak7GSfDdvcwxR2ukc8UuvrH3u5GWJS07er',
+        pio_appkey: 'DsutdlQe8wYUmYpdyAIkI1YKxCHehUTkRPDN3SyTYPBRtjzbfeqCAgoSao8pLBJA',
         pio_n: 10
       }, function() {
         var similarStartupIds = similarStartupResult["pio_iids"];
@@ -33,4 +35,17 @@ angular.module('pioALDemo.controllers', []).
         $scope.similarStartups = similarStartups;
       });
     }
+
+    $scope.setIncubator = function(incubator) {
+      $scope.incubator = incubator;
+    }
+
+    var filterChanged = function(newQuery) {
+      $scope.startups = $filter('filter')(startups, {name: $scope.query, incubator: $scope.incubator});
+      $scope.currentPage = 1;
+      $scope.totalItems = $scope.startups.length;
+    };
+
+    $scope.$watch('query', filterChanged);
+    $scope.$watch('incubator', filterChanged);
   }]);

frontend/app/js/filters.js

@@ -8,9 +8,4 @@ angular.module('pioALDemo.filters', []).
       start = +start; //parse to int
       return input.slice(start);
     }
-  }]).
-  filter('interpolate', ['version', function(version) {
-    return function(text) {
-      return String(text).replace(/\%VERSION\%/mg, version);
-    }
   }]);

frontend/app/js/services.js

@@ -7,12 +7,12 @@
 // In this case it is a simple value service.
 angular.module('pioALDemo.services', ['ngResource']).
   factory('Startup', ['$resource', function($resource) {
-    return $resource('http://al.demo.prediction.io/startups:startupId.json', {}, {
+    return $resource('http://angellist-demo.prediction.io/startups:startupId.json', {}, {
       query: {method: 'GET', params: {startupId: ''}, isArray: true, tracker: 'startups'}
     });
   }]).
   factory('SimilarStartups', ['$resource', function($resource) {
-    return $resource('http://al.demo.prediction.io/engines/itemsim/similarstartups/topn.json', {}, {
+    return $resource('http://angellist-demo.prediction.io/engines/itemsim/similarstartups/topn.json', {}, {
       get: {method: 'GET', tracker: 'similarStartups'}
     });
   }]);