Split javascript components into files for home
This commit is contained in:
parent
8e69c333ad
commit
30780e81b3
7
apps/static/js/home/index.js
Normal file
7
apps/static/js/home/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
$(document).ready(async function() {
|
||||
await loadServerOptions();
|
||||
await loadSavedGuilds();
|
||||
|
||||
initSubscriptionTable();
|
||||
// loadSubscriptions(); // TODO
|
||||
});
|
||||
@ -1,5 +1,4 @@
|
||||
var loadedServers = {};
|
||||
subTable = null;
|
||||
|
||||
// Returns the currently active server, or null if none are active.
|
||||
function getCurrentlyActiveServer() {
|
||||
@ -37,67 +36,6 @@ function removeFromLoadedServers(serverPrimaryKey) {
|
||||
$("#selectedServerContainer").hide();
|
||||
}
|
||||
|
||||
$(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() {
|
||||
await loadServerOptions();
|
||||
});
|
||||
50
apps/static/js/home/subscriptions.js
Normal file
50
apps/static/js/home/subscriptions.js
Normal file
@ -0,0 +1,50 @@
|
||||
var subTable = null;
|
||||
|
||||
// Select a row via checkbox
|
||||
$("#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.rows(".selected").select();
|
||||
subTable.rows(":not(.selected)").deselect();
|
||||
});
|
||||
|
||||
// Select all rows checkbox
|
||||
$('#subTable thead th:first-child input[type="checkbox"]').on("change", function() {
|
||||
var selected = $(this).prop("checked");
|
||||
$('#subTable tbody tr').each(function(rowIndex) {
|
||||
var row = subTable.row(rowIndex)
|
||||
|
||||
if (selected) row.select();
|
||||
else row.deselect();
|
||||
|
||||
$(this).find('th input[type="checkbox"]').prop("checked", selected);
|
||||
});
|
||||
});
|
||||
|
||||
// Alert the number of selected rows
|
||||
$("#tableButton").on("click", function() {
|
||||
var selectedRows = subTable.rows({ selected: true }).data(false).toArray();
|
||||
alert(selectedRows.length + " row(s) are selected");
|
||||
});
|
||||
|
||||
// Create subscription table
|
||||
function initSubscriptionTable() {
|
||||
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" },
|
||||
{
|
||||
targets: 0,
|
||||
checkboxes: { selectRow: true }
|
||||
}
|
||||
],
|
||||
});
|
||||
}
|
||||
@ -44,16 +44,16 @@
|
||||
<table id="subTable" class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="col-1 text-center no-sort">
|
||||
<th scope="col" class="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">
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">RSS URL</th>
|
||||
<th scope="col">Channels</th>
|
||||
<th scope="col">Created</th>
|
||||
<th scope="col" class="no-sort text-center">Notes</th>
|
||||
<th scope="col" class="no-sort text-center">Active</th>
|
||||
<th scope="col" class="no-sort text-center">
|
||||
<a href="#" class="text-body">
|
||||
<i class="bi bi-plus-lg"></i>
|
||||
</a>
|
||||
@ -75,96 +75,12 @@
|
||||
<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">
|
||||
@ -193,5 +109,8 @@
|
||||
</li>
|
||||
</script>
|
||||
<script src="{% static 'js/api.js' %}"></script>
|
||||
<script src="{% static 'js/home.js' %}"></script>
|
||||
{% comment %} <script src="{% static 'js/home.js' %}"></script> {% endcomment %}
|
||||
<script src="{% static 'js/home/index.js' %}"></script>
|
||||
<script src="{% static 'js/home/servers.js' %}"></script>
|
||||
<script src="{% static 'js/home/subscriptions.js' %}"></script>
|
||||
{% endblock javascript %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user