From bd9e4501847cb7e2ce9a1123dcc2774931fc621a Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Tue, 6 Aug 2024 23:08:22 +0200
Subject: [PATCH] Fixing Dashboard

---
 app/frontend/static/assets/css/crafty.css   |  21 ++++
 app/frontend/templates/panel/dashboard.html | 109 ++++++--------------
 2 files changed, 55 insertions(+), 75 deletions(-)

diff --git a/app/frontend/static/assets/css/crafty.css b/app/frontend/static/assets/css/crafty.css
index d411aa64..f876c2d1 100644
--- a/app/frontend/static/assets/css/crafty.css
+++ b/app/frontend/static/assets/css/crafty.css
@@ -205,6 +205,27 @@ body {
     color: gray !important;
 }
 
+.disk-usage {
+    height: 20px;
+    width: 100%;
+    background-color: rgb(139, 139, 139) !important
+}
+
+.disk-usage>.progress-bar {
+    color: black;
+    height: 100%;
+}
+
+.server-desc {
+    overflow-wrap: break-word !important;
+    max-width: 85px !important;
+    overflow: scroll;
+}
+
+.server-alert {
+    color: var(--red) !important;
+}
+
 /**************************************************************/
 
 /**************************************************************/
diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 6c319989..5db5ca22 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -15,7 +15,7 @@
       <div class="page-header">
         <h4 class="page-title">{{ translate('dashboard', 'dashboard', data['lang']) }}
           {% if data['server_stats']['running'] != 0 %}
-          <span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span>
+          <span id="sync" class="ml-5"><i class="fas fa-sync fa-spin"></i></span>
         </h4>
         {% end %}
       </div>
@@ -101,7 +101,7 @@
             {% if len(data['hosts_data']['disk_json']) > 0 %}
             <div class="col-12 mt-4">
               <div class="d-flex">
-                <div class="wrapper" style="width: 100%;">
+                <div class="wrapper w-100">
                   {% if len(data["monitored"]) > 0 %}
                   <h5 class="mb-1 font-weight-medium text-primary">{{ translate('dashboard', 'storage',
                     data['lang']) }}
@@ -112,9 +112,9 @@
                       {% for item in data['hosts_data']['disk_json'] %}
                       {% if item["mount"] in data["monitored"] %}
                       <div id="{{item['device']}}" class="col-xl-3 col-lg-3 col-md-4 col-12">
-                        <h4 class="mb-0 font-weight-semibold d-inline-block text-truncate storage-heading" id="title_{{item['device']}}" data-toggle="tooltip" data-placement="bottom" title="{{item['mount']}}" style="max-width: 100%;"><i class="fas fa-hdd"></i>
+                        <h4 class="mb-0 w-100 font-weight-semibold d-inline-block text-truncate storage-heading" id="title_{{item['device']}}" data-toggle="tooltip" data-placement="bottom" title="{{item['mount']}}"><i class="fas fa-hdd"></i>
                           {{item["mount"]}}</h4>
-                        <div class="progress d-inline-block" style="height: 20px; width: 100%; background-color: rgb(139, 139, 139) !important;">
+                        <div class="progress d-inline-block disk-usage">
                           <div class="progress-bar
                         {% if item['percent_used'] <= 58 %}
                         bg-success
@@ -123,7 +123,7 @@
                         {% else %}
                         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"]}} /
+                        " role="progressbar" style="width: {{item['percent_used']}}%" aria-valuenow="{{item['percent_used']}}" aria-valuemin="0" aria-valuemax="100">{{item["used"]}} /
                             {{item["total"]}}
                           </div>
                         </div>
@@ -188,7 +188,7 @@
                   <td draggable="false">
                     <i class="fas fa-server"></i>
                     {% if server['alert'] %}
-                    <a style="color: red !important;" draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                    <a class="server-alert" draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
                       {{ server['server_data']['server_name'] }}&nbsp; <i class="fas fa-exclamation-triangle"></i>
                     </a>
                     {% else %}
@@ -197,7 +197,6 @@
                     </a>
                     {% end %}
                   </td>
-
                   <td draggable="false" id="controls{{server['server_data']['server_id']}}" class="actions_serverlist">
                     {% if server['user_command_permission'] %}
                     {% if server['stats']['importing'] and server['stats']['running'] %}
@@ -242,7 +241,6 @@
                     {% end %}
                     {% end %}
                   </td>
-
                   <td draggable="false" id="server_cpu_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['cpu']}}">
                       <div class="progress-bar
@@ -253,11 +251,10 @@
                       {% else %}
                       bg-danger
                       {% end %}
-                      " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                      " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="{{server['stats']['cpu']}}" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['cpu']}}%
                   </td>
-
                   <td draggable="false" id="server_mem_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats']['mem']}}">
                       <div class="progress-bar
@@ -268,7 +265,7 @@
                       {% else %}
                       bg-danger
                       {% end %}
-                      " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                      " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="{{server['stats']['mem_percent']}}" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['mem_percent']}}% -
 
@@ -284,41 +281,28 @@
                   <td draggable="false" id="server_desc_{{server['server_data']['server_id']}}">
                     {% if server['stats']['int_ping_results'] %}
                     {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
-                    data['lang']) }} <br />
-
-                    {% if server['stats']['desc'] != 'False' %}
-                    <div id="desc_id" style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</div> <br />
+                    data['lang']) }}
                     {% end %}
-
-                    {% if server['stats']['version'] != 'False' %}
-                    {{ server['stats']['version'] }}
-                    {% end %}
-                    {% end %}
-
+                    <span class="server-player-totals" id="server_players_{{server['server_data']['server_id']}}" data-serverId="{{server['server_data']['server_id']}}" data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}" data-count="{{server['server_data']['count_players']}}"></span>
                   </td>
                   <td draggable="false">
-                    <span class="port" data-toggle="tooltip" title="{{
-                      server['server_data']['server_port'] }}">
-                      <div id="server_running_status_{{server['server_data']['server_id']}}">
-                        {% if server['stats']['running'] %}
-                        <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
-                          data['lang']) }}</span>
-                        {% elif server['stats']['crashed'] %}
-                        <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard',
-                          'crashed',
-                          data['lang']) }}</span>
-                        {% else %}
-                        <span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
-                          data['lang']) }}</span>
-                        {% end %}
-                        <br />
-                        <br />
+                    <div id="server_running_status_{{server['server_data']['server_id']}}" data-toggle="tooltip" title="{{
+                        server['server_data']['server_port'] }}">
+                      {% if server['stats']['running'] %}
+                      <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
+                        data['lang']) }}</span>
+                      {% elif server['stats']['crashed'] %}
+                      <span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard',
+                        'crashed',
+                        data['lang']) }}</span>
+                      {% else %}
+                      <span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
+                        data['lang']) }}</span>
+                      {% end %}
                   </td>
-                  <span class="server-player-totals" id="server_players_{{server['server_data']['server_id']}}" data-serverId="{{server['server_data']['server_id']}}" data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}" data-count="{{server['server_data']['count_players']}}"></span>
                 </tr>
                 {% end %}
           </div>
-          </span>
           {% for server in data['failed_servers'] %}
           <tr id="{{server['server_id']}}" draggable="false">
             <td class="text-warning"><i class="fas fa-server"></i>&nbsp;<a class="text-warning" href="/panel/server_detail?id={{server['server_id']}}&subpage=config">{{server['server_name']}}</a>
@@ -346,7 +330,7 @@
                   <div class="row">
                     <div class="col-10 col-lg-3 mx-0 px-0">
                       {% if server['alert'] %}
-                      <a style="color: red !important" class="btn btn-link d-flex justify-content-start" type="button" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                      <a class="btn btn-link d-flex justify-content-start server-alert" type="button" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
                         <i class="fas fa-server"></i> {{ server['server_data']['server_name'] }}&nbsp; <i class="fas fa-exclamation-triangle"></i>
                       </a>
                       {% else %}
@@ -462,7 +446,7 @@
                     {% else %}
                     bg-danger
                     {% end %}
-                    " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                    " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="{{server['stats']['cpu']}}" aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
                         {{server['stats']['cpu']}}%
                       </div>
@@ -479,7 +463,7 @@
                     {% else %}
                     bg-danger
                     {% end %}
-                    " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                    " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="{{server['stats']['mem_percent']}}" aria-valuemin="0" aria-valuemax="100"></div>
                         </div>
                         {{server['stats']['mem_percent']}}% -
 
@@ -499,22 +483,11 @@
                         {{ server['stats']['world_size'] }}
                       </div>
                     </div>
-                    <div class="col-6" style="width: auto;">
+                    <div class="col-6">
                       <h6>{{ translate('dashboard', 'players', data['lang']) }}</h6>
                       <div draggable="false" id="m_server_desc_{{server['server_data']['server_id']}}">
                         {% if server['stats']['int_ping_results'] %}
-                        {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard',
-                        'max',
-                        data['lang']) }} <br />
-
-                        {% if server['stats']['desc'] != 'False' %}
-                        <div id="desc_id" style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
-                          {{ server['stats']['desc'] }}</div> <br />
-                        {% end %}
-
-                        {% if server['stats']['version'] != 'False' %}
-                        {{ server['stats']['version'] }}
-                        {% end %}
+                        {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max', data['lang']) }}
                         {% end %}
                       </div>
                     </div>
@@ -702,8 +675,8 @@
     if (server.int_ping_results) {
       /* Update Players */
       if (server.players) {
-        server_desc.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
-        m_server_desc.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
+        server_desc.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}`
+        m_server_desc.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}`
 
         server_players.setAttribute('data-players', server.online);
         server_players.setAttribute('data-max', server.max);
@@ -732,22 +705,8 @@
 
         server_infos = "";
         m_server_infos = "";
-        server_infos = server.online + " / " + server.max + " {{ translate('dashboard', 'max', data['lang']) }}<br />"
-      }
-
-      /* Update Motd */
-      let motd = "";
-      if (server.desc) {
-        m_motd = `<span id="m_input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`;
-        motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`;
-        m_server_infos = server_infos + '<div id="desc_id" style="word-wrap: break-word; overflow: auto;">' + motd + '</div>' + "<br />";
-        server_infos = server_infos + '<div id="desc_id" style="word-wrap: break-word; max-width: 85px !important; overflow: auto;">' + motd + '</div>' + "<br />";
-      }
-
-      /* Version */
-      if (server.version) {
-        server_infos = server_infos + server.version
-        m_server_infos = m_server_infos + server.version
+        server_infos = server.online + " / " + server.max + " {{ translate('dashboard', 'max', data['lang']) }}"
+        m_server_infos = server.online + " / " + server.max + " {{ translate('dashboard', 'max', data['lang']) }}"
       }
       server_desc.innerHTML = server_infos;
       m_server_desc.innerHTML = m_server_infos;
@@ -857,7 +816,7 @@
           if (hostStats.mounts.includes(hostStats.disk_usage[i].mount)) {
             storage_html += `<div id="host_storage" class="col-xl-3 col-lg-3 col-md-4 col-12">
                         <h4 class="mb-0 font-weight-semibold d-inline-block text-truncate storage-heading" id="title_host_storage" data-toggle="tooltip" data-placement="bottom" title="${hostStats.disk_usage[i].mount}" style="max-width: 100%;"><i class="fas fa-hdd"></i> ${hostStats.disk_usage[i].mount}</h4>
-                        <div class="progress" style="display: inline-block; height: 20px; width: 100%; background-color: rgb(139, 139, 139) !important;">
+                        <div class="progress d-inline-block disk-usage">
                           <div class="progress-bar`;
             if (hostStats.disk_usage[i].percent_used <= 58) {
               storage_html += ` bg-success`;
@@ -866,7 +825,7 @@
             } else {
               storage_html += ` bg-danger`;
             }
-            storage_html += `" role="progressbar" style="color: black; height: 100%; width: ${hostStats.disk_usage[i].percent_used}%;"
+            storage_html += `" role="progressbar" style="width: ${hostStats.disk_usage[i].percent_used}%;"
                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">${hostStats.disk_usage[i].used} / ${hostStats.disk_usage[i].total}
                           </div>
                         </div>