proyectos-mejorandola · AlbertoDSosa · Aug 9, 2015 · Aug 11, 2015 · Aug 11, 2015 · Aug 12, 2015
diff --git a/public/css/main.css b/public/css/main.css
@@ -2,6 +2,14 @@ body {
   padding-top: 50px;
 }
 
+.u-margin {
+  margin: 5px;
+}
+
+.u-center {
+  text-align: center;
+}
+
 .navbar-brand {
   font-weight: 800;
 }
@@ -25,6 +33,7 @@ body {
 
 .type {
   margin-left: 1px;
+  display: inline-block;
 }
 
 .type-normal {

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Pokédex</title>
+    <title ng-if="title">{{'Pokédex | ' + title}}</title>
+    <title ng-if="!title">Pokédex</title>
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="css/main.css">
@@ -31,6 +32,8 @@
     <script src="js/lib/underscore-min.js"></script>
     <script src="js/lib/angular.min.js"></script>
     <script src="js/lib/angular-route.min.js"></script>
+    <script src="js/lib/angular-md5.min.js"></script>
+    <script src="js/lib/ui-bootstrap-tpls.min.js"></script>
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
     <script src="js/directives.js"></script>

diff --git a/public/js/app.js b/public/js/app.js
@@ -2,10 +2,12 @@
 
   var app = angular.module('pokedex', [
     'ngRoute',
+    'angular-md5',
+    'ui.bootstrap',
     'pokedex.controllers',
     'pokedex.directives',
     'pokedex.filters',
-    'pokedex.services'
+    'pokedex.services',
   ]);
 
   app.config(['$routeProvider', function ($routeProvider) {
@@ -15,6 +17,10 @@
         templateUrl: 'views/pokedex.html',
         controller: 'PokedexController'
       })
+      .when('/top-ten', {
+        templateUrl: 'views/top-ten.html',
+        controller: 'TopTenController'
+      })
       .when('/:type', {
         templateUrl: 'views/pokedex.html',
         controller: 'PokedexController'

diff --git a/public/js/controllers.js b/public/js/controllers.js
@@ -1,48 +1,89 @@
 (function (_) {
 
+
+
   angular.module('pokedex.controllers', [])
-    .controller('PokedexController', ['$scope', '$routeParams', 'pokemonService', function ($scope, $routeParams, pokemonService) {
+    .controller('PokedexController', ['$rootScope', '$scope', '$routeParams', 'pokemonService', function ($rootScope, $scope, $routeParams, pokemonService) {
+
       var type = $routeParams.type;
 
+      var pokemons = [];
+
+      $rootScope.title = '';
+
+      function partition(data, n) {
+        return _.chain(data).groupBy(function (element, index) {
+          return Math.floor(index / n);
+        }).toArray().value();
+      }
+
       if (type) {
         $scope.type = type;
 
         pokemonService.byType(type).then(function (data) {
-          $scope.pokemons = data
+          $scope.pokemons = pokemons = data;
           $scope.groupped = partition(data, 4);
         });
       } else {
         pokemonService.all().then(function (data) {
-          $scope.pokemons = data;
+          $scope.pokemons = pokemons = data;
           $scope.groupped = partition(data, 4);
         });
       }
 
+      $scope.search = function () {
+        var result = pokemons;
+        if ($scope.searchTerm) {
+          result = pokemons.filter(function (pokemon) {
+            var name = pokemon && pokemon.name || "";
 
-      function partition(data, n) {
-        return _.chain(data).groupBy(function (element, index) {
-          return Math.floor(index / n);
-        }).toArray().value();
-      }
+            return name.toLowerCase().indexOf($scope.searchTerm.toLowerCase()) !== -1;
+          });
+        }
+
+        $scope.pokemons = result;
+        $scope.groupped = partition(result, 4);
+      };
 
     }])
 
-    .controller('PokemonController', ['$scope', '$routeParams', 'pokemonService', function ($scope, $routeParams, pokemonService) {
+    .controller('PokemonController', ['$rootScope', '$scope', '$routeParams', 'pokemonService', function ($rootScope, $scope, $routeParams, pokemonService) {
       var name = $routeParams.name;
-      $scope.pokemon = {};
 
       pokemonService.byName(name)
       .then(function (data) {
+        $rootScope.title = data.name;
         $scope.pokemon = data;
+      }, function (reason) {
+        $scope.error = reason;
       });
+
     }])
 
-    .controller('TabsController', function () {
-      this.tab = 1;
+    .controller('TabsController', ['$scope', function ($scope) {
+      $scope.tab = 'Pokédex';
+      $scope.isSelected = function (clickEvent) {
+        $scope.tab = clickEvent.target.text;
+      };
 
-      this.selectTab = function (tab) {
-        this.tab = tab;
+      $scope.isActive = function (tab) {
+        return tab === $scope.tab;
       };
-    });
+
+    }])
+    .controller('TopTenController', ['$scope', 'pokemonService', function ($scope, pokemonService) {
+
+      function topTen(data) {
+        return _.chain(data).groupBy('rate').toArray().value().reverse();
+      }
+
+      $scope.indexStart = function (index) {
+        return ++index;
+      } 
+
+      pokemonService.byRate().then(function (data) {
+        $scope.groupped = topTen(data);
+      });
+    }]);
 
 })(_);
diff --git a/public/js/directives.js b/public/js/directives.js
@@ -42,6 +42,46 @@
         templateUrl: 'partials/pokemon-type.html'
       };
     })
+    .directive('pokemonCard', function () {
+      return {
+        restrict: 'E',
+        templateUrl: 'partials/pokemon-card.html'
+      };
+    })
+
+    .directive('pokemonRating', ['pokemonService', function (pokemonService) {
+      return {
+        restrict: 'E',
+        templateUrl: 'partials/pokemon-rating.html',
+        scope: {
+          name: '@name'
+        },
+        link: function (scope, el, attr) {
+          attr.$observe('name', function (value) {
+            if (value) {
+              scope.name = value;
+              var pokemonData = pokemonService.getStorage(value);
+              scope.rate = pokemonData.rate;
+            }
+          });
+        },
+        controller: function ($scope) {
+          $scope.max = 10;
+          $scope.isReadonly = false;
+
+          $scope.ratingStates = [
+            {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
+            {stateOff: 'glyphicon-off'}
+          ];
+
+          $scope.$watch('rate', function (newVal, oldVal) {
+           if(newVal !== oldVal) {
+            pokemonService.saveRate($scope.name, newVal);
+           }
+          });
+        }
+      };
+    }])
 
     .directive('pokemonComments', ['pokemonService', function (pokemonService) {
       return {
@@ -54,12 +94,14 @@
           attributes.$observe('name', function (value) {
             if (value) {
               scope.name = value;
-              scope.comments = pokemonService.getComments(value);
+              var pokemonData = pokemonService.getStorage(value);
+              scope.comments = pokemonData.comments;
             }
           });
         },
         controller: function ($scope) {
-          $scope.comments = pokemonService.getComments($scope.name);
+          var pokemonData = pokemonService.getStorage($scope.name);
+          $scope.comments = pokemonData.comments;
           $scope.comment = {};
           $scope.show = false;
 
@@ -76,10 +118,11 @@
           $scope.addComment = function () {
             $scope.comment.date = Date.now();
             pokemonService.saveComment($scope.name, $scope.comment);
-            $scope.comments = pokemonService.getComments($scope.name);
+            var pokemonData = pokemonService.getStorage($scope.name);
+            $scope.comments = pokemonData.comments;
             $scope.comment = {};
           };
-
+          
         }
       };
     }]);

diff --git a/public/js/lib/angular-md5.min.js b/public/js/lib/angular-md5.min.js
diff --git a/public/js/lib/ui-bootstrap-tpls.min.js b/public/js/lib/ui-bootstrap-tpls.min.js
diff --git a/public/js/lib/ui-bootstrap.min.js b/public/js/lib/ui-bootstrap.min.js
diff --git a/public/js/services.js b/public/js/services.js
@@ -1,4 +1,4 @@
-(function () {
+(function (_) {
 
   angular.module('pokedex.services', [])
 
@@ -30,7 +30,7 @@
           if (results.length > 0) {
             deferred.resolve(results[0]);
           } else {
-            deferred.reject();
+            deferred.reject('Pokemon not found');
           }
 
         });
@@ -55,34 +55,71 @@
         return deferred.promise;
       }
 
+      function byRate() {
+        var deferred = $q.defer(); 
+
+        all().then(function (data) {
+          var results = [];
+          for(var i=0; i < localStorage.length; i++) {
+            var pokemonKeys = localStorage.key(i);
+            var pokemonsStorage = JSON.parse(localStorage.getItem(pokemonKeys));
+            var pokemonsData = data.filter(function (pokemons) {
+              return pokemons.name === pokemonKeys;
+            });
+            pokemonsData[0].rate = pokemonsStorage.rate;
+            results.push(pokemonsData[0]);
+          }
+          deferred.resolve(results);
+
+
+        });
+        return deferred.promise;
+      }
+
+      function Pokemon() {
+        this.comments = [];
+        this.rate;
+      }
 
-      function saveComment(pokemon, comment) {
-        var comments = getComments(pokemon);
+      function saveRate(pokemonName, rate) {
+        var pokemon = new Pokemon();
+        pokemon = getStorage(pokemonName);
+        pokemon.rate = rate;  
 
-        comments.push(comment);
-        localStorage.setItem(pokemon, JSON.stringify(comments));
+        localStorage.setItem(pokemonName, JSON.stringify(pokemon));
       }
 
-      function getComments(pokemon) {
-        var comments = localStorage.getItem(pokemon);
+      function saveComment(pokemonName, comment) {
+        var pokemon = new Pokemon();
+        pokemon = getStorage(pokemonName);
+
+        pokemon.comments.push(comment);
+        localStorage.setItem(pokemonName, JSON.stringify(pokemon));
+      }
 
-        if (!comments) {
-          comments = [];
+      function getStorage(pokemonName) {
+        var pokemon = new Pokemon();
+        pokemon = localStorage.getItem(pokemonName);
+
+        if (!pokemon) {
+          var pokemon = new Pokemon();
         } else {
-          comments = JSON.parse(comments);
+          pokemon = JSON.parse(pokemon);
         }
 
-        return comments;
+        return pokemon;
       }
 
       return {
         all: all,
         byName: byName,
         byType: byType,
         saveComment: saveComment,
-        getComments: getComments
+        getStorage: getStorage,
+        byRate: byRate,
+        saveRate: saveRate
       };
 
     }]);
 
-})();
+})(_);
diff --git a/public/partials/pokemon-card.html b/public/partials/pokemon-card.html
@@ -0,0 +1,15 @@
+<div class="pokemon panel panel-primary">
+  <div class="panel-heading">
+    <pokemon-name></pokemon-name>
+  </div>
+  <div class="panel-body">
+    <a href="/#pokemon/{{pokemon.name | normalize}}">
+      <pokemon-image></pokemon-image>
+    </a>
+  </div>
+  <div class="panel-footer">
+    <div class="text-center">
+      <pokemon-type></pokemon-type>
+    </div>
+  </div>
+</div>
diff --git a/public/partials/pokemon-comments.html b/public/partials/pokemon-comments.html
@@ -21,13 +21,13 @@ <h1 class="panel-title">Comments <button class="close pull-right" ng-click="togg
         </div>
       </div>
     </form>
-    <blockquote ng-repeat="comment in comments">
+    <blockquote ng-repeat="comment in comments | orderBy: '-date'">
       <p>{{comment.body}}</p>
       <footer>
-        Comment by 
+        <img ng-if="!comment.anonymous" width="48px" class="img-circle" src="http://gravatar.com/avatar/{{comment.email | gravatar}}"> 
         <a ng-if="!comment.anonymous" href="mailto:{{comment.email}}">{{comment.email}}</a> 
         <em ng-if="comment.anonymous">Anonymous</em>
-        on <span>{{comment.date | date : 'medium'}}</span>
+        commented on <span>{{comment.date | date : 'medium'}}</span>
       </footer>
     </blockquote>
   </div>