external javascript for subscriptions
This commit is contained in:
parent
621aee3f8d
commit
7f96f82aed
226
apps/static/js/subscriptions.js
Normal file
226
apps/static/js/subscriptions.js
Normal file
@ -0,0 +1,226 @@
|
||||
function createSubscriptionItem(data) {
|
||||
var template = $($("#subItemTemplate").html());
|
||||
|
||||
// Store the uuid for later reference
|
||||
template.find(".sub-item").attr("data-uuid", data.uuid);
|
||||
|
||||
// Display data
|
||||
template.find(".sub-name").text(data.name);
|
||||
template.find(".sub-uuid").text(data.uuid);
|
||||
template.find(".sub-rss").text(data.rss_url).attr("href", data.rss_url);
|
||||
template.find(".sub-img").attr("src", data.image);
|
||||
template.find(".sub-channel-count").text(data.targets.split(";").length);
|
||||
|
||||
// Display Sub Description
|
||||
if (!data.extra_notes) {
|
||||
template.find(".sub-desc").hide();
|
||||
} else {
|
||||
template.find(".sub-desc").text(data.extra_notes);
|
||||
}
|
||||
|
||||
// Display formatted datetime
|
||||
var displayDate = new Date(data.creation_datetime).toISOString().slice(0, 10);
|
||||
template.find(".sub-datetime").text(displayDate);
|
||||
|
||||
// Provide button functionality
|
||||
template.find(".sub-edit").attr("onclick", `subEditModal("${data.uuid}");`);
|
||||
template.find(".sub-delete").attr("onclick", `confirmUnsubscribe("${data.uuid}");`);
|
||||
|
||||
// Enable tooltips
|
||||
template.find('[data-bs-toggle="tooltip"]').tooltip();
|
||||
|
||||
// Make the switch toggle the active flag
|
||||
template.find(".sub-active").prop("checked", data.active).change(function() {
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("active", $(this).prop("checked"));
|
||||
|
||||
patchSubscription(data.uuid, formData).then(function(resp) {
|
||||
console.debug("active flag changed successfully");
|
||||
})
|
||||
});
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
loadGuilds();
|
||||
loadSubscriptions();
|
||||
|
||||
$("#editSubServer").change(function() {
|
||||
loadChannels($(this).find("option:selected").attr("value"));
|
||||
});
|
||||
});
|
||||
|
||||
function loadGuilds() {
|
||||
$.ajax({
|
||||
url: "/guilds",
|
||||
type: "GET",
|
||||
success: function(response) {
|
||||
for (i = 1; i < response.length; i++) {
|
||||
var guild = response[i];
|
||||
$("#editSubServer").append($("<option>", {
|
||||
value: guild.id,
|
||||
text: guild.name
|
||||
}));
|
||||
}
|
||||
},
|
||||
error: function(response) {
|
||||
alert(JSON.stringify(response, null, 4));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadChannels(guildID) {
|
||||
$("#editSubChannels").empty();
|
||||
$("#editSubChannels").val(null);
|
||||
$.ajax({
|
||||
url: `/channels?guild=${guildID}`,
|
||||
type: "GET",
|
||||
success: function(response) {
|
||||
for (i = 1; i < response.length; i++) {
|
||||
var channel = response[i];
|
||||
|
||||
if (channel.type !== 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
var selectedChannelIDs;
|
||||
|
||||
try {
|
||||
selectedChannelIDs = $("#editSubChannels").attr("data-current").split(";");
|
||||
}
|
||||
catch {
|
||||
selectedChannelIDs = [];
|
||||
}
|
||||
|
||||
$("#editSubChannels").append($("<option>", {
|
||||
value: channel.id,
|
||||
text: "#" + channel.name,
|
||||
selected: selectedChannelIDs.includes(channel.id.toString())
|
||||
}));
|
||||
}
|
||||
},
|
||||
error: function(response) {
|
||||
console.error(JSON.stringify(response, null, 4));
|
||||
|
||||
if (response.code == "50001") {
|
||||
alert("PYRSS Bot is Missing Access to this Server");
|
||||
}
|
||||
else {
|
||||
alert("unknown error fetching channels " + response.code)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateSubscriptionCount(difference, overwrite) {
|
||||
const beforeChange = overwrite ? 0 : Number($(".subs-count").text());
|
||||
$(".subs-count").text(beforeChange + difference);
|
||||
}
|
||||
|
||||
function loadSubscriptions() {
|
||||
$("#subscriptionContainer").empty();
|
||||
getSubscriptions().then(resp => {
|
||||
updateSubscriptionCount(resp.results.length, true);
|
||||
for (i = 0; i < resp.results.length; i++) {
|
||||
var sub = resp.results[i];
|
||||
console.log(JSON.stringify(sub));
|
||||
var subElem = createSubscriptionItem(sub);
|
||||
$("#subscriptionContainer").append(subElem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function confirmUnsubscribe(uuid) {
|
||||
var title = $(`.sub-item[data-uuid='${uuid}'] .sub-name`).text();
|
||||
$(".del-sub-name").text(title);
|
||||
$(".del-sub-uuid").text(uuid);
|
||||
$(".del-sub-confirm").attr("onclick", `unsubscribe("${uuid}")`)
|
||||
$("#subDeleteModal").modal("show");
|
||||
}
|
||||
|
||||
function unsubscribe(uuid) {
|
||||
var subElem = $(`#subscriptionContainer .sub-item[data-uuid="${uuid}"]`);
|
||||
subElem.find("button").prop("disabled", true);
|
||||
|
||||
deleteSubscription(uuid).then(resp => {
|
||||
subElem.parent().remove();
|
||||
updateSubscriptionCount(-1);
|
||||
$("#subDeleteModal").modal("hide");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function subEditModal(uuid) {
|
||||
|
||||
var modal = $("#subEditModal");
|
||||
|
||||
modal.find("input").val(null);
|
||||
modal.find("textarea").val(null);
|
||||
modal.find("select").val("");
|
||||
$("#editSubChannels").empty();
|
||||
$("#subEditForm").removeClass("was-validated");
|
||||
$("#navDetailsTab").click();
|
||||
|
||||
if (uuid === -1) {
|
||||
modal.find(".modal-title").text("New Subscription");
|
||||
}
|
||||
else {
|
||||
modal.find(".modal-title").text("Edit Subscription");
|
||||
|
||||
getSubscription(uuid).then(resp => {
|
||||
// alert(JSON.stringify(resp, null, 4));
|
||||
$("#editSubName").val(resp.name);
|
||||
$("#editSubURL").val(resp.rss_url);
|
||||
$("#editSubServer").val(String(resp.server)).trigger("change");
|
||||
$("#editSubChannels").attr("data-current", resp.targets);
|
||||
$("#editSubNotes").val(resp.extra_notes);
|
||||
});
|
||||
}
|
||||
|
||||
$("#subEditModal").attr("data-uuid", uuid);
|
||||
$("#subEditModal").modal("show");
|
||||
}
|
||||
|
||||
function submitSubEditModal() {
|
||||
// Validation
|
||||
var form = $("#subEditForm");
|
||||
if (!form[0].checkValidity()) {
|
||||
form.addClass("was-validated");
|
||||
return;
|
||||
}
|
||||
|
||||
const uuid = $("#subEditModal").attr("data-uuid");
|
||||
const subName = $("#editSubName").val();
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("uuid", uuid);
|
||||
formData.append("name", subName);
|
||||
formData.append("rss_url", $("#editSubURL").val());
|
||||
formData.append("server", $("#editSubServer").val());
|
||||
formData.append("extra_notes", $("#editSubNotes").val());
|
||||
|
||||
var selectedTargets = $("#editSubChannels option:selected").toArray().map(item => item.value).join(';');
|
||||
formData.append("targets", selectedTargets);
|
||||
|
||||
var imageFile = $("#editSubImage")[0].files[0];
|
||||
if (imageFile) {
|
||||
formData.append("image", imageFile);
|
||||
}
|
||||
|
||||
if (uuid === "-1") {
|
||||
newSubscription(formData).then(resp => {
|
||||
loadSubscriptions();
|
||||
$("#subEditModal").modal("hide");
|
||||
})
|
||||
showToast("success", "Subscription Created", `${subName} successfully created.`);
|
||||
}
|
||||
else {
|
||||
editSubscription(uuid, formData).then(resp => {
|
||||
loadSubscriptions();
|
||||
$("#subEditModal").modal("hide");
|
||||
showToast("success", "Subscription Modified", `${subName} successfully modified.`);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -14,60 +14,6 @@
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class="main-content bg-body-tertiary">
|
||||
<div id="mainContent">
|
||||
<!--
|
||||
<div class="row gap-20 masonry pos-r">
|
||||
<div class="masonry-sizer col-md-6"></div>
|
||||
|
||||
<div class="masonry-item col-12">
|
||||
<div class="row gap-20"> -->
|
||||
|
||||
<!-- Total Subscriptions -->
|
||||
<!-- <div class="col-md-3">
|
||||
<div class="layers bd bg-body p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Total Subscriptions</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">
|
||||
<span class="subs-count">--</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Subscription Activity (24hrs) -->
|
||||
<!-- <div class="col-md-3">
|
||||
<div class="layers bd bg-body p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Subscription Activity (24hrs)</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash2"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-deep-purple-50 c-deep-purple-500">47</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- </div>
|
||||
</div>
|
||||
|
||||
<div class="masonry-item col-12">
|
||||
<hr>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container-fluid mT-10 pX-0">
|
||||
<div class="lh-1 pX-5 pB-20 peers">
|
||||
<div class="peer peer-greed">
|
||||
@ -216,22 +162,6 @@
|
||||
<p class="sub-desc mb-2"></p>
|
||||
<a class="sub-rss"></a>
|
||||
</div>
|
||||
<!-- <div class="layer w-100 p-4 mt-auto">
|
||||
<div class="peers text-center fs-5">
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Channels">
|
||||
<i class="bi bi-hash me-1"></i>
|
||||
<span class="sub-channel-count"></span>
|
||||
</div>
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Tracked Items">
|
||||
<i class="bi bi-search me-1"></i>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div class="peer peer-greed" data-bs-toggle="tooltip" data-bs-title="Filters">
|
||||
<i class="bi bi-filter me-1"></i>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="layer w-100 bdT px-4 py-3 mt-auto">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
@ -263,232 +193,5 @@
|
||||
</div>
|
||||
</script>
|
||||
<script src="{% static 'js/api.js' %}"></script>
|
||||
<script type="text/javascript">
|
||||
function createSubscriptionItem(data) {
|
||||
var template = $($("#subItemTemplate").html());
|
||||
|
||||
// Store the uuid for later reference
|
||||
template.find(".sub-item").attr("data-uuid", data.uuid);
|
||||
|
||||
// Display data
|
||||
template.find(".sub-name").text(data.name);
|
||||
template.find(".sub-uuid").text(data.uuid);
|
||||
template.find(".sub-rss").text(data.rss_url).attr("href", data.rss_url);
|
||||
template.find(".sub-img").attr("src", data.image);
|
||||
template.find(".sub-channel-count").text(data.targets.split(";").length);
|
||||
|
||||
// Display Sub Description
|
||||
if (!data.extra_notes) {
|
||||
template.find(".sub-desc").hide();
|
||||
} else {
|
||||
template.find(".sub-desc").text(data.extra_notes);
|
||||
}
|
||||
|
||||
// Display formatted datetime
|
||||
var displayDate = new Date(data.creation_datetime).toISOString().slice(0, 10);
|
||||
template.find(".sub-datetime").text(displayDate);
|
||||
|
||||
// Provide button functionality
|
||||
template.find(".sub-edit").attr("onclick", `subEditModal("${data.uuid}");`);
|
||||
template.find(".sub-delete").attr("onclick", `confirmUnsubscribe("${data.uuid}");`);
|
||||
|
||||
// Enable tooltips
|
||||
template.find('[data-bs-toggle="tooltip"]').tooltip();
|
||||
|
||||
// Make the switch toggle the active flag
|
||||
template.find(".sub-active").prop("checked", data.active).change(function() {
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("active", $(this).prop("checked"));
|
||||
|
||||
patchSubscription(data.uuid, formData).then(function(resp) {
|
||||
console.debug("active flag changed successfully");
|
||||
})
|
||||
});
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
loadGuilds();
|
||||
loadSubscriptions();
|
||||
|
||||
$("#editSubServer").change(function() {
|
||||
loadChannels($(this).find("option:selected").attr("value"));
|
||||
});
|
||||
});
|
||||
|
||||
function loadGuilds() {
|
||||
$.ajax({
|
||||
url: "/guilds",
|
||||
type: "GET",
|
||||
success: function(response) {
|
||||
for (i = 1; i < response.length; i++) {
|
||||
var guild = response[i];
|
||||
$("#editSubServer").append($("<option>", {
|
||||
value: guild.id,
|
||||
text: guild.name
|
||||
}));
|
||||
}
|
||||
},
|
||||
error: function(response) {
|
||||
alert(JSON.stringify(response, null, 4));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadChannels(guildID) {
|
||||
$("#editSubChannels").empty();
|
||||
$("#editSubChannels").val(null);
|
||||
$.ajax({
|
||||
url: `/channels?guild=${guildID}`,
|
||||
type: "GET",
|
||||
success: function(response) {
|
||||
for (i = 1; i < response.length; i++) {
|
||||
var channel = response[i];
|
||||
|
||||
if (channel.type !== 0) {
|
||||
continue
|
||||
}
|
||||
|
||||
var selectedChannelIDs;
|
||||
|
||||
try {
|
||||
selectedChannelIDs = $("#editSubChannels").attr("data-current").split(";");
|
||||
}
|
||||
catch {
|
||||
selectedChannelIDs = [];
|
||||
}
|
||||
|
||||
$("#editSubChannels").append($("<option>", {
|
||||
value: channel.id,
|
||||
text: "#" + channel.name,
|
||||
selected: selectedChannelIDs.includes(channel.id.toString())
|
||||
}));
|
||||
}
|
||||
},
|
||||
error: function(response) {
|
||||
console.error(JSON.stringify(response, null, 4));
|
||||
|
||||
if (response.code == "50001") {
|
||||
alert("PYRSS Bot is Missing Access to this Server");
|
||||
}
|
||||
else {
|
||||
alert("unknown error fetching channels " + response.code)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateSubscriptionCount(difference, overwrite) {
|
||||
const beforeChange = overwrite ? 0 : Number($(".subs-count").text());
|
||||
$(".subs-count").text(beforeChange + difference);
|
||||
}
|
||||
|
||||
function loadSubscriptions() {
|
||||
$("#subscriptionContainer").empty();
|
||||
getSubscriptions().then(resp => {
|
||||
updateSubscriptionCount(resp.results.length, true);
|
||||
for (i = 0; i < resp.results.length; i++) {
|
||||
var sub = resp.results[i];
|
||||
console.log(JSON.stringify(sub));
|
||||
var subElem = createSubscriptionItem(sub);
|
||||
$("#subscriptionContainer").append(subElem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function confirmUnsubscribe(uuid) {
|
||||
var title = $(`.sub-item[data-uuid='${uuid}'] .sub-name`).text();
|
||||
$(".del-sub-name").text(title);
|
||||
$(".del-sub-uuid").text(uuid);
|
||||
$(".del-sub-confirm").attr("onclick", `unsubscribe("${uuid}")`)
|
||||
$("#subDeleteModal").modal("show");
|
||||
}
|
||||
|
||||
function unsubscribe(uuid) {
|
||||
var subElem = $(`#subscriptionContainer .sub-item[data-uuid="${uuid}"]`);
|
||||
subElem.find("button").prop("disabled", true);
|
||||
|
||||
deleteSubscription(uuid).then(resp => {
|
||||
subElem.parent().remove();
|
||||
updateSubscriptionCount(-1);
|
||||
$("#subDeleteModal").modal("hide");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function subEditModal(uuid) {
|
||||
|
||||
var modal = $("#subEditModal");
|
||||
|
||||
modal.find("input").val(null);
|
||||
modal.find("textarea").val(null);
|
||||
modal.find("select").val("");
|
||||
$("#editSubChannels").empty();
|
||||
$("#subEditForm").removeClass("was-validated");
|
||||
$("#navDetailsTab").click();
|
||||
|
||||
if (uuid === -1) {
|
||||
modal.find(".modal-title").text("New Subscription");
|
||||
}
|
||||
else {
|
||||
modal.find(".modal-title").text("Edit Subscription");
|
||||
|
||||
getSubscription(uuid).then(resp => {
|
||||
// alert(JSON.stringify(resp, null, 4));
|
||||
$("#editSubName").val(resp.name);
|
||||
$("#editSubURL").val(resp.rss_url);
|
||||
$("#editSubServer").val(String(resp.server)).trigger("change");
|
||||
$("#editSubChannels").attr("data-current", resp.targets);
|
||||
$("#editSubNotes").val(resp.extra_notes);
|
||||
});
|
||||
}
|
||||
|
||||
$("#subEditModal").attr("data-uuid", uuid);
|
||||
$("#subEditModal").modal("show");
|
||||
}
|
||||
|
||||
function submitSubEditModal() {
|
||||
// Validation
|
||||
var form = $("#subEditForm");
|
||||
if (!form[0].checkValidity()) {
|
||||
form.addClass("was-validated");
|
||||
return;
|
||||
}
|
||||
|
||||
const uuid = $("#subEditModal").attr("data-uuid");
|
||||
const subName = $("#editSubName").val();
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append("uuid", uuid);
|
||||
formData.append("name", subName);
|
||||
formData.append("rss_url", $("#editSubURL").val());
|
||||
formData.append("server", $("#editSubServer").val());
|
||||
formData.append("extra_notes", $("#editSubNotes").val());
|
||||
|
||||
var selectedTargets = $("#editSubChannels option:selected").toArray().map(item => item.value).join(';');
|
||||
formData.append("targets", selectedTargets);
|
||||
|
||||
var imageFile = $("#editSubImage")[0].files[0];
|
||||
if (imageFile) {
|
||||
formData.append("image", imageFile);
|
||||
}
|
||||
|
||||
if (uuid === "-1") {
|
||||
newSubscription(formData).then(resp => {
|
||||
loadSubscriptions();
|
||||
$("#subEditModal").modal("hide");
|
||||
})
|
||||
showToast("success", "Subscription Created", `${subName} successfully created.`);
|
||||
}
|
||||
else {
|
||||
editSubscription(uuid, formData).then(resp => {
|
||||
loadSubscriptions();
|
||||
$("#subEditModal").modal("hide");
|
||||
showToast("success", "Subscription Modified", `${subName} successfully modified.`);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="{% static 'js/subscriptions.js' %}"></script>
|
||||
{% endblock javascripts %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user