vm-list.html 5.72 KB
Newer Older
Kálmán Viktor committed
1 2
{% extends "dashboard/base.html" %}
{% load i18n %}
3
{% load render_table from django_tables2 %}
Kálmán Viktor committed
4
{% block content %}
5 6

<div class="alert alert-info">
7 8 9 10 11
  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!
12 13
</div>

Kálmán Viktor committed
14 15 16 17 18 19
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3>
      </div>
20 21
      <div class="panel-body vm-list-group-control">
        <p>
22 23 24 25 26 27
          <strong>Group actions</strong>
          <button class="btn btn-info btn-xs" disabled>Select all</button>
          <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="icon-truck"></i> Migrate</a>
          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-refresh"></i> Reboot</a>
          <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-off"></i> Shutdown</a>
          <a disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
28 29
        </p>
      </div>
Kálmán Viktor committed
30
      <div class="panel-body">
31
        <table class="table table-bordered table-striped table-hover vm-list-table">
Kálmán Viktor committed
32 33
          <thead>
            <tr>
34 35
              <!--<td style="width: 10px;"><input type="checkbox" id="check_all"/></td> -->
              <td style="width: 10px;">Id</td>
Kálmán Viktor committed
36 37 38 39
              <td>Name</td>
              <td>State</td>
              <td>Suspend in</td>
              <td>Delete in</td>
40 41
              <td style="width: 130px;">Admin</td>
              <td style="width: 10px;">Details</td>
Kálmán Viktor committed
42 43 44 45
              <td style="width: 10px;">Actions</td>
            </tr>
          </thead>
          <tbody>
46 47 48 49 50
            {% for i in "xxxxxxxxxxxxxxxxxxxxx" %}
            {% with forloop.counter as c %}
                {% include "dashboard/vm-list/test-one.html" %}
              {% endwith %}
            {% endfor %}
Kálmán Viktor committed
51 52 53 54 55 56
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="icon-desktop"></i> Your virtual machines</h3>
      </div>
      <div class="panel-body">
        {% render_table table %}
      </div>
    </div>
  </div>
</div>


<style>
  .popover {
    max-width: 600px;
  }

  .vm-list-selected, .vm-list-selected td {
    background-color: #e8e8e8 !important;
  }

  .vm-list-selected:hover, .vm-list-selected:hover td {
    background-color: #d0d0d0 !important;
  }

  .vm-list-selected td:first-child {
    font-weight: bold;
  }
88 89 90 91 92 93 94 95

  .vm-list-table-thin {
    width: 10px;
  }

  .vm-list-table-admin {
    width: 130px;
  }
96 97 98 99 100
</style>
{% endblock %}

{% block extra_js %}
$(function() {
101
    var ctrlDown, shiftDown = false;
102
    var ctrlKey = 17;
103 104
    var shiftKey = 16;
    var selected = [];
105 106 107

    $(document).keydown(function(e) {
      if (e.keyCode == ctrlKey) ctrlDown = true;
108
      if (e.keyCode == shiftKey) shiftDown = true;
109 110
    }).keyup(function(e) {
      if (e.keyCode == ctrlKey) ctrlDown = false;
111
      if (e.keyCode == shiftKey) shiftDown = false;
112 113
    });

114
    $('.vm-list-table tbody').find('tr').mousedown(function() {
115 116
      if (ctrlDown) {
        setRowColor($(this));
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
        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));
              }
          }
        }
138 139 140
      } else {
        $('.vm-list-selected').removeClass('vm-list-selected');
        $(this).addClass('vm-list-selected');
141 142 143 144 145 146 147 148 149 150 151 152 153
        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);
154
      }
155
      return false;
156 157
    });

158 159 160 161 162
    
    $('#vm-list-group-migrate').click(function() {
      console.log(collectIds(selected));
    });

163 164 165 166 167 168 169 170 171 172 173 174
    $('.vm-list-details').popover({
      'placement': 'auto',
      'html': true,
      'trigger': 'hover'
    });

    $('.vm-list-connect').popover({
      'placement': 'left',
      'html': true,
      'trigger': 'click'
    });

175 176 177 178 179 180 181 182
    $('tbody a').click(function(e) {
      // parent tr doesn't get selected when clicked
      e.stopPropagation();
      // browser doesn't jump to top when clicked the buttons
      if(!$(this).hasClass('real-link')) {
        return false;
      }
    });
183 184
  });

185 186 187
  function collectIds(rows) {
    var ids = [];
    for(var i = 0; i < rows.length; i++) {
188
      var div = $('td:first-child div', $('.vm-list-table tbody tr').eq(rows[i]));
189 190 191 192
      ids.push(div.prop('id').replace('vm-', ''));
    }
    return ids;  
  }
193 194 195 196 197 198 199 200 201

  function setRowColor(row) {
    if(!row.hasClass('vm-list-selected')) {
      row.addClass('vm-list-selected');
    } else {
      row.removeClass('vm-list-selected');
    }

  }
Kálmán Viktor committed
202
{% endblock %}