Fix formatting / enable dynamic loading

app/frontend/templates/panel/parts/details_stats.html

@@ -228,6 +228,24 @@
     }
 
     initParser('input_motd', 'input_motd');
+    let text = ""
+        let players = server.players_cache;
+        for(let i=0; i < players.length; i++){
+            text += `<tr id="playerItem-${ players[i]["name"] }" class="playerItem--" style="text-align: center;">`;
+            text += `<td style="overflow: scroll;"><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>`
+            }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>`
+            }
+            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>`
+            }else{
+                text += `<td><span> Unavailable (Server Offline)</span></td>`
+            }
+
+        }
+        $("#player-body").html(text);
 
   }
 

app/frontend/templates/panel/parts/server_players.html

@@ -1,4 +1,4 @@
-<div class="col-md-6 col-sm-12">
+<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">
@@ -8,23 +8,26 @@
                 <th scope="col">Actions</th>
             </tr>
         </thead>
-        <tbody>
+        <tbody id="player-body">
             {% for player in data['cached_players'] %}
-            <tr id="playerItem-{{ player['name'] }}" class="playerItem--">
+            <tr id="playerItem-{{ player['name'] }}" class="playerItem--" style="text-align: center;">
                 <td>
                     <strong> {{ player['name'] }}</strong>
                 </td>
                 {% if player['status'] == 'Online' %}
-                <td><span class="text-success"><i class="fas fa-signal"></i> {{ player['status'] }}</span></td>
+                <td style="overflow: scroll;"><span class="text-success"><i class="fas fa-signal"></i> {{ player['status'] }}</span></td>
                 {% elif player['status'] == 'Offline' %}
-                <td><span class="text-warning"><i class="fa-solid fa-signal-slash"></i> Last connection : {{ player['last_seen'] }}</span></td>
+                <td><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">
+                <td class="buttons" style="text-align: center;">
                     {% if data['server_stats']['running'] %}
-                    <button onclick="send_command_to_server(`ban {{ player['name'] }}`)" type="button" class="btn btn-danger">Ban</button>
+                    <button onclick="send_command_to_server(`ban {{ player['name'] }}`)" type="button" class="btn btn-danger controls">Ban</button>
-                    <button onclick="send_command_to_server(`kick {{ player['name'] }}`)" type="button" class="btn btn-outline-danger">Kick</button>
+                    <br class="mobile-break"/>
-                    <button onclick="send_command_to_server(`op {{ player['name'] }}`)" type="button" class="btn btn-warning">OP</button>
+                    <button onclick="send_command_to_server(`kick {{ player['name'] }}`)" type="button" class="btn btn-outline-danger controls">Kick</button>
-                    <button onclick="send_command_to_server(`deop {{ player['name'] }}`)" type="button" class="btn btn-outline-warning">De-OP</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 (Server Offline)</span>
                     {% end %}
@@ -34,7 +37,21 @@
         </tbody>
     </table>
 </div>
-<div class="col-md-6 col-sm-12">
+<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">
     <h2>{{ translate('serverPlayerManagement', 'bannedPlayers', data['lang']) }}:</h2>
     <table class="table table-sm-responsive">
         <thead class="thead">