Merge pull request #109 from RSE-Sheffield/feat/qr-code-invite

feat: add qr code to invite
RSE-Sheffield · Feb 10, 2025 · 804aebb · 804aebb
2 parents 17dfdcf + 7b75563
commit 804aebb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/SORT/settings.py b/SORT/settings.py
@@ -64,6 +64,7 @@ def cast_to_boolean(obj: Any) -> bool:
     "django_bootstrap5",
     "django_extensions",
     "debug_toolbar",
+    "qr_code",
     # apps created by FA:
     "home",
     "survey",

diff --git a/requirements.txt b/requirements.txt
@@ -29,3 +29,4 @@ gunicorn==23.*
 strenum==0.4.15
 pytest==8.3.4
 pytest-django==4.9.0
+django-qr-code==4.1.0
diff --git a/survey/templates/survey/survey.html b/survey/templates/survey/survey.html
@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load qr_code %}
 {% block content %}
     <div class="container mx-auto px-4 py-8 mt-4">
         <nav aria-label="breadcrumb">
@@ -52,17 +53,43 @@ <h3>Invite your participants</h3>
                                         </button>
                                     </div>
                                 </div>
+                                <div class="d-flex mb-3">
+                                    <div class="card" style="width: 20em" id="survey_invite_qr_code_card">
+                                        {% qr_from_text invite_link image_format="png" size="s" alt_text="Survey invitation link" class_names="card-img-top"%}
+                                        <div class="card-body">
+                                            <div class="card-text text-center">
+                                                <button onclick="downloadQRCode()" class="btn btn-primary">
+                                                    Download invitation QR code
+                                                </button>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
+
 
                                 <script>
                                   function copyInviteLink() {
                                     let copyBtnTextElem = document.getElementById("copyBtnText");
                                     let link = document.getElementById("invitation_link").value;
                                     navigator.clipboard.writeText(link);
                                     copyBtnTextElem.innerHTML = "Copied";
-                                    setTimeout(()=>{
+                                    setTimeout(() => {
                                       copyBtnTextElem.innerHTML = "Copy";
                                     }, 2000);
                                   }
+
+                                  function downloadQRCode(){
+                                    let qrCodeCard = document.getElementById("survey_invite_qr_code_card");
+                                    console.log(qrCodeCard.firstElementChild);
+                                    let element = document.createElement('a');
+                                    element.setAttribute('href', qrCodeCard.firstElementChild.src);
+                                    element.setAttribute('download', "survey_invite.png");
+                                    element.style.display = 'none';
+                                    document.body.appendChild(element);
+                                    element.click();
+                                    document.body.removeChild(element);
+                                  }
                                 </script>
 
                             </div>