dynamic template implementation

This commit is contained in:
Corban-Lee Jones 2024-02-27 23:45:46 +00:00
parent e9609f3315
commit b5aab085bc

View File

@ -68,33 +68,9 @@
</div>
<div class="masonry-item col-12">
<div class="row gap-20">
<div id="subscriptionContainer" class="row gap-20">
<div class="col-md-3">
<div class="layers bd bg-body p-20">
<div class="layer w-100 mB-10">
<h5 class="lh-1">BBC News · Top Stories</h5>
</div>
<div class="layer w-100 mB-10">
<h6 class="lh-1">UUID</h6>
<span>ed078c82-1693-40f0-b7e9-aab1d7db2c0e
</span>
</div>
<div class="layer w-100 mB-5">
<h6 class="lh-1">RSS URL</h6>
<a href="http://feeds.bbci.co.uk/news/rss.xml">http://feeds.bbci.co.uk/news/rss.xml</a>
</div>
<div class="layer d-flex flex-wrap w-100">
<div class="me-auto">
<button class="btn btn-sm btn-primary mR-5 mT-10">Link to Channel</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>
</div>
</div>
</div>
</div>
<!-- Subscriptions Here! -->
</div>
</div>
@ -106,4 +82,40 @@
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}{% endblock javascripts %}
{% block javascripts %}
<script id="subItemTemplate" type="text/template">
<div class="col-md-3">
<div class="layers bd bg-body p-20">
<div class="layer w-100 mB-10">
<h5 class="lh-1 sub-name"></h5>
</div>
<div class="layer w-100 mB-10">
<h6 class="lh-1">UUID</h6>
<span class=sub-uuid></span>
</div>
<div class="layer w-100 mB-5">
<h6 class="lh-1">RSS URL</h6>
<a class="sub-rss"></a>
</div>
<div class="layer d-flex flex-wrap w-100">
<div class="me-auto">
<button class="btn btn-sm btn-primary mR-5 mT-10">Link to Channel</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>
</div>
</div>
</div>
</div>
</script>
<script type="text/javascript">
function createSubscriptionItem(data) {
var template = $($("#subItemTemplate").html());
template.find(".sub-name").text(data.name);
template.find(".sub-uuid").text(data.uuid);
template.find(".sub-rss").text(data.rss_url);
return template
}
</script>
{% endblock javascripts %}