Add ability to navaigate to specific tab in target view.

tom_observations/templates/tom_observations/partials/observation_list.html

@@ -1,9 +1,14 @@
 <table class="table table-striped">
-  <thead><tr><th>Facility</th><th>Created</th><th>Status</th><th>Scheduled</th><th>Saved  data</th><th>View</th></tr></thead>
+  <thead><tr><th>Facility</th><th>Observation ID</th><th>Created</th><th>Status</th><th>Scheduled</th><th>Saved  data</th><th>View</th></tr></thead>
   <tbody>
   {% for observation in observations %}
     <tr>
       <td>{{ observation.facility }}</td>
+      {% if observation.url %}
+        <td><a href="{{ observation.url }}">{{ observation.observation_id }}</a></td>
+      {% else %}
+        <td>{{ observation.observation_id }}</td>
+      {% endif %}
       <td>{{ observation.created }}</td>
       <td>{{ observation.status }}</td>
       <td>{{ observation.scheduled_start }}</td>

tom_observations/views.py

@@ -467,9 +467,9 @@ def form_valid(self, form):
             )
             observation_id = form.cleaned_data['observation_id']
             messages.success(self.request, f'Successfully associated observation record {observation_id}')
-        return redirect(reverse(
-            'tom_targets:detail', kwargs={'pk': form.cleaned_data['target_id']})
-        )
+        base_url = reverse('tom_targets:detail', kwargs={'pk': form.cleaned_data['target_id']})
+        query_params = urlencode({'tab': 'observations'})
+        return redirect(f'{base_url}?{query_params}')
 
 
 class ObservationRecordDetailView(DetailView):

tom_targets/templates/tom_targets/target_detail.html

@@ -7,20 +7,31 @@
 {% endblock %}
 {% block content %}
 <script>
-// This script maintains the selected tab upon reload
-$(document).ready(function(){
-  // This is required due to the apparent redefinition of $ in another library: https://api.jquery.com/jquery.noconflict/
-  // Based on trial and error, the offending script appears to be JS9, which is used in dataproduct_list_for_target
-  $.noConflict();
-  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
-    localStorage.setItem('activeTab', $(e.target).attr('href'));
-  });
+  // Function to update the URL.
+  const updateUrlWithTab = (tabId) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('tab', tabId);
+    history.replaceState({}, document.title, url.toString());
+  };
+
+  document.addEventListener("DOMContentLoaded", function() {
+    // Listen for tab changes.
+    document.querySelectorAll('#tabs .nav-link').forEach(tab => {
+      tab.addEventListener('click', function() {
+        updateUrlWithTab(this.id.replace('-tab', ''));
+      });
+    });
 
-  var activeTab = localStorage.getItem('activeTab');
-  if(activeTab){
-    $('#tabs a[href="' + activeTab + '"]').tab('show');
-  }
-});
+    // Initial tab selection from URL.
+    const tabQuery = new URL(window.location.href).searchParams.get('tab');
+    if (tabQuery) {
+      const activeTab = '#' + tabQuery;
+      const tabElement = document.querySelector(`a[href="${activeTab}"]`);
+      if (tabElement) {
+        tabElement.click();
+      }
+    }
+  });
 </script>
 <div class="row">
   <div class="col-md-4">
@@ -39,7 +50,7 @@
       {% if object.type == 'SIDEREAL' %}
       {% aladin object %}
       {% endif %}
-      
+
     </div>
   </div>
   <div class="col-md-8">

tom_targets/views.py

@@ -435,7 +435,7 @@ def get(self, request, *args, **kwargs):
                               'Did you know updating observation statuses can be automated? Learn how in'
                               '<a href=https://tom-toolkit.readthedocs.io/en/stable/customization/automation.html>'
                               ' the docs.</a>'))
-            return redirect(reverse('tom_targets:detail', args=(target_id,)))
+            return redirect(reverse('tom_targets:detail', args=(target_id,)) + '?tab=observations')
 
         obs_template_form = ApplyObservationTemplateForm(request.GET)
         if obs_template_form.is_valid():