From 1f1a3a016a8ca0acd1d31f0540a5181d0301c95a Mon Sep 17 00:00:00 2001
From: Nils G <nils.gondermann@ruhr-uni-bochum.de>
Date: Tue, 14 Apr 2020 12:30:00 +0200
Subject: [PATCH] Load main content dynamically via AJAX requests. (Split
default/index into multiple views)
---
controllers/default.py | 4 +++
static/css/base.css | 49 ++++++++++++++++++++++++++++++-
static/css/client.css | 1 +
static/js/ajax.js | 13 +++++++++
views/default/index.html | 62 +++++++++++++++++++++++-----------------
views/default/login.html | 38 ++++++++++++++++++++++++
6 files changed, 139 insertions(+), 28 deletions(-)
create mode 100644 views/default/login.html
diff --git a/controllers/default.py b/controllers/default.py
index c1beb49..8f5a0c4 100644
--- a/controllers/default.py
+++ b/controllers/default.py
@@ -1,5 +1,9 @@
from cookie_util import COOKIE_GET
def index():
+ return dict()
+
+def content():
player_record, room_record = COOKIE_GET()
+ response.view = "default/login.html"
return dict()
diff --git a/static/css/base.css b/static/css/base.css
index f2d4fa7..9677e5f 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,7 +1,54 @@
+/* ============== Color placeholder ===================== */
+
+:root {
+ --error-bg: #FFBBBB;
+ --error-text: darkred;
+
+ --info-bg: #DDEEFF;
+ --info-text: #00004D;
+}
+
+
+/* ============== Popup ===================== */
+
+.popup {
+ border: solid 2px;
+
+ font-family: monospace;
+ font-size: 1.3em;
+ font-weight: bold;
+
+ width: 66%;
+
+ padding: 10px;
+ margin: auto;
+ margin-bottom: 50px;
+}
+
+.popup:empty {
+ display: none;
+}
+
+.popup button {
+ background-color: inherit;
+
+ border: solid 2px;
+
+ font-size: smaller;
+ color: inherit;
+
+ padding: 10px 30px 10px 30px;
+}
+
.error {
- color: red;
+ background-color: var(--error-bg);
+ color: var(--error-text);
}
+.info {
+ background-color: var(--info-bg);
+ color: var(--info-text);
+}
/* ============== Footer ===================== */
diff --git a/static/css/client.css b/static/css/client.css
index d8f9aa6..094d26e 100644
--- a/static/css/client.css
+++ b/static/css/client.css
@@ -1,4 +1,5 @@
body {
text-align: center;
background-color: lightgrey;
+ padding-top: 50px;
}
diff --git a/static/js/ajax.js b/static/js/ajax.js
index 4268188..f733b29 100644
--- a/static/js/ajax.js
+++ b/static/js/ajax.js
@@ -13,3 +13,16 @@ function AJAX_JSON(_url, _payload, _returnFunction) {
}
});
}
+
+function AJAX_GET(_url, _returnFunction) {
+ $.ajax({
+ type: 'GET',
+ url: _url,
+ success: function(data) {
+ _returnFunction(200, data);
+ },
+ error: function(xhr, statusText, errorThrown){
+ _returnFunction(xhr.status, errorThrown);
+ }
+ });
+}
diff --git a/views/default/index.html b/views/default/index.html
index bbfaf6d..a11c2b3 100644
--- a/views/default/index.html
+++ b/views/default/index.html
@@ -4,45 +4,53 @@
<link rel="stylesheet" type="text/css" href="{{=URL('static/css', 'client.css')}}">
{{end}}
+<div id="current_error" class="popup error"></div> <!-- This will be dynamically filled when an error occurs -->
+
+<div id="current_info" class="popup info"></div> <!-- This will be dynamically filled when an info popup occurs -->
+
<div id="current_content">
- <form id="form_login">
- <input type="text" id="room_code" placeholder="Room Code" maxlength="4"><br><br>
- <input type="text" id="user_name" placeholder="User Name" maxlength="15"><br><br>
- <span id="form_login_error" class="error"></span><br>
- <input type="submit" value="Enter">
- </form>
+ <!-- This will be dynamically loaded via AJAX -->
</div>
{{block page_js}}
<script type="text/javascript">
- $("#form_login").on("submit", function(){
-
- $("#form_login_error").html("");
-
- var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
- AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){
+ function content_reload(){
+ AJAX_GET("{{=URL('default', 'content')}}", function(_code, _data) {
switch(_code){
case 200:
- break;
- case 404:
- $("#form_login_error").html("Room not found or full.");
- break;
- case 409:
- $("#form_login_error").html("Please choose a different user name.");
- break;
- case 422:
- $("#form_login_error").html("Please provide valid values.");
- break;
- case 500:
- $("#form_login_error").html("500 - Internal Server Error");
+ $("#current_content").html(_data);
break;
default:
- $("#form_login_error").html("Error "+_code);
+ set_error("HTTP Error "+_code+": "+_data);
}
+ });
+ }
+
+ $(document).ready(content_reload);
+
+ //====================================
+ function set_popup(_id, _message){
+ if(!_message){
+ $(_id).html("");
+ return;
+ }
+ $(_id).html(_message);
+ var button = $("<button>OK</button>").click(function(){
+ $(_id).html("");
});
- return false;
- });
+ $(_id).append("<br><br>");
+ $(_id).append(button);
+ }
+
+ function set_error(_message){
+ set_popup("#current_error", _message);
+ }
+
+ function set_info(_message){
+ set_popup("#current_info", _message);
+ }
+
</script>
{{end}}
diff --git a/views/default/login.html b/views/default/login.html
new file mode 100644
index 0000000..4a519f3
--- /dev/null
+++ b/views/default/login.html
@@ -0,0 +1,38 @@
+<form id="form_login">
+ <input type="text" id="room_code" placeholder="Room Code" maxlength="4"><br><br>
+ <input type="text" id="user_name" placeholder="User Name" maxlength="15"><br><br>
+ <input type="submit" value="Enter">
+</form>
+
+<script type="text/javascript">
+ $("#form_login").on("submit", function(){
+
+ set_error();
+
+ var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
+ AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){
+
+ switch(_code){
+ case 200:
+ break;
+ case 404:
+ set_error("Room not found or full.");
+ break;
+ case 409:
+ set_error("Please choose a different user name.");
+ break;
+ case 422:
+ set_error("Please provide valid values.");
+ break;
+ case 500:
+ set_error("500 - Internal Server Error");
+ break;
+ default:
+ set_error("Error "+_code);
+ }
+
+ });
+
+ return false;
+ });
+</script>
--
GitLab