From 6157ed60b865ccb1f82742d86019fa08733f63b1 Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Sat, 3 Aug 2024 21:39:17 +0200
Subject: [PATCH] trying to rework server players

---
 .../templates/panel/parts/details_stats.html  |  17 +-
 .../templates/panel/parts/server_players.html | 178 ++++++++----------
 app/frontend/templates/public/status.html     |   2 +-
 3 files changed, 94 insertions(+), 103 deletions(-)

diff --git a/app/frontend/templates/panel/parts/details_stats.html b/app/frontend/templates/panel/parts/details_stats.html
index ab89f01d..3e02d85d 100644
--- a/app/frontend/templates/panel/parts/details_stats.html
+++ b/app/frontend/templates/panel/parts/details_stats.html
@@ -212,16 +212,23 @@
     let players = server.players_cache;
     for (let i = 0; i < players.length; i++) {
       text += `<tr id="playerItem-${players[i]["name"]}" class="playerItem-- text-center">`;
-      text += `<td class="no-scroll"><strong>${players[i]["name"]}</strong></td>`;
+      text += `<td class="no-scroll col-5"><strong>${players[i]["name"]}</strong></td>`;
       if (players[i]["status"] === "Online") {
-        text += `<td><span class="text-success"><i class="fas fa-signal"></i> ${players[i]['status']}</span></td>`
+        text += `<td class="col-4"><span class="text-success"><i class="fas fa-signal"></i> ${players[i]['status']}</span></td>`
       } else {
-        text += `<td><span class="text-warning"><i class="fa-regular fa-circle-xmark"></i><span class="offline-status">&nbsp;${players[i]['status']}</span><span class="conn-break"> Last connection :<br> ${players[i]['last_seen']}</span></td>`
+        text += `<td class="col-4"><span class="text-warning"><i class="fa-regular fa-circle-xmark"></i><span class="offline-status">&nbsp;${players[i]['status']}</span><span class="conn-break"> Last connection :<br> ${players[i]['last_seen']}</span></td>`
       }
       if (server["running"]) {
-        text += `<td><button onclick="send_command_to_server('ban ${players[i]['name']}')" type="button" class="btn btn-danger controls">Ban</button><br class="mobile-break"><button onclick="send_command_to_server('kick ${players[i]['name']}')" type="button" class="btn btn-outline-danger controls">Kick</button><br><button onclick="send_command_to_server('op ${players[i]['name']}')" type="button" class="btn btn-warning controls">OP</button><br class="mobile-break"><button onclick="send_command_to_server('deop ${players[i]['name']}')" type="button" class="btn btn-outline-warning controls">De-OP</button></td>`
+        text += `<td class="col-3">
+                    <div class="row">
+                      <div class="col"><button onclick="send_command_to_server('ban ${players[i]['name']}')" type="button" class="btn btn-danger">Ban</button></div>
+                      <div class="col"><button onclick="send_command_to_server('kick ${players[i]['name']}')" type="button" class="btn btn-outline-danger">Kick</button></div>
+                      <div class="col"><button onclick="send_command_to_server('op ${players[i]['name']}')" type="button" class="btn btn-warning">OP</button></div>
+                      <div class="col"><button onclick="send_command_to_server('deop ${players[i]['name']}')" type="button" class="btn btn-outline-warning">De-OP</button></div>
+                    </div>
+                  </td>`
       } else {
-        text += `<td><span> Unavailable<br> (Server Offline)</span></td>`
+        text += `<td><div><span> Unavailable<br> (Server Offline)</span></div></td>`
       }
 
     }
diff --git a/app/frontend/templates/panel/parts/server_players.html b/app/frontend/templates/panel/parts/server_players.html
index 852420e4..ebf79d13 100644
--- a/app/frontend/templates/panel/parts/server_players.html
+++ b/app/frontend/templates/panel/parts/server_players.html
@@ -1,103 +1,87 @@
 <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
     <h2>{{ translate('serverPlayerManagement', 'players', data['lang']) }}:</h2>
-    <table class="table table-sm-responsive">
-        <thead class="thead">
-            <tr>
-                <th scope="col">Player</th>
-                <th scope="col">Status</th>
-                <th scope="col">Actions</th>
-            </tr>
-        </thead>
-        <tbody id="player-body">
-            {% for player in data['cached_players'] %}
-            <tr id="playerItem-{{ player['name'] }}" class="playerItem-- text-center">
-                <td class="no-scroll">
-                    <strong> {{ player['name'] }}</strong>
-                </td>
-                {% if player['status'] == 'Online' %}
-                <td class="no-scroll"><span class="text-success"><i class="fas fa-signal"></i> {{ player['status'] }}</span></td>
-                {% elif player['status'] == 'Offline' %}
-                <td class="no-scroll"><span class="text-warning"><i class="fa-regular fa-circle-xmark"></i><span class="offline-status">&nbsp;{{ player['status'] }}</span><span class="conn-break"> Last connection :<br> {{ player['last_seen'] }}</span></span></td>
-                {% end %}
-                <td class="buttons text-center">
-                    {% if data['server_stats']['running'] %}
-                    <button onclick="send_command_to_server(`ban {{ player['name'] }}`)" type="button" class="btn btn-danger controls">Ban</button>
-                    <br class="mobile-break" />
-                    <button onclick="send_command_to_server(`kick {{ player['name'] }}`)" type="button" class="btn btn-outline-danger controls">Kick</button>
-                    <br>
-                    <button onclick="send_command_to_server(`op {{ player['name'] }}`)" type="button" class="btn btn-warning controls">OP</button>
-                    <br class="mobile-break" />
-                    <button onclick="send_command_to_server(`deop {{ player['name'] }}`)" type="button" class="btn btn-outline-warning controls">De-OP</button>
-                    {% else %}
-                    <span> Unavailable <br>(Server Offline)</span>
+    <div class="table-responsive ">
+        <table class="table no-scroll">
+            <thead class="thead">
+                <tr>
+                    <th scope="col-5">Player</th>
+                    <th scope="col-4">Status</th>
+                    <th scope="col-3">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="player-body">
+                {% for player in data['cached_players'] %}
+                <tr id="playerItem-{{ player['name'] }}" class="playerItem-- text-center">
+                    <td class=" no-scroll">
+                        <strong> {{ player['name'] }}</strong>
+                    </td>
+                    {% if player['status'] == 'Online' %}
+                    <td class="no-scroll col-5"><span class="text-success"><i class="fas fa-signal"></i> {{ player['status'] }}</span></td>
+                    {% elif player['status'] == 'Offline' %}
+                    <td class="no-scroll col-4"><span class="text-warning"><i class="fa-regular fa-circle-xmark"></i><span class="d-md-none ">&nbsp;{{ player['status'] }}</span><span class="d-none d-md-inline"> Last connection :<br> {{ player['last_seen'] }}</span></span></td>
                     {% end %}
-                </td>
-            </tr>
-            {% end %}
-        </tbody>
-    </table>
+                    <td class="no-scroll col-3">
+                        {% if data['server_stats']['running'] %}
+                        <div class="row">
+                            <div class="col"><button onclick="send_command_to_server(`ban {{ player['name'] }}`)" type="button" class="btn btn-danger">Ban</button></div>
+                            <div class="col"><button onclick="send_command_to_server(`kick {{ player['name'] }}`)" type="button" class="btn btn-outline-danger">Kick</button></div>
+                            <div class="col"><button onclick="send_command_to_server(`op {{ player['name'] }}`)" type="button" class="btn btn-warning">OP</button></div>
+                            <div class="col"><button onclick="send_command_to_server(`deop {{ player['name'] }}`)" type="button" class="btn btn-outline-warning">De-OP</button></div>
+                        </div>
+                        {% else %}
+                        <span> Unavailable <br>(Server Offline)</span>
+                        {% end %}
+                    </td>
+                </tr>
+                {% end %}
+            </tbody>
+        </table>
+    </div>
 </div>
-<style>
-    @media (min-width: 600px) {
-        .mobile-break {
-            display: none;
-        }
-
-        .offline-status {
-            display: none;
-        }
-    }
-
-    @media screen and (max-width: 600px) {
-        .conn-break {
-            display: none;
-        }
-    }
-
-    button.controls {
-        width: 70px;
-    }
-</style>
-<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 no-scroll" width="100%">
+<div class="col-xl-6 col-lg-12 no-scroll">
     <h2>{{ translate('serverPlayerManagement', 'bannedPlayers', data['lang']) }}:</h2>
-    <table class="table table-sm-responsive d-none d-lg-block no-scroll" style="width: 100%;">
-        <thead class="thead">
-            <tr>
-                <th scope="col">Player</th>
-                <th scope="col">Status</th>
-                <th scope="col">Reason</th>
-                <th scope="col">Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for player in data['banned_players'] %}
-            <tr id="playerItem-{{ player }}" class="playerItem--">
-                <td><strong> {{ player['name'] }}</strong></td>
-                <td>Banned on {{ player['banned_on'] }}</td>
-                <td>Banned by : {{ player['source'] }} <br />Reason : {{ player['reason'] }}</td>
-                <td class="buttons">
-                    <button onclick="send_command_to_server(`pardon {{ player['name'] }}`)" type="button" class="btn btn-danger">Unban</button>
-                </td>
-            </tr>
-            {% end %}
-        </tbody>
-    </table>
-    <table class="table table-sm-responsive d-block d-lg-none" style="width: 100%;">
-        <thead class="thead ">
-            <tr>
-                <th scope="col">Player</th>
-                <th scope="col">Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for player in data['banned_players'] %}
-            <tr id="playerItem-{{ player }}" class="playerItem--">
-                <td><strong> {{ player['name'] }}</strong></td>
-                <td class="buttons">
-                    <button onclick="send_command_to_server(`pardon {{ player['name'] }} `)" type="button" class="btn btn-danger">Unban</button>
-                </td>
-            </tr>
-            {% end %}
-        </tbody>
-    </table>
+    <div class="d-none d-lg-block table-responsive">
+        <table class="table no-scroll" style="width: 100%;">
+            <thead class="thead">
+                <tr>
+                    <th scope="col">Player</th>
+                    <th scope="col">Status</th>
+                    <th scope="col">Reason</th>
+                    <th scope="col">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for player in data['banned_players'] %}
+                <tr id="playerItem-{{ player }}" class="playerItem--">
+                    <td><strong> {{ player['name'] }}</strong></td>
+                    <td>Banned on {{ player['banned_on'] }}</td>
+                    <td>Banned by : {{ player['source'] }} <br />Reason : {{ player['reason'] }}</td>
+                    <td class="buttons">
+                        <button onclick="send_command_to_server(`pardon {{ player['name'] }}`)" type="button" class="btn btn-danger">Unban</button>
+                    </td>
+                </tr>
+                {% end %}
+            </tbody>
+        </table>
+    </div>
+    <div class="d-block d-lg-none table-responsive">
+        <table class="table no-scroll">
+            <thead class="thead ">
+                <tr>
+                    <th scope="col">Player</th>
+                    <th scope="col">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for player in data['banned_players'] %}
+                <tr id="playerItem-{{ player }}" class="playerItem--">
+                    <td><strong> {{ player['name'] }}</strong></td>
+                    <td class="buttons">
+                        <button onclick="send_command_to_server(`pardon {{ player['name'] }} `)" type="button" class="btn btn-danger">Unban</button>
+                    </td>
+                </tr>
+                {% end %}
+            </tbody>
+        </table>
+    </div>
 </div>
\ No newline at end of file
diff --git a/app/frontend/templates/public/status.html b/app/frontend/templates/public/status.html
index 5f8f02ef..8a26250a 100644
--- a/app/frontend/templates/public/status.html
+++ b/app/frontend/templates/public/status.html
@@ -9,7 +9,7 @@
 <!-- View for Large screen -->
 <style>
   .auth.auth-bg-1 {
-    background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
+    background: url("/static/assets/images/auth/{% raw data['background'] %}"),
     url("/static/assets/images/auth/login_1.jpg");
     background-size: cover;
   }