[FEATURE] - Reworked Top 50 Charts to be able to filter by genre

app/public/js/app.js

@@ -27,7 +27,7 @@ app.config(function (
             controller: 'StreamCtrl'
         })
         .state('charts', {
-            url: '/',
+            url: '/charts/:genre',
             templateUrl: 'views/charts/charts.html',
             controller: 'ChartsCtrl'
         })

app/public/js/charts/chartsCtrl.js

@@ -2,24 +2,163 @@
 
 app.controller('ChartsCtrl', function (
     $scope,
+    $filter,
     $rootScope,
     SCapiService,
     SC2apiService,
-    utilsService
+    utilsService,
+    $stateParams
 ) {
     var tracksIds = [];
+    $scope.genres = [
+        {
+            "link": 'all-music',
+            "title": "All"
+        },
+        {
+            "link": 'alternativerock',
+            "title": "Alternative Rock"
+        },
+        {
+            "link": 'ambient',
+            "title": "Ambient"
+        },
+        {
+            "link": 'classical',
+            "title": "Classical"
+        },
+        {
+            "link": 'country',
+            "title": "Country"
+        },
+        {
+            "link": 'danceedm',
+            "title": "Dance & EDM"
+        },
+        {
+            "link": 'dancehall',
+            "title": "Dancehall"
+        },
+        {
+            "link": 'deephouse',
+            "title": "Deep House"
+        },
+        {
+            "link": 'disco',
+            "title": "Disco"
+        },
+        {
+            "link": 'drumbass',
+            "title": "Drum & Bass"
+        },
+        {
+            "link": 'dubstep',
+            "title": "Dubstep"
+        },
+        {
+            "link": 'electronic',
+            "title": "Electronic"
+        },
+        {
+            "link": 'folksingersongwriter',
+            "title": "Folk & Singer-Songwriter"
+        },
+        {
+            "link": 'hiphoprap',
+            "title": "Hip-hop & Rap"
+        },
+        {
+            "link": 'house',
+            "title": "House"
+        },
+        {
+            "link": 'indie',
+            "title": "Indie"
+        },
+        {
+            "link": 'jazzblues',
+            "title": "Jazz & Blues"
+        },
+        {
+            "link": 'latin',
+            "title": "Latin"
+        },
+        {
+            "link": 'metal',
+            "title": "Metal"
+        },
+        {
+            "link": 'piano',
+            "title": "Piano"
+        },
+        {
+            "link": 'pop',
+            "title": "Pop"
+        },
+        {
+            "link": 'rbsoul',
+            "title": "R&B & Soul"
+        },
+        {
+            "link": 'reggae',
+            "title": "Reggae"
+        },
+        {
+            "link": 'reggaeton',
+            "title": "Reggaeton"
+        },
+        {
+            "link": 'rock',
+            "title": "Rock"
+        },
+        {
+            "link": 'soundtrack',
+            "title": "Soundtrack"
+        },
+        {
+            "link": 'techno',
+            "title": "Techno"
+        },
+        {
+            "link": 'trance',
+            "title": "Trance"
+        },
+        {
+            "link": 'trap',
+            "title": "Trap"
+        },
+        {
+            "link": 'triphop',
+            "title": "Triphop"
+        },
+        {
+            "link": 'world',
+            "title": "World"
+        }
+    ]
+
+    var url_genre = $stateParams.genre;
+    var genre = {};
+    if(!url_genre){
+        genre = {
+            "link" : "all-music",
+            "title" : "All Music"
+        }
+    }else{
+        genre = $filter('filter')($scope.genres, {"link":url_genre}, true)[0]
+    }
 
-    $scope.title = 'Top 50';
+    $scope.title = 'Top 50 - '+genre.title;
     $scope.originalData = '';
     $scope.data = '';
     $scope.busy = false;
 
-    SC2apiService.getCharts()
+
+    SC2apiService.getCharts(genre.link)
         .then(filterCollection)
         .then(function (collection) {
             $scope.originalData = collection;
             $scope.data = collection;
-
             loadTracksInfo(collection);
         })
         .catch(function (error) {
@@ -101,4 +240,4 @@ app.controller('ChartsCtrl', function (
             });
     }
 
-});
+});

app/public/js/common/SC2apiService.js

@@ -45,12 +45,12 @@ app.service('SC2apiService', function (
      * Get charts (top 50)
      * @returns {Promise.<T>}
      */
-    this.getCharts = function () {
+    this.getCharts = function (genre) {
         // kind=top&genre=soundcloud%3Agenres%3Aall-music&limit=50
 
         var params = {
             kind: 'top',
-            genre: 'soundcloud:genres:all-music',
+            genre: 'soundcloud:genres:'+genre,
             limit: 50
         };
         return sendRequest('charts', { params: params })

app/public/stylesheets/sass/_components/_charts.scss

@@ -0,0 +1,14 @@
+.genre-selector {
+    width: 50%;
+    overflow: hidden;
+    height: 60px;
+    transition: height 0.4s;
+    &:hover{
+        height: 400px;
+    }
+}
+
+.genre-selector button.button{
+    margin-top: 5px;
+    width: 32%;
+}

app/public/stylesheets/sass/app.scss

@@ -61,6 +61,11 @@
 
 @import "_components/_songlist";
 
+/* ==========================================================================
+@Charts
+========================================================================== */
+@import "_components/_charts";
+
 /* ==========================================================================
 @Playlist songList
 ========================================================================== */

app/views/charts/charts.html

@@ -1,6 +1,14 @@
 <div class="streamView">
-    <h1> {{ title }}</h1>
+    <h1 class="pull-left"> {{ title }}</h1>
 
+    <!-- Genre Selector -->
+    <div class="genre-selector pull-right" >
+        <h3>Charts By Genre</h3>
+        <div class="btn-group">
+          <button ui-sref="charts({genre:'{{genre.link}}'})" ui-sref-opts="{reload:true}" class="button inline" ng-repeat="genre in genres">{{genre.title}}</button>
+        </div>
+    </div>
+    <div class="clearfix"></div>
     <!-- Song list wrapper -->
     <div class="streamView_inner">
         <ul class="songList"
@@ -20,4 +28,4 @@ <h1> {{ title }}</h1>
 
     <div ng-include="'views/common/loading.html'"></div>
 
-</div>
+</div>

tasks/sass.js

@@ -1,10 +1,8 @@
 module.exports = {
-    options: {
-        sourceMap: true
-    },
     production: {
         options: {
-            outputStyle: 'compressed'
+            outputStyle: 'compressed',
+            sourceMap: true
         },
         files: {
             '<%= settings.app %>/public/stylesheets/css/app.css': '<%= settings.app %>/public/stylesheets/sass/app.scss'