Complete filter functionality. Formatted upper filters to take more visual column space. Force filter wrapping with flex for small screens.

2 files changed, 35 insertions, 10 deletions

diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html
index 6fb94c14a7e..8de36fc4005 100644
--- a/util/gh-pages/index.html
+++ b/util/gh-pages/index.html
@@ -103,6 +103,7 @@ Otherwise, have a great day =^.^=
         @media (min-width: 405px) {
             #upper-filters {
                 display: flex;
+                flex-wrap: wrap;
             }
         }
 
@@ -404,7 +405,7 @@ Otherwise, have a great day =^.^=
 
             <div class="panel panel-default" ng-show="data">
                 <div class="panel-body row">
-                    <div id="upper-filters" class="col-12 col-md-4">
+                    <div id="upper-filters" class="col-12 col-md-6">
                         <div class="btn-group" filter-dropdown>
                             <button type="button" class="btn btn-default dropdown-toggle">
                                 Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span>
@@ -523,7 +524,7 @@ Otherwise, have a great day =^.^=
                             </ul>
                         </div>
                     </div>
-                    <div class="col-12 col-md-7 search-control">
+                    <div class="col-12 col-md-6 search-control">
                         <div class="input-group">
                             <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
                             <input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input"
@@ -539,7 +540,7 @@ Otherwise, have a great day =^.^=
                 </div>
             </div>
             <!-- The order of the filters should be from most likely to remove a lint to least likely to improve performance. -->
-            <article class="panel panel-default" id="{{lint.id}}" ng-repeat="lint in data | filter:bySearch | filter:byGroups | filter:byLevels | filter:byVersion">
+            <article class="panel panel-default" id="{{lint.id}}" ng-repeat="lint in data | filter:bySearch | filter:byGroups | filter:byLevels | filter:byVersion | filter:byApplicabilities">
                 <header class="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
                     <h2 class="panel-title">
                         <div class="panel-title-name">
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index fa72b7de0a4..99868b04492 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -156,15 +156,17 @@
                 Object.entries(versionFilterKeyMap).map(([key, value]) => [value, key])
             );
 
-            const APPLICABILITIES_DEFAULT = {
-                unspecified: true,
-                unresolved: true,
-                machineApplicable: true,
-                maybeIncorrect: true,
-                hasPlaceholders: true
+            const APPLICABILITIES_FILTER_DEFAULT = {
+                Unspecified: true,
+                Unresolved: true,
+                MachineApplicable: true,
+                MaybeIncorrect: true,
+                HasPlaceholders: true
             };
 
-            $scope.applicabilities = APPLICABILITIES_DEFAULT;
+            $scope.applicabilities = {
+                ...APPLICABILITIES_FILTER_DEFAULT
+            }
 
             // loadFromURLParameters retrieves filter settings from the URL parameters and assigns them
             // to corresponding $scope variables.
@@ -192,6 +194,7 @@
 
                 handleParameter('levels', $scope.levels, LEVEL_FILTERS_DEFAULT);
                 handleParameter('groups', $scope.groups, GROUPS_FILTER_DEFAULT);
+                handleParameter('applicabilities', $scope.applicabilities, APPLICABILITIES_FILTER_DEFAULT);
 
                 // Handle 'versions' parameter separately because it needs additional processing
                 if (urlParameters.versions) {
@@ -259,6 +262,7 @@
                 updateURLParameter($scope.levels, 'levels', LEVEL_FILTERS_DEFAULT);
                 updateURLParameter($scope.groups, 'groups', GROUPS_FILTER_DEFAULT);
                 updateVersionURLParameter($scope.versionFilters);
+                updateURLParameter($scope.applicabilities, 'applicabilities', APPLICABILITIES_FILTER_DEFAULT);
             }
 
             // Add $watches to automatically update URL parameters when the data changes
@@ -280,6 +284,13 @@
                 }
             }, true);
 
+            $scope.$watch('applicabilities', function (newVal, oldVal) {
+                console.log("Test");
+                if (newVal !== oldVal) {
+                    updateURLParameter(newVal, 'applicabilities', APPLICABILITIES_FILTER_DEFAULT)
+                }
+            }, true);
+
             // Watch for changes in the URL path and update the search and lint display
             $scope.$watch(function () { return $location.path(); }, function (newPath) {
                 const searchParameter = newPath.substring(1);
@@ -337,6 +348,15 @@
                 }
             };
 
+            $scope.toggleApplicabilities = function (value) {
+                const applicabilities = $scope.applicabilities;
+                for (const key in applicabilities) {
+                    if (applicabilities.hasOwnProperty(key)) {
+                        applicabilities[key] = value;
+                    }
+                }
+            }
+
             $scope.resetGroupsToDefault = function () {
                 $scope.groups = {
                     ...GROUPS_FILTER_DEFAULT
@@ -440,6 +460,10 @@
                 return true;
             }
 
+            $scope.byApplicabilities = function (lint) {
+                return $scope.applicabilities[lint.applicability.applicability];
+            };
+
             // Show details for one lint
             $scope.openLint = function (lint) {
                 $scope.open[lint.id] = true;