Update observation status asynchronusly with HTMX

tom_common/static/tom_common/css/main.css

@@ -309,3 +309,13 @@ td, th {
         right: -8%;
     }
 }
+
+#messages.htmx-added {
+    opacity: 0;
+}
+
+#messages {
+    opacity: 1;
+    transition: opacity 0.5s ease-out;
+}
+

tom_common/templates/tom_common/base.html

@@ -60,7 +60,7 @@
     </nav>
 
     <main role="main" class="container">
-      {% bootstrap_messages %}
+      {% include 'tom_common/partials/messages.html' %}
       <div class="content">
         {% block content %}
         {% endblock %}

tom_common/templates/tom_common/partials/messages.html

@@ -0,0 +1,4 @@
+{% load bootstrap4 %}
+<div id="messages" hx-swap-oob="true">
+  {% bootstrap_messages %}
+</div>

tom_targets/templates/tom_targets/partials/observation_table.html

@@ -0,0 +1,4 @@
+{% load observation_extras %}
+<div class="progress"><div class="indeterminate"></div></div>
+{% observation_list object %}
+{% include 'tom_common/partials/messages.html' %}

tom_targets/templates/tom_targets/target_detail.html

@@ -91,8 +91,15 @@ <h4>Plan</h4>
       <div class="tab-pane" id="observations">
         {% existing_observation_form object %}
         <h4>Observations</h4>
-        <a href="{% url 'targets:detail' pk=target.id %}?update_status=True" title="Update status of observations for target" class="btn btn-primary">Update Observations Status</a>
-        {% observation_list object %}
+        <button hx-get="{% url 'targets:render-observation-table' pk=target.id %}"
+                hx-target="#observation-table"
+                hx-indicator=".progress"
+                hx-disabled-elt="this"
+                class="btn btn-secondary mb-3">Refresh Observation List
+        </button>
+        <div id="observation-table">
+        {% include 'tom_targets/partials/observation_table.html' %}
+        </div>
       </div>
       <div class="tab-pane" id="manage-data">
         {% if user.is_authenticated %}

tom_targets/urls.py

@@ -1,6 +1,6 @@
 from django.urls import path
 
-from .views import TargetCreateView, TargetUpdateView, TargetDetailView, TargetNameSearchView
+from .views import TargetCreateView, TargetUpdateView, TargetDetailView, TargetNameSearchView, render_observation_table
 from .views import TargetDeleteView, TargetListView, TargetImportView, TargetExportView, TargetShareView
 from .views import (TargetGroupingView, TargetGroupingDeleteView, TargetGroupingCreateView,
                     TargetAddRemoveGroupingView, TargetMergeView, TargetPersistentShareManageFormView,
@@ -36,6 +36,7 @@
     path('<int:pk>/share/', TargetShareView.as_view(), name='share'),
     path('<int:pk>/hermes-preload/', TargetHermesPreloadView.as_view(), name='hermes-preload'),
     path('<int:pk>/', TargetDetailView.as_view(), name='detail'),
+    path('<int:pk>/observation-list/', render_observation_table, name='render-observation-table'),
     path('targetgrouping/<int:pk>/delete/', TargetGroupingDeleteView.as_view(), name='delete-group'),
     path('targetgrouping/create/', TargetGroupingCreateView.as_view(), name='create-group'),
     path('targetgrouping/<int:pk>/share/', TargetGroupingShareView.as_view(), name='share-group'),

tom_targets/views.py

@@ -1,3 +1,4 @@
+from django.contrib.auth.decorators import login_required
 import logging
 
 from datetime import datetime, timedelta
@@ -525,6 +526,14 @@ def get(self, request, *args, **kwargs):
         return super().get(request, *args, **kwargs)
 
 
+@login_required
+def render_observation_table(request, pk):
+    out = StringIO()
+    call_command('updatestatus', target_id=pk, stdout=out)
+    messages.info(request, out.getvalue())
+    return render(request, 'tom_targets/partials/observation_table.html', context={'object': Target.objects.get(id=pk)})
+
+
 class TargetHermesPreloadView(SingleObjectMixin, View):
     model = Target
     # Set app_name for Django-Guardian Permissions in case of Custom Target Model