1 files changed, 245 insertions, 0 deletions

diff --git a/assets/js/absences.js b/assets/js/absences.js
new file mode 100644
index 0000000..5fbc622
--- /dev/null
+++ b/assets/js/absences.js
@@ -0,0 +1,245 @@
+// const API_ENDPOINT = "https://gimb.tk/test.php"; // deprecated
+// const API_ENDPOINT = "http://localhost:5000/test.php";
+
+/**
+ * Redirects user to login page if it's not logged int
+ */
+async function checkLogin() {
+    localforage.getItem("logged_in").then(function (value) {
+        // This code runs once the value has been loaded
+        // from the offline store.
+        if (value !== true) {
+            window.location.replace("/index.html");
+        }
+    }).catch(function (err) {
+        // This code runs if there were any errors
+        console.log(err);
+    });
+}
+
+/**
+ * Sets visibility of the loading bar
+ * @param {boolean} state Desired visibility
+ */
+function setLoading(state) {
+    if (state) {
+        $("#loading-bar").removeClass("hidden");
+    } else {
+        $("#loading-bar").addClass("hidden");
+    }
+}
+
+/**
+ * Loads absences from API and displays them
+ * @param {boolean} forceRefresh If true, cached absences are ignored
+ */
+async function loadAbsences(forceRefresh = false) {
+    setLoading(true);
+    // Load required data
+    let promisesToRun = [
+        localforage.getItem("username").then(function (value) {
+            username = value;
+        }),
+        localforage.getItem("password").then(function (value) {
+            password = value;
+        }),
+        localforage.getItem("absences").then(function (value) {
+            absences = value;
+        })
+    ];
+    await Promise.all(promisesToRun);
+    // If we don't have a list of absences, query it
+    if (absences == null || absences == {} || forceRefresh) {
+        try {
+            let gsecInstance = new gsec();
+            await gsecInstance.login(username, password);
+            let date = {};
+            date.from = $("#datepicker-from").val().split(".");
+            date.till = $("#datepicker-to").val().split(".");
+            Object.keys(date).map((key) => {
+                date[key] = new Date(Date.parse(date[key].reverse().join("-")));
+            });
+            gsecInstance.fetchAbsences().then( (fetchedAbsences) => {
+                fetchedAbsences.sort((a, b) => {
+                    // Turn your strings into dates, and then subtract them
+                    // to get a value that is either negative, positive, or zero.
+                    return new Date(b.date) - new Date(a.date);
+                });
+
+                var fromKey = fetchedAbsences.findIndex((procEl) => {
+                    if (procEl.date.getTime() >= date.from.getTime()) {
+                        return true;
+                    }
+                });
+
+                var tillKey = fetchedAbsences.findIndex((procEl) => {
+                    if (procEl.date.getTime() > date.till.getTime()) {
+                        return true;
+                    }
+                });
+
+                // Both were -1, but we increased fromKey and decreased tillKey
+                // Means no absences in the provided timeframe
+                if (fromKey === 0 && tillKey === -2) {
+                    fetchedAbsences = [];
+                } else {
+                    fetchedAbsences = fetchedAbsences.slice(fromKey, tillKey);
+                }
+
+                absences = fetchedAbsences;
+                localforage.setItem("absences", fetchedAbsences).then(() => {
+                    displayData();
+                    setLoading(false);
+                });
+                setLoading(false);
+            }).catch( (err) => {
+                gsecErrorHandlerUI(err);
+                setLoading(false);
+            });
+        } catch (err) {
+            gsecErrorHandlerUI(err);
+            setLoading(false);
+        }
+    } else {
+        displayData();
+        setLoading(false);
+    }
+}
+
+/**
+ * Display absences data - called by loadAbsences
+ */
+function displayData() {
+    absences.forEach(absence => {
+        let li = document.createElement("li");
+
+        // dateString comes from bundle.js
+        let dateStringValue = dateString.longFormatted(absence["date"]);
+
+        let header = document.createElement("div");
+        header.className = "collapsible-header";
+        header.innerText = dateStringValue;
+
+        let body = document.createElement("div");
+        body.className = "collapsible-body";
+
+        let body_table = document.createElement("table");
+        body_table.className = "highlight";
+
+        let body_table_tbody = document.createElement("tbody");
+
+        Object.keys(absence.subjects).forEach(lesson => {
+
+            let absenceLessonObject = absence["subjects"][lesson];
+
+            let subjectRow = document.createElement("tr");
+            let subjectLessonIcon = document.createElement("td");
+            let subjectLessonText = document.createElement("td");
+            subjectLessonText.innerText = `${S("lesson")} ${lesson}`;
+
+            let subjectLessonIconInner = document.createElement("i");
+            subjectLessonIconInner.className = "material-icons";
+
+            switch (absenceLessonObject["status"]) {
+                case 0:
+                    subjectLessonIconInner.innerText = "schedule";
+                    break;
+                case 1:
+                    subjectLessonIconInner.innerText = "check_circle_outline";
+                    break;
+                case 2:
+                    subjectLessonIconInner.innerText = "error_outline";
+                    break;
+                case 3:
+                    subjectLessonIconInner.innerText = "not_interested";
+                    break;
+            }
+
+            subjectLessonIcon.appendChild(subjectLessonIconInner);
+
+            let subjectName = document.createElement("td");
+            subjectName.innerText = `${S(gseAbsenceTypes[absenceLessonObject["status"]])} : ${absenceLessonObject["subject"]}`;
+            subjectRow.appendChild(subjectLessonIcon);
+            subjectRow.appendChild(subjectLessonText);
+            subjectRow.appendChild(subjectName);
+            body_table_tbody.appendChild(subjectRow);
+        });
+
+        body_table.appendChild(body_table_tbody);
+        body.appendChild(body_table);
+
+        li.appendChild(header);
+        li.appendChild(body);
+        $("#absences-col").append(li);
+    });
+}
+
+/**
+ * Clear all displayed absences
+ */
+function clearAbsences() {
+    const table = document.getElementById("absences-col");
+    while (table.firstChild) {
+        table.removeChild(table.firstChild);
+    }
+}
+
+/**
+ * Force reloading of absences
+ */
+function refreshAbsences() {
+    clearAbsences();
+    loadAbsences(true);
+}
+
+/**
+ * Setup date pickers (from date and to date)
+ */
+function setupPickers() {
+    // Setup pickers
+    var dateObject = new Date();
+
+    let elems = document.querySelectorAll('#datepicker-to');
+    let options = {
+        autoClose: true,
+        format: "dd.mm.yyyy",
+        defaultDate: dateObject,
+        setDefaultDate: true,
+        firstDay: 1,
+        onSelect: refreshAbsences
+    }
+
+    M.Datepicker.init(elems, options);
+
+    dateObject.setDate(dateObject.getDate() - 14);
+
+    elems = document.querySelectorAll('#datepicker-from');
+    options = {
+        autoClose: true,
+        format: "dd.mm.yyyy",
+        defaultDate: dateObject,
+        setDefaultDate: true,
+        firstDay: 1,
+        onSelect: refreshAbsences
+    }
+    M.Datepicker.init(elems, options);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    checkLogin();
+    loadAbsences(true);
+
+    // Setup refresh handler
+    $("#refresh-icon").click(function () {
+        refreshAbsences();
+    });
+
+    setupPickers();
+
+    let collectionElem = document.querySelectorAll('.collapsible');
+    M.Collapsible.init(collectionElem, {});
+
+    // Setup side menu
+    const menus = document.querySelectorAll('.side-menu');
+    M.Sidenav.init(menus, { edge: 'right', draggable: true });
+});