diff options
-rw-r--r-- | js/messaging.js | 4 | ||||
-rw-r--r-- | js/messaging.js.save | 396 |
2 files changed, 398 insertions, 2 deletions
diff --git a/js/messaging.js b/js/messaging.js index fb764a8..4ea8502 100644 --- a/js/messaging.js +++ b/js/messaging.js @@ -228,7 +228,7 @@ async function deleteMsg(id) { M.toast({ html: "Unable to delete the message, Request failed!" }); setLoading(false); } else { - document.getElementById("msg-box-" + id).remove(); + document.getElementById("msg_box-" + id).remove(); setLoading(false); } }, @@ -243,7 +243,7 @@ async function deleteMsg(id) { } function displayMessage(id, data) { - document.getElementById("msg-body-" + id).innerHTML = filterXSS(data["telo"]); + document.getElementById("msg_body-" + id).innerHTML = filterXSS(data["telo"]); } // Function for displaying data diff --git a/js/messaging.js.save b/js/messaging.js.save new file mode 100644 index 0000000..fb764a8 --- /dev/null +++ b/js/messaging.js.save @@ -0,0 +1,396 @@ +const API_ENDPOINT = "https://gimb.tk/test.php"; +const DIRECTORY_URL = "/directory.json"; +// const API_ENDPOINT = "http://localhost:5000/test.php"; + +// "Global" object for name directory +var directory = null; + +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); + }); +} + +// -----------HTML HELPERS----------- +function htmlEncode(value) { + // Create a in-memory element, set its inner text (which is automatically encoded) + // Then grab the encoded contents back out. The element never exists on the DOM. + return $("<textarea/>").text(value).html(); +} + +function htmlDecode(value) { + return $("<textarea/>").html(value).text(); +} +// --------------------------------- + +// Try to fetch name:id directory +function loadDirectory() { + $.ajax({ + url: DIRECTORY_URL, + crossDomain: true, + + dataType: "json", + cache: false, + type: "GET", + + success: (data) => { + // If we were able to retrieve it, update the saved directory + localforage.setItem("directory", data); + directory = data; + // Populate autocomplete + populateAutocomplete(); + }, + + error: () => { + // Otherwise, try to retrieve stored directory + localforage.getItem("directory").then((stored_directory) => { + if (stored_directory === null) { + // If unable, set directory to null (so other functions know that we don't have it) + M.toast({ html: "Name directory not set, sending unavailable" }); + directory = null; + // Disable send button + document.getElementById("msg-send").disabled = true; + } else { + directory = stored_directory; + // Populate autocomplete + populateAutocomplete(); + } + }); + } + }); +} + +function populateAutocomplete() { + let elems = document.querySelectorAll('.autocomplete-fullname'); + + // vse editam v nanotu + let autocomplete_entries = directory; + for (let variableKey in autocomplete_entries) { + autocomplete_entries[variableKey] = null; + } + + M.Autocomplete.init(elems, { + data: autocomplete_entries, + onAutocomplete: validateName, + minLength: 0 + }); +} + +// Function to toggle loading bar +function setLoading(state) { + if (state) { + $("#loading-bar").removeClass("hidden"); + } else { + $("#loading-bar").addClass("hidden"); + } +} + +// Function, responsible for fetching and displaying data +async function loadMessages(force_refresh = true, katera = 0) { + setLoading(true); + // Load required data + let promises_to_run = [ + localforage.getItem("username").then((value) => { + username = value; + }), + localforage.getItem("password").then((value) => { + password = value; + }), + localforage.getItem("messages").then((value) => { + messages = value; + }) + ]; + + Promise.all(promises_to_run).then(() => { + + if (messages === null || force_refresh) { + $.ajax({ + url: API_ENDPOINT, + crossDomain: true, + data: { + "u": username, + "p": password, + "m": "fetchsporocilaseznam", + "a": katera // Message type, see API doc for details + }, + dataType: "json", + cache: false, + type: "GET", + + success: (data) => { + // If data is null, the request failed + if (data === null) { + M.toast({ html: "Request failed!" }); + setLoading(false); + } else { + // Save messages & populate view + // console.log(data); // debug + localforage.setItem("messages", data).then((value) => { + messages = value; + displayData(); + setLoading(false); + }); + } + }, + + error: () => { + M.toast({ html: "Error fetching messages!" }); + setLoading(false); + } + + }) + } else { + displayData(); + setLoading(false); + } + }); +} + +async function loadMsg(id) { + setLoading(true); + // Load required data + let promises_to_run = [ + localforage.getItem("username").then((value) => { + username = value; + }), + localforage.getItem("password").then((value) => { + password = value; + }), + ]; + + Promise.all(promises_to_run).then(() => { + $.ajax({ + url: API_ENDPOINT, + crossDomain: true, + data: { + "u": username, + "p": password, + "m": "fetchsporocilo", + "a": id + }, + dataType: "json", + cache: false, + type: "GET", + success: (data) => { + // If data is null, the request failed + if (data === null) { + M.toast({ html: "Unable to receive the message, Request failed!" }); + setLoading(false); + } else { + displayMessage(id, data); + setLoading(false); + } + }, + + error: () => { + M.toast({ html: "Error fetching message, No Internet connnection?" }); + setLoading(false); + } + + }) + }); +} + + +async function deleteMsg(id) { + setLoading(true); + // Load required data + let promises_to_run = [ + localforage.getItem("username").then((value) => { + username = value; + }), localforage.getItem("password").then((value) => { + password = value; + }), + ]; + Promise.all(promises_to_run).then(() => { + $.ajax({ + url: API_ENDPOINT, + crossDomain: true, + data: { + "u": username, + "p": password, + "m": "izbrisisporocilo", + "a": id + }, + dataType: "json", + cache: false, + type: "GET", + success: (data) => { + // If data is null, the request failed + if (data === null) { + M.toast({ html: "Unable to delete the message, Request failed!" }); + setLoading(false); + } else { + document.getElementById("msg-box-" + id).remove(); + setLoading(false); + } + }, + + error: () => { + M.toast({ html: "Unable to delete the message, No Internet connnection?" }); + setLoading(false); + } + + }) + }); +} + +function displayMessage(id, data) { + document.getElementById("msg-body-" + id).innerHTML = filterXSS(data["telo"]); +} + +// Function for displaying data +function displayData() { + let 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">' + + filterXSS(element["zadeva"]) + + '</span><p id="msg_body-' + + filterXSS(element["id"]) + + '"><button class="btn waves-effect waves-light" onclick=loadMsg("' + + filterXSS(element["id"]) + + '"); type="submit">Load message body<i class="material-icons right">system_update</i></button></p></div><div class="card-action"><a href=javascript:deleteMsg("' + + filterXSS(element["id"]) + + '");><i class="material-icons">delete</i></a><a href=\'javascript:document.getElementById("full_name").value="' + + filterXSS(element["posiljatelj"]) + + '";document.getElementById("msg_subject").value="Re: ' + + filterXSS(element["zadeva"]) + + '";M.updateTextFields();document.getElementById("navigation-main").scrollIntoView();\'><i class="material-icons">reply</i></a>' + + filterXSS(element["posiljatelj"]) + " » " + filterXSS(element["datum"]["dan"]) + ". " + filterXSS(element["datum"]["mesec"]) + ". " + filterXSS(element["datum"]["leto"]) + " at " + + filterXSS(element["cas"]["ura"]) + ":" + filterXSS(element["cas"]["minuta"]) + + '</div></div></div>'; + }); +} + +async function sendMessage(recipient_number, subject, body) { + setLoading(true); + let promises_to_run = [ + localforage.getItem("username").then((value) => { + username = value; + }), + localforage.getItem("password").then((value) => { + password = value; + }), + ]; + Promise.all(promises_to_run).then(() => { + $.ajax({ + url: API_ENDPOINT, + crossDomain: true, + data: { + "u": username, + "p": password, + "m": "posljisporocilo", + "a": recipient_number, + "b": subject, + "c": body + }, + + dataType: "json", + cache: false, + + type: "POST", + success: () => { + // we CAN'T know wether the mesgg was delievered + M.toast({ html: "Message was probably sent, check the Sent folder to be sure!" }); + setLoading(false); + }, + error: () => { + M.toast({ html: "Error sending message, no Internet connnection?" }); + setLoading(false); + } + }) + }); +} + +function validateName() { + if (directory !== null) { + + if ($("#full-name").val() in directory) { + $("#full-name").addClass("valid"); + $("#full-name").removeClass("invalid"); + document.getElementById("msg-send").disabled = false; + } else { + $("#full-name").addClass("invalid"); + $("#full-name").removeClass("valid"); + document.getElementById("msg-send").disabled = true; + } + + } +} + +// Setup event listeners for buttons +function setupEventListeners() { + // Button to add a photo + $("#msg-add-photo").click(() => { + let input = document.createElement("input"); + input.type = "file"; + input.onchange = (e) => { + // getting a hold of the file reference + let file = e.target.files[0]; + // setting up the reader + let reader = new FileReader(); + reader.readAsDataURL(file); // this is reading as data url + // here we tell the reader what to do when it's done reading... + reader.onload = readerEvent => { + additionalstufftoaddtomessage += '<br><img src="' + readerEvent.target.result + '" />'; // this is the content! + M.toast({ html: "Image added as an attachment." }); + } + } + input.click(); + }); + + // Verify recipient when input loses focus + $("#full-name").on("blur", validateName); + + // Button to send message + $("#msg-send").click(() => { + localforage.getItem("directory").then(function (value) { + sendMessage(value[document.getElementById("full-name").value], document.getElementById("msg-subject").value, + htmlEncode(document.getElementById("msg-body").value + additionalstufftoaddtomessage)); + document.getElementById("msg-body").value = ""; + document.getElementById("full-name").value = ""; + document.getElementById("msg-subject").value = ""; + additionalstufftoaddtomessage = ""; + }).catch(function (err) { + M.toast({ html: "Unable to read directory of people. Message could not be sent." }); + console.log(err); + }); + }); +} + +function getUrlParameter(sParam) { + const url_params = new URLSearchParams(window.location.search); + const found_param = url_params.get(sParam); + return found_param +} + +var additionalstufftoaddtomessage = ""; +document.addEventListener("DOMContentLoaded", () => { + + checkLogin(); + loadDirectory(); + setupEventListeners(); + + var receivedmessages = null; + loadMessages(true, 0); + + document.getElementById("full-name").value = getUrlParameter("m"); + M.updateTextFields(); + validateName(); + + // Setup side menu + const menus = document.querySelectorAll(".side-menu"); + M.Sidenav.init(menus, { edge: "right", draggable: true }); + +}); |