Attendance of students by AJAX call #113

sagarpandyansit · 2021-02-23T11:44:14Z

Issue that resolved:
#82

Description of change:
I have changed the traditional way of submitting the form for attendance. I have made a function which triggers asynchronous request to change in the database for the attendance.

sagarpandyansit · 2021-02-23T12:01:05Z

@garg3133, could you help me to solve this linting error?

garg3133 · 2021-02-24T16:36:53Z

apps/students/urls.py

    # path('attendance/view/', views.view_attendance, name='view_attendance'),
    path('profile/update/<int:pk>/', views.update_profile, name='update_profile'),  # Not needed, update in profile/ only

    path('update_from_sheets/', views.update_from_sheets, name='update_from_sheets'),
+
+    # AJAX calls
+    path('ajax/ajax_attendance_fetch_students/', views.ajax_attendance_fetch_students, name='ajax_attendance_fetch_students'),


Don't repeat ajax in the endpoint. ajax/fetch_students/ and ajax/mark_attendance should work fine. Replace / with _ for view name and URL namespace.

garg3133 · 2021-02-24T16:39:32Z

apps/students/views.py

+def ajax_student_attendance(request):
+    stu_id = request.GET['std_id']
+    stu_att = StudentAttendance.objects.get(student__id=stu_id, cal_date=today_date)
+    stu_att.present = not stu_att.present


Don't just toggle the attendance, be sure whether you want to mark the student present or absent. Bring in one more key-value pair for this in GET request. (Send True if the checkbox is checked and False if it is unchecked).

garg3133 · 2021-02-24T16:45:22Z

templates/students/attendance.html

+            },
+            dataType: 'json',
+            success: function (data) {
+


Add a success toast here showing that the attendance was marked successfully. You may refer b4715eb to see how I implemented toast in your previous PR.

Also, add the error parameter to in this AJAX and toggle the checkbox to it's original state if an error occurs along with showing a toast displaying the failure message.

garg3133 · 2021-02-26T12:04:55Z

@sagarpandyansit Leave the linting errors for now, just improve the code as suggested in the review above.

We'll handle the linting errors separately as the whole codebase needs to be lint properly.

sagarpandyansit · 2021-02-26T17:06:02Z

@garg3133, Okay. There is a problem. as soon as we mark the attendance, the database is going to update but, what about the HTML page. It remains the same. for example stu_att.present is false initially. We mark the attendance of the student hence the database changed but the variable in the HTML page remains the same means stu_att.present is false.

garg3133 · 2021-02-26T17:24:54Z

@sagarpandyansit The stu_att.present variable in HTML is only used at the page load time so it should not create any problem. Is there any issue it is creating?

sagarpandyansit · 2021-02-26T17:29:09Z

@garg3133, no issue with the creation. I am saying that the value of it is not changing as per the database. If it was false, it remains false until you reload the page. That is what I am saying.

sagarpandyansit · 2021-02-26T17:32:47Z

It is not synchronous with the AJAX call. I made AJAX call for marking the attendance of the student. It works and made stu_att.present variable as true in the database but, in the HTML page the stu_att.present remains 'false`.

garg3133 · 2021-02-26T17:36:37Z

Yeah, that's not a problem. These variables are only used at the reload time for rendering the HTML. Once the HTML is rendered completely, these variables are of no use on the page (unless you are using them in JavaScript). The value of there variables won't cause any problem on the page and will automatically get updated once the page reloads.

sagarpandyansit · 2021-02-26T17:40:05Z

No. It will cause a problem. What if you click on that button again. Again you have to check whether stu_att.present is false or true, as you have denied that toggle variable solution. Now, we get the wrong information of that variable and that will cause the problem. Let me push the updated code for your reference.

garg3133 · 2021-02-26T17:46:32Z

No, you should not check the value of stu_att.present in JavaScript but you should check the current state of that checkbox (you can pass the id of that checkbox as well, as an argument to the function). If the current state of the checkbox is checked, instruct the backend to mark the student as present, otherwise mark the student as absent.

Also, if the AJAX fails for some reason, toggle the checkbox back to its original state (but make your it doesn't get stuck in a loop).
This might help: https://forum.sencha.com/forum/showthread.php?254484-How-to-set-checkbox-value-without-triggering-change-event&p=1043407&viewfull=1#post1043407

https://stackoverflow.com/a/5962581/9890886

sagarpandyansit · 2021-02-27T09:55:01Z

@garg3133, kindly review the AJAX call now. It's working fine without suspending the event. I will remove the submit button and make changes accordingly.

garg3133

This is working great @sagarpandyansit, thanks for working on this.

Below are the few changes required. Plus, you can now remove the "Submit" button as you said above.

garg3133 · 2021-02-27T11:10:26Z

apps/students/views.py

@@ -173,14 +172,22 @@ def ajax_attendance(request):
    return JsonResponse(data)


+def ajax_mark_attendance(request):


Add the two decorators above this function. (Refer to the other ajax_fetch_students function above).

garg3133 · 2021-02-27T11:13:38Z

templates/students/attendance.html

+                                            <input type="checkbox" name="attended" value="{{ stu_att.student.id }}"
+                                                   class="custom-control-input"
+                                                   id="s{{ stu_att.id }}"
+                                                   onchange="attendance({{ stu_att.student.id }}, {{ stu_att.id }})"


You can pass the arguments as strings here. Also, pass the id of the checkbox instead of stu_att.id.

Try this: onchange="attendance('{{ stu_att.student.id }}', 's{{ stu_att.id }}')"

garg3133 · 2021-02-27T11:15:48Z

templates/students/attendance.html

-                    stu_att_table += '<tr><td>' + name + '</td><td>' + school_class + '</td> \
+    <script>
+        function attendance(student_id, checkboxID) {
+            let student = document.getElementById('s' + checkboxID);


Variable name student doesn't seem correct here. You should use a more descriptive name like att_checkbox instead.

garg3133 · 2021-02-27T11:17:31Z

templates/students/attendance.html

+                dataType: 'json',
+                success: function (data, status) {
+                    $('#alert-toast-div > div').html(
+                        `<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3500">


Change the data-delay to 500. As this toast is going to appear again and again, we don't need to show it for 3.5 sec.

garg3133 · 2021-02-27T11:18:02Z

templates/students/attendance.html

+                    $('#alert-toast-div > div').html(
+                        `<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3500">
+                            <div class="toast-body p-2 px-3">
+                                <strong class="mr-auto">Attendance marked successfully.</strong>


Change the text here to "Attendence updated".

garg3133 · 2021-02-27T11:19:05Z

templates/students/attendance.html

+                    $("#alert_toast").addClass("bg-success");
+                },
+                error: function (data, status) {
+                    is_present ? student.checked = false : student.checked = true;


Add a comment before this line: "// Un-toggle the checkbox".

garg3133 · 2021-02-28T14:47:51Z

@sagarpandyansit Any updates on this? The program is going to end in about 4 hrs and I don't want you to miss your points on this PR.

sagarpandyansit · 2021-02-28T17:08:56Z

@garg3133, I have viva tomorrow though I tried. I don't know why but, I can't schedule a class of students for today as well. They don't appear in the list for attendance. Please check, maybe it's a bug.
You may accept it with the SWoC label and merge it later. It's completely okay if you don't want to do this. I will contribute after SWoC also because I like the concept of this project and want to contribute whatever I can.

garg3133 · 2021-02-28T17:39:37Z

As I had already made most of the requested changes on my local system while reviewing this PR, I'm merging this PR with those after applying those changes in 8a90fb5. I've opened a new issue #118 for the remaining changes and I'm assigning it to you.

Also, I really appreciate your willingness to contribute to this project even after SWOC and all the best for your viva 👍

sagarpandyansit · 2021-03-01T15:29:30Z

Thanks @garg3133. I will start working on that issue after the viva phase.

garg3133 reviewed Feb 24, 2021

View reviewed changes

sagarpandyansit added 5 commits February 25, 2021 17:12

Readability improved for AJAX call

3bac6d4

Attendance for students by AJAX call

1868bcd

Tried to resolve linting error

98dc9b6

Tried to solve linting errors

4ded322

Readability improved

30de2fb

sagarpandyansit force-pushed the attendance branch from 81250da to 30de2fb Compare February 25, 2021 12:16

sagarpandyansit added 2 commits February 26, 2021 23:13

error-toast added for the success message

b249b9d

minor bug fixed in AJAX call

49246f9

error-toast added AJAX call for marking attendance added

5ec5735

garg3133 reviewed Feb 27, 2021

View reviewed changes

garg3133 linked an issue Feb 27, 2021 that may be closed by this pull request

Take student attendance using AJAX #82

Closed

garg3133 merged commit 1385651 into garg3133:master Feb 28, 2021

garg3133 added hard SWOC 2021 labels Feb 28, 2021

garg3133 mentioned this pull request Mar 7, 2021

Take volunteer attendance using AJAX #90

Closed

2 tasks

sagarpandyansit deleted the attendance branch March 10, 2021 08:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Attendance of students by AJAX call #113

Attendance of students by AJAX call #113

sagarpandyansit commented Feb 23, 2021

sagarpandyansit commented Feb 23, 2021

garg3133 Feb 24, 2021

garg3133 Feb 24, 2021

garg3133 Feb 24, 2021

garg3133 commented Feb 26, 2021 •

edited

Loading

sagarpandyansit commented Feb 26, 2021 •

edited

Loading

garg3133 commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021

garg3133 commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021 •

edited

Loading

garg3133 commented Feb 26, 2021 •

edited

Loading

sagarpandyansit commented Feb 27, 2021 •

edited

Loading

garg3133 left a comment

garg3133 Feb 27, 2021

garg3133 Feb 27, 2021

garg3133 Feb 27, 2021

garg3133 Feb 27, 2021

garg3133 Feb 27, 2021

garg3133 Feb 27, 2021

garg3133 commented Feb 28, 2021

sagarpandyansit commented Feb 28, 2021 •

edited

Loading

garg3133 commented Feb 28, 2021 •

edited

Loading

sagarpandyansit commented Mar 1, 2021

		@@ -173,14 +172,22 @@ def ajax_attendance(request):
		return JsonResponse(data)


		def ajax_mark_attendance(request):

Attendance of students by AJAX call #113

Attendance of students by AJAX call #113

Conversation

sagarpandyansit commented Feb 23, 2021

sagarpandyansit commented Feb 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

garg3133 commented Feb 26, 2021 • edited Loading

sagarpandyansit commented Feb 26, 2021 • edited Loading

garg3133 commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021

garg3133 commented Feb 26, 2021

sagarpandyansit commented Feb 26, 2021 • edited Loading

garg3133 commented Feb 26, 2021 • edited Loading

sagarpandyansit commented Feb 27, 2021 • edited Loading

garg3133 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

garg3133 commented Feb 28, 2021

sagarpandyansit commented Feb 28, 2021 • edited Loading

garg3133 commented Feb 28, 2021 • edited Loading

sagarpandyansit commented Mar 1, 2021

garg3133 commented Feb 26, 2021 •

edited

Loading

sagarpandyansit commented Feb 26, 2021 •

edited

Loading

sagarpandyansit commented Feb 26, 2021 •

edited

Loading

garg3133 commented Feb 26, 2021 •

edited

Loading

sagarpandyansit commented Feb 27, 2021 •

edited

Loading

sagarpandyansit commented Feb 28, 2021 •

edited

Loading

garg3133 commented Feb 28, 2021 •

edited

Loading