Commit ddcf94cb by Kálmán Viktor

dsahboard: order vm list with js

parent 6c594ac7
...@@ -491,3 +491,7 @@ footer a, footer a:hover, footer a:visited { ...@@ -491,3 +491,7 @@ footer a, footer a:hover, footer a:visited {
bottom: 10px; bottom: 10px;
right: 20px; right: 20px;
} }
.vm-list-table th i {
margin-top: 3px;
}
// Stupid jQuery table plugin.
// Call on a table
// sortFns: Sort functions for your datatypes.
(function($) {
$.fn.stupidtable = function(sortFns) {
return this.each(function() {
var $table = $(this);
sortFns = sortFns || {};
// Merge sort functions with some default sort functions.
sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
// ==================================================== //
// Begin execution! //
// ==================================================== //
// Do sorting when THs are clicked
$table.on("click.stupidtable", "th, th a", function() {
// handle click to links
// $table.on("click.stupidtable", "th", function() {
var $this = $(this);
var th_index = 0;
var dir = $.fn.stupidtable.dir;
$table.find("th").slice(0, $this.index()).each(function() {
var cols = $(this).attr("colspan") || 1;
th_index += parseInt(cols,10);
});
// Determine (and/or reverse) sorting direction, default `asc`
var sort_dir = $this.data("sort-default") || dir.ASC;
if ($this.data("sort-dir"))
sort_dir = $this.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
// Choose appropriate sorting function.
var type = $this.data("sort") || null;
// Prevent sorting if no type defined
if (type === null) {
return;
}
// Trigger `beforetablesort` event that calling scripts can hook into;
// pass parameters for sorted column index and sorting direction
$table.trigger("beforetablesort", {column: th_index, direction: sort_dir});
// More reliable method of forcing a redraw
$table.css("display");
// Run sorting asynchronously on a timout to force browser redraw after
// `beforetablesort` callback. Also avoids locking up the browser too much.
setTimeout(function() {
// Gather the elements for this column
var column = [];
var sortMethod = sortFns[type];
var trs = $table.children("tbody").children("tr");
// Extract the data for the column that needs to be sorted and pair it up
// with the TR itself into a tuple
trs.each(function(index,tr) {
var $e = $(tr).children().eq(th_index);
var sort_val = $e.data("sort-value");
var order_by = typeof(sort_val) !== "undefined" ? sort_val : $e.text();
column.push([order_by, tr]);
});
// Sort by the data-order-by value
column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
if (sort_dir != dir.ASC)
column.reverse();
// Replace the content of tbody with the sorted rows. Strangely (and
// conveniently!) enough, .append accomplishes this for us.
trs = $.map(column, function(kv) { return kv[1]; });
$table.children("tbody").append(trs);
// Reset siblings
$table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
$this.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);
// Trigger `aftertablesort` event. Similar to `beforetablesort`
$table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
// More reliable method of forcing a redraw
$table.css("display");
}, 10);
// this was added my be too - kviktor
return false;
});
});
};
// Enum containing sorting directions
$.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
$.fn.stupidtable.default_sort_fns = {
"int": function(a, b) {
return parseInt(a, 10) - parseInt(b, 10);
},
"float": function(a, b) {
return parseFloat(a) - parseFloat(b);
},
"string": function(a, b) {
if (a < b) return -1;
if (a > b) return +1;
return 0;
},
"string-ins": function(a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
if (a < b) return -1;
if (a > b) return +1;
return 0;
}
};
})(jQuery);
...@@ -154,6 +154,27 @@ $(function() { ...@@ -154,6 +154,27 @@ $(function() {
); );
return false; return false;
}); });
/* table sort */
var table = $(".vm-list-table").stupidtable();
table.on("beforetablesort", function(event, data) {
return false;
});
table.on("aftertablesort", function(event, data) {
// this didn't work ;;
// var th = $("this").find("th");
$(".vm-list-table thead th i").remove();
var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right"></i>';
$(".vm-list-table thead th").eq(data.column).append(icon_html);
});
//$(".vm-list-table thead th a").attr("href", "#");
// only if js is enabled
$(".vm-list-table thead th").css("cursor", "pointer");
}); });
function collectIds(rows) { function collectIds(rows) {
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<div class="panel-body"> <div class="panel-body">
<table class="table table-bordered table-striped table-hover vm-list-table"> <table class="table table-bordered table-striped table-hover vm-list-table">
<thead><tr> <thead><tr>
<th data-sort="int" class="orderable pk sortable vm-list-table-thin"> <th data-sort="int" class="orderable pk sortable vm-list-table-thin" style="min-width: 50px;">
{% trans "ID" as t %} {% trans "ID" as t %}
{% include "dashboard/vm-list/header-link.html" with name=t sort="pk" %} {% include "dashboard/vm-list/header-link.html" with name=t sort="pk" %}
</th> </th>
...@@ -54,12 +54,14 @@ ...@@ -54,12 +54,14 @@
</th>{% endif %} </th>{% endif %}
</tr></thead><tbody> </tr></thead><tbody>
{% for i in object_list %} {% for i in object_list %}
<tr class="{% cycle 'odd' 'even' %}"> <tr class="{% cycle 'odd' 'even' %}" data-vm-pk="{{ i.pk }}">
<td class="pk"><div id="vm-{{i.pk}}">{{i.pk}}</div> </td> <td class="pk"><div id="vm-{{i.pk}}">{{i.pk}}</div> </td>
<td class="name"><a class="real-link" href="{% url "dashboard.views.detail" i.pk %}">{{ i.name }}</a> </td> <td class="name"><a class="real-link" href="{% url "dashboard.views.detail" i.pk %}">{{ i.name }}</a> </td>
<td class="state">{{ i.get_status_display }}</td> <td class="state">{{ i.get_status_display }}</td>
<td>{{ i.owner }}</td> <td>{{ i.owner }}</td>
{% if user.is_superuser %}<td>{{ i.node.name|default:"-" }}</td>{% endif %} {% if user.is_superuser %}
<td data-sort-value="{{ i.node.normalized_name }}">{{ i.node.name|default:"-" }}</td>
{% endif %}
</tr> </tr>
{% empty %} {% empty %}
<tr><td colspan="4">{% trans "You have no virtual machines." %}</td></tr> <tr><td colspan="4">{% trans "You have no virtual machines." %}</td></tr>
...@@ -107,4 +109,5 @@ ...@@ -107,4 +109,5 @@
{% block extra_js %} {% block extra_js %}
<script src="{{ STATIC_URL}}dashboard/vm-list.js"></script> <script src="{{ STATIC_URL}}dashboard/vm-list.js"></script>
<script src="{{ STATIC_URL}}dashboard/vm-common.js"></script> <script src="{{ STATIC_URL}}dashboard/vm-common.js"></script>
<script src="{{ STATIC_URL}}dashboard/js/stupidtable.min.js"></script>
{% endblock %} {% endblock %}
...@@ -996,7 +996,9 @@ class VmList(LoginRequiredMixin, ListView): ...@@ -996,7 +996,9 @@ class VmList(LoginRequiredMixin, ListView):
if (sort and if (sort and
sort.replace("-", "") sort.replace("-", "")
in [i.name for i in Instance._meta.fields] + ["pk"]): in [i.name for i in Instance._meta.fields] + ["pk"]):
queryset = queryset.order_by(sort) queryset = queryset.order_by(
# we order nodes by the normalized_name
sort.replace("node", "node__normalized_name"))
return queryset.select_related('owner', 'node') return queryset.select_related('owner', 'node')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment