Commit eefc2151 by Kálmán Viktor

dashboard: vm list shift selection

parent d3cb7b1a
...@@ -4,7 +4,11 @@ ...@@ -4,7 +4,11 @@
{% block content %} {% block content %}
<div class="alert alert-info"> <div class="alert alert-info">
Tip of the day: you can select multiple vm instances while holding down the <strong>CTRL</strong> button! Tip #1: you can select multiple vm instances while holding down the <strong>CTRL</strong> key!
</div>
<div class="alert alert-info">
Tip #2: if you want to select multiple instances by one click select an instance then hold down <strong>SHIFT</strong> key and select another one!
</div> </div>
<div class="row"> <div class="row">
...@@ -13,6 +17,19 @@ ...@@ -13,6 +17,19 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3> <h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3>
</div> </div>
<div class="panel-body vm-list-group-control">
<p>
<strong>Group actions</strong>
<button class="btn btn-info btn-xs">Select all</button>
<a class="btn btn-default btn-xs"><i class="icon-truck"></i> Migrate</a>
<button type="button" class="btn btn-xs btn-warning dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
<li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
<li><a href="#"><i class="icon-remove"></i> Discard</a></li>
</ul>
</p>
</div>
<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> <thead>
...@@ -84,22 +101,63 @@ ...@@ -84,22 +101,63 @@
{% block extra_js %} {% block extra_js %}
$(function() { $(function() {
var ctrlDown = false; $('.vm-list-group-control .btn').attr('disabled', true);
var ctrlDown, shiftDown = false;
var ctrlKey = 17; var ctrlKey = 17;
var shiftKey = 16;
var selected = [];
$(document).keydown(function(e) { $(document).keydown(function(e) {
if (e.keyCode == ctrlKey) ctrlDown = true; if (e.keyCode == ctrlKey) ctrlDown = true;
if (e.keyCode == shiftKey) shiftDown = true;
}).keyup(function(e) { }).keyup(function(e) {
if (e.keyCode == ctrlKey) ctrlDown = false; if (e.keyCode == ctrlKey) ctrlDown = false;
if (e.keyCode == shiftKey) shiftDown = false;
}); });
$('.vm-list-table').find('tr').click(function() { $('.vm-list-table tbody').find('tr').mousedown(function() {
if (ctrlDown) { if (ctrlDown) {
setRowColor($(this)); setRowColor($(this));
if(!$(this).hasClass('vm-list-selected')) {
selected.splice(selected.indexOf($(this).index()), 1);
} else {
selected.push($(this).index());
}
} else if(shiftDown) {
if(selected.length > 0) {
start = selected[selected.length - 1] + 1;
end = $(this).index();
if(start > end) {
var tmp = start - 1; start = end; end = tmp - 1;
}
for(var i = start; i <= end; i++) {
if(selected.indexOf(i) < 0) {
selected.push(i);
setRowColor($('.vm-list-table tbody tr').eq(i));
}
}
}
} else { } else {
$('.vm-list-selected').removeClass('vm-list-selected'); $('.vm-list-selected').removeClass('vm-list-selected');
$(this).addClass('vm-list-selected'); $(this).addClass('vm-list-selected');
selected = [$(this).index()];
}
// reset btn disables
$('.vm-list-table tbody tr .btn').attr('disabled', false);
// show/hide group controls
if(selected.length > 1) {
$('.vm-list-group-control .btn').attr('disabled', false);
for(var i = 0; i < selected.length; i++) {
$('.vm-list-table tbody tr').eq(selected[i]).find('.btn').attr('disabled', true);
}
} else {
$('.vm-list-group-control .btn').attr('disabled', true);
} }
return false;
}); });
$('.vm-list-details').popover({ $('.vm-list-details').popover({
......
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