Filters work better and look less like ass now.
authorCameron Ball <cameron@getapproved.com.au>
Fri, 12 Dec 2014 06:17:22 +0000 (14:17 +0800)
committerCameron Ball <cameron@getapproved.com.au>
Fri, 12 Dec 2014 06:17:22 +0000 (14:17 +0800)
app/components/hello/hello-service.js
app/css/divinelegy.css
app/index.html
app/pages/packs/packs.html
app/pages/packs/packs.js
app/pages/simfiles/simfiles.html
app/pages/simfiles/simfiles.js

index 01012e9..e9bc504 100644 (file)
@@ -84,6 +84,6 @@ factory("HelloService", ['rockEndpoint', '$http', '$location', '$q', function(ro
             return r.id;
         });
     };
-    
+        
     return hello; //assume hello has been loaded
 }]);
\ No newline at end of file
index e68424a..3167203 100644 (file)
@@ -28,6 +28,37 @@ table {
     text-align: left;
 }
 
+#filters {
+    text-align: center;
+    background: rgba(255,255,255,0.05);
+    border: 2px solid #000000;
+    margin: 0px 2px 0px 2px;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    padding-top: 8px;
+    margin-bottom: 20px;
+}
+
+#filters input[type="text"], #filters select {
+    box-sizing:content-box;
+    -ms-box-sizing:content-box;
+    -moz-box-sizing:content-box;
+    -webkit-box-sizing:content-box;
+    background: rgba(0,0,0,0.25);
+    border: 2px solid rgba(0,0,0,0.3);
+    color: #888;
+    height: 20px;
+    line-height:15px;
+    margin-bottom: 8px;
+    margin-right: 6px;
+    margin-top: 2px;
+    outline: 0 none;
+    padding: 5px 0px 5px 5px;
+    width: 110px;
+    border-radius: 4px;
+}
+
 #navigation table {
     border-collapse: separate;
     border-spacing: 0 5px;
index 7e73813..51485e7 100644 (file)
@@ -33,6 +33,7 @@
         <script src="components/simfiles/mostdownloaded-directive.js"></script>
         <script src="components/messages/messagebox-controller.js"></script>
         <script src="components/messages/messagebox-directive.js"></script>
+        <script src="components/rhaboo/rhaboo.min.js"></script>
         
         <script src="pages/index/index.js"></script>
         <script src="pages/upload/upload.js"></script>
index 9267208..0bd5d21 100644 (file)
@@ -1,20 +1,51 @@
-<input type="text" ng-model="packTitleFilterKeyword" placeholder="pack title..."/>\r
-<input type="text" ng-model="artistFilterKeyword" placeholder="artist..."/>\r
-<input type="text" ng-model="songTitleFilterKeyword" placeholder="song title..."/>\r
-<select ng-model="difficultyFilterKeyword">\r
-    <option value="Any" selected="selected">Any</option>\r
-    <option value="Novice">Novice</option>\r
-    <option value="Easy">Easy</option>\r
-    <option value="Medium">Medium</option>\r
-    <option value="Hard">Hard</option>\r
-    <option value="Expert">Expert</option>\r
-</select>\r
-<input type="text" ng-model="ratingFilterKeyword" placeholder="rating..."/>\r
-<input type="text" ng-model="stepArtistFilterKeyword" placeholder="step artist..."/>\r
-FG changes: <input type="checkbox" ng-model="fgChangesFilterKeyword">\r
-BG changes: <input type="checkbox" ng-model="bgChangesFilterKeyword">\r
-BPM changes: <input type="checkbox" ng-model="bpmChangesFilterKeyword">\r
+<div id="filters">\r
+    <div id="text-filters">\r
+        <input type="text" ng-model="packTitleFilterKeyword" placeholder="Pack Title"/>\r
+        <input type="text" ng-model="artistFilterKeyword" placeholder="Song Artist"/>\r
+        <input type="text" ng-model="songTitleFilterKeyword" placeholder="Song Title"/>\r
+        <input type="text" ng-model="stepArtistFilterKeyword" placeholder="Step Artist"/>\r
+        <input type="text" ng-model="ratingFilterKeyword" placeholder="Block Rating"/>\r
+    </div>\r
+    <div id="select-filters">\r
+        <select ng-model="modeFilterKeyword">\r
+            <option value="Any" disabled selected>Mode</option>\r
+            <option value="Any">Any</option>\r
+            <option value="single">Singles</option>\r
+            <option value="double">Doubles</option>\r
+        </select>\r
 \r
+        <select ng-model="difficultyFilterKeyword">\r
+            <option value="Any" disabled selected>Difficulty</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Novice">Novice</option>\r
+            <option value="Easy">Easy</option>\r
+            <option value="Medium">Medium</option>\r
+            <option value="Hard">Hard</option>\r
+            <option value="Expert">Expert</option>\r
+        </select>\r
+\r
+        <select ng-model="fgChangesFilterKeyword">\r
+            <option value="Any" disabled selected>FG Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+\r
+        <select ng-model="bgChangesFilterKeyword">\r
+            <option value="Any" disabled selected>BG Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+\r
+        <select ng-model="bpmChangesFilterKeyword">\r
+            <option value="Any" disabled selected>BPM Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+    </div>\r
+</div>\r
 <accordion close-others="false">\r
     <accordion-group class     = "simfileListing"\r
                      is-open   = "isOpen"\r
@@ -22,12 +53,7 @@ BPM changes: <input type="checkbox" ng-model="bpmChangesFilterKeyword">
                      heading   = "{{isOpen ? '- ' + pack.title : '+ ' + pack.title}}"\r
                      ng-init   = "contributors=getContributors(pack.contributors)"\r
                      ng-repeat = "pack in packList | filter: packTitleFilter\r
-                                                   | filter: artistFilter\r
-                                                   | filter: songTitleFilter\r
-                                                   | filter: stepsFilter\r
-                                                   | filter: fgChangesFilter\r
-                                                   | filter: bgChangesFilter\r
-                                                   | filter: bpmChangesFilter"\r
+                                                   | filter: simfileFilter"\r
     >\r
         <img ng-src="{{rockEndpoint}}{{pack.banner}}" alt="swage" />\r
         <table>\r
index e38cfa3..2e8682d 100644 (file)
@@ -6,14 +6,15 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
 {
     $scope.rockEndpoint = rockEndpoint;
     $scope.packTitleFilterKeyword = null;
-    $scope.artistFilterKeyword = null;
+    $scope.artistFilterKeyWord = null;
     $scope.songTitleFilterKeyword = null;
     $scope.difficultyFilterKeyword = 'Any';
     $scope.ratingFilterKeyword = null;
-    $scope.contributorFilterKeyword = null;
-    $scope.fgChangesFilterKeyword = null;
-    $scope.bgChangesFilterKeyword = null;
-    $scope.bpmChangesFilterKeyword = null;
+    $scope.stepArtistFilterKeyword = null;
+    $scope.fgChangesFilterKeyword = 'Any';
+    $scope.bgChangesFilterKeyword = 'Any';
+    $scope.bpmChangesFilterKeyword = 'Any';
+    $scope.modeFilterKeyword = 'Any';
     
     var filesizeBytes = function(size)  
     {  
@@ -73,7 +74,7 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
 
     $scope.getContributors = function(contribs)
     {
-        return contribs.join(', ');
+        if(contribs.length) return contribs.join(', ');
     };
     
     $scope.getSimfileListingIndex = function(packName, index)
@@ -86,111 +87,83 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
         var re = new RegExp($scope.packTitleFilterKeyword, 'i');
         return !$scope.packTitleFilterKeyword || re.test(pack.title);
     };
-    
-    $scope.artistFilter = function (pack)
+
+    $scope.simfileFilter = function(pack)
     {
-        var re = new RegExp($scope.artistFilterKeyword, 'i');
-        var simfiles = pack.simfiles;
-        var match = false;
-        for(var i=0; i<simfiles.length; i++)
+        // Step 0: All chart keywords are null
+        if(!$scope.songTitleFilterKeyword &&
+           !$scope.artistFilterKeyword &&
+           !$scope.ratingFilterKeyword &&
+           !$scope.stepArtistFilterKeyword &&
+           $scope.difficultyFilterKeyowrd === 'Any' &&
+           $scope.difficultyFilterKeyword === 'Any' &&
+           $scope.fgChangesFilterKeyword === 'Any' &&
+           $scope.bgChangesFilterKeyword === 'Any' &&
+           $scope.modeFilterKeyword === 'Any' &&
+           $scope.bpmFilterKeyword === 'Any'
+           )
         {
-            match = re.test(simfiles[i].artist);
-            if(match) break;
+            return true;
         }
         
-        return !$scope.artistFilterKeyword || match;
-    };
-    
-    $scope.songTitleFilter = function (pack)
-    {
-        var re = new RegExp($scope.songTitleFilterKeyword, 'i');
         var simfiles = pack.simfiles;
         var match = false;
         for(var i=0; i<simfiles.length; i++)
         {
-            match = re.test(simfiles[i].title);
+            var simfile = pack.simfiles[i];
+            var songTitleRe = new RegExp($scope.songTitleFilterKeyword, 'i');
+            var artistRe = new RegExp($scope.artistFilterKeyword, 'i');
+            
+
+            match = (!$scope.songTitleFilterKeyword || songTitleRe.test(simfile.title)) &&
+                    (!$scope.artistFilterKeyword || artistRe.test(simfile.artist)) &&
+                    ($scope.fgChangesFilterKeyword === 'Any' || simfile.fgChanges === $scope.fgChangesFilterKeyword) &&
+                    ($scope.bgChangesFilterKeyword === 'Any' || simfile.bgChanges === $scope.bgChangesFilterKeyword) &&
+                    ($scope.bpmChangesFilterKeyword === 'Any' || simfile.bpmChanges === $scope.bpmChangesFilterKeyword) &&
+                    chartsFilter(simfile);
+
             if(match) break;
         }
         
-        return !$scope.songTitleFilterKeyword || match;
+        return match;
     };
-    
-    $scope.stepsFilter = function(pack)
+
+    var chartsFilter = function(simfile)
     {
-        // Step 0: Both rating and difficulty keyword are null
-        if(!$scope.ratingFilterKeyword && $scope.difficultyFilterKeyword === 'Any' && !$scope.stepArtistFilterKeyword)
+        if(
+           !$scope.ratingFilterKeyword &&
+           !$scope.stepArtistFilterKeyword &&
+           $scope.modeFilterKeyword === 'Any' &&
+           $scope.difficultyFilterKeyword === 'Any'
+           )
         {
             return true;
         }
         
-        var re = new RegExp($scope.stepArtistFilterKeyword, 'i');
-        var simfiles = pack.simfiles;
+        var stepArtistRe = new RegExp($scope.stepArtistFilterKeyword, 'i');
+        var steps = [simfile.steps.single, simfile.steps.double];
+        var modeKeywordMap = ['single', 'double'];
+        var match = false;
         
-        for(var i=0; i<simfiles.length; i++)
+        loop1:
+        for(var i=0; i<steps.length; i++)
         {
-            for(var j=0; j<simfiles[i].steps.single.length; j++)
-            {
-                var chartInfo = simfiles[i].steps.single[j];
-                var match = true;
-                if($scope.ratingFilterKeyword && chartInfo.rating !== $scope.ratingFilterKeyword)
-                {
-                    match = false;
-                }
-
-                if($scope.difficultyFilterKeyword !== 'Any' && chartInfo.difficulty !== $scope.difficultyFilterKeyword)
-                {
-                    match = false;
-                }
-
-                if($scope.stepArtistFilterKeyword && !re.test(chartInfo.artist))
-                {
-                    match = false;
-                }
-
-                if(match) return true;
-            }
-            
-            for(var j=0; j<simfiles[i].steps.double.length; j++)
+        loop2:
+            for(var j=0; j<steps[i].length; j++)
             {
-                var chartInfo = simfiles[i].steps.double[j];
-                var match = true;
-                if($scope.ratingFilterKeyword && chartInfo.rating !== $scope.ratingFilterKeyword)
-                {
-                    match = false;
-                }
-
-                if($scope.difficultyFilterKeyword !== 'Any' && chartInfo.difficulty !== $scope.difficultyFilterKeyword)
-                {
-                    match = false;
-                }
-
-                if($scope.stepArtistFilterKeyword && !re.test(chartInfo.artist))
-                {
-                    match = false;
-                }
-
-                if(match) return true;;
+                var chart = steps[i][j];
+                match = (!$scope.stepArtistFilterKeyword || stepArtistRe.test(chart.artist)) &&
+                        (!$scope.ratingFilterKeyword || (!isNaN($scope.ratingFilterKeyword) && chart.rating === Number($scope.ratingFilterKeyword))) &&
+                        ($scope.difficultyFilterKeyword === 'Any' || chart.difficulty === $scope.difficultyFilterKeyword) &&
+                        ($scope.modeFilterKeyword === 'Any' || modeKeywordMap[i] === $scope.modeFilterKeyword);
+                
+                if(match) break loop1;
             }
         }
-
-        return false;
-    };
-
-    $scope.fgChangesFilter = function(simfile)
-    {
-            return !$scope.fgChangesFilterKeyword || simfile.fbChanges === 'Yes';
-    };
-    
-    $scope.bgChangesFilter = function(simfile)
-    {
-            return !$scope.bgChangesFilterKeyword || simfile.bgChanges === 'Yes';
-    };
-
-    $scope.bpmChangesFilter = function(simfile)
-    {
-            return !$scope.bpmChangesFilterKeyword || simfile.bpmChanges === 'Yes';
-    };
-    
+        
+        return match;
+    }
+       
     SimfileService.getPacks().then(function(packs)
     {
         $scope.packList = packs;
index c440742..8757f12 100644 (file)
@@ -1,30 +1,62 @@
-<input type="text" ng-model="artistFilterKeyword" placeholder="artist..."/>\r
-<input type="text" ng-model="titleFilterKeyword" placeholder="title..."/>\r
-<select ng-model="difficultyFilterKeyword">\r
-    <option value="Any" selected="selected">Any</option>\r
-    <option value="Novice">Novice</option>\r
-    <option value="Easy">Easy</option>\r
-    <option value="Medium">Medium</option>\r
-    <option value="Hard">Hard</option>\r
-    <option value="Expert">Expert</option>\r
-</select>\r
-<input type="text" ng-model="ratingFilterKeyword" placeholder="rating..."/>\r
-<input type="text" ng-model="stepArtistFilterKeyword" placeholder="step artist..."/>\r
-FG changes: <input type="checkbox" ng-model="fgChangesFilterKeyword">\r
-BG changes: <input type="checkbox" ng-model="bgChangesFilterKeyword">\r
-BPM changes: <input type="checkbox" ng-model="bpmChangesFilterKeyword">\r
+<div id="filters">\r
+    <div id="text-filters">\r
+        <input type="text" ng-model="songTitleFilterKeyword" placeholder="Song Title"/>\r
+        <input type="text" ng-model="artistFilterKeyword" placeholder="Song Artist"/>\r
+        <input type="text" ng-model="stepArtistFilterKeyword" placeholder="Step Artist"/>\r
+        <input type="text" ng-model="ratingFilterKeyword" placeholder="Block Rating"/>\r
+    </div>\r
+    <div id="select-filters">\r
+        <select ng-model="modeFilterKeyword">\r
+            <option value="Any" disabled selected>Mode</option>\r
+            <option value="Any">Any</option>\r
+            <option value="single">Singles</option>\r
+            <option value="double">Doubles</option>\r
+        </select>\r
+\r
+        <select ng-model="difficultyFilterKeyword">\r
+            <option value="Any" disabled selected>Difficulty</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Novice">Novice</option>\r
+            <option value="Easy">Easy</option>\r
+            <option value="Medium">Medium</option>\r
+            <option value="Hard">Hard</option>\r
+            <option value="Expert">Expert</option>\r
+        </select>\r
+\r
+        <select ng-model="fgChangesFilterKeyword">\r
+            <option value="Any" disabled selected>FG Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+\r
+        <select ng-model="bgChangesFilterKeyword">\r
+            <option value="Any" disabled selected>BG Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+\r
+        <select ng-model="bpmChangesFilterKeyword">\r
+            <option value="Any" disabled selected>BPM Changes</option>\r
+            <option value="Any">Any</option>\r
+            <option value="Yes">Yes</option>\r
+            <option value="No">No</option>\r
+        </select>\r
+    </div>\r
+</div>\r
 \r
 <accordion close-others="false">\r
     <accordion-group class     = "simfileListing"\r
                      is-open   = "isOpen"\r
                      ng-class  = "{active: isOpen}"\r
                      heading   = "{{isOpen ? '- ' + simfile.title : '+ ' + simfile.title}}"\r
-                     ng-repeat = "simfile in simfileList | filter: artistFilter\r
-                                                         | filter: titleFilter\r
-                                                         | filter: stepsFilter\r
-                                                         | filter: fgChangesFilter\r
+                     ng-repeat = "simfile in simfileList | filter: titleFilter\r
+                                                         | filter: artistFilter\r
                                                          | filter: bgChangesFilter\r
-                                                         | filter: bpmChangesFilter"\r
+                                                         | filter: fgChangesFilter\r
+                                                         | filter: bpmChangesFilter\r
+                                                         | filter: chartsFilter"\r
     >\r
         <simfile rock-endpoint="rockEndpoint"\r
                  simfile="simfile"\r
index baa13e4..79cb223 100644 (file)
@@ -5,101 +5,81 @@ angular.module("DivinElegy.pages.simfiles", ["DivinElegy.components.simfiles","D
 .controller("SimfileController", ['$scope', 'rockEndpoint', 'SimfileService', function($scope, rockEndpoint, SimfileService)
 {
     $scope.rockEndpoint = rockEndpoint;
-    $scope.artistFilterKeyword = null;
-    $scope.titleFilterKeyword = null;
+    $scope.artistFilterKeyWord = null;
+    $scope.songTitleFilterKeyword = null;
     $scope.difficultyFilterKeyword = 'Any';
     $scope.ratingFilterKeyword = null;
     $scope.stepArtistFilterKeyword = null;
-    $scope.fgChangesFilterKeyword = null;
-    $scope.bgChangesFilterKeyword = null;
-    $scope.bpmChangesFilterKeyword = null;
-    $scope.simfileList = [];
-    
+    $scope.fgChangesFilterKeyword = 'Any';
+    $scope.bgChangesFilterKeyword = 'Any';
+    $scope.bpmChangesFilterKeyword = 'Any';
+    $scope.modeFilterKeyword = 'Any';
+
+    $scope.titleFilter = function (simfile)
+    {
+        var re = new RegExp($scope.titleFilterKeyword, 'i');
+        return !$scope.songTitleFilterKeyword || re.test(simfile.title);
+    };
+        
     $scope.artistFilter = function (simfile)
     {
         var re = new RegExp($scope.artistFilterKeyword, 'i');
         return !$scope.artistFilterKeyword || re.test(simfile.artist);
     };
     
-    $scope.titleFilter = function (simfile)
+    $scope.fgChangesFilter = function(simfile)
     {
-        var re = new RegExp($scope.titleFilterKeyword, 'i');
-        return !$scope.titleFilterKeyword || re.test(simfile.title);
+        return $scope.fgChangesFilterKeyword === 'Any' || simfile.fgChanges === $scope.fgChangesFilterKeyword;
+    };
+
+    $scope.bgChangesFilter = function(simfile)
+    {
+        return $scope.bgChangesFilterKeyword === 'Any' || simfile.bgChanges === $scope.bgChangesFilterKeyword;
     };
     
-    $scope.stepsFilter = function(simfile)
+    $scope.bpmChangesFilter = function(simfile)
+    {
+        return $scope.bpmChangesFilterKeyword === 'Any' || simfile.bpmChanges === $scope.bpmChangesFilterKeyword;
+    };
+
+    $scope.chartsFilter = function(simfile)
     {
-        // Step 0: Both rating and difficulty keyword are null
-        if(!$scope.ratingFilterKeyword && $scope.difficultyFilterKeyword === 'Any' && !$scope.stepArtistFilterKeyword)
+        if(
+           !$scope.ratingFilterKeyword &&
+           !$scope.stepArtistFilterKeyword &&
+           $scope.modeFilterKeyword === 'Any' &&
+           $scope.difficultyFilterKeyword === 'Any'
+           )
         {
             return true;
         }
         
-        var re = new RegExp($scope.stepArtistFilterKeyword, 'i');
-  
-        for(var i in simfile.steps.single)
-        {
-            var chartInfo = simfile.steps.single[i];
-            
-            if($scope.ratingFilterKeyword && chartInfo.rating !== $scope.ratingFilterKeyword)
-            {
-                return false;
-            }
-            
-            if($scope.difficultyFilterKeyword !== 'Any' && chartInfo.difficulty !== $scope.difficultyFilterKeyword)
-            {
-                return false;
-            }
-            
-            if($scope.stepArtistFilterKeyword && !re.test(chartInfo.artist))
-            {
-                console.log('woo');
-                return false;
-            }
-            
-            return true;
-        }
+        var stepArtistRe = new RegExp($scope.stepArtistFilterKeyword, 'i');
+        var steps = [simfile.steps.single, simfile.steps.double];
+        var modeKeywordMap = ['single', 'double'];
+        var match = false;
         
-        for(var i in simfile.steps.double)
+        loop1:
+        for(var i=0; i<steps.length; i++)
         {
-            var chartInfo = simfile.steps.double[i];
-            
-            if($scope.ratingFilterKeyword && chartInfo.rating !== $scope.ratingFilterKeyword)
-            {
-                return false;
-            }
-            
-            if($scope.difficultyFilterKeyword !== 'Any' && chartInfo.difficulty !== $scope.difficultyFilterKeyword)
+        loop2:
+            for(var j=0; j<steps[i].length; j++)
             {
-                return false;
+                var chart = steps[i][j];
+                console.log($scope.modeFilterKeyword);
+                console.log(simfile.steps[$scope.modeFilterKeyword]);
+                console.log($scope.modeFilterKeyword === 'Any' || simfile.steps[$scope.modeFilterKeyword].length);
+                match = (!$scope.stepArtistFilterKeyword || stepArtistRe.test(chart.artist)) &&
+                        (!$scope.ratingFilterKeyword || (!isNaN($scope.ratingFilterKeyword) && chart.rating === Number($scope.ratingFilterKeyword))) &&
+                        ($scope.difficultyFilterKeyword === 'Any' || chart.difficulty === $scope.difficultyFilterKeyword) &&
+                        ($scope.modeFilterKeyword === 'Any' || modeKeywordMap[i] === $scope.modeFilterKeyword);
+                
+                if(match) break loop1;
             }
-            
-            if($scope.stepArtistFilterKeyword && !re.test(chartInfo.artist))
-            {
-                console.log('woo');
-                return false;
-            }
-            
-            return true;
         }
-       
-        return false;
-    };
-
-    $scope.fgChangesFilter = function(simfile)
-    {
-            return !$scope.fgChangesFilterKeyword || simfile.fbChanges === 'Yes';
-    };
-    
-    $scope.bgChangesFilter = function(simfile)
-    {
-            return !$scope.bgChangesFilterKeyword || simfile.bgChanges === 'Yes';
-    };
-
-    $scope.bpmChangesFilter = function(simfile)
-    {
-            return !$scope.bpmChangesFilterKeyword || simfile.bpmChanges === 'Yes';
-    };
+        
+        return match;
+    }
     
     SimfileService.getSimfiles().then(function(simfiles)
     {