Adds free-text filter to equipment page

Closes #8241
This commit is contained in:
Alexander Lin
2016-12-04 22:19:42 -08:00
parent c1a860494d
commit 679459b83b
3 changed files with 59 additions and 4 deletions

View File

@@ -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

View File

@@ -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;
}
}
]);

View File

@@ -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',