mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-23 22:55:23 +00:00
Add sortable
This commit is contained in:
Retspen
parent
ed2b28c25e
commit
5f6b06b467
5 changed files with 197 additions and 91 deletions
90
static/css/sortable-theme-bootstrap.css
Executable file
90
static/css/sortable-theme-bootstrap.css
Executable 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
2
static/js/sortable.min.js
vendored
Executable 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);
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Instances" %}{% endblock %}
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
|
|
@ -17,7 +20,7 @@
|
|||
<div class="col-lg-12">
|
||||
<div class="table-responsive">
|
||||
{% 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>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
<th>Status</th>
|
||||
<th>VCPU</th>
|
||||
<th>Memory</th>
|
||||
<th>Actions</th>
|
||||
<th data-sortable="false" style="width: 165px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -190,6 +193,7 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
|
||||
<script>
|
||||
function open_console(uuid) {
|
||||
window.open("{% url 'console' %}?token=" + uuid, "", "width=850,height=485");
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Secrets" %} - {{ compute.name }}{% endblock %}
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
|
|
@ -41,75 +44,78 @@
|
|||
{% else %}
|
||||
<div class="col-lg-12">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr class="active">
|
||||
<th>{% trans "UUID" %}</th>
|
||||
<th>{% trans "Type" %}</th>
|
||||
<th>{% trans "Usage" %}</th>
|
||||
<th style="width:90px;">{% trans "Action" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for secret in secrets_all %}
|
||||
<tr>
|
||||
<td>{{ secret.uuid }}</td>
|
||||
<td>{% ifequal secret.usageType 0 %}
|
||||
{% trans "volume" %}
|
||||
{% endifequal %}
|
||||
{% ifequal secret.usageType 1 %}
|
||||
{% trans "iscsi" %}
|
||||
{% endifequal %}
|
||||
{% ifequal secret.usageType 2 %}
|
||||
{% trans "ceph" %}
|
||||
{% endifequal %}
|
||||
</td>
|
||||
<td>{{ secret.usage }}</td>
|
||||
<td>
|
||||
<form action="" method="post" role="form">{% csrf_token %}
|
||||
<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" %}">
|
||||
<span class="glyphicon glyphicon-pencil"></span>
|
||||
</a>
|
||||
<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>
|
||||
</button>
|
||||
</form>
|
||||
<table class="table table-hover sortable-theme-bootstrap" data-sortable>
|
||||
<thead>
|
||||
<tr class="active">
|
||||
<th>{% trans "UUID" %}</th>
|
||||
<th>{% trans "Type" %}</th>
|
||||
<th>{% trans "Usage" %}</th>
|
||||
<th data-sortable="false" style="width:90px;">{% trans "Action" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for secret in secrets_all %}
|
||||
<tr>
|
||||
<td>{{ secret.uuid }}</td>
|
||||
<td>{% ifequal secret.usageType 0 %}
|
||||
{% trans "volume" %}
|
||||
{% endifequal %}
|
||||
{% ifequal secret.usageType 1 %}
|
||||
{% trans "iscsi" %}
|
||||
{% endifequal %}
|
||||
{% ifequal secret.usageType 2 %}
|
||||
{% trans "ceph" %}
|
||||
{% endifequal %}
|
||||
</td>
|
||||
<td>{{ secret.usage }}</td>
|
||||
<td>
|
||||
<form action="" method="post" role="form">{% csrf_token %}
|
||||
<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" %}">
|
||||
<span class="glyphicon glyphicon-pencil"></span>
|
||||
</a>
|
||||
<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>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="editSecret{{ secret.uuid }}" tabindex="-1" role="dialog"
|
||||
aria-labelledby="editSecret" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<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>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="editSecret{{ secret.uuid }}" tabindex="-1" role="dialog"
|
||||
aria-labelledby="editSecret" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">{% trans "Set secret value" %}</h4>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
|
||||
<button type="submit" class="btn btn-primary" name="set_value">{% trans "Set" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- /.modal-content -->
|
||||
</div> <!-- /.tab-content -->
|
||||
</div> <!-- /.modal-dialog -->
|
||||
</div> <!-- /.modal -->
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</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 class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
|
||||
<button type="submit" class="btn btn-primary" name="set_value">{% trans "Set" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- /.modal-content -->
|
||||
</div> <!-- /.tab-content -->
|
||||
</div> <!-- /.modal-dialog -->
|
||||
</div> <!-- /.modal -->
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
|
||||
{% endblock %}
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% block title %}{% trans "Storage" %} - {{ pool }}{% endblock %}
|
||||
{% block style %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}/css/sortable-theme-bootstrap.css" />
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<!-- Page Heading -->
|
||||
<div class="row">
|
||||
|
|
@ -77,14 +80,14 @@
|
|||
<h3 class="page-header">{% trans "Volumes" %}</h3>
|
||||
{% if volumes %}
|
||||
<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>
|
||||
<tr>
|
||||
<th style="width:35px;">#</th>
|
||||
<th>{% trans "Name" %}</th>
|
||||
<th style="width:80px;">{% trans "Size" %}</th>
|
||||
<th style="width:75px;">{% trans "Format" %}</th>
|
||||
<th colspan="2">{% trans "Action" %}</th>
|
||||
<th>{% trans "Size" %}</th>
|
||||
<th>{% trans "Format" %}</th>
|
||||
<th data-sortable="false" colspan="2">{% trans "Action" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -177,25 +180,26 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script>
|
||||
$('.format-convert').hide();
|
||||
$(document).on('change', '.volume-convert', function () {
|
||||
if ($(this).prop('checked')) {
|
||||
$('.format-convert').show();
|
||||
if ($('.image-format').val() == 'qcow2') {
|
||||
$('.meta-prealloc').show();
|
||||
}
|
||||
} else {
|
||||
$('.format-convert').hide();
|
||||
$('.meta-prealloc').hide();
|
||||
}
|
||||
});
|
||||
$(document).on('change', '.image-format', function () {
|
||||
if ($(this).val() == "qcow2") {
|
||||
<script src="{{ STATIC_URL }}/js/sortable.min.js"></script>
|
||||
<script>
|
||||
$('.format-convert').hide();
|
||||
$(document).on('change', '.volume-convert', function () {
|
||||
if ($(this).prop('checked')) {
|
||||
$('.format-convert').show();
|
||||
if ($('.image-format').val() == 'qcow2') {
|
||||
$('.meta-prealloc').show();
|
||||
} else {
|
||||
$('.meta-prealloc').hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
} else {
|
||||
$('.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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue