Mathis/allianceauth
1
0
Fork 0
mirror of https://gitlab.com/allianceauth/allianceauth.git synced 2025-07-09 12:30:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'mumbleconnectionhistory-improvements' into 'mumbleconnectionhistory'

Browse Source 
[CHANGE] Some improvements

See merge request soratidus999/allianceauth!12
This commit is contained in:
Ariel Rin 2024-09-23 23:33:01 +00:00
commit 2e0716f5ae
1 changed files with 155 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html
View File

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