Paginate history in fish_config

This commit is contained in:
ridiculousfish
2018-09-09 00:26:38 -07:00
parent daf520db0a
commit 56002abc61
3 changed files with 109 additions and 26 deletions

View File

@@ -547,4 +547,39 @@ img.delete_icon {
height: 16px;
vertical-align: text-top;
margin-left: 10px;
};
}
.paginator {
border-spacing: 0;
border-collapse: collapse;
display: inline;
vertical-align: bottom;
margin-right: 15px;
}
.paginator td {
border: solid 1px #777;
padding: 8px;
}
.paginator .prev, .paginator .next {
font-size: 11pt;
}
.paginator a {
text-decoration: none;
text-align: center;
color: #0080AA;
font-size: larger;
}
.paginator .disabled a {
color: #999999;
background-color: transparent;
cursor: default;
}
.paginator .desc {
background: #222;
color: #BBB;
}

View File

@@ -214,51 +214,83 @@ controllers.controller("variablesController", function($scope, $http) {
});
controllers.controller("historyController", function($scope, $http, $timeout) {
$scope.historyItems = [];
$scope.historySize = 0;
// Stores items which are yet to be added in history items
$scope.remainingItems = [];
// All history items, as strings.
$scope.allItems = [];
// How many items per page.
$scope.itemsPerPage = 50;
// Filtered items grouped into pages. A list of lists. Never empty.
$scope.filteredItemPages = [[]];
// The current page index (0 based).
$scope.currentPage = 0;
// The filter query.
$scope.query = "";
// The items which are selected.
$scope.selectedItems = [];
// Populate history items in parts
$scope.loadHistory = function() {
if ($scope.remainingItems.length <= 0) {
$scope.loadingText = "";
return;
// Filter all of our items, and group them into pages.
$scope.filterAndGroup = function () {
// Filter items.
var filteredItems;
if ($scope.query && $scope.query.length > 0) {
filteredItems = $scope.allItems.filter(function(item) {
return item.indexOf($scope.query) >= 0;
});
} else {
filteredItems = $scope.allItems;
}
var toLoad = $scope.remainingItems.splice(0, 100);
for (i in toLoad) {
$scope.historyItems.push(toLoad[i]);
// Group them by pages. Ensure our pages are never empty.
var pages = [];
for (var start = 0; start < filteredItems.length; start += $scope.itemsPerPage) {
var end = Math.min(start + $scope.itemsPerPage, filteredItems.length);
pages.push(filteredItems.slice(start, end));
}
if (pages.length == 0) {
pages.push([]);
}
$scope.filteredItemPages = pages;
};
$scope.loadingText = "Loading " + $scope.historyItems.length + "/" + $scope.historySize;
$timeout($scope.loadHistory, 100);
}
$scope.currentPageDescription = function() {
if ($scope.filteredItemPages[0].length === 0) {
return "None";
}
return ($scope.currentPage + 1) + " / " + ($scope.filteredItemPages.length + 1);
};
$scope.prevPage = function () {
$scope.currentPage = Math.max($scope.currentPage - 1, 0);
};
$scope.nextPage = function () {
$scope.currentPage = Math.min($scope.currentPage + 1,
$scope.filteredItemPages.length - 1);
};
$scope.selectItem = function(item) {
var index = $scope.selectedItems.indexOf(item);
if ( index >= 0) {
if (index >= 0) {
// Deselect.
$scope.selectedItems.splice(index,1);
}
else {
$scope.selectedItems.push(item);
}
}
// Get history from server
$scope.fetchHistory = function() {
$http.get("history/").success(function(data, status, headers, config) {
$scope.historySize = data.length;
$scope.remainingItems = data;
/* Call this function 10 times/second */
$timeout($scope.loadHistory, 100);
})};
$scope.allItems = data;
$scope.filterAndGroup();
});
};
$scope.deleteHistoryItem = function(item) {
index = $scope.historyItems.indexOf(item);
index = $scope.allItems.indexOf(item);
$http.post("delete_history_item/","what=" + encodeURIComponent(item), { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data, status, headers, config) {
$scope.historyItems.splice(index, 1);
$scope.allItems.splice(index, 1);
$scope.filterAndGroup();
})};
var queryInputTimeout = null;
@@ -269,6 +301,8 @@ controllers.controller("historyController", function($scope, $http, $timeout) {
queryInputTimeout = $timeout(function() {
$scope.query = $scope.queryInput;
$scope.filterAndGroup();
$scope.currentPage = 0;
}, 1000);
});

View File

@@ -1,10 +1,24 @@
<div id="table_filter_container">
<table class="paginator">
<tr>
<td ng-class="{disabled: currentPage == 0}" class="prev">
<a href ng-click="prevPage()">« Prev</a>
</td>
<td class="desc">
{{ currentPageDescription() }}
</td>
<td ng-class="{disabled: currentPage == filteredItemPages.length - 1}" class="next">
<a href ng-click="nextPage()">Next »</a>
</td>
</tr>
</table>
<span ng-show="loadingText.length > 0"> {{ loadingText }} </span>
<input id="table_filter_text_box" class="filter_text_box text_box_transient" placeholder="Filter" ng-model="queryInput">
</div>
<table class="data_table">
<tbody>
<tr ng-repeat="item in historyItems | filter:query">
<tr ng-repeat="item in filteredItemPages[currentPage]">
<td ng-class="{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}" ng-click="selectItem(item)">{{ item }}</td>
<td class="history_delete">
<a ng-click="deleteHistoryItem(item)">