datatables implementation
This commit is contained in:
parent
0cbf4a7432
commit
8e69c333ad
@ -1,4 +1,5 @@
|
||||
var loadedServers = {};
|
||||
subTable = null;
|
||||
|
||||
// Returns the currently active server, or null if none are active.
|
||||
function getCurrentlyActiveServer() {
|
||||
@ -39,6 +40,62 @@ function removeFromLoadedServers(serverPrimaryKey) {
|
||||
$(document).ready(async function() {
|
||||
await loadServerOptions();
|
||||
await loadSavedGuilds();
|
||||
|
||||
subTable = $("#subTable").DataTable({
|
||||
info: false,
|
||||
paging: false,
|
||||
searching: false,
|
||||
autoWidth: false,
|
||||
select: {
|
||||
style: "multi+shift",
|
||||
selector: 'th:first-child input[type="checkbox"]'
|
||||
},
|
||||
order: [],
|
||||
columnDefs: [
|
||||
{ orderable: false, targets: "no-sort" },
|
||||
{
|
||||
// className: "select-checkbox",
|
||||
targets: 0,
|
||||
checkboxes: {
|
||||
selectRow: true
|
||||
},
|
||||
// render: function (data, type, row, meta) {
|
||||
// // var selected = $(row[0]).prop("checked") ? "checked" : ""
|
||||
// return '<input type="checkbox" class="form-check-input" >';
|
||||
// }
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
$("#subTable tbody").on("change", ".form-check-input", function() {
|
||||
$('#subTable tbody tr:not(.selected) th input[type="checkbox"]').prop("checked", false);
|
||||
$('#subTable tbody tr.selected th input[type="checkbox"]').prop("checked", true);
|
||||
});
|
||||
|
||||
$('#subTable thead th:first-child input[type="checkbox"]').on("change", function() {
|
||||
var selected = $(this).prop("checked");
|
||||
$('#subTable tbody tr').each(function() {
|
||||
if (selected) { $(this).addClass("selected") }
|
||||
else { $(this).removeClass("selected") }
|
||||
|
||||
$(this).find('th input[type="checkbox"]').prop("checked", selected);
|
||||
});
|
||||
});
|
||||
|
||||
$("#tableButton").on("click", function() {
|
||||
var selectedRows = subTable.rows({ selected: true }).data(false).toArray();
|
||||
alert(selectedRows);
|
||||
});
|
||||
// subTable.row.add([
|
||||
// "",
|
||||
// "test",
|
||||
// "url",
|
||||
// "3",
|
||||
// "2024",
|
||||
// "nothing",
|
||||
// "true",
|
||||
// ""
|
||||
// ]).draw(false);
|
||||
});
|
||||
|
||||
$("#serverOptionsRefreshBtn").on("click", async function() {
|
||||
@ -112,7 +169,7 @@ function addServerTemplate(serverPrimaryKey, serverGuildId, serverName, serverIc
|
||||
template.attr("data-id", serverPrimaryKey);
|
||||
|
||||
// Bind the button for selecting this server
|
||||
template.find("button").off("click").on("click", function() {
|
||||
template.find(".nav-link").off("click").on("click", function() {
|
||||
selectServer(serverPrimaryKey);
|
||||
});
|
||||
|
||||
@ -126,7 +183,7 @@ function removeServerTemplate(serverPrimaryKey) {
|
||||
|
||||
// Open 'Add Server' Form Modal
|
||||
$("#newServerBtn").on("click", function() {
|
||||
$("#serverForm .modal").modal("show");
|
||||
$("#serverFormModal").modal("show");
|
||||
});
|
||||
|
||||
// Submit 'Add Server' Form
|
||||
@ -153,7 +210,7 @@ $("#serverForm").on("submit", async function(event) {
|
||||
});
|
||||
}
|
||||
|
||||
$("#serverForm .modal").modal("hide");
|
||||
$("#serverFormModal").modal("hide");
|
||||
});
|
||||
|
||||
// Add a new 'saved guild' based on the info provided
|
||||
|
||||
@ -4,12 +4,14 @@
|
||||
|
||||
{% block title %}{% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{% static '/css/home/index.css' %}">
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container h-100">
|
||||
<div class="d-flex flex-nowrap h-100">
|
||||
<div class="d-flex flex-column flex-shrink-0 bg-body-secondary py-3" style="width: 4.5rem">
|
||||
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary py-3" style="width: 4.5rem">
|
||||
<ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||||
<li class="nav-item"><hr class="my-2"></li>
|
||||
<li class="nav-item">
|
||||
@ -21,7 +23,162 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="flex-grow-1 container-fluid bg-body">
|
||||
<div id="noSelectedServer">
|
||||
select a server
|
||||
</div>
|
||||
<div id="selectedServerContainer" class="row" style="display: none;">
|
||||
<div class="col-12 bg-body-secondary">
|
||||
<div class="px-3 py-4 d-flex justify-content-start align-items-center">
|
||||
<img src="..." alt="Selected Server Icon" class="rounded-3 selected-server-icon">
|
||||
<div class="ms-3">
|
||||
<h3 class="mb-0 selected-server-name"></h3>
|
||||
<h5 class="mb-0 selected-server-id"></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<button type="button" id="tableButton" class="btn btn-primary">see selected</button>
|
||||
<div class="table-responsive mt-3">
|
||||
<table id="subTable" class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="col-1 text-center no-sort">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<th scope="col" class="col-2">Name</th>
|
||||
<th scope="col" class="col-4">RSS URL</th>
|
||||
<th scope="col" class="col-1">Channels</th>
|
||||
<th scope="col" class="col-1">Created</th>
|
||||
<th scope="col" class="col-1 no-sort">Notes</th>
|
||||
<th scope="col" class="col-1 no-sort">Active</th>
|
||||
<th scope="col" class="col-1 text-center no-sort">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-plus-lg"></i>
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" class="text-center">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">BBC News - Top Stories</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="http://feeds.bbci.co.uk/news/rss.xml" class="text-decoration-none">http://feeds.bbci.co.uk/news.rss</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">3</a>
|
||||
</td>
|
||||
<td>2024-03-14</td>
|
||||
<td>
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-chat-left-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-center">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">BBC News - Top Stories</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="http://feeds.bbci.co.uk/news/rss.xml" class="text-decoration-none">http://feeds.bbci.co.uk/news.rss</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">3</a>
|
||||
</td>
|
||||
<td>2024-03-14</td>
|
||||
<td>
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-chat-left-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-center">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">BBC News - Top Stories</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="http://feeds.bbci.co.uk/news/rss.xml" class="text-decoration-none">http://feeds.bbci.co.uk/news.rss</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">3</a>
|
||||
</td>
|
||||
<td>2024-03-14</td>
|
||||
<td>
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-chat-left-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="text-center">
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</th>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">BBC News - Top Stories</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="http://feeds.bbci.co.uk/news/rss.xml" class="text-decoration-none">http://feeds.bbci.co.uk/news.rss</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="text-decoration-none">3</a>
|
||||
</td>
|
||||
<td>2024-03-14</td>
|
||||
<td>
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-chat-left-text"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input" />
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "home/includes/servermodal.html" %}
|
||||
@ -30,7 +187,7 @@
|
||||
{% block javascript %}
|
||||
<script id="serverItemTemplate" type="text/template">
|
||||
<li class="nav-item server-item" data-id="">
|
||||
<a href="#" class="nav-link px-3 py-2 rounded-0" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Option 1" aria-label="Option 1">
|
||||
<a href="#" class="nav-link px-3 py-2 rounded-0" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Option 1" aria-label="Option 1">
|
||||
<img src="" alt="Guild Icon" class="rounded-circle" style="max-width: 100%;">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user