{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load humanize %}
{% block page_title %}
{% translate "Mumble" %}
{% endblock page_title %}
{% block header_nav_brand %}
{% trans "Mumble History" %} - {{ mumble_url }}
{% endblock header_nav_brand %}
{% block header_nav_collapse_left %}
{% endblock header_nav_collapse_left %}
{% block header_nav_collapse_right %}
{% endblock header_nav_collapse_right %}
{% block content %}
{% translate "User" %} |
{% translate "Display_Name" %} |
{% translate "Release" %} |
{% translate "Version" %} |
{% translate "Last Connection" %} |
{% translate "Last Disconnection" %} |
{% translate "Version" %} |
{% translate "Number" %} |
{% 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 %}
{% endblock extra_javascript %}
{% 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' %}",
dataSrc: "connection_history_data",
},
columns: [
{ data: "user" },
{ data: "display_name" },
{ data: "release" },
{ data: "version" },
{ data: "last_connect" },
{ data: "last_connect" },
],
order: [[4, "desc"]],
processing: true,
stateSave: true,
stateDuration: 0,
filterDropDown: {
columns: [
{
idx: 2,
},
{
idx: 3,
},
],
bootstrap: true,
bootstrap_version: 5,
},
});
$("#table-mumble-connection-stats").DataTable({
ajax: {
url: "{% url 'mumble:release_counts_data' %}",
dataSrc: "release_counts_data",
},
columns: [{ data: "release" }, { data: "user_count" }],
order: [[1, "desc"]],
processing: true,
stateSave: true,
stateDuration: 0,
});
// Initialize empty Pie chart
var ctx = document.getElementById("pieChart").getContext("2d");
var pieChart = new Chart(ctx, {
type: "pie",
data: {
labels: [], // Initially empty
datasets: [
{
label: "Server Connection Breakdown",
data: [], // Initially empty
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
],
borderWidth: 1,
},
],
},
options: {
responsive: true,
plugins: {
legend: {
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
method: "GET",
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
// Update the chart to reflect the new data
pieChart.update();
},
error: function (xhr, status, error) {
console.error("Error fetching pie chart data:", status, error);
},
});
});
{% endblock extra_script %}