diff options
-rw-r--r-- | js/gradings.js | 21 | ||||
-rw-r--r-- | js/meals.js | 263 | ||||
-rw-r--r-- | js/messaging.js | 4 | ||||
-rw-r--r-- | pages/about.html | 1 | ||||
-rw-r--r-- | pages/absences.html | 1 | ||||
-rw-r--r-- | pages/grades.html | 1 | ||||
-rw-r--r-- | pages/gradings.html | 33 | ||||
-rw-r--r-- | pages/meals.html | 143 | ||||
-rw-r--r-- | pages/messaging.html | 1 | ||||
-rw-r--r-- | pages/teachers.html | 1 | ||||
-rw-r--r-- | pages/timetable.html | 1 |
11 files changed, 466 insertions, 4 deletions
diff --git a/js/gradings.js b/js/gradings.js index 39be331..a6024f6 100644 --- a/js/gradings.js +++ b/js/gradings.js @@ -177,6 +177,25 @@ function gradingClickHandler(eventClickInfo) { M.Sidenav.getInstance(modal).open(); } +function setupPickers() { + // Setup pickers + var date_object = new Date(); + + let elems = document.querySelectorAll('#datepicker-add'); + let options = { + autoClose: true, + format: "dd.mm.yyyy", + defaultDate: date_object, + setDefaultDate: true, + firstDay: 1 + } + let instances = M.Datepicker.init(elems, options); + + + instances = M.Datepicker.init(elems, options); +} + + document.addEventListener("DOMContentLoaded", () => { checkLogin(); @@ -192,7 +211,7 @@ document.addEventListener("DOMContentLoaded", () => { height: "parent" }); calendar_obj.render(); - + setupPickers(); loadGradings(); // Setup refresh handler diff --git a/js/meals.js b/js/meals.js new file mode 100644 index 0000000..731d015 --- /dev/null +++ b/js/meals.js @@ -0,0 +1,263 @@ +const API_ENDPOINT = "https://lopolis-api.gimb.tk/"; +async function checkLogin() { + localforage.getItem("logged_in").then((value) => { + if (value !== true) { + window.location.replace("/index.html"); + } + }).catch((err) => { + console.log(err); + }); +} +function setLoading(state) { + if (state) { + $("#loading-bar").removeClass("hidden"); + } else { + $("#loading-bar").addClass("hidden"); + } +} +async function loadMeals(force_refresh = false) { + setLoading(true); + let promises_to_run = [ + localforage.getItem("lopolis_username").then((value) => { + username = value; + }), + localforage.getItem("lopolis_password").then((value) => { + password = value; + }), + localforage.getItem("meals").then((value) => { + meals = value; + }) + ]; + await Promise.all(promises_to_run); + if (meals === null || grades === [] || force_refresh) { + + $.ajax({ + url: API_ENDPOINT, + crossDomain: true, + contentType: "application/json", + data: JSON.stringify({ "username": username, "password": password }), + dataType: "json", + cache: false, + type: "POST", + success: (data) => { + // If data is null, the request failed + if (data === null) { + M.toast({ html: "Authentication request failed!" }); + setLoading(false); + } else if(data["error"] == true) { + M.toast({ html: "Authentication error!" }); + setLoading(false); + } else { + $.ajax({ + url: API_ENDPOINT, + crossDomain: true +// ##############################################################################################od tu dalje je meals.js aka ni narejeno + }); + localforage.setItem("meals", data).then((value) => { + meals = value; + displayMeals(); + setLoading(false); + }); + } + }, + + error: () => { + M.toast({ html: "No internet connection!" }); + setLoading(false); + } + + }); + + } else { + displayGrades(); + setLoading(false); + } +} + +function displayGrades() { + let grades_by_subject = {}; + grades.forEach((grade, index) => { + if (!(grade["predmet"] in grades_by_subject)) { + grades_by_subject[grade["predmet"]] = []; + } + let grade_object = { + date: grade["datum"], + teacher: grade["profesor"], + subject: grade["predmet"], + title: grade["naslov"], + type: grade["vrsta"], + term: grade["rok"], + grade: grade["ocena"], + temporary: grade["zacasna"], + index: index + } + grades_by_subject[grade["predmet"]].push(grade_object); + }); + + let root_element = document.getElementById("grades-collapsible"); + + Object.keys(grades_by_subject).forEach((subject) => { + // Create root element for a subject entry + let subject_entry = document.createElement("li"); + // Create subject collapsible header + let subject_header = document.createElement("div"); + subject_header.classList.add("collapsible-header"); + subject_header.classList.add("collapsible-header-root"); + // Create header text element + let subject_header_text = document.createElement("span"); + subject_header_text.innerText = subject; + + // Create collection for displaying individuals grades + let subject_body = document.createElement("div"); + subject_body.className = "collapsible-body"; + let subject_body_root = document.createElement("ul"); + subject_body_root.className = "collection"; + + // Setup variables for calculating average + let grade_sum = 0; + let grade_tot = 0; + + grades_by_subject[subject].forEach((grade) => { + // Create element for individual grade + let grade_node = document.createElement("li"); + grade_node.className = "collection-item"; + grade_node.classList.add("collection-item") + grade_node.classList.add("grade-node"); + grade_node.dataset["index"] = grade["index"]; + let grade_node_div = document.createElement("div"); + + // Node for date and subject text + let grade_text = document.createElement("span"); + // Node for the actual number + let grade_number = document.createElement("div"); + grade_number.className = "secondary-content"; + + // Apply different style, if the grade is temporary + if (grade["temporary"]) { + // Styling for text + let grade_text_italic = document.createElement("i"); + grade_text_italic.innerText = grade["date"] + " - " + grade["title"]; + grade_text.appendChild(grade_text_italic); + + // Styling for number + let grade_number_italic = document.createElement("i"); + grade_number_italic.innerText = grade["grade"].toString(); + grade_number.appendChild(grade_number_italic); + } else { + // Text + grade_text.innerText = grade["date"] + " - " + grade["title"]; + // Number + grade_number.innerText = grade["grade"].toString(); + } + + grade_node_div.appendChild(grade_text); + grade_node_div.appendChild(grade_number); + + grade_node.appendChild(grade_node_div); + + + // Count the grade only if it's not temporary or explicitly enabled + if (!grade["temporary"] || !checkbox_state) { + grade_sum += grade["grade"]; + grade_tot += 1; + } + + subject_body_root.appendChild(grade_node); + + }); + + let grade_average = (grade_tot === 0) ? "N/A" : (Math.round(((grade_sum / grade_tot) + Number.EPSILON) * 100) / 100); + let subject_header_average = document.createElement("div"); + subject_header_average.className = "collapsible-header-right"; + subject_header_average.innerText = grade_average.toString(); + + subject_header.appendChild(subject_header_text); + subject_header.appendChild(subject_header_average); + + subject_body.append(subject_body_root); + + subject_entry.append(subject_header); + subject_entry.append(subject_body); + + root_element.append(subject_entry); + }); + + $("#grades-collapsible").append(root_element); + + refreshClickHandlers(); +} + +function clearGrades() { + const table = document.getElementById("grades-collapsible"); + while (table.firstChild) { + table.removeChild(table.firstChild); + } +} + +function refreshGrades(force) { + clearGrades(); + loadGrades(force); +} + +function refreshClickHandlers() { + $("#grades-collapsible").find(".collection-item.grade-node").click(function () { + let grade_obj = grades[parseInt(this.dataset["index"])]; + document.getElementById("grade-header").innerText = grade_obj["predmet"] + ": " + grade_obj["ocena"]; + document.getElementById("grade-date").innerText = grade_obj["datum"]; + document.getElementById("grade-title").innerText = grade_obj["naslov"]; + document.getElementById("grade-type").innerText = "Type: " + grade_obj["vrsta"]; + + let term_element = document.getElementById("grade-term"); + if (grade_obj["rok"] !== "") { + term_element.innerText = "Term: " + grade_obj["rok"]; + term_element.style["display"] = ""; + } else { + term_element.style["display"] = "none"; + } + + document.getElementById("grade-teacher").innerText = "Teacher: " + grade_obj["profesor"]; + + let temporary_object = document.getElementById("grade-temporary"); + let temporary_object_root = document.getElementById("grade-temporary-root"); + if (grade_obj["zacasna"]) { + temporary_object.innerText = "(zacasna)"; + temporary_object_root.style["display"] = ""; + } else { + temporary_object_root.style["display"] = "none"; + } + + const modal = document.querySelectorAll('.side-modal')[0]; + M.Sidenav.getInstance(modal).open(); + }); +} + +// Initialization code +document.addEventListener("DOMContentLoaded", async () => { + checkLogin(); + // await loadGrades(); + + let coll_elem = document.querySelectorAll('.collapsible'); + let coll_instance = M.Collapsible.init(coll_elem, {}); + + // Setup refresh handler + $("#refresh-icon").click(function () { + refreshGrades(true); + }); + + // Setup checkbox handler + $("#permanent-grades-checkbox").change(function () { + checkbox_state = this.checked; + refreshGrades(false); + }); + + let elems = document.querySelectorAll('.modal'); + let instances = M.Modal.init(elems, {}); + + // Setup side menu + const menus = document.querySelectorAll('.side-menu'); + M.Sidenav.init(menus, { edge: 'right', draggable: true }); + + // Setup side modal + const modals = document.querySelectorAll('.side-modal'); + M.Sidenav.init(modals, { edge: 'left', draggable: false }); +}); diff --git a/js/messaging.js b/js/messaging.js index 44e027a..42bbd0b 100644 --- a/js/messaging.js +++ b/js/messaging.js @@ -149,8 +149,7 @@ async function deleteMsg(id) { let promises_to_run = [ localforage.getItem("username").then((value) => { username = value; - }), - localforage.getItem("password").then((value) => { + }), localforage.getItem("password").then((value) => { password = value; }), ]; @@ -194,6 +193,7 @@ function displayData() { var msg_list = document.getElementById("msg_list"); msg_list.innerHTML = ""; messages.forEach(element => { + if(element["zadeva"].substr(0, 14) != "beziapp-ctlmsg") msg_list.innerHTML += '<div class="col s12 m6" id="msg_box-'+ filterXSS(element["id"])+ '"><div class="card blue-grey darken-1"><div class="card-content white-text"><span class="card-title">'+ diff --git a/pages/about.html b/pages/about.html index 8b24efc..0e5f61f 100644 --- a/pages/about.html +++ b/pages/about.html @@ -54,6 +54,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> diff --git a/pages/absences.html b/pages/absences.html index 06cab7a..765f684 100644 --- a/pages/absences.html +++ b/pages/absences.html @@ -56,6 +56,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> diff --git a/pages/grades.html b/pages/grades.html index 6e646be..e82ed89 100644 --- a/pages/grades.html +++ b/pages/grades.html @@ -56,6 +56,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> diff --git a/pages/gradings.html b/pages/gradings.html index f2239dc..9534d3a 100644 --- a/pages/gradings.html +++ b/pages/gradings.html @@ -63,6 +63,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> @@ -96,8 +97,38 @@ <div class="container"> <br> <div id="calendar"></div> - </div> + </div> +<!-- + <div class="container"> + <div class="row"> + <div class="col s12"> + <h4>Add a personal event</h4> + <div class="row"> + <div class="input-field col s5"> + <input required="required" type="text" class="datepicker" id="datepicker-add"> + <label for="datepicker-add">Date</label> + </div> + <div class="input-field col s5"> + <input required="required" id="event_name" type="text" class="validate"> + <label for="event_name">Name</label> + </div> + <div class="input-field col s2"> + <button id="event_btn" class="btn waves-effect waves-light" type="text" class="validate"> + <i class="material-icons">event_available</i> + </button> + </div> + </div> + <div class="row"> + <div class="input-field col s12"> + <textarea required="required" id="event_description" class="materialize-textarea"></textarea> + <label for="event_description">Description</label> + </div> + </div> + </div> + </div> + </div> +--> </body> </html> diff --git a/pages/meals.html b/pages/meals.html new file mode 100644 index 0000000..62dfe31 --- /dev/null +++ b/pages/meals.html @@ -0,0 +1,143 @@ +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <meta name="google" content="notranslate"> + <title>Meals « BežiApp</title> + + <!-- Materialize --> + <link type="text/css" href="/css/materialize.min.css" rel="stylesheet"> + <link href="/css/materialicons.css" rel="stylesheet"> + <script type="text/javascript" src="/js/lib/materialize.min.js"></script> + + <script src="/js/lib/jquery.min.js"></script> + <script type="text/javascript" src="/js/lib/localforage.min.js"></script> + + <link type="text/css" href="/css/styles.css" rel="stylesheet"> + <script type="text/javascript" src="/js/meals.js"></script> + + <link rel="manifest" href="/manifest.json"> + <script src="/js/app.js"></script> + <link rel="shortcut icon" type="image/png" href="/favicon.png" /> + + <!-- iOS support --> + <link rel="apple-touch-icon" href="/img/icons/icon_96.png"> + <link rel="apple-touch-icon" href="/img/icons/icon_512.png"> + <meta name="apple-mobile-web-app-status-bar" content="#004d32"> +</head> + +<body> + <nav class="z-depth-0" id="navigation-main"> + <div class="nav-wrapper container"> + <b>Beži</b><span>App</span> » Meals + <span class="right white-text"> + <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i> + </span> + <span class="right white-text" id="refresh-icon"> + <a href="#"><i class="material-icons">refresh</i></a> + </span> + </div> + <div id="loading-bar" class="progress hidden"> + <div class="indeterminate"></div> + </div> + </nav> + + <ul id="side-menu" class="sidenav side-menu"> + <li> + <a class="subheader"> + <h4><b>Beži</b>App</h4> + </a> + </li> + <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i>Timetable</a></li> + <li><a href="/pages/gradings.html" class="waves-effect"><i class="material-icons">event</i>Gradings</a></li> + <li><a href="/pages/grades.html" class="waves-effect"><i class="material-icons">receipt</i>Grades</a></li> + <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> + <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> + <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> + <li> + <div class="divider"></div> + </li> + <li><a href="/pages/about.html" class="waves-effect"> + <i class="material-icons">info</i>About</a> + </li> + <li> + <div class="divider"></div> + </li> + <li><a href="/logout.html" class="waves-effect"> + <i class="material-icons">exit_to_app</i>Log out</a> + </li> + </ul> + + <ul id="grade-info" class="sidenav side-modal"> + <br> + <li><a class="header"> + <h5 id="meal-header"></h5> + </a></li> + <br> + <li id="meal-subheader-root"><a class="subheader"> + <h6 id="meal-subheader"></h6> + </a></li> + <li><a class="subheader" id="meal-date"> + </a></li> + <li> + <div class="divider"></div> + </li> + <li><a class="waves-effect" id="meal-option1"></a></li> + <li><a class="waves-effect" id="meal-option2"></a></li> + <li><a class="waves-effect" id="meal-option3"></a></li> + <li><a class="waves-effect" id="meal-option4"></a></li> + <li><a class="waves-effect" id="meal-option5"></a></li> + <li><a class="waves-effect" id="meal-option6"></a></li> + <li><a class="waves-effect" id="meal-option7"></a></li> + </ul> + + <br> + <div class="container login" style="display:none;"> + <h4>Login to Lopolis</h4> + <p> + You have a different username and password combination used for applying and opting out from menus. In order to use this feature, you + have to log in with your Lopolis account. + </p> + <div class="row"> + <div class="col s12"> + <div class="row"> + <div class="input-field col s12"> + <input id="meals_username" type="text" value="" required="required" name="meals_password" class="validate"> + <label for="meals_username">Lopolis username</label> + </div> + </div> + <div class="row"> + <div class="input-field col s12"> + <input id="meals_password" type="password" value="" required="required" name="meals_password" class="validate"> + <label for="meals_password">Lopolis password</label> + </div> + </div> + <div class="row"> + <div class="input-field col s12"> + <button id="meals_login" type="button" class="waves-effect waves-light btn"> + Log in to Lopolis + <i class="material-icons right">arrow_right_alt</i> + </button> + </div> + </div> + </div> + </div> + </div> + <small style="position:absolute;top:1;left:1;color:#FFF"><small>Meals section is powered by https://github.com/rstular/lopolis-api, licensed under MIT.</small></small> + <div class="meals-container container" style="display: block"> + <h4>Meals + <button id="meals_login" type="button" class="waves-effect waves-light btn" style="float: right"> + Log out from Lopolis + <i class="material-icons right">exit_to_app</i> + </button> + </h4> + <p> + Not done yet => not working. + </p> + </div> +</body> + +</html> diff --git a/pages/messaging.html b/pages/messaging.html index e269d94..a012354 100644 --- a/pages/messaging.html +++ b/pages/messaging.html @@ -54,6 +54,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> diff --git a/pages/teachers.html b/pages/teachers.html index 83a26f4..5f7fa8f 100644 --- a/pages/teachers.html +++ b/pages/teachers.html @@ -56,6 +56,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> diff --git a/pages/timetable.html b/pages/timetable.html index 7c822a9..19b5fa4 100644 --- a/pages/timetable.html +++ b/pages/timetable.html @@ -65,6 +65,7 @@ <li><a href="/pages/teachers.html" class="waves-effect"><i class="material-icons">supervisor_account</i>Teachers</a></li> <li><a href="/pages/absences.html" class="waves-effect"><i class="material-icons">query_builder</i>Absences</a></li> <li><a href="/pages/messaging.html" class="waves-effect"><i class="material-icons">message</i>Messaging</a></li> + <li><a href="/pages/meals.html" class="waves-effect"><i class="material-icons">fastfood</i>Meals</a></li> <li> <div class="divider"></div> </li> |