j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-24 15:15:22 +00:00
Code Issues Projects Releases Wiki Activity

Add sortable

Browse source
This commit is contained in:
Retspen 2015-03-10 16:46:52 +02:00
parent ed2b28c25e
commit 5f6b06b467
5 changed files with 197 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
static/css/sortable-theme-bootstrap.css Executable file
View file

@ -0,0 +1,90 @@
/* line 2, ../sass/_sortable.sass */
table[data-sortable] {
border-collapse: collapse;
border-spacing: 0;
}
/* line 6, ../sass/_sortable.sass */
table[data-sortable] th {
vertical-align: bottom;
font-weight: bold;
}
/* line 10, ../sass/_sortable.sass */
table[data-sortable] th, table[data-sortable] td {
text-align: left;
padding: 10px;
}
/* line 14, ../sass/_sortable.sass */
table[data-sortable] th:not([data-sortable="false"]) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
cursor: pointer;
}
/* line 26, ../sass/_sortable.sass */
table[data-sortable] th:after {
content: "";
visibility: hidden;
display: inline-block;
vertical-align: inherit;
height: 0;
width: 0;
border-width: 5px;
border-style: solid;
border-color: transparent;
margin-right: 1px;
margin-left: 10px;
float: right;
}
/* line 40, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted="true"]:after {
visibility: visible;
}
/* line 43, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted-direction="descending"]:after {
border-top-color: inherit;
margin-top: 8px;
}
/* line 47, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted-direction="ascending"]:after {
border-bottom-color: inherit;
margin-top: 3px;
}
/* line 5, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background: white;
}
/* line 12, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap thead th {
border-bottom: 2px solid #e0e0e0;
}
/* line 15, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap tbody td {
border-top: 1px solid #e0e0e0;
}
/* line 18, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
color: #3a87ad;
background: #d9edf7;
border-bottom-color: #bce8f1;
}
/* line 23, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]:after {
border-top-color: #3a87ad;
}
/* line 26, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]:after {
border-bottom-color: #3a87ad;
}
/* line 31, ../sass/sortable-theme-bootstrap.sass */
table[data-sortable].sortable-theme-bootstrap.sortable-theme-bootstrap-striped tbody > tr:nth-child(odd) > td {
background-color: #f9f9f9;
}

2
static/js/sortable.min.js vendored Executable file
View file

@ -0,0 +1,2 @@
/*! sortable.js 0.5.0 */
(function(){var a,b,c,d,e,f;a="table[data-sortable]",c=/^-?[£$¤]?[\d,.]+%?$/,f=/^\s+|\s+$/g,e="ontouchstart"in document.documentElement,b=e?"touchstart":"click",d={init:function(){var b,c,e,f,g;for(c=document.querySelectorAll(a),g=[],e=0,f=c.length;f>e;e++)b=c[e],g.push(d.initTable(b));return g},initTable:function(a){var b,c,e,f,g;if(1===a.tHead.rows.length&&"true"!==a.getAttribute("data-sortable-initialized")){for(a.setAttribute("data-sortable-initialized","true"),e=a.querySelectorAll("th"),b=f=0,g=e.length;g>f;b=++f)c=e[b],"false"!==c.getAttribute("data-sortable")&&d.setupClickableTH(a,c,b);return a}},setupClickableTH:function(a,c,e){var f;return f=d.getColumnType(a,e),c.addEventListener(b,function(){var b,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;for(j="true"===this.getAttribute("data-sorted"),k=this.getAttribute("data-sorted-direction"),b=j?"ascending"===k?"descending":"ascending":f.defaultSortDirection,m=this.parentNode.querySelectorAll("th"),n=0,q=m.length;q>n;n++)c=m[n],c.setAttribute("data-sorted","false"),c.removeAttribute("data-sorted-direction");for(this.setAttribute("data-sorted","true"),this.setAttribute("data-sorted-direction",b),l=a.tBodies[0],h=[],t=l.rows,o=0,r=t.length;r>o;o++)g=t[o],h.push([d.getNodeValue(g.cells[e]),g]);for(j?h.reverse():h.sort(f.compare),u=[],p=0,s=h.length;s>p;p++)i=h[p],u.push(l.appendChild(i[1]));return u})},getColumnType:function(a,b){var e,f,g,h,i;for(i=a.tBodies[0].rows,g=0,h=i.length;h>g;g++)if(e=i[g],f=d.getNodeValue(e.cells[b]),""!==f&&f.match(c))return d.types.numeric;return d.types.alpha},getNodeValue:function(a){return a?null!==a.getAttribute("data-value")?a.getAttribute("data-value"):"undefined"!=typeof a.innerText?a.innerText.replace(f,""):a.textContent.replace(f,""):""},types:{numeric:{defaultSortDirection:"descending",compare:function(a,b){var c,d;return c=parseFloat(a[0].replace(/[^0-9.-]/g,"")),d=parseFloat(b[0].replace(/[^0-9.-]/g,"")),isNaN(c)&&(c=0),isNaN(d)&&(d=0),d-c}},alpha:{defaultSortDirection:"ascending",compare:function(a,b){var c,d;return c=a[0].toLowerCase(),d=b[0].toLowerCase(),c===d?0:d>c?-1:1}}}},setTimeout(d.init,0),window.Sortable=d}).call(this);

8
templates/instances.html
View file

@ -1,6 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% block title %}{% trans "Instances" %}{% endblock %} {% block title %}{% trans "Instances" %}{% endblock %}
{% block style %}
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
{% endblock %}
{% block content %} {% block content %}
<!-- Page Heading --> <!-- Page Heading -->
<div class="row"> <div class="row">
@ -17,7 +20,7 @@
<div class="col-lg-12"> <div class="col-lg-12">
<div class="table-responsive"> <div class="table-responsive">
{% if request.user.is_superuser %} {% if request.user.is_superuser %}
<table class="table table-hover table-striped"> <table class="table table-hover table-striped sortable-theme-bootstrap" data-sortable>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -25,7 +28,7 @@
<th>Status</th> <th>Status</th>
<th>VCPU</th> <th>VCPU</th>
<th>Memory</th> <th>Memory</th>
<th>Actions</th> <th data-sortable="false" style="width: 165px;">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -190,6 +193,7 @@
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
<script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
<script> <script>
function open_console(uuid) { function open_console(uuid) {
window.open("{% url 'console' %}?token=" + uuid, "", "width=850,height=485"); window.open("{% url 'console' %}?token=" + uuid, "", "width=850,height=485");

138
templates/secrets.html
View file

@ -1,6 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% block title %}{% trans "Secrets" %} - {{ compute.name }}{% endblock %} {% block title %}{% trans "Secrets" %} - {{ compute.name }}{% endblock %}
{% block style %}
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
{% endblock %}
{% block content %} {% block content %}
<!-- Page Heading --> <!-- Page Heading -->
<div class="row"> <div class="row">
@ -41,75 +44,78 @@
{% else %} {% else %}
<div class="col-lg-12"> <div class="col-lg-12">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover sortable-theme-bootstrap" data-sortable>
<thead> <thead>
<tr class="active"> <tr class="active">
<th>{% trans "UUID" %}</th> <th>{% trans "UUID" %}</th>
<th>{% trans "Type" %}</th> <th>{% trans "Type" %}</th>
<th>{% trans "Usage" %}</th> <th>{% trans "Usage" %}</th>
<th style="width:90px;">{% trans "Action" %}</th> <th data-sortable="false" style="width:90px;">{% trans "Action" %}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for secret in secrets_all %} {% for secret in secrets_all %}
<tr> <tr>
<td>{{ secret.uuid }}</td> <td>{{ secret.uuid }}</td>
<td>{% ifequal secret.usageType 0 %} <td>{% ifequal secret.usageType 0 %}
{% trans "volume" %} {% trans "volume" %}
{% endifequal %} {% endifequal %}
{% ifequal secret.usageType 1 %} {% ifequal secret.usageType 1 %}
{% trans "iscsi" %} {% trans "iscsi" %}
{% endifequal %} {% endifequal %}
{% ifequal secret.usageType 2 %} {% ifequal secret.usageType 2 %}
{% trans "ceph" %} {% trans "ceph" %}
{% endifequal %} {% endifequal %}
</td> </td>
<td>{{ secret.usage }}</td> <td>{{ secret.usage }}</td>
<td> <td>
<form action="" method="post" role="form">{% csrf_token %} <form action="" method="post" role="form">{% csrf_token %}
<input type="hidden" name="uuid" value="{{ secret.uuid }}"/> <input type="hidden" name="uuid" value="{{ secret.uuid }}"/>
<a data-toggle="modal" href="#editSecret{{ secret.uuid }}" class="btn btn-sm btn-default" title="{% trans "Edit" %}"> <a data-toggle="modal" href="#editSecret{{ secret.uuid }}" class="btn btn-sm btn-default" title="{% trans "Edit" %}">
<span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-pencil"></span>
</a> </a>
<button type="submit" class="btn btn-sm btn-default" name="delete" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')"> <button type="submit" class="btn btn-sm btn-default" name="delete" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
<span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-trash"></span>
</button> </button>
</form> </form>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="editSecret{{ secret.uuid }}" tabindex="-1" role="dialog" <div class="modal fade" id="editSecret{{ secret.uuid }}" tabindex="-1" role="dialog"
aria-labelledby="editSecret" aria-hidden="true"> aria-labelledby="editSecret" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{% trans "Set secret value" %}</h4> <h4 class="modal-title">{% trans "Set secret value" %}</h4>
</div>
<div class="tab-content">
<form class="form-horizontal" method="post" role="form">{% csrf_token %}
<div class="form-group">
<label class="col-sm-3 control-label">{% trans "Value" %}</label>
<div class="col-sm-6">
<input type="hidden" name="uuid" value="{{ secret.uuid }}">
<input type="text" name="value" class="form-control" value="{{ secret.value }}" maxlength="45" required pattern="[a-zA-Z0-9]$+">
</div>
</div> </div>
<div class="modal-footer"> <div class="tab-content">
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button> <form class="form-horizontal" method="post" role="form">{% csrf_token %}
<button type="submit" class="btn btn-primary" name="set_value">{% trans "Set" %}</button> <div class="form-group">
</div> <label class="col-sm-3 control-label">{% trans "Value" %}</label>
</form> <div class="col-sm-6">
</div> <!-- /.modal-content --> <input type="hidden" name="uuid" value="{{ secret.uuid }}">
</div> <!-- /.tab-content --> <input type="text" name="value" class="form-control" value="{{ secret.value }}" maxlength="45" required pattern="[a-zA-Z0-9]$+">
</div> <!-- /.modal-dialog --> </div>
</div> <!-- /.modal --> </div>
</td> <div class="modal-footer">
</tr> <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
{% endfor %} <button type="submit" class="btn btn-primary" name="set_value">{% trans "Set" %}</button>
</tbody> </div>
</table> </form>
</div> </div> <!-- /.modal-content -->
</div> <!-- /.tab-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endblock %}
{% block script %}
<script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
{% endblock %} {% endblock %}

50
templates/storage.html
View file

@ -1,6 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load i18n %} {% load i18n %}
{% block title %}{% trans "Storage" %} - {{ pool }}{% endblock %} {% block title %}{% trans "Storage" %} - {{ pool }}{% endblock %}
{% block style %}
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
{% endblock %}
{% block content %} {% block content %}
<!-- Page Heading --> <!-- Page Heading -->
<div class="row"> <div class="row">
@ -77,14 +80,14 @@
<h3 class="page-header">{% trans "Volumes" %}</h3> <h3 class="page-header">{% trans "Volumes" %}</h3>
{% if volumes %} {% if volumes %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-bordered" id="sortTable"> <table class="table table-striped table-bordered sortable-theme-bootstrap" data-sortable>
<thead> <thead>
<tr> <tr>
<th style="width:35px;">#</th> <th style="width:35px;">#</th>
<th>{% trans "Name" %}</th> <th>{% trans "Name" %}</th>
<th style="width:80px;">{% trans "Size" %}</th> <th>{% trans "Size" %}</th>
<th style="width:75px;">{% trans "Format" %}</th> <th>{% trans "Format" %}</th>
<th colspan="2">{% trans "Action" %}</th> <th data-sortable="false" colspan="2">{% trans "Action" %}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -177,25 +180,26 @@
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
<script> <script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
$('.format-convert').hide(); <script>
$(document).on('change', '.volume-convert', function () { $('.format-convert').hide();
if ($(this).prop('checked')) { $(document).on('change', '.volume-convert', function () {
$('.format-convert').show(); if ($(this).prop('checked')) {
if ($('.image-format').val() == 'qcow2') { $('.format-convert').show();
$('.meta-prealloc').show(); if ($('.image-format').val() == 'qcow2') {
}
} else {
$('.format-convert').hide();
$('.meta-prealloc').hide();
}
});
$(document).on('change', '.image-format', function () {
if ($(this).val() == "qcow2") {
$('.meta-prealloc').show(); $('.meta-prealloc').show();
} else {
$('.meta-prealloc').hide();
} }
}); } else {
</script> $('.format-convert').hide();
$('.meta-prealloc').hide();
}
});
$(document).on('change', '.image-format', function () {
if ($(this).val() == "qcow2") {
$('.meta-prealloc').show();
} else {
$('.meta-prealloc').hide();
}
});
</script>
{% endblock %} {% endblock %}