mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2026-02-03 21:56:20 +01:00
Async Join/Leave, and Datatables
This commit is contained in:
Aaron Kable
@@ -30,7 +30,7 @@
|
||||
{% translate "Leave Requests" %}
|
||||
|
||||
{% if leaverequests %}
|
||||
<span class="badge text-bg-secondary">{{ leaverequests|length }}</span>
|
||||
<span class="badge bg-secondary">{{ leaverequests|length }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
@@ -48,14 +48,15 @@
|
||||
<div class="tab-content">
|
||||
<div id="add" class="tab-pane active">
|
||||
{% if acceptrequests %}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<div>
|
||||
<table id="table-add" class="table table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% translate "Character" %}</th>
|
||||
<th>{% translate "Organization" %}</th>
|
||||
<th>{% translate "Group" %}</th>
|
||||
<th></th>
|
||||
<th>{% translate "Corporation" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -89,13 +90,24 @@
|
||||
<td>{{ acceptrequest.group.name }}</td>
|
||||
|
||||
<td class="text-end">
|
||||
<a href="{% url 'groupmanagement:accept_request' acceptrequest.id %}" class="btn btn-success">
|
||||
<div class="spinner-border spinner-border-sm mt-2 btns-join-{{acceptrequest.id}} d-none" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<a id="{{acceptrequest.id}}" class="btn btn-success join-accept btns-join-{{acceptrequest.id}}">
|
||||
{% translate "Accept" %}
|
||||
</a>
|
||||
<a href="{% url 'groupmanagement:reject_request' acceptrequest.id %}" class="btn btn-danger">
|
||||
<a id="{{acceptrequest.id}}" class="btn btn-danger join-reject btns-join-{{acceptrequest.id}}">
|
||||
{% translate "Reject" %}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if acceptrequest.main_char %}
|
||||
{{ acceptrequest.main_char.corporation_name }}
|
||||
{% else %}
|
||||
{% translate "(unknown)" %}
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -111,14 +123,15 @@
|
||||
{% if not show_leave_tab %}
|
||||
<div id="leave" class="tab-pane">
|
||||
{% if leaverequests %}
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<div class="">
|
||||
<table id="table-rem" class="table table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% translate "Character" %}</th>
|
||||
<th>{% translate "Organization" %}</th>
|
||||
<th>{% translate "Group" %}</th>
|
||||
<th></th>
|
||||
<th>{% translate "Corporation" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -152,14 +165,23 @@
|
||||
<td>{{ leaverequest.group.name }}</td>
|
||||
|
||||
<td class="text-end">
|
||||
<a href="{% url 'groupmanagement:leave_accept_request' leaverequest.id %}" class="btn btn-success">
|
||||
<div class="spinner-border spinner-border-sm mt-2 btns-leave-{{leaverequest.id}} d-none" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
<a id="{{leaverequest.id}}" class="btn btn-success accept leave-accept btns-leave-{{leaverequest.id}}">
|
||||
{% translate "Accept" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'groupmanagement:leave_reject_request' leaverequest.id %}" class="btn btn-danger">
|
||||
<a id="{{leaverequest.id}}" class="btn btn-danger reject leave-reject btns-leave-{{leaverequest.id}}">
|
||||
{% translate "Reject" %}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if leaverequest.main_char %}
|
||||
{{ leaverequest.main_char.corporation_name }}
|
||||
{% else %}
|
||||
{% translate "(unknown)" %}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -172,3 +194,138 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
{% block extra_javascript %}
|
||||
{% include 'bundles/datatables-js-bs5.html' %}
|
||||
{% include "bundles/filterdropdown-js.html" %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
let tableAdd = $("#table-add").DataTable({
|
||||
filterDropDown: {
|
||||
columns: [
|
||||
{
|
||||
idx: 4,
|
||||
},
|
||||
{
|
||||
idx: 2,
|
||||
}
|
||||
],
|
||||
bootstrap: true,
|
||||
bootstrap_version: 5
|
||||
},
|
||||
columnDefs: [
|
||||
{
|
||||
target: 4,
|
||||
visible: false,
|
||||
},
|
||||
],
|
||||
paging: false,
|
||||
responsive: true,
|
||||
pageLength: -1
|
||||
});
|
||||
let tableRem = $("#table-rem").DataTable({
|
||||
filterDropDown: {
|
||||
columns: [
|
||||
{
|
||||
idx: 4,
|
||||
},
|
||||
{
|
||||
idx: 2,
|
||||
}
|
||||
],
|
||||
bootstrap: true,
|
||||
bootstrap_version: 5
|
||||
},
|
||||
columnDefs: [
|
||||
{
|
||||
target: 4,
|
||||
visible: false,
|
||||
},
|
||||
],
|
||||
paging: false,
|
||||
responsive: true,
|
||||
pageLength: -1
|
||||
});
|
||||
|
||||
// URL's for fetch requests
|
||||
let acceptJoinURL = "{% url 'groupmanagement:accept_request' 0 %}";
|
||||
acceptJoinURL = acceptJoinURL.substring(0, acceptJoinURL.length-2);
|
||||
let rejectJoinURL = "{% url 'groupmanagement:reject_request' 0 %}";
|
||||
rejectJoinURL = rejectJoinURL.substring(0, rejectJoinURL.length-2);
|
||||
let acceptLeaveURL = "{% url 'groupmanagement:leave_accept_request' 0 %}";
|
||||
acceptLeaveURL = acceptLeaveURL.substring(0, acceptLeaveURL.length-2);
|
||||
let rejectLeaveURL = "{% url 'groupmanagement:leave_reject_request' 0 %}";
|
||||
rejectLeaveURL = rejectLeaveURL.substring(0, rejectLeaveURL.length-2);
|
||||
|
||||
function removeRow(table, classLookup){
|
||||
let btn = $(classLookup);
|
||||
table.row($(btn[0]).parents('tr')).remove().draw();
|
||||
}
|
||||
|
||||
function toggleButtons(classLookup){
|
||||
let elems = document.querySelectorAll(classLookup);
|
||||
elems.forEach(
|
||||
function(e) {
|
||||
e.classList.toggle('d-none');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function hitAuth(classLookup, table, URL){
|
||||
toggleButtons(classLookup);
|
||||
fetch(URL)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
toggleButtons(classLookup);
|
||||
return
|
||||
}
|
||||
removeRow(table, classLookup)
|
||||
})
|
||||
.catch(error => {
|
||||
toggleButtons(classLookup);
|
||||
return;
|
||||
});
|
||||
toggleButtons(classLookup);
|
||||
}
|
||||
|
||||
let acceptJoinButtons = document.querySelectorAll(".join-accept");
|
||||
acceptJoinButtons.forEach(function(elem) {
|
||||
elem.addEventListener("click", function(event) {
|
||||
url = `${acceptJoinURL}${event.target.id}/`
|
||||
let elemClass = `.btns-join-${event.target.id}`
|
||||
hitAuth(elemClass, tableAdd, url)
|
||||
});
|
||||
});
|
||||
|
||||
let rejectJoinButtons = document.querySelectorAll(".join-reject");
|
||||
rejectJoinButtons.forEach(function(elem) {
|
||||
elem.addEventListener("click", function(event) {
|
||||
url = `${rejectJoinURL}${event.target.id}/`
|
||||
let elemClass = `.btns-join-${event.target.id}`
|
||||
hitAuth(elemClass, tableAdd, url)
|
||||
});
|
||||
});
|
||||
|
||||
let acceptLeaveButtons = document.querySelectorAll(".leave-accept");
|
||||
acceptLeaveButtons.forEach(function(elem) {
|
||||
elem.addEventListener("click", function(event) {
|
||||
url = `${acceptLeaveURL}${event.target.id}/`
|
||||
let elemClass = `.btns-leave-${event.target.id}`
|
||||
hitAuth(elemClass, tableRem, url)
|
||||
});
|
||||
});
|
||||
|
||||
let rejectLeaveButtons = document.querySelectorAll(".leave-reject");
|
||||
rejectLeaveButtons.forEach(function(elem) {
|
||||
elem.addEventListener("click", function(event) {
|
||||
url = `${rejectLeaveURL}${event.target.id}/`
|
||||
let elemClass = `.btns-leave-${event.target.id}`
|
||||
hitAuth(elemClass, tableRem, url)
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock extra_javascript %}
|
||||
{% block extra_css %}
|
||||
{% include 'bundles/datatables-css-bs5.html' %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user