feat: pagination

Continuation of PR #93.
flant · Jul 13, 2020 · 99ba3cb · 99ba3cb
1 parent 4af775e
commit 99ba3cb
Show file tree

Hide file tree

Showing 25 changed files with 1,223 additions and 34 deletions.
diff --git a/dist/css/statusmap.dark.css b/dist/css/statusmap.dark.css
diff --git a/dist/css/statusmap.dark.css.map b/dist/css/statusmap.dark.css.map
diff --git a/dist/css/statusmap.light.css b/dist/css/statusmap.light.css
diff --git a/dist/css/statusmap.light.css.map b/dist/css/statusmap.light.css.map
diff --git a/dist/extra_series_format.js b/dist/extra_series_format.js
diff --git a/dist/extra_series_format.js.map b/dist/extra_series_format.js.map
diff --git a/dist/img/tooltip-editor.png b/dist/img/tooltip-editor.png
diff --git a/dist/img/tooltip-url.png b/dist/img/tooltip-url.png
diff --git a/dist/module.html b/dist/module.html
@@ -1,4 +1,13 @@
 <div class="status-heatmap-wrapper">
+	<div class="clearfix"></div>
+	<br>
+	<div class="gf-form" ng-if="ctrl.panel.usingPagination">
+		<label class="gf-form-label width-9">Items per page</label>
+		<input type="number" class="gf-form-input width-5" placeholder="2" data-placement="right"
+		bs-tooltip="'Number of items to show per page.'" ng-model="ctrl.pageSizeViewer" ng-change="ctrl.changePaginationSize()"
+		ng-model-onblur>
+	</div>
+
 	<div class="status-heatmap-canvas-wrapper">
 
 		<div class="datapoints-warning"  ng-if="ctrl.multipleValues || ctrl.noColorDefined || ctrl.noDatapoints">
@@ -7,8 +16,19 @@
 			<span class="small" ng-if="ctrl.noDatapoints" bs-tooltip="'{{ctrl.dataWarnings.noDatapoints.tip}}'">{{ctrl.dataWarnings.noDatapoints.title}}</span>
 		</div>
 
-
-		<div class="statusmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
+		<div class="status-heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
+	</div>
+	<div class="pagination" ng-if="ctrl.panel.usingPagination">
+		Showing {{ctrl.firstPageElement}} to {{ctrl.lastPageElement}} of {{ctrl.totalElements}} entries
+		<div class="pagination-buttons">
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage == 0" ng-click="ctrl.currentPage=ctrl.currentPage-1; ctrl.render()">
+				Previous
+			</button>
+			{{ctrl.currentPage+1}}/{{ctrl.numberOfPages}}
+			<button class="btn btn-inverse" ng-disabled="ctrl.currentPage >= ctrl.cardsData.targets.length/ctrl.pageSizeViewer - 1 || ctrl.numberOfPages == 0" ng-click="ctrl.currentPage=ctrl.currentPage+1; ctrl.render()">
+				Next
+			</button>
+		</div>
 	</div>
 	<div class="status-heatmap-legend-wrapper" ng-if="ctrl.panel.legend.show">
 		<status-heatmap-legend></status-heatmap-legend>

diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map