fix: added livecode editor in community

community/hooks.py

@@ -187,6 +187,10 @@ update_website_context = 'community.widgets.update_website_context'
 ## subclass of community.community.plugins.PageExtension
 # community_lesson_page_extension = None
 
+community_lesson_page_extensions = [
+	"community.plugins.LiveCodeExtension"
+]
+
 ## Markdown Macros for Lessons
 community_markdown_macro_renderers = {
 	"Exercise": "community.plugins.exercise_renderer",

community/lms/doctype/exercise_submission/exercise_submission.json

@@ -6,12 +6,17 @@
  "engine": "InnoDB",
  "field_order": [
   "exercise",
-  "solution",
+  "status",
+  "batch",
+  "column_break_4",
   "exercise_title",
   "course",
-  "batch",
   "lesson",
-  "image"
+  "section_break_8",
+  "solution",
+  "image",
+  "test_results",
+  "comments"
  ],
  "fields": [
   {
@@ -21,12 +26,6 @@
    "label": "Exercise",
    "options": "Exercise"
   },
-  {
-   "fieldname": "solution",
-   "fieldtype": "Code",
-   "in_list_view": 1,
-   "label": "Solution"
-  },
   {
    "fetch_from": "exercise.title",
    "fieldname": "exercise_title",
@@ -61,11 +60,41 @@
    "fieldtype": "Code",
    "label": "Image",
    "read_only": 1
+  },
+  {
+   "fieldname": "status",
+   "fieldtype": "Select",
+   "label": "Status",
+   "options": "Correct\nIncorrect"
+  },
+  {
+   "fieldname": "test_results",
+   "fieldtype": "Small Text",
+   "label": "Test Results"
+  },
+  {
+   "fieldname": "comments",
+   "fieldtype": "Small Text",
+   "label": "Comments"
+  },
+  {
+   "fieldname": "solution",
+   "fieldtype": "Code",
+   "in_list_view": 1,
+   "label": "Solution"
+  },
+  {
+   "fieldname": "column_break_4",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "section_break_8",
+   "fieldtype": "Section Break"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-05-21 11:28:45.833018",
+ "modified": "2021-06-24 16:22:50.570845",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Exercise Submission",

community/plugins.py

@@ -67,6 +67,25 @@ class ProfileTab:
         """
         raise NotImplementedError()
 
+class LiveCodeExtension(PageExtension):
+    def render_header(self):
+        livecode_url = frappe.get_value("LMS Settings", None, "livecode_url")
+        context = {
+            "livecode_url": livecode_url
+        }
+        return frappe.render_template(
+            "templates/livecode/extension_header.html",
+            context)
+
+    def render_footer(self):
+        livecode_url = frappe.get_value("LMS Settings", None, "livecode_url")
+        context = {
+            "livecode_url": livecode_url
+        }
+        return frappe.render_template(
+            "templates/livecode/extension_footer.html",
+            context)
+
 def quiz_renderer(quiz_name):
     quiz = frappe.get_doc("LMS Quiz", quiz_name)
     context = dict(quiz=quiz)

community/templates/livecode/extension_footer.html

@@ -0,0 +1,168 @@
+<script type="text/javascript" src="/assets/frappe/node_modules/moment/min/moment-with-locales.min.js"></script>
+<script type="text/javascript" src="/assets/frappe/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
+<script type="text/javascript" src="/assets/frappe/js/frappe/utils/datetime.js"></script>
+
+<script type="text/javascript">
+    // comment_when is failing because of this
+    if (!frappe.sys_defaults) {
+      frappe.sys_defaults = {}
+    }
+</script>
+
+<script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
+
+<script type="text/javascript" src="/assets/mon_school/js/livecode-files.js"></script>
+
+<template id="livecode-template">
+  <div class="livecode-editor livecode-editor-inline">
+    <div class="row">
+      <div class="col-lg-8 col-md-6">
+        <div class="controls">
+          <button class="run">Run</button>
+
+          <div class="exercise-controls pull-right">
+            <span style="padding-right: 10px;"><span class="last-submitted human-time" data-timestamp=""></span></span>
+            <button class="submit btn-primary">Submit</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="code-editor">
+      <div class="row">
+        <div class="col-lg-8 col-md-6">
+          <div class="code-wrapper">
+            <textarea class="code"></textarea>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6 canvas-wrapper">
+            <div class="svg-image" width="300" height="300"></div>
+            <pre class="output"></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script type="text/javascript">
+  function getLiveCodeOptions() {
+    return {
+      base_url: "{{ livecode_url }}",
+      runtime: "python",
+      files: LIVECODE_FILES, // loaded from livecode-files.js
+      command: ["python", "start.py"],
+      codemirror: true,
+      onMessage: {
+        image: function(editor, msg) {
+          const element = editor.parent.querySelector(".svg-image");
+          element.innerHTML = msg.image;
+        }
+      }
+    }
+  }
+
+  $(function() {
+    var editorLookup = {};
+
+    $("pre.example, pre.exercise").each((i, e) => {
+      var code = $(e).text();
+      var template = document.querySelector('#livecode-template');
+      var clone = template.content.cloneNode(true);
+
+      $(e)
+      .wrap('<div></div>')
+      .hide()
+      .parent()
+      .append(clone)
+      .find("textarea.code")
+      .val(code);
+
+      if ($(e).hasClass("exercise")) {
+        var last_submitted = $(e).data("last-submitted");
+        if (last_submitted) {
+          $(e).parent().find(".last-submitted")
+            .data("timestamp", last_submitted)
+            .html(__("Submitted {0}", [comment_when(last_submitted)]));
+        }
+      }
+      else {
+        $(e).parent().find(".exercise-controls").remove();
+      }
+
+      var editor = new LiveCodeEditor(e.parentElement, {
+        ...getLiveCodeOptions(),
+        codemirror: true,
+        onMessage: {
+          image: function(editor, msg) {
+            const canvasElement = editor.parent.querySelector("div.svg-image");
+            canvasElement.innerHTML = msg.image;
+          }
+        }
+      });
+
+      $(e).parent().find(".submit").on('click', function() {
+        var name = $(e).data("name");
+        let code = editor.codemirror.doc.getValue();
+
+        frappe.call("community.lms.api.submit_solution", {
+          "exercise": name,
+          "code": code
+        }).then(r => {
+          if (r.message.name) {
+            frappe.msgprint("Submitted successfully!");
+
+            let d = r.message.creation;
+            $(e).parent().find(".human-time").html(__("Submitted {0}", [comment_when(d)]));
+          }
+        });
+      });
+    });
+
+    $(".exercise-image").each((i, e) => {
+      var svg = JSON.parse($(e).data("image"));
+      $(e).html(svg);
+    });
+
+    $("pre.exercise").each((i, e) => {
+      var svg = JSON.parse($(e).data("image"));
+      $(e).parent().find(".svg-image").html(svg);
+    });
+
+  });
+</script>
+
+<style type="text/css">
+  .svg-image {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+    width: 310px;
+    height: 310px;
+  }
+  .livecode-editor {
+    margin-bottom: 30px;
+  }
+
+  .livecode-editor-small .svg-image {
+    border: 5px solid #ddd;
+    position: relative;
+    z-index: 0;
+    width: 210px;
+    height: 210px;
+  }
+
+  /* work-in-progress styles for showing admonition */
+  .admonition {
+    border: 1px solid #aaa;
+    border-left: .5rem solid #888;
+    border-radius: .3em;
+    font-size: 0.9em;
+    margin: 1.5em 0;
+    padding: 0 0.5em;
+  }
+  .admonition-title {
+    padding: 0.5em 0px;
+    font-weight: bold;
+    padding-top:
+  }
+</style>

community/templates/livecode/extension_header.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
+
+<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
+
+<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>

community/www/macros/livecode.html

@@ -1,4 +1,3 @@
-
 {% macro LiveCodeEditorLarge(name, code) %}
 <div class="livecode-editor livecode-editor-large" id="editor-{{name}}">
   <div class="row">
@@ -16,8 +15,8 @@
         </div>
       </div>
       <div class="col-lg-4 col-md-6 canvas-wrapper">
-          <canvas width="300" height="300"></canvas>
-          <pre class="output"></pre>
+        <canvas width="300" height="300"></canvas>
+        <pre class="output"></pre>
       </div>
     </div>
   </div>
@@ -31,11 +30,20 @@
       <div class="controls">
         <button class="run">Run</button>
         <button class="reset">Reset</button>
+        <a class="pull-right dropdown-item border rounded" style="width: 10rem;" href="#" id="navbarDropdown"
+          role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          {{ }}
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <span class="dropdown-item">Correct</span>
+          <span class="dropdown-item">Incorrect</span>
+        </div>
         {% if is_exercise %}
-          <button class="submit pull-right btn-primary">Submit</button>
-          {% if last_submitted %}
-          <span class="pull-right" style="padding-right: 10px;"><span class="human-time" data-timestamp="{{last_submitted}}"></span></span>
-          {% endif %}
+        <button class="submit pull-right btn-primary">Submit</button>
+        {% if last_submitted %}
+        <span class="pull-right" style="padding-right: 10px;"><span class="human-time"
+            data-timestamp="{{last_submitted}}"></span></span>
+        {% endif %}
         {% endif %}
       </div>
       <div style="display: none">
@@ -51,8 +59,8 @@
         </div>
       </div>
       <div class="col-lg-4 col-md-6 canvas-wrapper">
-          <canvas width="300" height="300"></canvas>
-          <pre class="output"></pre>
+        <canvas width="300" height="300"></canvas>
+        <pre class="output"></pre>
       </div>
     </div>
   </div>
@@ -64,14 +72,15 @@
 {% macro LiveCodeEditorJS(name, code) %}
 
 <script type="text/javascript" src="/assets/frappe/node_modules/moment/min/moment-with-locales.min.js"></script>
-<script type="text/javascript" src="/assets/frappe/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
+<script type="text/javascript"
+  src="/assets/frappe/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
 <script type="text/javascript" src="/assets/frappe/js/frappe/utils/datetime.js"></script>
 
 <script type="text/javascript">
-// comment_when is failing because of this
-if (!frappe.sys_defaults) {
-  frappe.sys_defaults = {}
-}
+  // comment_when is failing because of this
+  if (!frappe.sys_defaults) {
+    frappe.sys_defaults = {}
+  }
 </script>
 
 <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
@@ -81,7 +90,7 @@ if (!frappe.sys_defaults) {
   var livecodeEditors = [];
   var livecodeEditorsMap = {};
 
-  $(function() {
+  $(function () {
     $(".livecode-editor").each((i, e) => {
       var name = e.id.replace("editor-", "");
       var editor = new LiveCodeEditor(e, {
@@ -91,12 +100,12 @@ if (!frappe.sys_defaults) {
       livecodeEditors.push(editor);
       livecodeEditorsMap[e.id] = editor;
 
-      $(e).find(".reset").on('click', function() {
+      $(e).find(".reset").on('click', function () {
         let code = $(e).find(".reset-code").html();
         editor.codemirror.doc.setValue(code);
       });
 
-      $(e).find(".submit").on('click', function() {
+      $(e).find(".submit").on('click', function () {
         let code = editor.codemirror.doc.getValue();
         console.log("submit", name, code);
         frappe.call("community.lms.api.submit_solution", {
@@ -116,7 +125,7 @@ if (!frappe.sys_defaults) {
   });
 
   function updateSubmitTimes() {
-    $(".human-time").each(function(i, e) {
+    $(".human-time").each(function (i, e) {
       var d = $(e).data().timestamp;
       $(e).html(__("Submitted {0}", [comment_when(d)]));
     });