feat: qr code attendance with teacher pop-up

Author: TigerCodeHub

intranet/apps/eighth/migrations/0072_auto_20250429_1128.py

@@ -26,12 +26,12 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='eighthscheduledactivity',
             name='attendance_code',
-            field=models.CharField(default=intranet.apps.eighth.models.EighthScheduledActivity.random_code, max_length=6),
+            field=models.CharField(default=intranet.apps.eighth.models.random_code, max_length=6),
         ),
         migrations.AddField(
             model_name='historicaleighthscheduledactivity',
             name='attendance_code',
-            field=models.CharField(default=intranet.apps.eighth.models.EighthScheduledActivity.random_code, max_length=6),
+            field=models.CharField(default=intranet.apps.eighth.models.random_code, max_length=6),
         ),
         migrations.RunPython(generate_attendance_codes, reverse_code=migrations.RunPython.noop),
         migrations.AddField(

intranet/apps/eighth/models.py

@@ -1,7 +1,7 @@
 # pylint: disable=too-many-lines; Allow more than 1000 lines
 import datetime
 import logging
-import random
+import secrets
 import string
 from collections.abc import Sequence
 from typing import Collection, Iterable, List, Optional, Union
@@ -795,6 +795,10 @@ def for_sponsor(self, sponsor: EighthSponsor, include_cancelled: bool = False) -
         return sched_acts
 
 
+def random_code():
+    return "".join(secrets.choice(string.ascii_uppercase + string.digits) for _ in range(6))
+
+
 class EighthScheduledActivity(AbstractBaseEighthModel):
     r"""Represents the relationship between an activity and a block in which it has been scheduled.
     Attributes:
@@ -851,9 +855,6 @@ class EighthScheduledActivity(AbstractBaseEighthModel):
         blank=True,
     )
 
-    def random_code():
-        return "".join(random.choices(string.ascii_uppercase + string.digits, k=6))
-
     attendance_code = models.CharField(max_length=6, default=random_code)
     mode_choices = [
         (0, "Auto"),

intranet/apps/eighth/urls.py

@@ -21,6 +21,7 @@
     re_path(r"^/absences/(?P<user_id>\d+)$", attendance.eighth_absences_view, name="eighth_absences"),
     re_path(r"^/glance$", signup.eighth_location, name="eighth_location"),
     re_path(r"^/student_attendance$", attendance.student_attendance_view, name="student_attendance"),
+    re_path(r"^/qr/(?P<act_id>\w+)/(?P<code>\w+)$", attendance.qr_attendance_view, name="qr_attendance"),
     # Teachers
     re_path(r"^/attendance$", attendance.teacher_choose_scheduled_activity_view, name="eighth_attendance_choose_scheduled_activity"),
     re_path(r"^/attendance/(?P<scheduled_activity_id>\d+)$", attendance.take_attendance_view, name="eighth_take_attendance"),

intranet/apps/eighth/views/attendance.py

@@ -430,7 +430,7 @@ def take_attendance_view(request, scheduled_activity_id):
             "show_checkboxes": (scheduled_activity.block.locked or request.user.is_eighth_admin),
             "show_icons": (scheduled_activity.block.locked and scheduled_activity.block.attendance_locked() and not request.user.is_eighth_admin),
             "bbcu_script": settings.BBCU_SCRIPT,
-            "is_sponsor": scheduled_activity.user_is_sponsor(request.user),
+            "qrurl": request.build_absolute_uri(reverse("qr_attendance", args=[scheduled_activity.id, scheduled_activity.attendance_code])),
         }
 
         if request.user.is_eighth_admin:
@@ -774,31 +774,21 @@ def email_students_view(request, scheduled_activity_id):
 
 @login_required
 @deny_restricted
-def student_attendance_view(request):
+def student_attendance_view(request, attc=None, attf=None, attimef=None, atteachf=None):
     blocks = EighthBlock.objects.get_blocks_today()
-    attc = None
-    attf = None
-    attimef = None
-    atteachf = None
     if request.method == "POST":
         now = timezone.localtime()
-        dayblks = Day.objects.select_related("day_type").get(date=now).day_type.blocks.all()
+        dayblks = Day.objects.select_related("day_type").get(date=now).day_type.blocks
         for blk in blocks:
             blklet = blk.block_letter
             code = request.POST.get(blklet)
             if code is None:
                 continue
             act = request.user.eighthscheduledactivity_set.get(block=blk)
             if act.get_code_mode_display() == "Auto":
-                dayblk = None
-                for bk in dayblks:
-                    name = bk.name
-                    if name is None:
-                        continue
-                    if blklet in name and "8" in name:
-                        dayblk = bk
-                        break
-                if dayblk is None:
+                try:
+                    dayblk = dayblks.get(name="8" + blklet)
+                except Exception:
                     attimef = blk
                     break
                 start_time = shift_time(tm(hour=dayblk.start.hour, minute=dayblk.start.minute), -20)
@@ -811,34 +801,95 @@ def student_attendance_view(request):
                 break
             code = code.upper()
             if code == act.attendance_code:
-                present = EighthSignup.objects.filter(scheduled_activity=act, user__in=[request.user.id])
-                present.update(was_absent=False)
-                attc = blk
-                for s in present:
-                    invalidate_obj(s)
-                act.attendance_taken = True
-                act.save()
-                invalidate_obj(act)
+                try:
+                    present = EighthSignup.objects.get(scheduled_activity=act, user__in=[request.user.id])
+                    present.was_absent = False
+                    invalidate_obj(present)
+                    act.attendance_taken = True
+                    act.save()
+                    invalidate_obj(act)
+                    attc = blk
+                except Exception:
+                    attf = blk
                 break
             else:
                 attf = blk
                 break
+    return student_frontend(request, attc, attf, attimef, atteachf)
+
+
+@login_required
+@deny_restricted
+def student_frontend(request, attc=None, attf=None, attimef=None, atteachf=None):
+    blocks = EighthBlock.objects.get_blocks_today()
     if blocks:
         sch_acts = []
+        att_marked = []
         for b in blocks:
             try:
                 act = request.user.eighthscheduledactivity_set.get(block=b)
                 if act.activity.name != "z - Hybrid Sticky":
                     sch_acts.append([b, act, ", ".join([r.name for r in act.get_true_rooms()]), ", ".join([s.name for s in act.get_true_sponsors()])])
-
+                signup = EighthSignup.objects.get(user=request.user, scheduled_activity=act)
+                if not signup.was_absent:
+                    att_marked.append(b)
             except EighthScheduledActivity.DoesNotExist:
                 sch_acts.append([b, None])
         response = render(
             request,
             "eighth/student_submit_attendance.html",
-            context={"sch_acts": sch_acts, "attc": attc, "attf": attf, "attimef": attimef, "atteachf": atteachf},
+            context={"sch_acts": sch_acts, "att_marked": att_marked, "attc": attc, "attf": attf, "attimef": attimef, "atteachf": atteachf},
         )
     else:
         messages.error(request, "There are no eighth period blocks scheduled today.")
         response = redirect("index")
     return response
+
+
+@login_required
+@deny_restricted
+def qr_attendance_view(request, act_id, code):
+    act = get_object_or_404(EighthScheduledActivity, id=act_id)
+    error = False
+    block = act.block
+    attc = None
+    attf = None
+    attimef = None
+    atteachf = None
+    if act.get_code_mode_display() == "Auto":
+        now = timezone.localtime()
+        dayblks = Day.objects.select_related("day_type").get(date=now).day_type.blocks
+        try:
+            dayblk = dayblks.get(name="8" + block.block_letter)
+            start_time = shift_time(tm(hour=dayblk.start.hour, minute=dayblk.start.minute), -20)
+            end_time = shift_time(tm(hour=dayblk.end.hour, minute=dayblk.end.minute), 20)
+            if not start_time <= now.time() <= end_time:
+                attimef = block
+                error = True
+        except Exception:
+            attimef = block
+            error = True
+    elif act.get_code_mode_display() == "Closed":
+        atteachf = block
+        error = True
+    if not error:
+        code = code.upper()
+        if code == act.attendance_code:
+            try:
+                present = EighthSignup.objects.get(scheduled_activity=act, user__in=[request.user.id])
+                present.was_absent = False
+                invalidate_obj(present)
+                act.attendance_taken = True
+                act.save()
+                invalidate_obj(act)
+                attc = block
+                messages.success(request, "Attendance marked.")
+            except Exception:
+                attf = block
+                messages.error(request, "Failed to mark attendance.")
+        else:
+            attf = block
+            messages.error(request, "Failed to mark attendance.")
+    else:
+        messages.error(request, "Failed to mark attendance.")
+    return student_frontend(request, attc, attf, attimef, atteachf)

intranet/static/vendor/qrcode.min.js

@@ -37,6 +37,9 @@ <h5><strong>Sponsor(s):</strong> {{ s.3 }}</h5>
             <p><strong>Comments:</strong> {% if s.1.comments %}{{ s.1.comments }}{% else %}None{% endif %}</p>
             <br>
             <p>{{ s.1.activity.description }}</p>
+            {% if s.0 in att_marked%}
+            <p style="color: green;">Attendance marked.</p>
+            {% endif %}
             <form method="post" action="">
                 {% csrf_token %}
                 <p><strong>Attendance Code: </strong></p>

intranet/templates/eighth/student_submit_attendance.html

@@ -23,6 +23,7 @@
     <script src="{% static 'js/eighth/attendance.js' %}"></script>
     <script src="{% static 'js/eighth/ui_init.js' %}"></script>
     <script src="{% static 'js/eighth/user_link.js' %}"></script>
+    <script src="{% static 'vendor/qrcode.min.js' %}"></script>
     {% if wizard %}
     <script>
     $(function() {
@@ -439,29 +440,81 @@ <h3>Passes</h3>
                             {% endfor %}
                         </tbody>
                         <tfoot class="print-hide">
+                            {% if not no_edit_perm and not edit_perm_cancelled %}
                             <tr>
                                 <td colspan="5">
                                     <br>
                                     <b>Attendance code: </b><b style="font-family: 'Fira Code', 'Consolas', monospace; font-size: 24px;">{{ scheduled_activity.attendance_code }}</b>
-                                    <p>Share this code with students present at this activity.</p>
+                                    <p>Share this code with students present at this activity. Alternatively, share the QR code.</p>
+                                    <p>They should input this code into the attendance
+                                        form on Ion, accessible from the "Eighth" page.</p>
                                 </td>
                             </tr>
                             <tr>
-                            <td colspan="5">
-                            <b>Select Mode:</b>
-                            <form id="mode-form" method="post">
-                                {% csrf_token %}
-                                {% for value, label in scheduled_activity.mode_choices %}
-                                    <label>
-                                        <input type="radio" name="att_code_mode" value="{{ value }}"
-                                               {% if scheduled_activity.code_mode == value %}checked{% endif %}>
-                                        {{ label }}
-                                    </label>
-                                {% endfor %}
-                            </form>
-                            &nbsp;&nbsp;<button type="submit">Save</button>
-                            </td>
+                                <td colspan="5">
+                                <b>Select Mode:</b>
+                                <form id="mode-form" method="post">
+                                    {% csrf_token %}
+                                    {% for value, label in scheduled_activity.mode_choices %}
+                                        <label>
+                                            <input type="radio" name="att_code_mode" value="{{ value }}"
+                                                   {% if scheduled_activity.code_mode == value %}checked{% endif %}>
+                                            {{ label }}
+                                        </label>
+                                    {% endfor %}
+                                </form>
+                                &nbsp;&nbsp;<button type="submit">Save</button>
+
+                                <div class="activity-card">
+                                    <button type="button" onclick="showQRModal('{{ qrurl }}')">
+                                        Show QR Code
+                                    </button>
+                                </div>
+
+                                <div id="qrModal" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh;
+                                    background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:1000;">
+
+                                    <div style="background:#fff; padding:20px; border-radius:8px; text-align:center; position:relative;">
+                                        <div style="display: flex; flex-direction: row; align-items: center; gap: 40px;">
+
+                                        <div style="font-family: 'Fira Code', 'Consolas', monospace; font-size: 190px;">
+                                            {{ scheduled_activity.attendance_code }}
+                                        </div>
+
+                                        <div id="qrImageContainer" style="max-width:55000px; max-height:550px;"></div>
+                                        </div>
+
+                                        <br>
+                                        <button type="button" onclick="closeQRModal()">Close</button>
+                                    </div>
+                                </div>
+
+                                <script>
+                                    function showQRModal(qrUrl) {
+                                      event.preventDefault();
+
+                                      const modal = document.getElementById('qrModal');
+                                      const qrContainer = document.getElementById('qrImageContainer');
+
+                                      qrContainer.innerHTML = '';
+
+                                      new QRCode(qrContainer, {
+                                        text: qrUrl,
+                                        width: 550,
+                                        height: 550,
+                                        correctLevel: QRCode.CorrectLevel.H
+                                      });
+
+                                      modal.style.display = 'flex';
+                                    }
+
+                                    function closeQRModal() {
+                                      document.getElementById('qrModal').style.display = 'none';
+                                    }
+                                  </script>
+                                </td>
                             </tr>
+                            {% endif %}
                             <tr>
                                 <td colspan="5">
                                     <br>