Added pagination for gcode files.
parent
072205ee82
commit
1e77467a41
|
@ -452,6 +452,50 @@ function GcodeFilesViewModel() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.files = ko.observableArray([]);
|
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() {
|
self.requestData = function() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
@ -465,11 +509,17 @@ function GcodeFilesViewModel() {
|
||||||
}
|
}
|
||||||
|
|
||||||
self.fromResponse = function(response) {
|
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() {
|
self.loadFile = function(filename) {
|
||||||
var filename = this.name;
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: AJAX_BASEURL + "gcodefiles/load",
|
url: AJAX_BASEURL + "gcodefiles/load",
|
||||||
type: "POST",
|
type: "POST",
|
||||||
|
@ -478,8 +528,7 @@ function GcodeFilesViewModel() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
self.removeFile = function() {
|
self.removeFile = function(filename) {
|
||||||
var filename = this.name;
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: AJAX_BASEURL + "gcodefiles/delete",
|
url: AJAX_BASEURL + "gcodefiles/delete",
|
||||||
type: "POST",
|
type: "POST",
|
||||||
|
@ -488,6 +537,23 @@ function GcodeFilesViewModel() {
|
||||||
success: self.fromResponse
|
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() {
|
function WebcamViewModel() {
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
|
|
||||||
<script lang="javascript">
|
<script lang="javascript">
|
||||||
var AJAX_BASEURL = '/ajax/';
|
var AJAX_BASEURL = '/ajax/';
|
||||||
|
var CONFIG_FILESPERPAGE = 5;
|
||||||
|
|
||||||
var WEB_SOCKET_SWF_LOCATION = "{{ url_for('static', filename='js/WebSocketMain.swf') }}";
|
var WEB_SOCKET_SWF_LOCATION = "{{ url_for('static', filename='js/WebSocketMain.swf') }}";
|
||||||
var WEB_SOCKET_DEBUG = true;
|
var WEB_SOCKET_DEBUG = true;
|
||||||
|
@ -85,14 +86,25 @@
|
||||||
<th class="gcode_files_action">Action</th>
|
<th class="gcode_files_action">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody data-bind="foreach: files">
|
<tbody data-bind="foreach: paginatedFiles">
|
||||||
<tr data-bind="attr: {title: name}, event: {dblclick: $parent.loadFile}">
|
<tr data-bind="attr: {title: name}">
|
||||||
<td class="gcode_files_name" data-bind="text: name"></td>
|
<td class="gcode_files_name" data-bind="text: name"></td>
|
||||||
<td class="gcode_files_size" data-bind="text: size"></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>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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">
|
<span class="btn btn-primary btn-block fileinput-button" style="margin-bottom: 10px">
|
||||||
<i class="icon-upload icon-white"></i>
|
<i class="icon-upload icon-white"></i>
|
||||||
<span>Upload</span>
|
<span>Upload</span>
|
||||||
|
@ -101,6 +113,9 @@
|
||||||
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
||||||
<div class="bar" style="width: 0%"></div>
|
<div class="bar" style="width: 0%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<small>Hint: You can also drag and drop files on this page to upload them.</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue