Merge branch '1416-timerboard-datatables' into 'master'

[CHANGE] Timertables to Datatables

Closes #1416

See merge request allianceauth/allianceauth!1676
This commit is contained in:
Ariel Rin 2025-01-18 03:50:34 +00:00
commit 1b6cf98885
2 changed files with 98 additions and 75 deletions

View File

@ -2,80 +2,84 @@
{% load i18n %} {% load i18n %}
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table" id="{{ id }}">
<tr> <thead>
<th class="text-center">{% translate "Details" %}</th> <tr>
<th class="text-center">{% translate "Objective" %}</th> <th class="text-center">{% translate "Details" %}</th>
<th class="text-center">{% translate "System" %}</th> <th class="text-center">{% translate "Objective" %}</th>
<th class="text-center">{% translate "Structure" %}</th> <th class="text-center">{% translate "System" %}</th>
<th class="text-center">{% translate "Eve Time" %}</th> <th class="text-center">{% translate "Structure" %}</th>
<th class="text-center">{% translate "Local Time" %}</th> <th class="text-center">{% translate "Eve Time" %}</th>
<th class="text-center">{% translate "Creator" %}</th> <th class="text-center">{% translate "Local Time" %}</th>
<th class="text-center">{% translate "Creator" %}</th>
{% if perms.auth.timer_management %}
<th class="text-center">{% translate "Action" %}</th>
{% endif %}
</tr>
{% for timer in timers %}
<tr class="{% if timer.important == True %}bg-danger bg-opacity-25{% else %}bg-info bg-opacity-25{% endif %}">
<td style="width: 150px;" class="text-center">
{{ timer.details }}
{% if timer.timer_type != 'UNSPECIFIED' %}
<br />
({{ timer.get_timer_type_display }})
{% endif %}
</td>
<td class="text-center">
{% comment %} Objective: Hostile (BG: Danger) {% endcomment %}
{% if timer.objective == "Hostile" %}
<div class="badge bg-danger">
{% comment %} Objective: Friendly (BG: Primare) {% endcomment %}
{% elif timer.objective == "Friendly" %}
<div class="badge bg-primary">
{% comment %} Objective: Neutral (BG: Secondary) {% endcomment %}
{% elif timer.objective == "Neutral" %}
<div class="badge bg-secondary">
{% endif %}
{{ timer.get_objective_display }}
</div>
</td>
<td class="text-center">
<a href="{{ timer.system|dotlan_solar_system_url }}">{{ timer.system }} {{ timer.planet_moon }}</a>
</td>
<td class="text-center">
<div class="badge bg-{{ timer.bg_modifier }}">
{{ timer.get_structure_display }}
</div>
</td>
<td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
<td class="text-center" nowrap>
<div id="localtime{{ timer.id }}"></div>
<div id="countdown{{ timer.id }}"></div>
</td>
<td class="text-center">{{ timer.eve_character.character_name }}</td>
{% if perms.auth.timer_management %} {% if perms.auth.timer_management %}
<td class="text-center"> <th class="text-center">{% translate "Action" %}</th>
<a href="{% url 'timerboard:delete' timer.id %}" class="btn btn-danger">
<i class="fa-solid fa-trash-can fa-fw"></i>
</a>
<a href="{% url 'timerboard:edit' timer.id %}" class="btn btn-info">
<i class="fa-solid fa-pen-to-square fa-fw"></i>
</a>
</td>
{% endif %} {% endif %}
</tr> </tr>
{% endfor %} </thead>
<tbody>
{% for timer in timers %}
<tr class="{% if timer.important == True %}bg-danger bg-opacity-25{% else %}bg-info bg-opacity-25{% endif %}">
<td style="width: 150px;" class="text-center">
{{ timer.details }}
{% if timer.timer_type != 'UNSPECIFIED' %}
<br />
({{ timer.get_timer_type_display }})
{% endif %}
</td>
<td class="text-center">
{% comment %} Objective: Hostile (BG: Danger) {% endcomment %}
{% if timer.objective == "Hostile" %}
<div class="badge bg-danger">
{% comment %} Objective: Friendly (BG: Primare) {% endcomment %}
{% elif timer.objective == "Friendly" %}
<div class="badge bg-primary">
{% comment %} Objective: Neutral (BG: Secondary) {% endcomment %}
{% elif timer.objective == "Neutral" %}
<div class="badge bg-secondary">
{% endif %}
{{ timer.get_objective_display }}
</div>
</td>
<td class="text-center">
<a href="{{ timer.system|dotlan_solar_system_url }}">{{ timer.system }} {{ timer.planet_moon }}</a>
</td>
<td class="text-center">
<div class="badge bg-{{ timer.bg_modifier }}">
{{ timer.get_structure_display }}
</div>
</td>
<td class="text-center" nowrap>{{ timer.eve_time | date:"Y-m-d H:i" }}</td>
<td class="text-center" nowrap>
<div id="localtime{{ timer.id }}"></div>
<div id="countdown{{ timer.id }}"></div>
</td>
<td class="text-center">{{ timer.eve_character.character_name }}</td>
{% if perms.auth.timer_management %}
<td class="text-center">
<a href="{% url 'timerboard:delete' timer.id %}" class="btn btn-danger">
<i class="fa-solid fa-trash-can fa-fw"></i>
</a>
<a href="{% url 'timerboard:edit' timer.id %}" class="btn btn-info">
<i class="fa-solid fa-pen-to-square fa-fw"></i>
</a>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>

View File

@ -25,7 +25,7 @@
{% endblock header_nav_collapse_right %} {% endblock header_nav_collapse_right %}
{% block content %} {% block content %}
<div> <div class="allianceauth-timerboard">
<div class="col-lg-12 text-center mb-3"> <div class="col-lg-12 text-center mb-3">
<div class="badge bg-primary text-start"> <div class="badge bg-primary text-start">
<span>{% translate "Current Eve Time:" %}</span> <span>{% translate "Current Eve Time:" %}</span>
@ -42,7 +42,7 @@
</div> </div>
<div class="card-body"> <div class="card-body">
{% include "timerboard/timertable.html" with timers=corp_timers %} {% include "timerboard/timertable.html" with id="corp-timers" timers=corp_timers %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
@ -56,7 +56,7 @@
<div class="card-body"> <div class="card-body">
{% if future_timers %} {% if future_timers %}
{% include "timerboard/timertable.html" with timers=future_timers %} {% include "timerboard/timertable.html" with id="future-timers" timers=future_timers %}
{% else %} {% else %}
<div class="alert alert-warning text-center"> <div class="alert alert-warning text-center">
{% translate "No upcoming timers." %} {% translate "No upcoming timers." %}
@ -74,7 +74,7 @@
<div class="card-body"> <div class="card-body">
{% if past_timers %} {% if past_timers %}
{% include "timerboard/timertable.html" with timers=past_timers %} {% include "timerboard/timertable.html" with id="past-timers" timers=past_timers %}
{% else %} {% else %}
<div class="alert alert-warning text-center"> <div class="alert alert-warning text-center">
{% translate "No past timers." %} {% translate "No past timers." %}
@ -85,9 +85,14 @@
</div> </div>
{% endblock content %} {% endblock content %}
{% block extra_css %}
{% include "bundles/datatables-css-bs5.html" %}
{% endblock extra_css %}
{% block extra_javascript %} {% block extra_javascript %}
{% include "bundles/moment-js.html" with locale=True %} {% include "bundles/moment-js.html" with locale=True %}
{% include "bundles/timers-js.html" %} {% include "bundles/timers-js.html" %}
{% include "bundles/datatables-js-bs5.html" %}
<script> <script>
const timers = [ const timers = [
@ -168,5 +173,19 @@
// Start timed updates // Start timed updates
setInterval(timedUpdate, 1000); setInterval(timedUpdate, 1000);
$(document).ready(() => {
const dtOptions = {};
{% if perms.auth.timer_management %}
dtOptions['columnDefs'] = [
{ "orderable": false, "targets": 7 }
];
{% endif %}
$('.allianceauth-timerboard table').each((index, table) => {
$(table).DataTable(dtOptions);
});
});
</script> </script>
{% endblock extra_javascript %} {% endblock extra_javascript %}