Use API to display location operating status

Author: laymonage

bakerydemo/locations/models.py

@@ -192,6 +192,7 @@ def is_open(self):
                 day=current_day,
                 opening_time__lte=current_time,
                 closing_time__gte=current_time,
+                closed=False,
             )
             return True
         except LocationOperatingHours.DoesNotExist:

bakerydemo/static/js/location-status.js

@@ -0,0 +1,26 @@
+class LocationStatus extends HTMLElement {
+  connectedCallback() {
+    this.url = this.getAttribute('url');
+    this.updateStatus();
+  }
+
+  async updateStatus() {
+    const data = await this.fetchPage();
+    if (!data || typeof data.is_open !== 'boolean') {
+      this.textContent =
+        "Sorry, we couldn't retrieve the status of this location.";
+    } else if (data.is_open) {
+      this.textContent = 'This location is currently open.';
+    } else {
+      this.textContent = 'Sorry, this location is currently closed.';
+    }
+  }
+
+  fetchPage() {
+    return fetch(this.url)
+      .then((response) => response.json())
+      .catch(() => null);
+  }
+}
+
+window.customElements.define('location-status', LocationStatus);

bakerydemo/templates/base.html

@@ -54,6 +54,8 @@
 
         {% include "includes/footer.html" %}
 
-        <script type="module" src="{% static 'js/main.js' %}"></script>
+        {% block js %}
+            <script type="module" src="{% static 'js/main.js' %}"></script>
+        {% endblock %}
     </body>
 </html>

bakerydemo/templates/locations/location_page.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags navigation_tags %}
+{% load wagtailimages_tags navigation_tags static %}
 
 {% block content %}
     {% include "base/include/header-hero.html" %}
@@ -25,11 +25,14 @@
                     <div class="row">
                         <div class="bread-detail__meta">
                             <h2 class="location__meta-title">Operating Status</h2>
-                            {% if page.is_open %}
-                                This location is currently open.
-                            {% else %}
-                                Sorry, this location is currently closed.
-                            {% endif %}
+                            {% comment %}
+                                Fetch the status of the location on the client side
+                                as a Wagtail API usage example and to allow for
+                                caching of the whole page without the status.
+                            {% endcomment %}
+                            <location-status url="{% url 'wagtailapi:pages:detail' page.pk %}">
+                                Please wait...
+                            </location-status>
 
                             <h2 class="location__meta-title">Address</h2>
                             <address>{{ page.address|linebreaks }}</address>
@@ -67,3 +70,8 @@ <h2 class="location__meta-title">Opening hours</h2>
     </div>
 
 {% endblock content %}
+
+{% block js %}
+    {{ block.super }}
+    <script type="module" src="{% static 'js/location-status.js' %}"></script>
+{% endblock js %}