Create, Edit & Delete Subscription functionality

This commit is contained in:
Corban-Lee Jones 2024-03-07 23:04:41 +00:00
parent fbb759cf4b
commit db5464db19

View File

@ -1,4 +1,5 @@
{% extends "layouts/base.html" %}
{% load static %}
{% block title %} Main Page {% endblock title %}
@ -165,25 +166,26 @@
</div>
<div class="modal-body">
<div class="mB-10">
<label for="" class="form-label">Name</label>
<input type="text" class="form-control bdrs-2 bd">
<label for="editSubName" class="form-label">Name</label>
<input type="text" name="editSubName" id="editSubName" class="form-control bdrs-2 bd">
</div>
<div class="mB-10">
<label for="" class="form-label">URL</label>
<input type="url" class="form-control bdrs-2 bd">
<label for="editSubURL" class="form-label">URL</label>
<input type="url" name="editSubURL" id="editSubURL" class="form-control bdrs-2 bd">
</div>
<div class="mB-15">
<label for="" class="form-label">Server</label>
<select class="form-select bdrs-2 bd">
<option value="server-id-here">CodeHub</option>
<option value="server-id-here">Orange</option>
<option value="server-id-here">PYRSS Home</option>
<option value="server-id-here">Ryujinx</option>
<label for="editSubServer" class="form-label">Server</label>
<select name="editSubServer" id="editSubServer" class="form-select bdrs-2 bd">
<option value="">Select a server</option>
<option value="1039201459188805692">CodeHub</option>
<option value="753323563381031042">Orange</option>
<option value="1204426362794811453">PYRSS Home</option>
<option value="410208534861447168">Ryujinx</option>
</select>
</div>
<div>
<label for="" class="form-label">Image</label>
<input type="file" class="form-control bdrs-2 bd">
<label for="editSubImage" class="form-label">Image</label>
<input type="file" name="editSubImage" id="editSubImage" class="form-control bdrs-2 bd">
</div>
<!-- <button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-secondary">
<i class="bi bi-upload me-1"></i>
@ -191,7 +193,7 @@
</button> -->
</div>
<div class="modal-footer">
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-success">
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-success" onclick="submitSubEditModal();">
<i class="bi bi-check me-1`"></i>
Submit
</button>
@ -246,6 +248,7 @@
</div>
</div>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script type="text/javascript">
function createSubscriptionItem(data) {
var template = $($("#subItemTemplate").html());
@ -260,60 +263,93 @@
}
$(document).ready(function() {
$.ajax({
url: "/api/subscription",
type: "GET",
success: function(resp) {
$(".subs-count").text(resp.results.length);
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);
}
},
error: function(resp) {
alert(JSON.stringify(resp));
}
});
loadSubscriptions();
});
function unsubscribe(uuid) {
var subElem = $(`#subscriptionContainer .sub-item[data-uuid="${uuid}"]`);
subElem.find("button").disable();
function updateSubscriptionCount(difference, overwrite) {
const beforeChange = overwrite ? 0 : Number($(".subs-count").text());
$(".subs-count").text(beforeChange + difference);
}
alert("wait");
$.ajax({
url: `/api/subscription/${uuid}`,
type: "DELETE",
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function(resp) {
subElem.parent().remove();
},
error: function(resp) {
alert(JSON.stringify(resp, null, 4));
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 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);
});
}
function subEditModal(uuid) {
var modal = $("#subEditModal");
modal.find("input").val(null);
modal.find("select").prop("selectedValue", 0);
if (uuid === -1) {
modal.find(".modal-title").text("New Subscription");
modal.find("input").val(null);
modal.find("select").val(-1);
}
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");
});
}
$("#subEditModal").attr("data-uuid", uuid);
$("#subEditModal").show();
// $("#subEditModal").show();
}
function submitSubEditModal() {
const uuid = $("#subEditModal").attr("data-uuid");
var imageFile = $("#editSubImage")[0].files[0];
var formData = new FormData();
formData.append("uuid", uuid);
formData.append("name", $("#editSubName").val());
formData.append("rss_url", $("#editSubURL").val());
formData.append("server", $("#editSubServer").val());
if (imageFile) {
formData.append("image", imageFile);
}
if (uuid === "-1") {
newSubscription(formData).then(resp => {
loadSubscriptions();
$("#subEditModal").hide();
})
}
else {
editSubscription(uuid, formData).then(resp => {
loadSubscriptions();
$("#subEditModal").hide();
});
}
}
</script>
{% endblock javascripts %}