Changes related to front-end

Removed snippet append in the check view as snippet is not posted in
request.
Added an overlay when an user submits a code, with a status text on it.
This is to block user from triggering any other event when JS is
running. Overlay disappears when JS complete its execution.
On time out a request is posted via JS, it receives a JSON response but
cannot display user the error as time is over. So in such case, the
django itself handles the result and does not return JSONv response.

2 files changed, 59 insertions, 5 deletions

diff --git a/yaksh/static/yaksh/css/ontop.css b/yaksh/static/yaksh/css/ontop.css
new file mode 100644
index 0000000..fb22066
--- /dev/null
+++ b/yaksh/static/yaksh/css/ontop.css
@@ -0,0 +1,20 @@
+#ontop {
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top:0;
+    bottom: 0;
+    left:0;
+    right: 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 1001; /* 1001 coz sidebar is 1000. So will be on top of sidebar*/
+}
+
+#state {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 30px;
+    color: white;
+}
diff --git a/yaksh/static/yaksh/js/requesthandler.js b/yaksh/static/yaksh/js/requesthandler.js
index b637928..d463434 100644
--- a/yaksh/static/yaksh/js/requesthandler.js
+++ b/yaksh/static/yaksh/js/requesthandler.js
@@ -8,13 +8,29 @@ function check_state(state, uid) {
         setTimeout(get_result(uid), 2000);
     } else if (state == "unknown") {
         request_status = "initial";
-        var $notice = document.getElementById("notification");
-        $notice.classList.add("alert");
-        $notice.classList.add("alert-success");
-        $notice.innerHTML = "Your are requesting for a wrong data";
+        notify("You are requesting for a wrong data");
+        unlock_screen();
+    } else {
+        request_status = "initial";
+        unlock_screen();
     }
 }
 
+function notify(text) {
+    var $notice = document.getElementById("notification");
+    $notice.classList.add("alert");
+    $notice.classList.add("alert-success");
+    $notice.innerHTML = text;
+}
+
+function lock_screen() {
+    document.getElementById("ontop").style.display = "block";
+}
+
+function unlock_screen() {
+    document.getElementById("ontop").style.display = "none";
+}
+
 function get_result(uid){
     $.ajax({
         method: "GET",
@@ -23,7 +39,7 @@ function get_result(uid){
         success: function(data, status, xhr) {
             content_type = xhr.getResponseHeader("content-type");
             if(content_type.includes("text/html")) {
-                request_status = "initial";
+                unlock_screen();
                 document.open();
                 document.write(data);
                 document.close();
@@ -31,7 +47,15 @@ function get_result(uid){
                 res = JSON.parse(data);
                 request_status = res.status;
                 check_state(request_status, uid);
+            } else {
+                request_status = "initial";
+                unlock_screen();
             }
+        },
+        error: function(xhr, text_status, error_thrown ) {
+            request_status = "initial";
+            unlock_screen();
+            notify("There is some problem. Try later.")
         }
     });
 }
@@ -72,6 +96,7 @@ $(document).ready(function(){
       global_editor.editor.clearHistory();
   }
     $('#code').submit(function(e) {
+      lock_screen();
       $.ajax({
             type: 'POST',
             url: $(this).attr("action"),
@@ -81,6 +106,7 @@ $(document).ready(function(){
                 content_type = xhr.getResponseHeader("content-type");
                 if(content_type.includes("text/html")) {
                     request_status = "initial"
+                    unlock_screen();
                     document.open();
                     document.write(data);
                     document.close();
@@ -89,7 +115,15 @@ $(document).ready(function(){
                     var uid = res.uid;
                     request_status = res.state;
                     check_state(request_status, uid);
+                } else {
+                    request_status = "initial";
+                    unlock_screen();
                 }
+            },
+            error: function(xhr, text_status, error_thrown ) {
+                request_status = "initial";
+                unlock_screen();
+                notify("There is some problem. Try later.")
             }
           });
           e.preventDefault(); // To stop the default form submission.