From 7820ea23532aa6ffa3611d8379681aa44a3f3864 Mon Sep 17 00:00:00 2001 From: sijanec Date: Wed, 20 May 2020 14:12:06 +0200 Subject: # --- dist/js/timetable.js | 302 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 302 insertions(+) create mode 100644 dist/js/timetable.js (limited to 'dist/js/timetable.js') diff --git a/dist/js/timetable.js b/dist/js/timetable.js new file mode 100644 index 0000000..290b748 --- /dev/null +++ b/dist/js/timetable.js @@ -0,0 +1,302 @@ +// const API_ENDPOINT = "https://gimb.tk/test.php"; // deprecated +// const API_ENDPOINT = "http://localhost:5000/test.php"; + +var calendar_obj = null; + +function checkLogin() { + localforage.getItem("logged_in").then((value) => { + // This code runs once the value has been loaded + // from the offline store. + if (value !== true) { + window.location.replace("/index.html"); + } + }).catch((err) => { + // This code runs if there were any errors + console.log(err); + }); +} + +// Set loading bar visibility +function setLoading(state) { + if (state) { + $("#loading-bar").removeClass("hidden"); + } else { + $("#loading-bar").addClass("hidden"); + } +} + +// ----GET COLOR FROM STRING-------- + +/** + * + * Calculate hash code from a string + * @param {string} input_string String to convert to hash + * @returns {string} calculated hash code + * + */ +function hashCode(str) { // java String#hashCode + var hash = 0; + for (var i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + return hash; +} + +/** + * + * Convert last 3 bytes of an integer to RGB color + * @param {integer} input_integer Integer that will be converted to RGB color + * @returns {string} Hex color code + * + */ +function intToRGB(i) { + var c = (i & 0x00FFFFFF) + .toString(16) + .toUpperCase(); + + return "00000".substring(0, 6 - c.length) + c; +} + +// http://www.w3.org/TR/AERT#color-contrast +/** + * + * Calculate the matching foreground color for a given background (improves UX) + * @param {string} background_color Background color of the object + * @returns {string} Forground color that will match background color + */ +function getForegroundFromBackground(background_color) { + let color_hex = background_color.replace("#", ""); + let rgb = [ + parseInt(color_hex.substring(0, 2), 16), + parseInt(color_hex.substring(2, 4), 16), + parseInt(color_hex.substring(4, 6), 16) + ]; + let o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000); + if (o > 180) { + return "#000000"; + } else { + return "#ffffff"; + } +} + +/** + * + * Convert a given string to hex color + * @param {string} input_string Input string + * @returns {string} Hex RGB color + */ +function getHexColorFromString(str) { + return "#" + intToRGB(hashCode(str)); +} +// -------------------------------------------------- + +// ---------DATE FUNCTION------------- +function getDateString(date) { + let year_str = date.getFullYear(); + let month_str = date.getMonth() + 1 + month_str = month_str.toString().padStart(2, "0"); + let day_str = date.getDate(); + day_str = day_str.toString().padStart(2, "0"); + + let date_string = year_str + "-" + month_str + "-" + day_str; + return date_string; +} + +function getLastMonday(date_object) { + if (date_object.getDay() === 0) { + date_object.setDate(date_object.getDate() - 6); + } else { + date_object.setDate(date_object.getDate() - date_object.getDay() + 1); + } + return date_object; +} +// ---------------------------------- + +async function loadTimetable(date_object, force_refresh = false) { + setLoading(true); + var timetable, username, password; + let date_monday = getLastMonday(date_object); + let date_string = getDateString(date_monday); + let promises_to_run = [ + localforage.getItem("username").then((value) => { + username = value; + }), + localforage.getItem("password").then((value) => { + password = value; + }), + localforage.getItem("timetable").then((value) => { + timetable = value; + }) + ]; + await Promise.all(promises_to_run); + if (force_refresh || timetable == null || !(date_string in timetable)) { + try { + let gsecInstance = new gsec(); + await gsecInstance.login(username, password); + gsecInstance.fetchTimetable(date_object).then( (value) => { + containsPeriods = false; + for(var iteration = 0; iteration <= 6; iteration++) { + if(Object.keys(value[iteration]).length > 0) { + containsPeriods = true; + // break; + } + } + if(!containsPeriods) { + UIAlert( D("noPeriods") ); + setLoading(false); + } else { + if (timetable === null) { + timetable = {}; + } + timetable[date_string] = value; + localforage.setItem("timetable", timetable).then(() => { + displayTimetable(value, date_monday); + setLoading(false); + }); + } + }).catch( (err) => { + gsecErrorHandlerUI(err); + setLoading(false); + }); + } catch (err) { + gsecErrorHandlerUI(err); + setLoading(false); + } + } else { + displayTimetable(timetable[date_string], date_monday); + setLoading(false); + } +} + +function getLessonTimes(lesson_number) { + const lessonTimes = [ + ["07:10:00", "07:55:00"], + ["08:00:00", "08:45:00"], + ["08:50:00", "09:35:00"], + ["09:40:00", "10:25:00"], + ["10:55:00", "11:40:00"], + ["11:45:00", "12:30:00"], + ["12:35:00", "13:20:00"], + ["13:25:00", "14:10:00"], + ["14:15:00", "15:00:00"], + ["15:05:00", "15:50:00"], + ["15:55:00", "16:40:00"], + ["16:45:00", "17:30:00"], + ["17:35:00", "18:20:00"], + ["18:25:00", "19:10:00"] + ]; + return lessonTimes[lesson_number]; +} + +function displayTimetable(weekly_timetable, date_object) { + let transformed_timetable = []; + + let num_days = Object.keys(weekly_timetable).length; + + for (let i = 0; i < num_days; i++) { + + // Get date string (required by callendar) + let date_string = getDateString(date_object); + // Go to next day (for next loop iteration) + date_object.setDate(date_object.getDate() + 1); + + let daily_timetable = weekly_timetable[i.toString()]; + + Object.keys(daily_timetable).forEach((lesson_number) => { + let lesson = daily_timetable[lesson_number]; + + let lesson_times = getLessonTimes(parseInt(lesson_number)); + let bg_color = getHexColorFromString(lesson["acronym"]); + let fg_color = getForegroundFromBackground(bg_color); + + let lesson_metadata = { + subject: lesson["subject"], + class: lesson["class"], + teacher: lesson["teacher"], + classroom: lesson["place"], + start: lesson_times[0].substring(0, 5), + end: lesson_times[1].substring(0, 5) + } + + let lesson_object = { + id: JSON.stringify(lesson_metadata), + title: lesson["acronym"], + start: date_string + " " + lesson_times[0], + end: date_string + " " + lesson_times[1], + backgroundColor: bg_color, + textColor: fg_color + }; + + transformed_timetable.push(lesson_object); + + }); + + } + // Update calendar + calendar_obj.removeAllEvents(); + calendar_obj.addEventSource(transformed_timetable); +} + +function eventClickHandler(eventClickInfo) { + let lesson_metadata = JSON.parse(eventClickInfo.event.id); + + let lesson_subject = lesson_metadata["subject"]; + let lesson_teacher = lesson_metadata["teacher"]; + let lesson_classroom = lesson_metadata["classroom"]; + let lesson_class = lesson_metadata["class"]; + let lesson_duration = lesson_metadata["start"] + " - " + lesson_metadata["end"]; + + $("#lesson-subject").text(lesson_subject); + $("#lesson-teacher").text(lesson_teacher); + $("#lesson-class").text(lesson_class); + $("#lesson-classroom").text(lesson_classroom); + $("#lesson-duration").text(lesson_duration); + + const modal = document.querySelectorAll(".side-modal")[0]; + M.Sidenav.getInstance(modal).open(); +} + + +document.addEventListener("DOMContentLoaded", () => { + checkLogin(); + + let calendarEl = document.getElementById("calendar"); + calendar_obj = new FullCalendar.Calendar(calendarEl, { + plugins: ["timeGrid"], + eventClick: eventClickHandler, + + defaultView: "timeGridWeek", + contentHeight: "auto", + height: "auto", + width: "auto", + timeGridEventMinHeight: 35, + + nowIndicator: true, + firstDay: 1, + weekends: false, + + minTime: "07:10:00", + maxTime: "19:10:00" + }); + calendar_obj.render(); + + loadTimetable(new Date()); + + // Handlers for next/prev/today buttons + $(".fc-today-button, .fc-prev-button, .fc-next-button").click(() => { + loadTimetable(calendar_obj.getDate()); + }); + + // Setup refresh handler + $("#refresh-icon").click(() => { + loadTimetable(calendar_obj.getDate(), true); + }); + + // 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 }); +}); -- cgit v1.2.3