ENH: trigger htmx table loading only once page was loaded already (#84)

.vscode/settings.json

@@ -13,6 +13,7 @@
     "cSpell.ignoreWords": [
         "capsys",
         "gvfs",
-        "raspbian"
+        "raspbian",
+        "referer"
     ],
 }

wizer/sport_views.py

@@ -15,7 +15,6 @@
     get_summary_of_all_activities,
     get_all_form_field_ids,
     get_flat_list_of_pks_of_activities_in_top_awards,
-    fetch_row_data_for_page,
 )
 from wizer import models
 from wizer.forms import AddSportsForm
@@ -87,16 +86,14 @@ def get(self, request, sports_name_slug):
             log.critical("this sport does not exist")
             raise Http404
         page = 0
-        activities_for_table, is_last_page = fetch_row_data_for_page(page_nr=page, sport_slug=sports_name_slug)
         return render(
             request,
             self.template_name,
             {
                 **map_context,
                 **context,
-                "activities": activities_for_table,
                 "current_page": page,
-                "is_last_page": is_last_page,
+                "is_last_page": False,
                 "sports": sports,
                 "summary": summary,
                 "sport": sport,

wizer/templates/lib/row_bulk.html

@@ -5,7 +5,7 @@
         <tr hx-get="/activities_page/{{ current_page }}"
             hx-trigger="revealed"
             hx-swap="afterend"
-            id="htmx-last-row">
+            id="htmx-trigger-row">
     {% else %}
         <tr id="activities-table-row">
     {% endif %}
@@ -51,7 +51,7 @@
         </td>
     </tr>
 {% endfor %}
-{% if is_last_page and current_page != 0 %}
+{% if is_last_page and current_page > 1 %}
     <tr>
         <td></td>
         <td id="end-of-activities">

wizer/templates/lib/table.html

@@ -13,7 +13,11 @@
     </tr>
     </thead>
     <tbody>
-        {% include 'lib/row_bulk.html' %}
+        <tr hx-get="/activities_page/{{ current_page }}"
+            hx-trigger="revealed"
+            hx-swap="afterend"
+            id="htmx-trigger-row">
+        </tr>
     </tbody>
 </table>
 <center>

wizer/tests/integration_tests/browser_tests/conftest.py

@@ -8,11 +8,12 @@
 from workoutizer import settings as django_settings
 
 
-@pytest.fixture(scope="session")
+@pytest.fixture
 def webdriver():
     options = Options()
     options.headless = True
     driver = Firefox(options=options)
+    driver.set_window_size(1280, 1024)
     yield driver
     driver.quit()
 

wizer/tests/integration_tests/browser_tests/test_dashboard_page.py

@@ -115,8 +115,7 @@ def test_dashboard__infinite_scroll(live_server, webdriver, insert_activity):
 
     # number of rows equals the number of rows per page, since only one page is loaded
     table_rows = [cell.text for cell in webdriver.find_elements_by_id("activities-table-row")]
-    htmx_last_row = webdriver.find_elements_by_id("htmx-last-row")
-    assert len(table_rows) + len(htmx_last_row) == rows_per_page
+    assert len(table_rows) + 1 == rows_per_page
 
     webdriver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
     # wait until loading image is present
@@ -126,5 +125,4 @@ def test_dashboard__infinite_scroll(live_server, webdriver, insert_activity):
 
     # again check number of table rows
     table_rows = [cell.text for cell in webdriver.find_elements_by_id("activities-table-row")]
-    htmx_last_row = webdriver.find_elements_by_id("htmx-last-row")
-    assert len(table_rows) + len(htmx_last_row) == nr_of_inserted_activities
+    assert len(table_rows) + 1 == nr_of_inserted_activities

wizer/tests/integration_tests/browser_tests/test_sport_page.py

@@ -69,7 +69,6 @@ def test_sport_page__complete(import_demo_data, live_server, webdriver):
 
     # the sport name should be unknown
     assert "Cycling" in webdriver.find_element_by_tag_name("h3").text
-
     assert "Summary" in webdriver.find_element_by_tag_name("h5").text
 
     links = [a.text for a in webdriver.find_elements_by_tag_name("a")]
@@ -80,10 +79,15 @@ def test_sport_page__complete(import_demo_data, live_server, webdriver):
     paragraph = [p.text for p in webdriver.find_elements_by_tag_name("p")]
     assert "Overview of your Cycling activities:" in paragraph
 
+    # wait until loading image is present
+    WebDriverWait(webdriver, 3).until(EC.presence_of_element_located((By.ID, "loading-bar")))
+    # wait until activity row is present
+    WebDriverWait(webdriver, 3).until(EC.presence_of_element_located((By.ID, "activities-table-row")))
+
     table_data = [cell.text for cell in webdriver.find_elements_by_tag_name("td")]
     assert "Noon Cycling in Bad Schandau" in table_data
-    assert "Noon Cycling in Hinterzarten" in table_data
     assert "Noon Cycling in Dahn" in table_data
+    assert "Noon Cycling in Hinterzarten" in table_data
 
     centered = [cell.text for cell in webdriver.find_elements_by_tag_name("center")]
     assert "Sum of all Activities:" in centered
@@ -123,8 +127,7 @@ def test_sport_page__infinite_scroll(live_server, webdriver, insert_activity, in
 
     # number of rows equals the number of rows per page, since only one page is loaded
     table_rows = [cell.text for cell in webdriver.find_elements_by_id("activities-table-row")]
-    htmx_last_row = webdriver.find_elements_by_id("htmx-last-row")
-    assert len(table_rows) + len(htmx_last_row) == rows_per_page
+    assert len(table_rows) + 1 == rows_per_page
 
     webdriver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
     # wait until loading image is present
@@ -134,8 +137,7 @@ def test_sport_page__infinite_scroll(live_server, webdriver, insert_activity, in
 
     # again check number of table rows
     table_rows = [cell.text for cell in webdriver.find_elements_by_id("activities-table-row")]
-    htmx_last_row = webdriver.find_elements_by_id("htmx-last-row")
-    assert len(table_rows) + len(htmx_last_row) == nr_of_inserted_activities
+    assert len(table_rows) + 1 == nr_of_inserted_activities
 
 
 def test_sport_page__no_activities_selected_for_plot(live_server, webdriver, insert_activity, insert_sport):

wizer/views.py

@@ -117,19 +117,15 @@ def get(self, request):
         self.sports = models.Sport.objects.all().order_by("name")
         activities = self.get_activity_data_for_plots()
         summary = get_summary_of_all_activities()
-        top_awards = get_flat_list_of_pks_of_activities_in_top_awards(configuration.rank_limit)
-        activities_for_table, is_last_page = fetch_row_data_for_page(page_nr=page)
         context = {
             "sports": self.sports,
-            "activities": activities_for_table,
             "current_page": page,
-            "is_last_page": is_last_page,
+            "is_last_page": False,
             "days": self.number_of_days,
             "choices": self.days_choices,
             "summary": summary,
             "page": "dashboard",
             "form_field_ids": get_all_form_field_ids(),
-            "top_awards": top_awards,
         }
         if activities:
             script_history, div_history = plot_history(
@@ -294,15 +290,21 @@ def get_flat_list_of_pks_of_activities_in_top_awards(
 
 
 def get_bulk_of_rows_for_next_page(request, page: str):
-    page = int(page) + 1
+    page = int(page)
     template_name = "lib/row_bulk.html"
     current_url = request.META.get("HTTP_HX_CURRENT_URL")
     sport_slug = None
     if "sport" in current_url:
         sport_slug = current_url.split("/")[-1]
 
     activities, is_last_page = fetch_row_data_for_page(page_nr=page, sport_slug=sport_slug)
-    return render(request, template_name, {"activities": activities, "current_page": page, "is_last_page": is_last_page})
+    top_awards = get_flat_list_of_pks_of_activities_in_top_awards(configuration.rank_limit)
+
+    return render(
+        request,
+        template_name,
+        {"activities": activities, "current_page": page + 1, "is_last_page": is_last_page, "top_awards": top_awards},
+    )
 
 
 def fetch_row_data_for_page(page_nr: int, sport_slug=None):