mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-07-09 04:20:17 +02:00
[CHANGE] Some improvements
- Fixed Bootstraps cards, rows and cols - Replaced style argument with Bootstrap class - Removed unused Django templatetag - JS modernized and moved to its own script tag instead of concatenating it with other more or less "global" scripts - Fixed Bootstrap classes
This commit is contained in:
Peter Pfeufer
parent
1dea92ed76
commit
1fb091acb2
@ -1,6 +1,6 @@
|
||||
{% extends "allianceauth/base-bs5.html" %}
|
||||
|
||||
{% load i18n %}
|
||||
{% load humanize %}
|
||||
|
||||
{% block page_title %}
|
||||
{% translate "Mumble" %}
|
||||
@ -9,6 +9,7 @@
|
||||
{% 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 %}
|
||||
|
||||
@ -16,55 +17,55 @@
|
||||
{% endblock header_nav_collapse_right %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card card-success col-lg-12 container-fluid">
|
||||
<div class="card col-lg-12 mb-3">
|
||||
<div class="card-header">
|
||||
<span class="card-title">{% translate "Server Connection History" %}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<table class="table table-responsive" id="table-mumble-connection-history" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{% translate "User" %}</th>
|
||||
<th class="text-left">{% translate "Display_Name" %}</th>
|
||||
<th class="text-left">{% translate "Release" %}</th>
|
||||
<th class="text-left">{% translate "Version" %}</th>
|
||||
<th class="text-left">{% translate "Last Connection" %}</th>
|
||||
<th class="text-left">{% translate "Last Disconnection" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table w-100" id="table-mumble-connection-history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-start">{% translate "User" %}</th>
|
||||
<th class="text-start">{% translate "Displayed Name" %}</th>
|
||||
<th class="text-start">{% translate "Release" %}</th>
|
||||
<th class="text-start">{% translate "Version" %}</th>
|
||||
<th class="text-end">{% translate "Last Connect" %}</th>
|
||||
<th class="text-end">{% translate "Last Disconnect" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="card card-success col-lg-6 container-fluid">
|
||||
<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 class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">{% translate "Server Connection Breakdown" %}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<canvas id="pieChart"></canvas> <!-- Canvas element for the pie chart -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-success col-lg-6 container-fluid">
|
||||
<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">
|
||||
<table class="table table-responsive" id="table-mumble-connection-stats" style="width: 100%;">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<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">
|
||||
<table class="table w-100" id="table-mumble-connection-stats">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">{% translate "Version" %}</th>
|
||||
<th class="text-left">{% translate "Number" %}</th>
|
||||
<th class="text-start">{% translate "Version" %}</th>
|
||||
<th class="text-end">{% translate "Number" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
@ -74,112 +75,131 @@
|
||||
</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>
|
||||
$(document).ready(function () {
|
||||
const MUMBLESTATS_DATETIME_FORMAT = 'YYYY-MM-DD, HH:mm';
|
||||
|
||||
'use strict';
|
||||
|
||||
$("#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',
|
||||
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']],
|
||||
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', className: 'text-end' },
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
processing: true,
|
||||
stateSave: true,
|
||||
stateDuration: 0,
|
||||
});
|
||||
|
||||
// Initialize empty Pie chart
|
||||
const ctx = document.getElementById('pieChart').getContext('2d');
|
||||
const 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: (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: (xhr, status, error) => {
|
||||
console.error('Error fetching pie chart data:', status, error);
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% 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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user