Added pagination for gcode files.
Gina Häußge
parent
072205ee82
commit
1e77467a41
|
|
@ -452,6 +452,50 @@ function GcodeFilesViewModel() {
|
|||
var self = this;
|
||||
|
||||
self.files = ko.observableArray([]);
|
||||
self.pageSize = ko.observable(CONFIG_FILESPERPAGE);
|
||||
self.currentPage = ko.observable(0);
|
||||
|
||||
self.paginatedFiles = ko.dependentObservable(function() {
|
||||
if (self.files() == undefined) {
|
||||
return [];
|
||||
} else {
|
||||
var from = Math.max(self.currentPage() * self.pageSize(), 0);
|
||||
var to = Math.min(from + self.pageSize(), self.files().length);
|
||||
return self.files().slice(from, to);
|
||||
}
|
||||
})
|
||||
self.lastPage = ko.dependentObservable(function() {
|
||||
return Math.ceil(self.files().length / self.pageSize()) - 1;
|
||||
})
|
||||
self.pages = ko.dependentObservable(function() {
|
||||
var pages = [];
|
||||
if (self.lastPage() < 7) {
|
||||
for (var i = 0; i < self.lastPage() + 1; i++) {
|
||||
pages.push({ number: i, text: i+1 });
|
||||
}
|
||||
} else {
|
||||
pages.push({ number: 0, text: 1 });
|
||||
if (self.currentPage() < 5) {
|
||||
for (var i = 1; i < 5; i++) {
|
||||
pages.push({ number: i, text: i+1 });
|
||||
}
|
||||
pages.push({ number: -1, text: "…"});
|
||||
} else if (self.currentPage() > self.lastPage() - 5) {
|
||||
pages.push({ number: -1, text: "…"});
|
||||
for (var i = self.lastPage() - 4; i < self.lastPage(); i++) {
|
||||
pages.push({ number: i, text: i+1 });
|
||||
}
|
||||
} else {
|
||||
pages.push({ number: -1, text: "…"});
|
||||
for (var i = self.currentPage() - 1; i <= self.currentPage() + 1; i++) {
|
||||
pages.push({ number: i, text: i+1 });
|
||||
}
|
||||
pages.push({ number: -1, text: "…"});
|
||||
}
|
||||
pages.push({ number: self.lastPage(), text: self.lastPage() + 1})
|
||||
}
|
||||
return pages;
|
||||
})
|
||||
|
||||
self.requestData = function() {
|
||||
$.ajax({
|
||||
|
|
@ -465,11 +509,17 @@ function GcodeFilesViewModel() {
|
|||
}
|
||||
|
||||
self.fromResponse = function(response) {
|
||||
self.files(response.files);
|
||||
var sortedFiles = response.files;
|
||||
sortedFiles.sort(function(a, b) {
|
||||
if (a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) return -1;
|
||||
if (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase()) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
self.files(sortedFiles);
|
||||
}
|
||||
|
||||
self.loadFile = function() {
|
||||
var filename = this.name;
|
||||
self.loadFile = function(filename) {
|
||||
$.ajax({
|
||||
url: AJAX_BASEURL + "gcodefiles/load",
|
||||
type: "POST",
|
||||
|
|
@ -478,8 +528,7 @@ function GcodeFilesViewModel() {
|
|||
})
|
||||
}
|
||||
|
||||
self.removeFile = function() {
|
||||
var filename = this.name;
|
||||
self.removeFile = function(filename) {
|
||||
$.ajax({
|
||||
url: AJAX_BASEURL + "gcodefiles/delete",
|
||||
type: "POST",
|
||||
|
|
@ -488,6 +537,23 @@ function GcodeFilesViewModel() {
|
|||
success: self.fromResponse
|
||||
})
|
||||
}
|
||||
|
||||
self.changePage = function(newPage) {
|
||||
if (newPage < 0 || newPage > self.lastPage())
|
||||
return;
|
||||
self.currentPage(newPage);
|
||||
}
|
||||
self.prevPage = function() {
|
||||
if (self.currentPage() > 0) {
|
||||
self.currentPage(self.currentPage() - 1);
|
||||
}
|
||||
}
|
||||
self.nextPage = function() {
|
||||
if (self.currentPage() < self.lastPage()) {
|
||||
self.currentPage(self.currentPage() + 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function WebcamViewModel() {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<script lang="javascript">
|
||||
var AJAX_BASEURL = '/ajax/';
|
||||
var CONFIG_FILESPERPAGE = 5;
|
||||
|
||||
var WEB_SOCKET_SWF_LOCATION = "{{ url_for('static', filename='js/WebSocketMain.swf') }}";
|
||||
var WEB_SOCKET_DEBUG = true;
|
||||
|
|
@ -85,14 +86,25 @@
|
|||
<th class="gcode_files_action">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind="foreach: files">
|
||||
<tr data-bind="attr: {title: name}, event: {dblclick: $parent.loadFile}">
|
||||
<tbody data-bind="foreach: paginatedFiles">
|
||||
<tr data-bind="attr: {title: name}">
|
||||
<td class="gcode_files_name" data-bind="text: name"></td>
|
||||
<td class="gcode_files_size" data-bind="text: size"></td>
|
||||
<td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a> | <a href="#" class="icon-folder-open" data-bind="click: $parent.loadFile"></a></td>
|
||||
<td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: function() { $root.removeFile($data.name); }"></a> | <a href="#" class="icon-folder-open" data-bind="click: function() { $root.loadFile($data.name); }"></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination pagination-mini pagination-centered">
|
||||
<ul>
|
||||
<li data-bind="css: {disabled: currentPage() === 0}"><a href="#" data-bind="click: prevPage">«</a></li>
|
||||
</ul>
|
||||
<ul data-bind="foreach: pages">
|
||||
<li data-bind="css: { active: $data.number === $root.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.changePage($data.number); }"></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li data-bind="css: {disabled: currentPage() === lastPage()}"><a href="#" data-bind="click: nextPage">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="btn btn-primary btn-block fileinput-button" style="margin-bottom: 10px">
|
||||
<i class="icon-upload icon-white"></i>
|
||||
<span>Upload</span>
|
||||
|
|
@ -101,6 +113,9 @@
|
|||
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
||||
<div class="bar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div>
|
||||
<small>Hint: You can also drag and drop files on this page to upload them.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue