add navigation index for sub detail page

IonMich · Dec 1, 2023 · 777d43c · 777d43c
1 parent 2c9a982
commit 777d43c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/submissions/static/submissions/detail.js b/submissions/static/submissions/detail.js
@@ -406,6 +406,14 @@ const firstPk = JSON.parse(
 const lastPk = JSON.parse(
     document.getElementById("last-sub-pk").textContent
     );
+const collectionPks = JSON.parse(
+    document.getElementById("collection-pks").textContent
+    );
+const currentSub = collectionPks.indexOf(pk);
+console.log("currentSub", currentSub);
+// set span#sub-pagination-current
+const subPaginationCurrent = document.querySelector("#sub-pagination-current");
+subPaginationCurrent.textContent = currentSub + 1;
 console.log(scroll_height_factors, course_id, assignment_id);
 console.log(pk, firstPk, lastPk);
 if (pk === lastPk) {

diff --git a/submissions/templates/submissions/detail.html b/submissions/templates/submissions/detail.html
@@ -14,8 +14,9 @@
     {{ submission.assignment.pk|json_script:"assignment_id"}}
     {{ submission.assignment.course.pk|json_script:"course_id"}}
     {{ submission.pk|json_script:"sub-pk" }}
-    {{ submission.assignment.submissions_papersubmission_related.first.pk|json_script:"first-sub-pk" }}
-    {{ submission.assignment.submissions_papersubmission_related.last.pk|json_script:"last-sub-pk" }}
+    {{ collection_pks|json_script:"collection-pks" }}
+    {{ collection_pks|first|json_script:"first-sub-pk" }}
+    {{ collection_pks|last|json_script:"last-sub-pk" }}
     <script src="{% static 'submissions/detail.js' %}" defer></script>
 {% endblock scripts %}
 
@@ -131,6 +132,7 @@ <h5 class="text-muted">Attempt {{submission.attempt}}</h5>
             {% endfor %}
         </ul>
 
+
     </div>
 
     <div class="col-md-8">
@@ -144,18 +146,25 @@ <h4 id="page-{{forloop.counter}}"></h4>
             </div>
         </figure>
 
-        <div class="row justify-content-center mb-3">
-            <div class="col-sm-4 btn-group w-auto">
-                {% comment %} go to previous submission {% endcomment %}
+        <div class="d-flex justify-content-center my-3">
+            <div class="btn-group m-auto">
+                {% comment %} previous submission {% endcomment %}
                 <button class="btn btn-outline-primary" id="btnPrev">Previous</button>
-                {% comment %} go to next submission {% endcomment %}
-                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+                <button class="btn btn-outline-primary me-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                     <i class="bi bi-gear"></i>
-                </button>
+                </button>                
+                <button class="btn btn-outline-primary" id="sub-pagination-position">
+                    {% with charWidth=collection_pks|length|slugify|length %}
+                        {% comment %} get num digits of charWidth {% endcomment %}
+                    <span id="sub-pagination-current" style="width:{{charWidth}}ch;display:inline-block;"></span>
+                    <span id="sub-pagination-separator">/</span>
+                    <span id="sub-pagination-total" style="width:{{charWidth}}ch;display:inline-block;">{{collection_pks|length}}</span>
+                    {% endwith %}
+                {% comment %} next submission {% endcomment %}
                 <button class="btn btn-outline-primary" id="btnNext">Next</button>
-
             </div>
         </div>
+
     </div>
 
     <div class="col-md-3">

diff --git a/submissions/views.py b/submissions/views.py
@@ -129,6 +129,9 @@ def submission_detail_view(request, course_pk, assignment_pk, submission_pk):
         submission.get_question_grades(), 
         submission.assignment.get_max_question_scores())
     )
+    collection_pks = PaperSubmission.objects.filter(
+        assignment=submission.assignment).values_list('pk', flat=True)
+    collection_pks = list(collection_pks)
     print(submission.assignment)
     print("request.user: ", request.user)
     if request.method == 'POST':
@@ -201,7 +204,9 @@ def submission_detail_view(request, course_pk, assignment_pk, submission_pk):
                 'submissions/detail.html', 
                 {'submission': submission,
                 'grading_form': grading_form,
-                'grades_zipped': grades_zipped,})
+                'grades_zipped': grades_zipped,
+                'collection_pks': collection_pks,
+                })
         else:
             print("form is not valid")
     else:
@@ -212,7 +217,9 @@ def submission_detail_view(request, course_pk, assignment_pk, submission_pk):
         'submissions/detail.html', 
         {'submission': submission,
         'grading_form': grading_form, 
-        'grades_zipped': grades_zipped})
+        'grades_zipped': grades_zipped,
+        'collection_pks': collection_pks,
+        })
 
 @login_required
 def api_submission_patch_view(request, assignment_pk, submission_pk):