inducer · inducer · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/course/flow.py b/course/flow.py
@@ -2080,11 +2080,6 @@ def view_flow_page(
         "viewing_prior_version": viewing_prior_version,
         "prev_answer_visits": prev_answer_visits,
         "prev_visit_id": prev_visit_id,
-
-        # Wrappers used by JavaScript template (tmpl) so as not to
-        # conflict with Django template's tag wrapper
-        "JQ_OPEN": "{%",
-        "JQ_CLOSE": "%}",
     }
 
     if fpctx.page.expects_answer() and fpctx.page.is_answer_gradable():
@@ -2103,7 +2098,8 @@ def view_flow_page(
 
 
 @course_view
-def get_prev_answer_visits_dropdown_content(pctx, flow_session_id, page_ordinal):
+def get_prev_answer_visits_dropdown_content(
+            pctx, flow_session_id, page_ordinal, prev_visit_id):
     """
     :return: serialized prev_answer_visits items for past-submission-dropdown
     """
@@ -2120,16 +2116,13 @@ def get_prev_answer_visits_dropdown_content(pctx, flow_session_id, page_ordinal)
         FlowPageData, flow_session=flow_session, page_ordinal=page_ordinal)
     prev_answer_visits = get_prev_answer_visits_qset(page_data)
 
-    def serialize(obj):
-        return {
-            "id": obj.id,
-            "visit_time": (
-                format_datetime_local(as_local_time(obj.visit_time))),
-            "is_submitted_answer": obj.is_submitted_answer,
-        }
-
-    return http.JsonResponse(
-        {"result": [serialize(visit) for visit in prev_answer_visits]})
+    return render(request, "course/flow-page-prev-visits.html", {
+        "prev_answer_visits": prev_answer_visits,
+        "prev_visit_id": (
+            None
+            if prev_visit_id == "None" else
+            int(prev_visit_id)),
+    })
 
 
 def get_pressed_button(form: StyledForm) -> str:

diff --git a/course/grading.py b/course/grading.py
@@ -33,7 +33,7 @@
     PermissionDenied,
     SuspiciousOperation,
 )
-from django.shortcuts import get_object_or_404, redirect  # noqa
+from django.shortcuts import get_object_or_404, redirect, render  # noqa
 from django.utils.translation import gettext as _
 
 from course.constants import participation_permission as pperm
@@ -53,8 +53,6 @@
 )
 from course.views import get_now_or_fake_time
 from relate.utils import (
-    as_local_time,
-    format_datetime_local,
     retry_transaction_decorator,
 )
 
@@ -92,7 +90,8 @@ def get_prev_visit_grades(
 
 
 @course_view
-def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal):
+def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal,
+                                     prev_grade_id):
     """
     :return: serialized prev_grades items for rendering past-grades-dropdown
     """
@@ -111,17 +110,13 @@ def get_prev_grades_dropdown_content(pctx, flow_session_id, page_ordinal):
     prev_grades = get_prev_visit_grades(pctx.course_identifier,
                                         flow_session_id, page_ordinal, True)
 
-    def serialize(obj):
-        return {
-            "id": obj.id,
-            "visit_time": (
-                format_datetime_local(as_local_time(obj.visit.visit_time))),
-            "grade_time": format_datetime_local(as_local_time(obj.grade_time)),
-            "value": obj.value(),
-        }
-
-    return http.JsonResponse(
-        {"result": [serialize(pgrade) for pgrade in prev_grades]})
+    return render(pctx.request, "course/prev-grades-dropdown.html", {
+                      "prev_grades": prev_grades,
+                      "prev_grade_id": (
+                          None
+                          if prev_grade_id == "None" else
+                          int(prev_grade_id)),
+                  })
 
 
 # {{{ grading driver
@@ -398,12 +393,6 @@ def grade_flow_page(
                 "correct_answer": fpctx.page.correct_answer(
                     fpctx.page_context, fpctx.page_data.data,
                     answer_data, grade_data),
-
-
-                # Wrappers used by JavaScript template (tmpl) so as not to
-                # conflict with Django template's tag wrapper
-                "JQ_OPEN": "{%",
-                "JQ_CLOSE": "%}",
             })
 
 

diff --git a/course/templates/course/course-base-with-markup.html b/course/templates/course/course-base-with-markup.html
@@ -4,13 +4,5 @@
 {% block bundle_loads %}
   {# contains mathjax config #}
   <script src="{% static 'bundle-base-with-markup.js' %}"></script>
-
-  <script type="text/javascript">
-    const rlUtils = rlBase.rlUtils;
-    const tmpl = rlBase.tmpl;
-    const bootstrap = rlBase.bootstrap;
-  </script>
-
   <script src="{% static "mathjax/es5/tex-svg.js" %}" id="MathJax-script" async></script>
-
 {% endblock %}
diff --git a/course/templates/course/course-datatables.html b/course/templates/course/course-datatables.html
@@ -3,7 +3,4 @@
 
 {% block bundle_loads %}
   <script src="{% static 'bundle-datatables.js' %}"></script>
-  <script type="text/javascript">
-    const rlUtils = rlDataTables.rlUtils;
-  </script>
 {% endblock %}
diff --git a/course/templates/course/flow-page-prev-visits.html b/course/templates/course/flow-page-prev-visits.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+
+{% if not prev_answer_visits %}
+  <li><h6 class="dropdown-header">{% trans 'No submission history' %}</h6> </li>
+{% else %}
+  {% for visit in prev_answer_visits %}
+    <li>
+      {% if forloop.first %}
+      <a class="dropdown-item" href="?">
+      {% else %}
+      <a class="dropdown-item" href="?visit_id={{ visit.id }}">
+      {% endif %}
+        {% if visit.id == prev_visit_id %}<b>{% endif %}
+        {{ visit.visit_time }}
+        {% if forloop.first %}(current){% endif %}
+        {% if visit.id == prev_visit_id %}</b>{% endif %}
+        {% if visit.is_submitted_answer %}(submitted){% endif %}
+      </a>
+    </li>
+  {% endfor %}
+{% endif %}
diff --git a/course/templates/course/flow-page.html b/course/templates/course/flow-page.html
@@ -130,11 +130,19 @@
           {% if expects_answer %}
             <div class="relate-flow-page-past-submissions">
               <div class="dropdown" id="past-submission_dropdown">
-                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="past-submission_dropdown_button" data-bs-toggle="dropdown"
+                <button
+                  class="btn btn-outline-secondary dropdown-toggle"
+                  type="button" id="past-submission_dropdown_button"
+                  hx-get="{% url "relate-get_prev_answer_visits_dropdown_content" course.identifier flow_session.id page_ordinal prev_visit_id %}"
+                  hx-target="#past-submission_dropdown_content"
+                  data-bs-toggle="dropdown"
                   title='{% trans "Submission history for this page" %}'>
                   <i class="bi bi-clock-history"></i>
                 </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="past-submission_dropdown_button" id="past-submission_dropdown_content">
+                <ul
+                  class="dropdown-menu dropdown-menu-end shadow"
+                  aria-labelledby="past-submission_dropdown_button"
+                  id="past-submission_dropdown_content">
                   <li style="list-style:none; position:relative; left:50%;">
                     <i class="bi bi-hourglass"></i>
                   </li>
@@ -545,51 +553,4 @@
 
 {% endblock %}
 
-{% block page_bottom_javascript_extra %}
-
-  {% if expects_answer %}
-    <script>
-      function generate_past_submission_dropdown_content(){
-        var jqxhr = $.ajax({
-          url: "{% url "relate-get_prev_answer_visits_dropdown_content" course.identifier flow_session.id page_ordinal %}"
-        }).done(function (result) {
-          if(result.result)
-            document.getElementById("past-submission_dropdown_content").innerHTML = tmpl("tmpl-prev-answer-visits", result.result);
-        });
-      }
-
-      $('#past-submission_dropdown').on('shown.bs.dropdown', generate_past_submission_dropdown_content);
-
-
-    </script>
-
-    {# https://github.com/blueimp/JavaScript-Templates #}
-    <script type="text/x-tmpl" id="tmpl-prev-answer-visits">
-      {{ JQ_OPEN }} if (o.length==0) { {{ JQ_CLOSE }}
-        <li><h6 class="dropdown-header">{% trans 'No submission history' %}</h6> </li>
-      {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-        {{ JQ_OPEN }} for (var i=0; i<o.length; i++) { {{ JQ_CLOSE }}
-          <li>
-            {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?">
-            {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?visit_id={{ JQ_OPEN }}=o[i].id{{ JQ_CLOSE }}">
-            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_visit_id }}) { {{ JQ_CLOSE }}<b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-                {{ JQ_OPEN }}=o[i].visit_time{{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_visit_id }}) { {{ JQ_CLOSE }}</b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              {% trans "(current)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].is_submitted_answer) { {{ JQ_CLOSE }}
-                {% trans "(submitted)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-            </a>
-          </li>
-        {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-      {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-    </script>
-  {% endif %}
-  {{ block.super }}
-{% endblock %}
 {# vim: set foldmethod=marker: #}
diff --git a/course/templates/course/grade-flow-page.html b/course/templates/course/grade-flow-page.html
@@ -111,12 +111,18 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
             {% if expects_answer %}
               <div class="dropdown" id="past-submission-and-grades_dropdown">
-                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="past-submission-and-grades_dropdown_button"
-                        data-bs-toggle="dropdown">
+                <button
+                    class="btn btn-sm btn-outline-secondary dropdown-toggle"
+                    type="button" id="past-submission-and-grades_dropdown_button"
+                    hx-get='{% url "relate-get_prev_grades_dropdown_content" course.identifier flow_session.id page_ordinal prev_grade_id %}'
+                    hx-target="#past-submission-and-grades_dropdown_content"
+                    data-bs-toggle="dropdown">
                   {% trans "Past submissions/grades" %}
                   <span class="caret"></span>
                 </button>
-                <ul class="dropdown-menu dropdown-menu shadow" aria-labelledby="past-submission-and-grades_dropdown_button" id="past-submission-and-grades_dropdown_content">
+                <ul class="dropdown-menu dropdown-menu shadow"
+                    aria-labelledby="past-submission-and-grades_dropdown_button"
+                    id="past-submission-and-grades_dropdown_content">
                   <li style="list-style:none; position:relative; left:50%;">
                     <i class="bi bi-hourglass"></i>
                   </li>
@@ -219,23 +225,13 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
   {# {{{ grade ui #}
 
-  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-    <div id="grade-ui-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-      <div class="toast-header">
-        <strong class="me-auto text-danger">{% trans "Error" %}</strong>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-      </div>
-      <div id="grade-ui-toast-body" class="toast-body">
-      </div>
-    </div>
-  </div>
-
   <script>
 
     function getFeedbackCodemirror() {
-      return rlCodemirror.EditorView.findFromDOM(
-         document.querySelector('#div_id_feedback_text .cm-editor')
-      );
+      let editorDom = document.querySelector('#div_id_feedback_text .cm-editor');
+      if (!editorDom)
+        return null;
+      return rlCodemirror.EditorView.findFromDOM(editorDom);
     }
 
     function setFeedback(p) {
@@ -385,10 +381,7 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
       }
       catch (err)
       {
-        var error_toast = document.getElementById('grade-ui-toast');
-        document.getElementById("grade-ui-toast-body").innerHTML = err;
-        var toast = new bootstrap.Toast(error_toast);
-        toast.show();
+        bsUtils.showToast(err);
       }
     }
 
@@ -410,13 +403,17 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
       updateFeedbackItems();
 
-      rlCodemirror.setListener(
-        getFeedbackCodemirror(),
-        (viewUpdate) => {
-          if (viewUpdate.docChanged) {
-            processFeedbackChange(viewUpdate.view.state.doc.toString())
-          }
-        })
+      let fbcm = getFeedbackCodemirror();
+      if (fbcm)
+      {
+        rlCodemirror.setListener(
+          getFeedbackCodemirror(),
+          (viewUpdate) => {
+            if (viewUpdate.docChanged) {
+              processFeedbackChange(viewUpdate.view.state.doc.toString())
+            }
+          })
+      }
 
       document.addEventListener("keydown", listenForFocusHotkey);
     }
@@ -481,55 +478,4 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 
 {% endblock %}
 
-{% block page_bottom_javascript_extra %}
-
-  {% if expects_answer %}
-    <script>
-
-      function generate_past_submission_and_grades_dropdown_content(){
-        var jqxhr = $.ajax({
-          url: "{% url "relate-get_prev_grades_dropdown_content" course.identifier flow_session.id page_ordinal %}"
-        }).done(function (result) {
-          if(result.result)
-          document.getElementById("past-submission-and-grades_dropdown_content").innerHTML = tmpl("tmpl-prev-grades", result.result);
-        });
-      }
-
-      $('#past-submission-and-grades_dropdown').on('shown.bs.dropdown', generate_past_submission_and_grades_dropdown_content);
-
-    </script>
-
-    {# https://github.com/blueimp/JavaScript-Templates #}
-    <script type="text/x-tmpl" id="tmpl-prev-grades">
-      {{ JQ_OPEN }} if (o.length==0) { {{ JQ_CLOSE }}
-        <li><h6 class="dropdown-header">{% trans 'No submission/grade history' %}</h6><li>
-      {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-        {{ JQ_OPEN }} for (var i=0; i<o.length; i++) { {{ JQ_CLOSE }}
-          <li>
-            {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?">
-            {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-              <a class="dropdown-item" href="?grade_id={{ JQ_OPEN }}=o[i].id{{ JQ_CLOSE }}">
-            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_grade_id }}) { {{ JQ_CLOSE }}<b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {% trans "Submission:" %} {{ JQ_OPEN }}=o[i].visit_time{{ JQ_CLOSE }} &middot; {% trans "Grade:" %} {{ JQ_OPEN }}=o[i].grade_time{{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (o[i].id=={{ prev_grade_id }}) { {{ JQ_CLOSE }}</b>{{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (i==0) { {{ JQ_CLOSE }}
-              {% trans "(current)" %}
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-              {{ JQ_OPEN }} if (!o[i].value) { {{ JQ_CLOSE }}
-                [{% trans "no grade" %}]
-              {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
-                [{{ JQ_OPEN }}=o[i].value{{ JQ_CLOSE }}
-                {{ JQ_OPEN }} if (o[i].value <=1) { {{ JQ_CLOSE }}{% trans "point" %}{{ JQ_OPEN }} } else { {{ JQ_CLOSE }}{% trans "points" %}{{ JQ_OPEN }} } {{ JQ_CLOSE }}]
-              {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-            </a>
-          </li>
-        {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-      {{ JQ_OPEN }} } {{ JQ_CLOSE }}
-    </script>
-  {% endif %}
-  {{ block.super }}
-{% endblock %}
-
 {# vim: set foldmethod=marker: #}