allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html

@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
-
 {% load i18n %}
+{% load humanize %}
 
 {% block page_title %}
     {% translate "Mumble" %}
@@ -9,7 +9,6 @@
 {% block header_nav_brand %}
     <a class="navbar-brand">{% trans "Mumble History" %} - {{ mumble_url }}</a>
 {% endblock header_nav_brand %}
-
 {% block header_nav_collapse_left %}
 {% endblock header_nav_collapse_left %}
 
@@ -17,55 +16,55 @@
 {% endblock header_nav_collapse_right %}
 
 {% block content %}
-    <div class="card col-lg-12 mb-3">
+    <div class="card card-success col-lg-12 container-fluid">
         <div class="card-header">
             <span class="card-title">{% translate "Server Connection History" %}</span>
         </div>
-
         <div class="card-body">
-            <div class="table-responsive">
+            <div class="panel panel-default">
-                <table class="table w-100" id="table-mumble-connection-history">
+                <div class="panel-body">
+                    <table class="table table-responsive" id="table-mumble-connection-history" style="width: 100%;">
                         <thead>
                             <tr>
-                            <th class="text-start">{% translate "User" %}</th>
+                                <th class="text-left">{% translate "User" %}</th>
-                            <th class="text-start">{% translate "Displayed Name" %}</th>
+                                <th class="text-left">{% translate "Display_Name" %}</th>
-                            <th class="text-start">{% translate "Release" %}</th>
+                                <th class="text-left">{% translate "Release" %}</th>
-                            <th class="text-start">{% translate "Version" %}</th>
+                                <th class="text-left">{% translate "Version" %}</th>
-                            <th class="text-end">{% translate "Last Connect" %}</th>
+                                <th class="text-left">{% translate "Last Connection" %}</th>
-                            <th class="text-end">{% translate "Last Disconnect" %}</th>
+                                <th class="text-left">{% translate "Last Disconnection" %}</th>
                             </tr>
                         </thead>
                     </table>
                 </div>
             </div>
         </div>
-
+    </div>
     <div class="row">
-        <div class="col-lg-6">
+        <div class="card card-success col-lg-6 container-fluid">
-            <div class="card">
             <div class="card-header">
                 <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
             </div>
-
             <div class="card-body">
+                <div class="panel panel-default">
+                    <div class="panel-body">
                         <canvas id="pieChart"></canvas> <!-- Canvas element for the pie chart -->
+                        <br />
                     </div>
                 </div>
             </div>
-
+        </div>
-        <div class="col-lg-6">
+        <div class="card card-success col-lg-6 container-fluid">
-            <div class="card">
             <div class="card-header">
                 <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
             </div>
-
             <div class="card-body">
-                    <div class="table-responsive">
+                <div class="panel panel-default">
-                        <table class="table w-100" id="table-mumble-connection-stats">
+                    <div class="panel-body">
+                        <table class="table table-responsive" id="table-mumble-connection-stats" style="width: 100%;">
                             <thead>
                                 <tr>
-                                    <th class="text-start">{% translate "Version" %}</th>
+                                    <th class="text-left">{% translate "Version" %}</th>
-                                    <th class="text-end">{% translate "Number" %}</th>
+                                    <th class="text-left">{% translate "Number" %}</th>
                                 </tr>
                             </thead>
                         </table>
@@ -75,45 +74,33 @@
         </div>
     </div>
 {% endblock content %}
-
 {% block extra_javascript %}
     {% include "bundles/datatables-js-bs5.html" %}
     {% include "bundles/filterdropdown-js.html" %}
     {% include "bundles/chart-js.html" %}
     {% include "bundles/moment-js.html" with locale=True %}
 
-    <script>
+{% endblock extra_javascript %}
-        $(document).ready(function () {
-            const MUMBLESTATS_DATETIME_FORMAT = 'YYYY-MM-DD, HH:mm';
-
-            'use strict';
 
+{% block extra_css %}
+    {% include "bundles/datatables-css-bs5.html" %}
+{% endblock extra_css %}
+{% block extra_script %}
+$(document).ready(function () {
     $("#table-mumble-connection-history").DataTable({
         ajax: {
-                    url: '{% url "mumble:connection_history_data" %}',
+            url: "{% url 'mumble:connection_history_data' %}",
-                    dataSrc: 'connection_history_data',
+            dataSrc: "connection_history_data",
         },
         columns: [
-                    { data: 'user' },
+            { data: "user" },
-                    { data: 'display_name' },
+            { data: "display_name" },
-                    { data: 'release' },
+            { data: "release" },
-                    { data: 'version' },
+            { data: "version" },
-                    {
+            { data: "last_connect" },
-                        data: 'last_connect',
+            { data: "last_connect" },
-                        render: (data) => {
-                            return moment(data).utc().format(MUMBLESTATS_DATETIME_FORMAT);
-                        },
-                        className: 'text-end',
-                    },
-                    {
-                        data: 'last_disconnect',
-                        render: (data) => {
-                            return moment(data).utc().format(MUMBLESTATS_DATETIME_FORMAT);
-                        },
-                        className: 'text-end',
-                    },
         ],
-                order: [[4, 'desc']],
+        order: [[4, "desc"]],
         processing: true,
         stateSave: true,
         stateDuration: 0,
@@ -133,58 +120,55 @@
 
     $("#table-mumble-connection-stats").DataTable({
         ajax: {
-                    url: '{% url "mumble:release_counts_data" %}',
+            url: "{% url 'mumble:release_counts_data' %}",
-                    dataSrc: 'release_counts_data',
+            dataSrc: "release_counts_data",
         },
-                columns: [
+        columns: [{ data: "release" }, { data: "user_count" }],
-                    { data: 'release' },
+        order: [[1, "desc"]],
-                    { data: 'user_count', className: 'text-end' },
-                ],
-                order: [[1, 'desc']],
         processing: true,
         stateSave: true,
         stateDuration: 0,
     });
 
     // Initialize empty Pie chart
-            const ctx = document.getElementById('pieChart').getContext('2d');
+    var ctx = document.getElementById("pieChart").getContext("2d");
-            const pieChart = new Chart(ctx, {
+    var pieChart = new Chart(ctx, {
-                type: 'pie',
+        type: "pie",
         data: {
             labels: [], // Initially empty
             datasets: [
                 {
-                            label: 'Server Connection Breakdown',
+                    label: "Server Connection Breakdown",
                     data: [], // Initially empty
                     backgroundColor: [
-                                'rgba(255, 99, 132, 0.2)',
+                        "rgba(255, 99, 132, 0.2)",
-                                'rgba(54, 162, 235, 0.2)',
+                        "rgba(54, 162, 235, 0.2)",
-                                'rgba(255, 206, 86, 0.2)'
+                        "rgba(255, 206, 86, 0.2)",
                     ],
                     borderColor: [
-                                'rgba(255, 99, 132, 1)',
+                        "rgba(255, 99, 132, 1)",
-                                'rgba(54, 162, 235, 1)',
+                        "rgba(54, 162, 235, 1)",
-                                'rgba(255, 206, 86, 1)'
+                        "rgba(255, 206, 86, 1)",
+                    ],
+                    borderWidth: 1,
+                },
             ],
-                            borderWidth: 1
-                        }
-                    ]
         },
         options: {
             responsive: true,
             plugins: {
                 legend: {
-                            position: 'top'
+                    position: "top",
-                        }
+                },
-                    }
+            },
-                }
+        },
     });
 
     // AJAX call to dynamically update the chart
     $.ajax({
-                url: '{% url "mumble:release_pie_chart_data" %}', // Your Django view URL that returns chart data
+        url: "{% url 'mumble:release_pie_chart_data' %}", // Your Django view URL that returns chart data
         method: "GET",
-                success: (data) => {
+        success: function (data) {
             // Replace chart data with the data from the AJAX response
             pieChart.data.labels = data.labels; // Set the new labels
             pieChart.data.datasets[0].data = data.values; // Set the new values
@@ -192,14 +176,10 @@
             // Update the chart to reflect the new data
             pieChart.update();
         },
-                error: (xhr, status, error) => {
+        error: function (xhr, status, error) {
-                    console.error('Error fetching pie chart data:', status, error);
+            console.error("Error fetching pie chart data:", status, error);
         },
     });
-        });
+});
-    </script>
-{% endblock extra_javascript %}
 
-{% block extra_css %}
+{% endblock extra_script %}
-    {% include "bundles/datatables-css-bs5.html" %}
-{% endblock extra_css %}