Request pyflakes info from server and render to page on Python activecode run

Author: ascholerChemeketa

runestone/activecode/css/activecode.css

@@ -74,6 +74,16 @@
     background-color: lightgray;
 }
 
+.python_check_results {
+    margin-top: 20px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+.python_check_results pre {
+    background-color: #f5f5f5;
+}
+
 .ac_caption {
     text-align: center;
     font-weight: bold;

runestone/activecode/js/activecode.js

@@ -1303,6 +1303,61 @@ Yet another is that there is an internal error.  The internal error message is:
         }
     }
 
+    async checkPythonSyntax() {
+        let checkDiv = this.outerDiv.querySelector("div.python_check_results");
+        if( checkDiv != null )
+            checkDiv.remove();
+
+        let code = this.editor.getValue();
+
+        fetch('http://localhost/ns/books/python_check', {
+            method: 'POST',
+            body: code
+        })
+        .then((response) => {
+            return response.json();
+        })
+        .then((data) => {
+            if(data.trim() !== '') {
+                //clean up returned text
+                let errorLines = data.split("\n");
+                let codeLines = code.split("\n");
+                let message = "";
+                for(let line of errorLines) {
+                    if(line.indexOf(".py:") != -1) {
+                        //old pyflakes returns "file:line:col error"
+                        //new pyflakes returns "file:line:col: error"
+                        //handle either
+                        const cleaner = /[^.]*.py:(\d+):(\d+):? (.*)/i;
+                        let lineParts = line.match(cleaner)
+                        message += "Line " + lineParts[1] + ": " + lineParts[3] + "\n";
+                        message += codeLines[lineParts[1] - 1] + "\n";
+                        message += " ".repeat(lineParts[2] - 1) + "^\n";
+                    } else {
+                        message += line + "\n";
+                    }
+                }
+                message = message.slice(0,-1);  //remove trailing newline
+
+                //Render
+                checkDiv = document.createElement("div");
+                checkDiv.classList.add("python_check_results","alert", "alert-warning");
+                let checkHead = checkDiv.appendChild(document.createElement("h3"));
+                checkHead.textContent = "Syntax tips:";
+                let checkPre = checkDiv.appendChild(document.createElement("pre"));
+                //checkPre.classList.add("alert-warning");
+                checkPre.textContent = message;
+
+                //Squeeze check_results right before output pane
+                const outDiv = this.outDiv;
+                outDiv.parentNode.insertBefore(checkDiv, outDiv);
+            }
+        })
+        .catch(err => {
+            console.log("Error with ajax python check:", err);
+        });
+    }
+
     /* runProg has several async elements to it.
      * 1. Skulpt runs the python program asynchronously
      * 2. The history is restored asynchronously
@@ -1369,6 +1424,9 @@ Yet another is that there is an internal error.  The internal error message is:
                 queue: false,
             });
         }
+        if (this.language == "python" || this.language == "python3") {
+            this.checkPythonSyntax();
+        }
         try {
             await Sk.misceval.asyncToPromise(function () {
                 return Sk.importMainWithBody("<stdin>", false, prog, true);