Create, Edit & Delete Subscription functionality
This commit is contained in:
parent
fbb759cf4b
commit
db5464db19
@ -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 %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user