From 5d5f0eaaa50363c8d5fdbeb3564ab5aee9fab660 Mon Sep 17 00:00:00 2001
From: amcmanu3 <mcdeweykp@gmail.com>
Date: Sun, 5 Feb 2023 20:11:21 -0500
Subject: [PATCH] Create table for display

Add translations
---
 app/frontend/templates/panel/config_json.html |  4 +-
 app/frontend/templates/panel/dashboard.html   | 50 +++++++++++--------
 app/translations/en_EN.json                   |  4 +-
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/app/frontend/templates/panel/config_json.html b/app/frontend/templates/panel/config_json.html
index dcea519c..702aae82 100644
--- a/app/frontend/templates/panel/config_json.html
+++ b/app/frontend/templates/panel/config_json.html
@@ -71,7 +71,7 @@
                 <div class="input-group">
                   <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')
-            });">Enable all Languages</button>
+            });">{{ translate('panelConfig', 'enableLang', data['lang']) }}</button>
                   <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas"
                     data-tick-icon="fa-check" multiple data-style="custom-picker">
                     {% for lang in data['all_languages'] %}
@@ -90,7 +90,7 @@
                 <div class="input-group">
                   <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')
-            });">Disable All Mounts</button>
+            });">{{ translate('panelConfig', 'noMounts', data['lang']) }}</button>
                   <select id="mount_select" class="form-control selectpicker show-tick" data-icon-base="fas"
                     data-tick-icon="fa-check" multiple data-style="custom-picker">
                     {% for mount in data['all_partitions'] %}
diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 4493afd5..d0a8fc68 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -107,14 +107,18 @@
                   <h5 class="mb-1 font-weight-medium text-primary">Storage
                   </h5>
                   <div id="storage_data">
-                    <ul style="width: 100%; list-style: none;">
-                      {% for item in data.get('hosts_data').get('disk_json') %}
-                      {% if item["mount"] in data["monitored"] %}
-                      <li id="{{item['device']}}">
-                        <h6 style="display: inline-block;">{{item["mount"]}}</h6>
-                        <div class="progress"
-                          style="display: inline-block; height: 20%; width: 70%; background-color: rgb(139, 139, 139) !important;">
-                          <div class="progress-bar
+                    <table id="storage_table" class="table table-hover" style="width: 100%;">
+                      <tbody>
+                        {% for item in data.get('hosts_data').get('disk_json') %}
+                        {% if item["mount"] in data["monitored"] %}
+                        <tr id="{{item['device']}}">
+                          <td>
+                            <h6 style="display: inline-block;">{{item["mount"]}}</h6>
+                          </td>
+                          <td>
+                            <div class="progress"
+                              style="display: inline-block; height: 20px; width: 70%; background-color: rgb(139, 139, 139) !important;">
+                              <div class="progress-bar
                           {% if item['percent_used'] <= 33 %}
                           bg-success
                           {% elif 34 <= item['percent_used'] <= 75 %}
@@ -123,14 +127,16 @@
                           bg-danger
                           {% end %}
                           " role="progressbar" style="color: black; height: 100%; width: {{item['percent_used']}}%;"
-                            aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} / {{item["total"]}}
-                          </div>
-                        </div>
-
-                      </li>
-                      {% end %}
-                      {% end %}
-                    </ul>
+                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} /
+                                {{item["total"]}}
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        {% end %}
+                        {% end %}
+                      </tbody>
+                    </table>
                   </div>
                 </div>
               </div>
@@ -926,13 +932,13 @@
         mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
         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++) {
           if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) {
-            storage_html += `<li id="${hostStats.disk_usage[i].device}">
-                      <h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6>
+            storage_html += `<tr id="${hostStats.disk_usage[i].device}"><td>
+                      <h6 style="display: inline-block;">${hostStats.disk_usage[i].mount}</h6></td><td>
                       <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) {
               storage_html += ` bg-success`;
@@ -946,10 +952,10 @@
             </div>
           </div >
 
-          </li >`;
+          </td></tr>`;
           }
         }
-        storage_html += `</ul>`;
+        storage_html += `</tbody></table>`;
         $("#storage_data").html(storage_html);
       });
     }
diff --git a/app/translations/en_EN.json b/app/translations/en_EN.json
index 15a8ed27..a1347e84 100644
--- a/app/translations/en_EN.json
+++ b/app/translations/en_EN.json
@@ -230,7 +230,9 @@
         "superConfirmTitle": "Enable superuser? Are you sure?",
         "user": "User",
         "users": "Users",
-        "title": "Crafty Configuration"
+        "title": "Crafty Configuration",
+        "enableLang": "Enable All Languages",
+        "noMounts": "Show no Mounts on Dash"
     },
     "customLogin": {
         "customLoginPage": "Customise the Login Page",