diff --git a/src/core/static/js/ajax.js b/src/core/static/js/ajax.js new file mode 100644 index 0000000..e386350 --- /dev/null +++ b/src/core/static/js/ajax.js @@ -0,0 +1,36 @@ +const doAjax = (actionPath, data, action) => { + let xhttp = new XMLHttpRequest(); + + xhttp.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + if (this.responseText != null) { // this.responseXML if getting XML data + postAjaxController(JSON.parse(this.responseText), action); + } else { + let type = "danger" + let msg = "No content returned. Check the target path."; + data = '{"message": { "type": "' + type + '", "text": "' + text + '" } }' + postAjaxController(JSON.parse(data)); + } + } + }; + + xhttp.open("POST", actionPath, true); + xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + // Force return to be JSON NOTE: Use application/xml to force XML + xhttp.overrideMimeType('application/json'); + xhttp.send(data); +} + +const formatURL = (basePath) => { + url = window.location.href; + if ( url.endsWith('/') ) + return url + '/' + basePath; + else + return url + basePath; +} + +const fetchData = async (url) => { + let response = null; + response = await fetch(url); + return await response.json(); +} diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js new file mode 100644 index 0000000..902ad7a --- /dev/null +++ b/src/core/static/js/events.js @@ -0,0 +1,3 @@ +window.onload = (eve) => { + console.log("Loaded..."); +} diff --git a/src/core/static/js/post-ajax.js b/src/core/static/js/post-ajax.js new file mode 100644 index 0000000..8eab137 --- /dev/null +++ b/src/core/static/js/post-ajax.js @@ -0,0 +1,11 @@ +const postAjaxController = (data, action) => { + if (data.message) { + message = data.message + + if (action == "someAction" && message.type.includes("success")) { + console.log("Success!"); + } + + displayMessage(message.text, message.type, 0); + } +} diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js new file mode 100644 index 0000000..c23664e --- /dev/null +++ b/src/core/static/js/ui-logic.js @@ -0,0 +1,34 @@ +// Message handler +const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => { + let alertField = document.getElementById(msgWindow); + let divElm = document.createElement("DIV"); + let btnElm = document.createElement("BUTTON"); + let spnElm = document.createElement("SPAN"); + let textElm = document.createTextNode(message); + + divElm.setAttribute("class", "alert alert-" + type); + divElm.setAttribute("role", "alert"); + divElm.appendChild(textElm); + btnElm.type = "button"; + textElm = document.createTextNode("X"); + btnElm.setAttribute("class", "close"); + btnElm.setAttribute("data-dismiss", "alert"); + btnElm.setAttribute("aria-label", "close"); + spnElm.setAttribute("aria-hidden", "true"); + spnElm.appendChild(textElm); + btnElm.appendChild(spnElm); + divElm.appendChild(btnElm); + alertField.appendChild(divElm); + + if (timeout > 0) { + setTimeout(function () { + clearChildNodes(alertField); + }, timeout * 1000); + } +} + +const clearChildNodes = (parent) => { + while (parent.firstChild) { + parent.removeChild(parent.firstChild); + } +} diff --git a/src/core/templates/index.html b/src/core/templates/index.html index 26f191b..f9ab6f9 100644 --- a/src/core/templates/index.html +++ b/src/core/templates/index.html @@ -12,5 +12,8 @@ {% endblock content %} {% block scripts %} - + + + + {% endblock scripts %}