basic venues page

apps/home/static/home/js/venues.js

@@ -0,0 +1,35 @@
+$(document).ready(async () => {
+    await loadVenues();
+});
+
+const loadVenues = async () => {
+    const response = await $.ajax({
+        url: "/api/venues/",
+        method: "GET"
+    });
+
+    for (const venue of response?.results || []) {
+        addVenue(venue);
+    }
+}
+
+const addVenue = venue => {
+    let $template = $($("#venueItemTemplate").html());
+
+    $template.find(".venue-item").data("id", venue.id);
+    $template.find(".venue-name").text(venue.name);
+    $template.find(".venue-description").text(venue.description);
+
+    $template.off("click").on("click", async () => await selectVenue(venue.id));
+
+    $("#venueContainer").append($template);
+}
+
+const selectVenue = async id => {
+    const response = await $.ajax({
+        url: `/api/venues/${id}/`,
+        method: "GET"
+    })
+
+    alert(JSON.stringify(response, null, 4));
+}

apps/home/static/home/scss/venues.scss

@@ -1 +1,23 @@
-@import "scss/base.scss";
+@import "scss/base.scss";
+
+.venue-item {
+
+    color: var(--bs-body-color);
+    padding: 1rem;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.25rem;
+
+    .venue-name {
+
+        font-weight: bold;
+        margin-bottom: 1rem;
+
+    }
+
+    .venue-description {
+
+        color: var(--bs-secondary-color);
+
+    }
+
+}

apps/home/templates/home/venues.html

@@ -8,4 +8,22 @@
 {% compress css %}
     <link type="text/x-scss" rel="stylesheet" href="{% static 'home/scss/venues.scss' %}">
 {% endcompress %}
-{% endblock stylesheets %}
+{% endblock stylesheets %}
+
+{% block content %}
+<div class="container-lg">
+    <div id="venueContainer" class="row g-5 venue-items mt-5"></div>
+</div>
+{% endblock content %}
+
+{% block scripts %}
+<script id="venueItemTemplate" type="text/template">
+    <div class="col-4">
+        <div class="venue-item" role="button">
+            <div class="venue-name"></div>
+            <div class="venue-description"></div>
+        </div>
+    </div>
+</script>
+<script src="{% static 'home/js/venues.js' %}"></script>
+{% endblock scripts %}