Replace jQuery with vanilla JavaScript

sipa/static/js/contact-hints.js

@@ -1,28 +1,40 @@
-var hints = [];
-$.getJSON("/sipa/static/js/hints.json", function (raw_hints) {
-    hints = raw_hints.map(function (hint) {
+let hints = [];
+
+fetch("static/js/hints.json").then(response => response.json()).then((raw_hints) => {
+    hints = raw_hints.map((hint) => {
         return {
             not_in_dorm: hint.not_in_dorm,
-            patterns: hint.patterns.map(function (pattern) {
+            patterns: hint.patterns.map((pattern) => {
                 return new RegExp(pattern, "i");
             }),
             hint: hint.hint
         };
     });
 });
-$("#message").on("input", function () {
-    var applicable = hints.filter(function (hint) {
-        var contains = hint.patterns.some(function (pattern) {
-            return pattern.test($("#message").val())
+
+
+const e_message = document.getElementById("message");
+const e_dormitory = document.getElementById("dormitory");
+const e_hints = document.getElementById("hints")
+
+e_message.addEventListener("input", (event) => {
+    const applicable = hints.filter((hint) => {
+        const contains = hint.patterns.some((pattern) => {
+            return pattern.test(e_message.value)
         });
-        var not_blacklisted = hint.not_in_dorm.every(function (dorm) {
-            return dorm !== $("#dormitory").val();
+        const not_blacklisted = hint.not_in_dorm.every((dorm) => {
+            return dorm !== e_dormitory.value;
         });
         return contains & not_blacklisted;
     });
-    $("#hints").empty();
-    applicable.forEach(function (hint) {
-        var hint_text = hint.hint[get_language()];
-        $("#hints").append("<div class='alert alert-warning'>" + hint_text + "</div>");
+
+    while (e_hints.lastChild) {
+        e_hints.removeChild(e_hints.lastChild);
+    }
+    applicable.forEach((hint) => {
+        e_hints.insertAdjacentHTML("beforeend",
+            "<div class='alert alert-warning'>" + hint.hint[get_language()] +
+            "</div>"
+        );
     });
 });

sipa/static/js/register_identify.js

@@ -1,12 +1,21 @@
-function updateState() {
-    var swdd_tenant = !$("#no_swdd_tenant").prop("checked");
-    $("#tenant_number,[for=tenant_number]").toggle(swdd_tenant);
-    $("#tenant_number").prop("required", swdd_tenant);
-
-    var agdsn_history = $("#agdsn_history").prop("checked");
-    $("#previous_dorm,[for=previous_dorm]").toggle(agdsn_history);
-    $("#previous_dorm").prop("required", agdsn_history);
+function updateForm(target, invert, updateId, event) {
+    // Invert checked if invert is true (XOR)
+    const shouldBeVisible = target.checked !== invert;
+
+    const element = document.getElementById(updateId);
+    element.style.display = shouldBeVisible ? "block" : "none";
+    element.required = shouldBeVisible;
+
+    element.labels.forEach((label) => {
+        label.style.display = shouldBeVisible ? "block" : "none";
+    });
 }
-$("#no_swdd_tenant").change(updateState);
-$("#agdsn_history").change(updateState);
-updateState();
+
+const no_swdd_tenant = document.getElementById("no_swdd_tenant");
+no_swdd_tenant.addEventListener("change", updateForm.bind(undefined, no_swdd_tenant, true, "tenant_number"));
+
+const agdsn_history = document.getElementById("agdsn_history");
+agdsn_history.addEventListener("change", updateForm.bind(undefined, agdsn_history, false, "previous_dorm"));
+
+updateForm(no_swdd_tenant, true, "tenant_number", undefined)
+updateForm(agdsn_history, false, "previous_dorm", undefined)

sipa/templates/base.html

@@ -80,7 +80,6 @@
     <script type="application/json" id="locale">
         {{- get_locale() | string | tojson -}}
     </script>
-    <script defer src="{{ url_for("static", filename="js/jquery-2.1.1.min.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/bootstrap.bundle.min.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/statuspage.js") }}"></script>
     <script defer src="{{ url_for("static", filename="js/agdsn.js") }}"></script>