From 26a42333fecee5144bd3a413d710436473741c4c Mon Sep 17 00:00:00 2001
From: Wolvan <wolvan1@gmail.com>
Date: Sat, 29 Jan 2022 23:48:00 +0100
Subject: [PATCH] Add QR Code to poll pages

This way, people can easily just use their QR readers to reach the
voting page. The QR is constructed via Google Charts API and the URL is
based on the HOST header of the request.
---
 frontend/html/poll.html        |  2 ++
 frontend/html/result.html      |  1 +
 frontend/static/css/result.css | 11 +++++++++++
 frontend/static/css/vote.css   |  7 +++++++
 src/frontend.ts                |  4 +++-
 5 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 frontend/static/css/vote.css

diff --git a/frontend/html/poll.html b/frontend/html/poll.html
index 6e8f701..2aff965 100644
--- a/frontend/html/poll.html
+++ b/frontend/html/poll.html
@@ -8,6 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/vote.css">
     <script type="text/javascript" src="/static/vendor/js/textfit.js" defer="true"></script>
     <script type="text/javascript">
         const textFitOptions = {
@@ -48,6 +49,7 @@
                     <a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
                 </section>
             </form>
+            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
         </section>
     </main>
     <footer>
diff --git a/frontend/html/result.html b/frontend/html/result.html
index 1826a76..ae25e05 100644
--- a/frontend/html/result.html
+++ b/frontend/html/result.html
@@ -37,6 +37,7 @@
                 <a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
             </section>
             <aside id="chart"></aside>
+            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
         </section>
     </main>
     <footer>
diff --git a/frontend/static/css/result.css b/frontend/static/css/result.css
index 99a7f7b..312a49e 100644
--- a/frontend/static/css/result.css
+++ b/frontend/static/css/result.css
@@ -67,8 +67,19 @@ aside#chart {
     visibility: hidden;
 }
 
+aside#qrcode {
+    position: absolute;
+    top: 210px;
+    right: -210px;
+    width: 200px;
+    height: 200px;
+}
+
 @media screen and (max-width: 750px) {
     aside#chart {
         visibility: hidden !important;
     }
+    aside#qrcode {
+        visibility: hidden !important;
+    }
 }
diff --git a/frontend/static/css/vote.css b/frontend/static/css/vote.css
new file mode 100644
index 0000000..3e86733
--- /dev/null
+++ b/frontend/static/css/vote.css
@@ -0,0 +1,7 @@
+aside#qrcode {
+    position: absolute;
+    top: 0px;
+    right: -210px;
+    width: 200px;
+    height: 200px;
+}
\ No newline at end of file
diff --git a/src/frontend.ts b/src/frontend.ts
index 303abd1..d67be85 100644
--- a/src/frontend.ts
+++ b/src/frontend.ts
@@ -143,7 +143,8 @@ export default function init(router: Router): void {
                 "POLL_OPTION_DIVS": pollOptionsDivs,
                 "POLL_VOTES_TOTAL": totalVotes,
                 "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
-                "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64")
+                "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64"),
+                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
             });
         } catch (error) {
             console.log(error);
@@ -180,6 +181,7 @@ export default function init(router: Router): void {
                 "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
                 "FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
                 "FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
+                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
             });
         } catch (error) {
             console.log(error);