Create table for display

Add translations
This commit is contained in:
amcmanu3 2023-02-05 20:11:21 -05:00
parent f381562b3b
commit 5d5f0eaaa5
3 changed files with 33 additions and 25 deletions

View File

@ -71,7 +71,7 @@
<div class="input-group"> <div class="input-group">
<button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) { <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh') $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
});">Enable all Languages</button> });">{{ translate('panelConfig', 'enableLang', data['lang']) }}</button>
<select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas" <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas"
data-tick-icon="fa-check" multiple data-style="custom-picker"> data-tick-icon="fa-check" multiple data-style="custom-picker">
{% for lang in data['all_languages'] %} {% for lang in data['all_languages'] %}
@ -90,7 +90,7 @@
<div class="input-group"> <div class="input-group">
<button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#mount_select')).each(function(element) { <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#mount_select')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh') $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
});">Disable All Mounts</button> });">{{ translate('panelConfig', 'noMounts', data['lang']) }}</button>
<select id="mount_select" class="form-control selectpicker show-tick" data-icon-base="fas" <select id="mount_select" class="form-control selectpicker show-tick" data-icon-base="fas"
data-tick-icon="fa-check" multiple data-style="custom-picker"> data-tick-icon="fa-check" multiple data-style="custom-picker">
{% for mount in data['all_partitions'] %} {% for mount in data['all_partitions'] %}

View File

@ -107,13 +107,17 @@
<h5 class="mb-1 font-weight-medium text-primary">Storage <h5 class="mb-1 font-weight-medium text-primary">Storage
</h5> </h5>
<div id="storage_data"> <div id="storage_data">
<ul style="width: 100%; list-style: none;"> <table id="storage_table" class="table table-hover" style="width: 100%;">
<tbody>
{% for item in data.get('hosts_data').get('disk_json') %} {% for item in data.get('hosts_data').get('disk_json') %}
{% if item["mount"] in data["monitored"] %} {% if item["mount"] in data["monitored"] %}
<li id="{{item['device']}}"> <tr id="{{item['device']}}">
<td>
<h6 style="display: inline-block;">{{item["mount"]}}</h6> <h6 style="display: inline-block;">{{item["mount"]}}</h6>
</td>
<td>
<div class="progress" <div class="progress"
style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;"> style="display: inline-block; height: 20px; width: 70%; background-color: rgb(139, 139, 139) !important;">
<div class="progress-bar <div class="progress-bar
{% if item['percent_used'] <= 33 %} {% if item['percent_used'] <= 33 %}
bg-success bg-success
@ -123,14 +127,16 @@
bg-danger bg-danger
{% end %} {% end %}
" role="progressbar" style="color: black; height: 100%; width: {{item['percent_used']}}%;" " role="progressbar" style="color: black; height: 100%; width: {{item['percent_used']}}%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} / {{item["total"]}} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} /
{{item["total"]}}
</div> </div>
</div> </div>
</td>
</li> </tr>
{% end %} {% end %}
{% end %} {% end %}
</ul> </tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
@ -926,13 +932,13 @@
mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`); mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
mem_percent.textContent = hostStats.mem_percent + '%'; mem_percent.textContent = hostStats.mem_percent + '%';
var storage_html = '<ul style="width: 100%; list-style: none;">'; var storage_html = '<table id="storage_table" class="table table-hover" style="width: 100%;"><tbody>';
for (i = 0; i < hostStats.disk_usage.length; i++) { for (i = 0; i < hostStats.disk_usage.length; i++) {
if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) { if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) {
storage_html += `<li id="${hostStats.disk_usage[i].device}"> storage_html += `<tr id="${hostStats.disk_usage[i].device}"><td>
<h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6> <h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6></td><td>
<div class="progress" <div class="progress"
style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;"><div class="progress-bar`; style="display: inline-block; height: 20px; width: 70%; background-color: rgb(139, 139, 139) !important;"><div class="progress-bar`;
if (hostStats.disk_usage[i].percent_used <= 33) { if (hostStats.disk_usage[i].percent_used <= 33) {
storage_html += ` bg-success`; storage_html += ` bg-success`;
@ -946,10 +952,10 @@
</div> </div>
</div > </div >
</li >`; </td></tr>`;
} }
} }
storage_html += `</ul>`; storage_html += `</tbody></table>`;
$("#storage_data").html(storage_html); $("#storage_data").html(storage_html);
}); });
} }

View File

@ -230,7 +230,9 @@
"superConfirmTitle": "Enable superuser? Are you sure?", "superConfirmTitle": "Enable superuser? Are you sure?",
"user": "User", "user": "User",
"users": "Users", "users": "Users",
"title": "Crafty Configuration" "title": "Crafty Configuration",
"enableLang": "Enable All Languages",
"noMounts": "Show no Mounts on Dash"
}, },
"customLogin": { "customLogin": {
"customLoginPage": "Customise the Login Page", "customLoginPage": "Customise the Login Page",