diff --git a/tetawebapp/static/scripts/tetawebapp.js b/tetawebapp/static/scripts/tetawebapp.js new file mode 100644 index 0000000..ff1bc63 --- /dev/null +++ b/tetawebapp/static/scripts/tetawebapp.js @@ -0,0 +1,144 @@ +var red = "#FF0000"; +var green = "#00FF00"; +var light_red = "#FCD5DC"; +var light_green = "#D5FCD8"; +var base_bg = "#FFFFFF"; +var base_border = "#888888"; + +/* ************************************************************************************** + * GLOBAL + * **************************************************************************************/ + +// Cookies +function setcookie(cname, cvalue, exdays) { + // Set cookie + var d = new Date(); + d.setTime(d.getTime() + (exdays*24*60*60*1000)); + var expires = "expires="+ d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; +} + +function getcookie(cname) { + // Get cookie by name + var value = "; " + document.cookie; + var parts = value.split("; " + cname + "="); + if (parts.length == 2) return parts.pop().split(";").shift(); +} + +// Eye candies +function invalid_input(obj) { + // Invalid input makes obj borders and background to glow red for 2 seconds + // Border color will stay red until a valid input is sent + obj.style.backgroundColor = light_red; + obj.style.borderColor = red; + setTimeout( function() { + obj.style.backgroundColor = base_bg; + } + , 2000); +} + +function valid_input(obj) { + // Valid input makes obj background to glow green for 2 seconds + // If obj borders were red, they get they normal color back + obj.style.backgroundColor = light_green; + obj.style.borderColor = base_border; + setTimeout( function() { + obj.style.backgroundColor = base_bg; + } + , 2000); +} + +/* ************************************************************************************** + * AJAX + * **************************************************************************************/ + +function get_html_from_ajax(obj, url) { + // Get HTML content from AJAX request from url argument + // HTML content is then put as innerHTML to obj + var xhttp = new XMLHttpRequest(); + xhttp.onerror = function(){ + obj.innerHTML = "Erreur lors de la récuperation du contenu (1)"; + }; + + xhttp.onload = function(){ + if (xhttp.status != 200) { + obj.innerHTML = "Erreur lors de la récuperation du contenu (2)"; + } + }; + + xhttp.onreadystatechange = function() { + if (xhttp.readyState == 4 && xhttp.status == 200) { + var response = xhttp.responseText; + obj.innerHTML = response; + } + }; + xhttp.open('POST', url, true); + xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhttp.send(); +} + +function set_value_from_ajax(obj, url, err_code) { + // Send value from obj.value via AJAX request to url argument + // obj.value is passed to URL in a REST sheme like / + // If err_code response is received, then a server side + // error has occured and input is invalidated. + url = url + '/' + obj.value; + var xhttp = new XMLHttpRequest(); + xhttp.onerror = function(){ + invalid_input(obj); + }; + + xhttp.onload = function(){ + if (xhttp.status != 200) { + invalid_input(obj); + } + }; + + xhttp.onreadystatechange = function() { + if (xhttp.readyState == 4 && xhttp.status == 200) { + var response = xhttp.responseText; + if (response == err_code) { + invalid_input(obj); + return; + } + valid_input(obj); + return; + } + }; + xhttp.open('POST', url, true); + xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhttp.send(); +} + +function get_value_from_ajax(obj, url, err_code) { + // Get value from AJAX request + // The returned value is then set to obj.value. + // If err_code response is received, then a server side + // error has occured and input is invalidated + var xhttp = new XMLHttpRequest(); + xhttp.onerror = function(){ + invalid_input(obj); + }; + + xhttp.onload = function(){ + if (xhttp.status != 200) { + invalid_input(obj); + } + }; + + xhttp.onreadystatechange = function() { + if (xhttp.readyState == 4 && xhttp.status == 200) { + var response = xhttp.responseText; + if (response == err_code) { + invalid_input(obj); + return; + } + obj.value = response; + valid_input(obj); + return; + } + }; + xhttp.open('POST', url, true); + xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhttp.send(); +} diff --git a/tetawebapp/templates/ajax.html b/tetawebapp/templates/ajax.html new file mode 100644 index 0000000..4f5c27d --- /dev/null +++ b/tetawebapp/templates/ajax.html @@ -0,0 +1,25 @@ +{% extends "index.html" %} + {% block main %} +
+

Get HTML response from AJAX

+

Click the refresh button to get the HTML response.

+

The response may randomly be an error response.

+ +
+
+
+
+

Set value via AJAX

+

Send value to the application.

+

If value is empty or is "We Make Porn" (case sensitive), an error is raised.

+ + +
+
+

Get value from AJAX

+

Get a random value from the application.

+

Value may randomly be unavailable raising an error.

+ + +
+ {% endblock %} diff --git a/tetawebapp/templates/ajax_html.html b/tetawebapp/templates/ajax_html.html new file mode 100644 index 0000000..2829abc --- /dev/null +++ b/tetawebapp/templates/ajax_html.html @@ -0,0 +1,24 @@ +

This is the title

+dummy pic +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore +

+

This link will lead to an error page

+

+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia desers unt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. +

diff --git a/tetawebapp/templates/todo.html b/tetawebapp/templates/todo.html index b432021..e66b8ff 100644 --- a/tetawebapp/templates/todo.html +++ b/tetawebapp/templates/todo.html @@ -6,7 +6,7 @@
  • Basic menu management
  • Installation wizard
  • Back office for basic content management
  • -
  • Basic Ajax support
  • +
  • Basic Ajax support
  • Session management
  • Basic documentation
  • Horizontal navbar
  • diff --git a/tetawebapp/tetawebapp.py b/tetawebapp/tetawebapp.py index 2c6978a..9214c7b 100755 --- a/tetawebapp/tetawebapp.py +++ b/tetawebapp/tetawebapp.py @@ -42,6 +42,7 @@ def get_menu(page): ['Articles', '/articles', 0], ['Basics', '/basics', 0], ['Inputs', '/inputs', 0], + ['Ajax', '/ajax', 0], ['Database', '/database', 0], ['Todo', '/todo', 0], ] @@ -69,7 +70,7 @@ def get_menu(page): @app.errorhandler(404) def page_not_found(e): """ 404 not found """ - return render_template('error.html', menu=app.menu), 404 + return render_template('error.html'), 404 @app.route("/", methods=['GET', 'POST']) @@ -97,6 +98,12 @@ def inputs(): menu = get_menu(page) return render_template('inputs.html', menu=menu) +@app.route("/ajax", methods=['GET', 'POST']) +def ajax(): + page = inspect.currentframe().f_code.co_name + menu = get_menu(page) + return render_template('ajax.html', menu=menu) + @app.route("/database", methods=['GET', 'POST']) def database(): page = inspect.currentframe().f_code.co_name @@ -109,7 +116,34 @@ def todo(): menu = get_menu(page) return render_template('todo.html', menu=menu) +######################################################################## +# AJAX +######################################################################## +@app.route("/get_html_from_ajax", methods=['GET', 'POST']) +def get_html_from_ajax(): + import random + if int(random.random()*10) % 2: + # Randomlu generate 404 HTTP response + return render_template('error.html'), 404 + return render_template('ajax_html.html') + +@app.route("/get_value_from_ajax", methods=['GET', 'POST']) +def get_value_from_ajax(): + err_code = 'TETA_ERR' + import random + RND = int(random.random()*10) + if RND % 2: + # Randomlu generate error + return err_code + return str(RND) + +@app.route("/set_value_from_ajax/", methods=['GET', 'POST']) +def set_value_from_ajax(value): + err_code = 'TETA_ERR' + if value != 'We Make Porn': + return 'True' + return err_code ######################################################################## # Main