undersys/proxadmin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

responsive dashboard tables

Browse source
This commit is contained in:
deflax 2017-06-08 17:42:09 +03:00
parent ca09e02f70
commit 5c9d410421
2 changed files with 121 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
app/templates/vmanager/dashboard.html
View file

@ -8,78 +8,59 @@
.tg th{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;font-weight:normal;padding:border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;font-weight:normal;padding:border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top} .tg .tg-yw4l{vertical-align:top}
@media only screen and (max-width: 800px) { @media only screen and (max-width: 768px) {
/* Force table to not be like tables anymore */
/* Force table to not be like tables anymore */ #no-more-tables table,
#no-more-tables table, #no-more-tables thead,
#no-more-tables thead, #no-more-tables tbody,
#no-more-tables tbody, #no-more-tables th,
#no-more-tables th, #no-more-tables td,
#no-more-tables td, #no-more-tables tr {
#no-more-tables tr { display: block;
display: block; }
}
/* Hide table headers (but not display: none;, for accessibility) */
/* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr {
#no-more-tables thead tr { position: absolute;
position: absolute; top: -9999px;
top: -9999px; left: -9999px;
left: -9999px; }
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
#no-more-tables td { /* Behave like a "row" */
/* Behave like a "row" */ border: none;
border: none; border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee; position: relative;
position: relative; padding-left: 50%;
padding-left: 50%; white-space: normal;
white-space: normal; text-align:left;
text-align:left; }
}
#no-more-tables td:before {
#no-more-tables td:before { /* Now like a table header */
/* Now like a table header */ position: absolute;
position: absolute; /* Top/left values mimic padding */
/* Top/left values mimic padding */ top: 6px;
top: 6px; left: 6px;
left: 6px; width: 45%;
width: 45%; padding-right: 10px;
padding-right: 10px; white-space: nowrap;
white-space: nowrap; text-align:left;
text-align:left; font-weight: bold;
font-weight: bold; }
}
/*
/* Label the data
Label the data */
*/ #no-more-tables td:before { content: attr(data-title); }
#no-more-tables td:before { content: attr(data-title); } }
}
</style> </style>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script type="text/javascript">
$(document).ready(function () {
$(".nmt").each(function() {
var nmtTable = $(this);
var nmtHeadRow = nmtTable.find("thead tr");
nmtTable.find("tbody tr").each(function () {
var curRow = $(this);
for (var i = 0; i < curRow.find("td").length; i++) {
var rowSelector = "td:eq(" + i + ")";
var headSelector = "th:eq(" + i + ")";
curRow.find(rowSelector).attr('data-title', nmtHeadRow.find(headSelector).html());
}
});
});
});
</script>
<script type="text/javascript"> <script type="text/javascript">
$('a[data-toggle="tooltip"]').tooltip({ $('a[data-toggle="tooltip"]').tooltip({
animated: 'fade', animated: 'fade',
@ -140,6 +121,7 @@ addEventListener("DOMContentLoaded", function() {
<div class="panel panel-info" id="deployments"> <div class="panel panel-info" id="deployments">
<div class="panel-heading">Deployments</div> <div class="panel-heading">Deployments</div>
<div class="panel-body"><p> <div class="panel-body"><p>
<div id="no-more-tables">
<table class="table table-hover table-striped table-condensed cf"> <table class="table table-hover table-striped table-condensed cf">
<thead> <thead>
<tr> <tr>
@ -154,25 +136,25 @@ addEventListener("DOMContentLoaded", function() {
<tbody> <tbody>
{% for deploy in inv_deployments %} {% for deploy in inv_deployments %}
<tr> <tr>
<td> <td data-title="Name"><a data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
<a data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td> <td data-title="CPU"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td>
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td> <td data-title="Memory"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td>
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td> <td data-title="Disk"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td>
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td> <td data-title="Network">{% for addr in deploy.machine_addresses %}<a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{{ addr.ip }}</a><br />{% endfor %}</td>
<td>{% for addr in deploy.machine_addresses %}<a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{{ addr.ip }}</a><br />{% endfor %}</td> <td data-title="Control">{% if status[deploy.machine_id] == 'running' %}
<td>{% if status[deploy.machine_id] == 'running' %}
<button class="confirm command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button> <button class="confirm command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
<button class="confirm command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button> <button class="confirm command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
{% else %} {% else %}
<button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button> <button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
{% endif %}</td> {% endif %}</td>
<td>{% if status[deploy.machine_id] == 'running' %} <td data-title="Remote">{% if status[deploy.machine_id] == 'running' %}
<button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button> <button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
{% endif %}</td> {% endif %}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<button class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button> <button class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>
</div> </div>
</div> </div>
@ -182,6 +164,7 @@ addEventListener("DOMContentLoaded", function() {
<div class="panel panel-info" id="domains"> <div class="panel panel-info" id="domains">
<div class="panel-heading">Domains</div> <div class="panel-heading">Domains</div>
<div class="panel-body"><p> <div class="panel-body"><p>
<div id="no-more-tables">
<table class="table table-hover table-striped table-condensed cf"> <table class="table table-hover table-striped table-condensed cf">
<thead> <thead>
<tr> <tr>
@ -192,13 +175,14 @@ addEventListener("DOMContentLoaded", function() {
<tbody> <tbody>
{% for domain in inv_domains %} {% for domain in inv_domains %}
<tr> <tr>
<td><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td> <td data-title="Domain"><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td>
<td>{{ domain.date_expire }}</td> <td data-title="Expiry Date">{{ domain.date_expire }}</td>
<td>soon...</td> <td data-title="Control">soon...</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button> <button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
</div> </div>
</div> </div>
@ -208,6 +192,7 @@ addEventListener("DOMContentLoaded", function() {
<div class="panel panel-info" id="addresses"> <div class="panel panel-info" id="addresses">
<div class="panel-heading">Addresses</div> <div class="panel-heading">Addresses</div>
<div class="panel-body"><p> <div class="panel-body"><p>
<div id="no-more-tables">
<table class="table table-hover table-striped table-condensed cf"> <table class="table table-hover table-striped table-condensed cf">
<thead> <thead>
<tr> <tr>
@ -219,14 +204,15 @@ addEventListener("DOMContentLoaded", function() {
<tbody> <tbody>
{% for address in inv_addresses %} {% for address in inv_addresses %}
<tr> <tr>
<td>{{ address.ip }}</td> <td data-title="IP">{{ address.ip }}</td>
<td>{{ address.macaddr }}</td> <td data-title="MAC">{{ address.macaddr }}</td>
<td>{{ address.rdns }}</td> <td data-title="RDNS">{{ address.rdns }}</td>
<td>soon...</td> <td data-title="Control">soon...</td>
{% endfor %} {% endfor %}
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<!--<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Assign</button> --> <!--<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Assign</button> -->
</div> </div>
</div> </div>
@ -236,6 +222,7 @@ addEventListener("DOMContentLoaded", function() {
<div class="panel panel-info" id="services"> <div class="panel panel-info" id="services">
<div class="panel-heading">Services</div> <div class="panel-heading">Services</div>
<div class="panel-body"><p> <div class="panel-body"><p>
<div id="no-more-tables">
<table class="table table-hover table-striped table-condensed cf"> <table class="table table-hover table-striped table-condensed cf">
<thead> <thead>
<tr> <tr>
@ -247,14 +234,15 @@ addEventListener("DOMContentLoaded", function() {
<tbody> <tbody>
{% for service in inv_services %} {% for service in inv_services %}
<tr> <tr>
<td>{{ service.name }}</td> <td data-title="Name">{{ service.name }}</td>
<td>{{ service.description }}</td> <td data-title="Description" >{{ service.description }}</td>
<td>{{ service.unit }}</td> <td data-title="Unit">{{ service.unit }}</td>
<td>{{ service.unitprice }}</td> <td data-title="Price">{{ service.unitprice }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button> <button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
</div> </div>

47
requirements.txt Normal file
View file

@ -0,0 +1,47 @@
alembic==0.9.2
appdirs==1.4.3
Babel==2.4.0
blinker==1.4
certifi==2017.4.17
chardet==3.0.3
click==6.7
dnspython==1.15.0
dnspython3==1.15.0
dominate==2.3.1
facepy==1.0.9
Flask==0.12.2
Flask-Babel==0.11.2
Flask-Bootstrap==3.3.7.1
Flask-Login==0.4.0
Flask-Mail==0.9.1
Flask-Migrate==2.0.4
Flask-Moment==0.5.1
Flask-Script==2.0.5
Flask-SQLAlchemy==2.2
Flask-WTF==0.14.2
gunicorn==19.7.1
idna==2.5
iso3166==0.8
itsdangerous==0.24
Jinja2==2.9.6
Mako==1.0.6
MarkupSafe==1.0
onetimepass==1.0.1
pkg-resources==0.0.0
psycopg2==2.7.1
Pygments==2.2.0
PyQRCode==1.2.1
python-dateutil==2.6.0
python-editor==1.0.3
pytz==2017.2
requests==2.17.3
schedule==0.4.2
six==1.10.0
sortedcontainers==1.5.7
SQLAlchemy==1.1.10
traits==4.6.0
Unipath==1.1
urllib3==1.21.1
visitor==0.1.3
Werkzeug==0.12.2
WTForms==2.1