From 85f5b5b1b4c8e3961050c852bfb77ab5f81be6b6 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Wed, 6 Nov 2024 23:14:10 +0000
Subject: [PATCH] basic venues page

---
 apps/home/static/home/js/venues.js     | 35 ++++++++++++++++++++++++++
 apps/home/static/home/scss/venues.scss | 24 +++++++++++++++++-
 apps/home/templates/home/venues.html   | 20 ++++++++++++++-
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 apps/home/static/home/js/venues.js

diff --git a/apps/home/static/home/js/venues.js b/apps/home/static/home/js/venues.js
new file mode 100644
index 0000000..add164c
--- /dev/null
+++ b/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));
+}
diff --git a/apps/home/static/home/scss/venues.scss b/apps/home/static/home/scss/venues.scss
index 5dceb90..f245ae8 100644
--- a/apps/home/static/home/scss/venues.scss
+++ b/apps/home/static/home/scss/venues.scss
@@ -1 +1,23 @@
-@import "scss/base.scss";
\ No newline at end of file
+@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);
+
+    }
+
+}
\ No newline at end of file
diff --git a/apps/home/templates/home/venues.html b/apps/home/templates/home/venues.html
index dfba874..95631ec 100644
--- a/apps/home/templates/home/venues.html
+++ b/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 %}
\ No newline at end of file
+{% 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 %}
\ No newline at end of file