Add QR generating functionality

package.json

@@ -15,6 +15,7 @@
   "license": "MIT",
   "devDependencies": {
     "eslint": "^7.17.0",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "qr.js": "^0.0.0"
   }
 }

src/index.js

@@ -1,10 +1,11 @@
+import qrcode from 'qr.js';
 // DEBUG is an environment variable
 
 async function updateAttendance(request) {
   try {
     const url = new URL(request.url);
     const formData = await request.formData()
-    const nusnet = escapeHtml(formData.get('nusnet'))
+    const nusnet = escapeHtml(formData.get('nusnet').toUpperCase())
     const name = escapeHtml(formData.get('name'))
     const now = new Date()
     const currDate = now.toLocaleDateString('en-GB', {
@@ -30,18 +31,18 @@ async function updateAttendance(request) {
       data = JSON.parse(data)
     }
 
+    // can only checkin once per day.
     if (!data.attendance.find(x => x.date == currDate)) {
       data.attendance.push({
         date: currDate,
         time: currTime,
       })
+      await setCache(nusnet, JSON.stringify(data))
       if (DEBUG) {
         console.log(JSON.stringify(data.attendance))
       }
     }
 
-    await setCache(nusnet, JSON.stringify(data))
-
     // Redirect to /?name=${name}
     url.searchParams.append('name', name)
     return new Response(null, {
@@ -55,6 +56,13 @@ async function updateAttendance(request) {
 
 async function listAttendance(request) {}
 
+async function generateQRCode(request) {
+    const url = new URL(request.url)
+    const cells = qrcode(url.href).modules;
+    return new Response(qrTemplate(cells), {
+    headers: { 'content-type': 'text/html' },
+  });
+}
 /**
  * Respond with hello worker text
  * @param {Request} request
@@ -65,7 +73,12 @@ async function handleRequest(request) {
   }
 
   const url = new URL(request.url)
-  return new Response(form(url.searchParams.get('name')), {
+
+  if (url.pathname.includes("/qr")) {
+    return generateQRCode(request);
+  }
+
+  return new Response(formTemplate(url.searchParams.get('name')), {
     headers: { 'content-type': 'text/html' },
   })
 }
@@ -75,7 +88,7 @@ addEventListener('fetch', event => {
 })
 
 /**
- * HELPER functions
+ * Template functions
  */
 
 const escapeHtml = str => str.replace(/</g, '\\u003c')
@@ -100,7 +113,7 @@ const template = (body, script = '') => `
 ${script}
 </html>
 `
-const form = name => {
+const formTemplate = name => {
   return name
     ? template(`Thankyou ${escapeHtml(name)} for attending!`,
 `
@@ -123,9 +136,49 @@ window.addEventListener('popstate', function () {
 `)
 }
 
+const qrTemplate = cells => template(
+  "",
+  `
+<script>
+const width = 200;
+const height = 200;
+
+const canvas = document.createElement('canvas');
+canvas.width = width;
+canvas.height = height;
+
+const ctx = canvas.getContext('2d');
+
+const cells = ${JSON.stringify(cells)};
+
+const tileW = width  / cells.length;
+const tileH = height / cells.length;
+
+for (let r = 0; r < cells.length ; ++r) {
+    const row = cells[r];
+    for (let c = 0; c < row.length ; ++c) {
+        ctx.fillStyle = row[c] ? '#000' : '#fff';
+        const w = (Math.ceil((c+1)*tileW) - Math.floor(c*tileW));
+        const h = (Math.ceil((r+1)*tileH) - Math.floor(r*tileH));
+        ctx.fillRect(Math.round(c*tileW), Math.round(r*tileH), w, h);
+    }
+}
+document.querySelector("body").appendChild(canvas);
+</script>
+  `
+)
+
+/**
+ * KV functions
+ */
+
 const setCache = (key, value) => ATTENDSYS.put(key, value)
 const getCache = key => ATTENDSYS.get(key)
 
+/**
+ * Util functions
+ */
+
 const isValidTimeRange = datetime => {
   const hr = datetime.getHours()
   const min = datetime.getMinutes()

yarn.lock

@@ -580,6 +580,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+qr.js@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"