diff --git a/website/client-old/css/inventory.styl b/website/client-old/css/inventory.styl index 9ba3728bd9..d792ccf014 100644 --- a/website/client-old/css/inventory.styl +++ b/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 diff --git a/website/client-old/js/controllers/inventoryCtrl.js b/website/client-old/js/controllers/inventoryCtrl.js index 312c6d1c9c..4bbf57e06b 100644 --- a/website/client-old/js/controllers/inventoryCtrl.js +++ b/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; + } + } +]); diff --git a/website/views/options/inventory/equipment.jade b/website/views/options/inventory/equipment.jade index 1075501d00..1872e4d801 100644 --- a/website/views/options/inventory/equipment.jade +++ b/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',