Adds free-text filter to equipment page

Closes #8241

website/client-old/css/inventory.styl

@@ -31,6 +31,10 @@
   vertical-align: bottom
   margin-right: 20px
 
+.equipment-search
+  max-width: 300px
+  margin-right: 20px
+
 .well.use-costume-info
   margin-top: 10px
   p:first-child

website/client-old/js/controllers/inventoryCtrl.js

@@ -85,6 +85,42 @@ habitrpg.controller("InventoryCtrl",
       })
     }, true);
 
+    var equipmentSearch = function(equipment, term) {
+      if (!equipment) return;
+      if (!angular.isString(term) || term.length == 0) {
+        return equipment;
+      }
+      termMatcher = new RegExp(term, 'i');
+
+      var result = [];
+      for (var i = 0; i < equipment.length; i++) {
+        if (termMatcher.test(equipment[i].text())) {
+          result.push(equipment[i]);
+        }
+      }
+      return result;
+    };
+
+    $scope.$watchGroup(['gearByClass', 'gearByType', 'user.equipmentQuery'], function(updatedVals) {
+      var gearByClass = updatedVals[0];
+      var gearByType = updatedVals[1];
+      var equipmentQuery = updatedVals[2];
+      $scope.filteredGearByClass = {};
+      $scope.filteredGearByType = {};
+      angular.forEach(gearByClass, function(value, key) {
+        var searchResult = equipmentSearch(value, equipmentQuery);
+        if (searchResult.length > 0) {
+          $scope.filteredGearByClass[key] = searchResult;
+        }
+      });
+      angular.forEach(gearByType, function(value, key) {
+        var searchResult = equipmentSearch(value, equipmentQuery);
+        if (searchResult.length > 0) {
+          $scope.filteredGearByType[key] = searchResult;
+        }
+      });
+    });
+
     $scope.chooseEgg = function(egg){
       if ($scope.selectedEgg && $scope.selectedEgg.key == egg) {
         return $scope.selectedEgg = null; // clicked same egg, unselect
@@ -420,3 +456,12 @@ habitrpg.controller("InventoryCtrl",
     }
   }
 ]);
+
+habitrpg.controller("InventorySearchCtrl",
+  ['$scope', 'User',
+  function($scope, User) {
+    $scope.updateEquipmentQuery = function() {
+      User.user.equipmentQuery = $scope.equipmentQuery;
+    }
+  }
+]);

website/views/options/inventory/equipment.jade

@@ -31,16 +31,22 @@ mixin equipmentButton(type)
         popover-append-to-body='true')
 
 mixin equipmentList(equipmentType)
-  menu.pets-menu(label='{{::label}}', ng-show='gearByClass[klass]', ng-if='groupingChoice === "klass"',
+  menu.pets-menu(label='{{::label}}', ng-show='filteredGearByClass[klass]', ng-if='groupingChoice === "klass"',
     ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
-    div(ng-repeat='item in gearByClass[klass] | orderBy: order')
+    div(ng-repeat='item in filteredGearByClass[klass] | orderBy: order')
       +equipmentButton(equipmentType)
-  menu.pets-menu(label='{{::label}}', ng-show='gearByType[type]', ng-if='groupingChoice === "equipmentType"',
+  menu.pets-menu(label='{{::label}}', ng-show='filteredGearByType[type]', ng-if='groupingChoice === "equipmentType"',
     ng-repeat='(type,label) in {headAccessory:env.t("headAccessoryCapitalized"), head:env.t("headgearCapitalized"), eyewear:env.t("eyewear"), weapon:env.t("weaponCapitalized"), shield:env.t("offhandCapitalized"), armor:env.t("armorCapitalized"), body:env.t("body"), back:env.t("back")}')
-    div(ng-repeat='item in gearByType[type] | orderBy: order', ng-show='item.klass !== "base"')
+    div(ng-repeat='item in filteredGearByType[type] | orderBy: order', ng-show='item.klass !== "base"')
       +equipmentButton(equipmentType)
 
 .container-fluid
+  .row
+    .col-md-6
+      .input-group.equipment-search(ng-controller="InventorySearchCtrl")
+        .input-group-addon
+          .glyphicon.glyphicon-search
+        input.form-control(type='text', placeholder=env.t('search'), ng-model='equipmentQuery', ng-change='updateEquipmentQuery()', ng-model-options='{ debounce: 250 }')
   .row
     .col-md-6.border-right(ng-controller="SortableInventoryController")
       h3.equipment-title.hint(popover-trigger='mouseenter',