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.
This commit is contained in:
Wolvan 2022-01-29 23:48:00 +01:00
parent 19606025e2
commit 26a42333fe
5 changed files with 24 additions and 1 deletions

View file

@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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/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" src="/static/vendor/js/textfit.js" defer="true"></script>
<script type="text/javascript"> <script type="text/javascript">
const textFitOptions = { const textFitOptions = {
@ -48,6 +49,7 @@
<a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a> <a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
</section> </section>
</form> </form>
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
</section> </section>
</main> </main>
<footer> <footer>

View file

@ -37,6 +37,7 @@
<a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a> <a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
</section> </section>
<aside id="chart"></aside> <aside id="chart"></aside>
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
</section> </section>
</main> </main>
<footer> <footer>

View file

@ -67,8 +67,19 @@ aside#chart {
visibility: hidden; visibility: hidden;
} }
aside#qrcode {
position: absolute;
top: 210px;
right: -210px;
width: 200px;
height: 200px;
}
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
aside#chart { aside#chart {
visibility: hidden !important; visibility: hidden !important;
} }
aside#qrcode {
visibility: hidden !important;
}
} }

View file

@ -0,0 +1,7 @@
aside#qrcode {
position: absolute;
top: 0px;
right: -210px;
width: 200px;
height: 200px;
}

View file

@ -143,7 +143,8 @@ export default function init(router: Router): void {
"POLL_OPTION_DIVS": pollOptionsDivs, "POLL_OPTION_DIVS": pollOptionsDivs,
"POLL_VOTES_TOTAL": totalVotes, "POLL_VOTES_TOTAL": totalVotes,
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""), "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) { } catch (error) {
console.log(error); console.log(error);
@ -180,6 +181,7 @@ export default function init(router: Router): void {
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""), "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
"FORM_SUBMISSION_ERROR": xss(req.query.error + ""), "FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
"FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "", "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) { } catch (error) {
console.log(error); console.log(error);