validate admin attendance alter attempts; fix duplicate event listeners

clr-li · Dec 23, 2023 · 64017ee · 64017ee
1 parent cbd9381
commit 64017ee
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/public/components/Table.js b/public/components/Table.js
@@ -53,6 +53,7 @@ export class Table extends Component {
     }
 
     async updateTable(attendancearr, events, businessID) {
+        this.businessID = businessID;
         let map = new Map();
         let userIds = [];
         let statusColor = {"PRESENT": "green", "ABSENT": "red", "EXCUSED": "gray", "LATE": "orange", "N/A": "lightgray", "ABSENT(self-marked)": "#fc6060"}
@@ -160,22 +161,6 @@ export class Table extends Component {
                 button_index++;
             }
         }
-        const alterButton = this.shadowRoot.getElementById("alter-button");
-        alterButton.addEventListener("click", async (e) => {
-            const ids_to_alter = [];
-            for (const checkbox of [...attendance.getElementsByClassName("selectedrows")]) {
-                if (checkbox.checked) {
-                    ids_to_alter.push(checkbox.id.split("-")[1]);
-                }
-            }
-            const res = await GET(`/alterAttendance?businessId=${businessID}&ids=${ids_to_alter.join(',')}&status=${this.status}&event=${this.event_to_alter.dataset.id}`);
-            if (res.ok) {
-                const event = new CustomEvent('reloadTable', {});
-                this.dispatchEvent(event);
-            } else {
-                Popup.alert(sanitizeText(await res.text()), 'var(--error)');
-            }
-        });
     }
 
     sortStudents(searchword) {
@@ -301,6 +286,36 @@ export class Table extends Component {
             this.status = e.detail.value;
         });
         statusSelector.setAttribute("value", this.status);
+
+        const alterButton = this.shadowRoot.getElementById("alter-button");
+        alterButton.addEventListener("click", async (e) => {
+            const ids_to_alter = [];
+            for (const checkbox of [...this.shadowRoot.getElementById("displayattendance").getElementsByClassName("selectedrows")]) {
+                if (checkbox.checked) {
+                    ids_to_alter.push(checkbox.id.split("-")[1]);
+                }
+            }
+            console.log("ids to alter: " + ids_to_alter);
+            if (ids_to_alter.length == 0) {
+                Popup.alert("Please select the users/rows to alter first.", "var(--warning)");
+                return;
+            }
+            if (!this.event_to_alter) {
+                Popup.alert("Please select an event to alter first.", "var(--warning)");
+                return;
+            }
+            if (!statusSelector.isValid()) {
+                Popup.alert("Please select a valid status.", "var(--warning)");
+                return;
+            }
+            const res = await GET(`/alterAttendance?businessId=${this.businessID}&ids=${ids_to_alter.join(',')}&status=${this.status}&event=${this.event_to_alter.dataset.id}`);
+            if (res.ok) {
+                const event = new CustomEvent('reloadTable', {});
+                this.dispatchEvent(event);
+            } else {
+                Popup.alert(sanitizeText(await res.text()), 'var(--error)');
+            }
+        });
 
         this.shadowRoot.getElementById("export").onclick = () => {
             // Variable to store the final csv data

diff --git a/public/components/TypeSelect.js b/public/components/TypeSelect.js
@@ -126,10 +126,16 @@ import { sanitizeText, getPattern, escapeQuotes } from "../util/util.js";
         return option.value;
     }
     /**
-     * Gets the selected option of this input.
+     * @returns the selected option of this input.
      */
     getSelected() {
         return this.querySelector(`option[value="${this.getAttribute("value")}"]`);
     }
+    /**
+     * @returns true if the inputted option is valid, false otherwise.
+     */
+    isValid() {
+        return this.shadowRoot.getElementById("select").checkValidity();
+    }
 }
 window.customElements.define('type-select', TypeSelect); // define custom <type-select> tag, name must be lowercase and have one hyphen