added edit sub modal
This commit is contained in:
parent
97a08f15b9
commit
e8122aa118
@ -3,7 +3,77 @@
|
||||
{% block title %} Main Page {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
|
||||
.draw-border-success:hover {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
.draw-border-success:hover::before, .draw-border-success:hover::after {
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.draw-border-primary:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
.draw-border-primary:hover::before, .draw-border-primary:hover::after {
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.draw-border-secondary:hover {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
.draw-border-secondary:hover::before, .draw-border-secondary:hover::after {
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.draw-border-danger:hover {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
.draw-border-danger:hover::before, .draw-border-danger:hover::after {
|
||||
border-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
|
||||
.draw-border {
|
||||
box-shadow: inset 0 0 0 1px var(--border-colour);
|
||||
color: var(--bs-body-color);
|
||||
transition: color 0.15s 0.0833333333s;
|
||||
position: relative;
|
||||
}
|
||||
.draw-border::before, .draw-border::after {
|
||||
border: 0 solid transparent;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.draw-border::before {
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.draw-border::after {
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.draw-border:hover::before, .draw-border:hover::after {
|
||||
transition: border-color 0s, width 0.15s, height 0.15s;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.draw-border:hover::before {
|
||||
transition-delay: 0s, 0s, 0.15s;
|
||||
}
|
||||
.draw-border:hover::after {
|
||||
transition-delay: 0s, 0.15s, 0s;
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@ -29,7 +99,9 @@
|
||||
<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">15</span>
|
||||
<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>
|
||||
@ -68,8 +140,12 @@
|
||||
<h3 class="mB-0">Subscriptions</h3>
|
||||
</div>
|
||||
<div class="peer fs-5 fw-bold">
|
||||
<span class="subs-count"></span>/<span class="subs-limit">25</span>
|
||||
<button class="btn bg-body bdrs-2 mR-3 cur-p draw-border draw-border-success" onclick="subEditModal(-1);">
|
||||
<i class="bi bi-plus"></i>
|
||||
New Subscription
|
||||
</button>
|
||||
</div>
|
||||
<!-- bd -->
|
||||
</div>
|
||||
|
||||
<div id="subscriptionContainer" class="row gap-20">
|
||||
@ -81,13 +157,60 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="subEditModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content bdrs-2 bd">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"></h5>
|
||||
</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">
|
||||
</div>
|
||||
<div class="mB-10">
|
||||
<label for="" class="form-label">URL</label>
|
||||
<input type="url" 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>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="" class="form-label">Image</label>
|
||||
<input type="file" 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>
|
||||
Upload Image
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-success">
|
||||
<i class="bi bi-check me-1`"></i>
|
||||
Submit
|
||||
</button>
|
||||
<button class="btn bg-body-tertiary bdrs-2 cur-p draw-border draw-border-secondary" onclick="$('#subEditModal').hide();">
|
||||
<i class="bi bi-x me-1`"></i>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}
|
||||
<script id="subItemTemplate" type="text/template">
|
||||
<div class="col-md-4 col-xxl-3">
|
||||
<div class="layers bd bg-body p-20 h-100">
|
||||
<div class="sub-item layers bd bg-body p-20 h-100" data-uuid="">
|
||||
<div class="layer w-100 mb-3">
|
||||
<h6 class="lh-1 sub-name mb-0"></h6>
|
||||
</div>
|
||||
@ -104,11 +227,20 @@
|
||||
</div>
|
||||
<div class="layer d-flex flex-wrap w-100 mt-auto">
|
||||
<div class="me-auto">
|
||||
<button class="btn btn-sm btn-primary mR-5 mT-10">Link to Channel</button>
|
||||
<button class="btn btn-sm bg-body-tertiary bdrs-2 mT-10 mR-5 cur-p draw-border draw-border-primary">
|
||||
<i class="bi bi-link-45deg me-1"></i>
|
||||
Channel Links
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-secondary mT-10">Edit</button>
|
||||
<button class="btn btn-sm btn-danger mL-5 mT-10">Delete</button>
|
||||
<button class="sub-edit btn btn-sm bg-body-tertiary bdrs-2 mT-10 cur-p draw-border draw-border-secondary">
|
||||
<i class="bi bi-pencil me-1`"></i>
|
||||
Edit
|
||||
</button>
|
||||
<button class="sub-delete btn btn-sm bg-body-tertiary bdrs-2 mT-10 cur-p draw-border draw-border-danger">
|
||||
<i class="bi bi-trash me-1`"></i>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,10 +249,13 @@
|
||||
<script type="text/javascript">
|
||||
function createSubscriptionItem(data) {
|
||||
var template = $($("#subItemTemplate").html());
|
||||
template.find(".sub-item").attr("data-uuid", data.uuid);
|
||||
template.find(".sub-name").text(data.name);
|
||||
template.find(".sub-uuid").text(data.uuid);
|
||||
template.find(".sub-rss").text(data.rss_url);
|
||||
template.find(".sub-img").attr("src", data.image)
|
||||
template.find(".sub-img").attr("src", data.image);
|
||||
template.find(".sub-edit").attr("onclick", `subEditModal("${data.uuid}");`);
|
||||
template.find(".sub-delete").attr("onclick", `unsubscribe("${data.uuid}");`);
|
||||
return template
|
||||
}
|
||||
|
||||
@ -142,5 +277,43 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function unsubscribe(uuid) {
|
||||
var subElem = $(`#subscriptionContainer .sub-item[data-uuid="${uuid}"]`);
|
||||
subElem.find("button").disable();
|
||||
|
||||
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 subEditModal(uuid) {
|
||||
|
||||
var modal = $("#subEditModal");
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
$("#subEditModal").show();
|
||||
// $("#subEditModal").show();
|
||||
}
|
||||
</script>
|
||||
{% endblock javascripts %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user