Merge pull request #16 from kcsry/renovate-2024-es

Renovate frontend
kcsry · Jan 18, 2024 · 5c2357a · 5c2357a
2 parents 98f7073 + b3913b9
commit 5c2357a
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 107 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "eslint-config-airbnb-base",
+    "eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  plugins: ["html"],
+  rules: {
+    curly: "error",
+    eqeqeq: "error",
+    "func-names": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-restricted-syntax": "off",
+    "no-use-before-define": "off",
+    "prefer-arrow-callback": "error",
+    "prefer-const": "error",
+    "prefer-template": "error",
+    quotes: "off",
+    "no-console": "off",
+    "no-alert": "off",
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ nosetests.xml
 
 .cache
 htmlcov
+
+node_modules
+package-lock.json
diff --git a/lippukala/templates/lippukala/pos.html b/lippukala/templates/lippukala/pos.html
@@ -1,156 +1,154 @@
 <!doctype html>
-<html>
+<html lang="fi">
   <head>
     <title>POS</title>
     <script type="text/javascript">
-      var codeInput;
-      var statusDiv;
+      /**
+       * @typedef {Object} Code
+       * @property {number} id
+       * @property {boolean} used
+       * @property {string} code
+       * @property {string} prefix
+       * @property {string} lit
+       * @property {string} [name]
+       * @property {string} comment
+       * @property {string} prod
+       * @property {boolean} [localUsed]
+       */
 
-      function xhr(url, data, callback) {
-        var req = new XMLHttpRequest();
-        req.open(data ? "POST" : "GET", url);
-        req.setRequestHeader(
-          "Content-Type",
-          "application/x-www-form-urlencoded",
-        );
-        req.onreadystatechange = function () {
-          if (req.readyState === 4 && req.status === 200) {
-            callback(req.status == 200, req.responseText, req);
-          }
-        };
-        req.send(data);
-      }
+      /**
+       * @typedef {Object} CodesResponse
+       * @property {Code[]} codes
+       */
 
-      var codes = {};
-      var useQueue = [];
-      var currentlyShownId = null;
+      let codeInput;
+      let statusDiv;
 
-      function forEachCode(func) {
-        for (var codeId in codes) {
-          func(codes[codeId]);
-        }
-      }
+      /** @type {Record<number, Code>} */
+      const codes = {};
 
-      function extend(/* ... */) {
-        var target = arguments[0];
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-          if (source) {
-            for (var key in source) {
-              target[key] = source[key];
-            }
-          }
-        }
-        return target;
-      }
+      /** @type {number[]} */
+      let useQueue = [];
 
+      /** @type {number|null} */
+      let currentlyShownId = null;
+
+      /**
+       * @param {CodesResponse} data
+       */
       function parseData(data) {
-        if (typeof data === "string") data = JSON.parse(data);
-        data.codes.forEach(function (code) {
-          codes[code.id] = extend(codes[code.id] || {}, code);
-        });
-        console.log("Got " + data.codes.length + " codes");
+        for (const code of data.codes) {
+          codes[code.id] = { ...(codes[code.id] || {}), ...code };
+        }
+        console.log(`Got ${data.codes.length} codes`);
       }
 
-      function download() {
-        xhr("?json=1&t=" + (0 | new Date()), null, function (error, data, req) {
-          parseData(data);
-        });
+      async function download() {
+        const jsonUrl = `?json=1&t=${Math.round(+new Date())}`;
+        const response = await fetch(jsonUrl);
+        if (!response.ok) throw new Error(`Failed to fetch ${jsonUrl}`);
+        const data = await response.json();
+        parseData(data);
       }
 
       function escapeHtml(str) {
-        var div = document.createElement("div");
+        const div = document.createElement("div");
         div.appendChild(document.createTextNode(str));
         return div.innerHTML;
       }
 
       function Tee(template, env) {
-        return template.replace(/\{(.+?)\}/g, function (_, m) {
-          return escapeHtml(env[m] || "").replace(/\n/g, "<br>");
-        });
+        return template.replace(/\{(.+?)\}/g, (_, m) =>
+          escapeHtml(env[m] || "").replace(/\n/g, "<br>"),
+        );
       }
 
+      /**
+       * @param {Code} code
+       */
       function showCode(code) {
         currentlyShownId = code.id;
         statusDiv.innerHTML = Tee(
           "<div class=cd><span class=pfx>{prefix}</span>{code}</div>{lit}<div class=product>{prod}</div><div class=addr>{name}</div><div class=comment>{comment}</div>",
           code,
         );
-        var cls = "code-unused";
+        let cls = "code-unused";
         if (code.used) cls = "code-used";
         else if (code.localUsed) cls = "code-localused";
         document.body.className = cls;
       }
 
+      /**
+       * @param {Code} code
+       */
       function useCode(code) {
         code.localUsed = true;
         useQueue.push(code.id);
         showCode(code);
       }
 
+      /**
+       * @param {Code} code
+       */
       function confirmUseCode(code) {
         if (code.used || code.localUsed) {
           alert(
             "Koodi näyttää jo käytetyltä!\nOta yhteys tapahtuman taloustiimiin asian selvittämiseksi.",
           );
           return;
-        } else {
-          if (confirm("Käytä koodi " + code.code + "?")) {
-            useCode(code);
-            setTimeout(syncUseQueue, 4);
-            setTimeout(function () {
-              codeInput.value = "";
-              codeInput.focus();
-            }, 250);
-          }
+        } // eslint-disable-next-line no-restricted-globals
+        if (!confirm(`Käytä koodi ${code.code}?`)) {
+          return;
         }
+        useCode(code);
+        setTimeout(syncUseQueue, 4);
+        setTimeout(() => {
+          codeInput.value = "";
+          codeInput.focus();
+        }, 250);
       }
 
       function search(enter) {
-        var nStarting = 0;
-        var inputCode = codeInput.value.toLowerCase();
-        var regexpText = "^" + inputCode;
+        let nStarting = 0;
+        const inputCode = codeInput.value.toLowerCase();
+        let regexpText = `^${inputCode}`;
         if (/^[-a-z]+ /i.test(inputCode)) {
           // Cheap "fuzzy" searching ("d bu" will match "desu butler")
-          regexpText =
-            "^" +
-            inputCode
-              .split(/\s+/)
-              .filter(function (word) {
-                return word.length > 0;
-              })
-              .join("[^ ]*? ");
+          regexpText = `^${inputCode
+            .split(/\s+/)
+            .filter((word) => word.length > 0)
+            .join("[^ ]*? ")}`;
           regexpText = regexpText.replace(/\s+$/, "");
         }
-        var searchRegexp = new RegExp(regexpText, "i");
-        var lastCode = null;
+        const searchRegexp = new RegExp(regexpText, "i");
+        let lastCode = null;
         document.body.className = "";
-        forEachCode(function (code) {
-          var prefixedCode = (code.prefix || "") + code.code;
+        for (const code of Object.values(codes)) {
+          const prefixedCode = (code.prefix || "") + code.code;
           if (
-            inputCode == code.code ||
-            inputCode == prefixedCode ||
-            inputCode == code.lit.toLowerCase() ||
+            inputCode === code.code ||
+            inputCode === prefixedCode ||
+            inputCode === code.lit.toLowerCase() ||
             searchRegexp.test(code.code) ||
             searchRegexp.test(prefixedCode) ||
             searchRegexp.test(code.lit)
           ) {
             nStarting++;
             lastCode = code;
           }
-        });
-        if (nStarting == 1) {
+        }
+        if (nStarting === 1) {
           showCode(lastCode);
           if (enter) confirmUseCode(lastCode);
-        } else if (nStarting == 0) {
+        } else if (nStarting === 0) {
           statusDiv.innerHTML =
             "Koodilla ei löydy yhtään lippua. Ole hyvä ja tarkista oikeinkirjoitus ja tapahtuma!";
         } else {
-          statusDiv.innerHTML = "... " + nStarting + " ...";
+          statusDiv.innerHTML = `... ${nStarting} ...`;
         }
       }
 
-      function keyPress(event) {
+      function keyPress() {
         search(false);
       }
 
@@ -159,43 +157,45 @@
         search(true);
       }
 
-      function syncUseQueue() {
-        useQueue = useQueue.filter(function (id) {
-          return codes[id].localUsed && !codes[id].used;
-        });
-        if (useQueue.length) {
-          xhr(
-            location.href,
-            "use=" + useQueue.join(","),
-            function (error, data, xhr) {
-              console.log(
-                "successfully synced " + useQueue.length + " code uses",
-              );
-              parseData(data);
-              if (currentlyShownId) showCode(codes[currentlyShownId]);
-            },
-          );
+      async function syncUseQueue() {
+        useQueue = useQueue.filter(
+          (id) => codes[id].localUsed && !codes[id].used,
+        );
+        if (!useQueue.length) {
+          return;
         }
+        const formData = new FormData();
+        formData.append("use", useQueue.join(","));
+        // eslint-disable-next-line no-restricted-globals
+        const resp = await fetch(location.href, {
+          method: "POST",
+          body: formData,
+        });
+        if (!resp.ok) throw new Error(`Failed to sync use queue`);
+        const data = await resp.json();
+        console.log(`successfully synced ${useQueue.length} code uses`);
+        parseData(data);
+        if (currentlyShownId) showCode(codes[currentlyShownId]);
       }
 
       function debounce(fn, delay) {
-        var timer = null;
+        let timer = null;
         return function () {
-          var clear = function () {
+          const clear = function () {
             timer = null;
           };
           if (timer === null) {
-            fn.apply(this, arguments);
+            fn.apply(this, arguments); // eslint-disable-line prefer-rest-params
           } else {
-            arguments[0].preventDefault();
+            arguments[0].preventDefault(); // eslint-disable-line prefer-rest-params
           }
           window.clearTimeout(timer);
           timer = window.setTimeout(clear, delay);
         };
       }
 
-      function init() {
-        download();
+      window.init = async function init() {
+        await download();
         setInterval(download, (50 + Math.random() * 20) * 1000);
         setInterval(syncUseQueue, 5000);
 
@@ -205,9 +205,9 @@
         document
           .getElementById("codeform")
           .addEventListener("submit", debounce(formSubmit, 250), true);
-      }
+      };
     </script>
-    <style type="text/css">
+    <style>
       body,
       input {
         font:
@@ -253,6 +253,7 @@
         margin: auto;
         text-align: center;
       }
+
       #code {
         width: 100%;
       }

diff --git a/package.json b/package.json
@@ -1,5 +1,12 @@
 {
   "prettier": {
     "trailingComma": "all"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^7.1.0",
+    "prettier": "^3.2.4"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,3 +39,6 @@ nosetests.xml @@
     .cache
     htmlcov
+    node_modules
+    package-lock.json