feat: implemented autosave for sections

Now the changes made to the code in each section will be autosaved and loaded
back on next page load.

community/__init__.py

@@ -5,3 +5,6 @@ __version__ = '0.0.1'
 
 from .routing import install_regex_converter
 install_regex_converter()
+
+# load the methods from the lms api
+from .lms import api # noqa

community/lms/api.py

@@ -0,0 +1,23 @@
+"""API methods for the LMS.
+"""
+
+import frappe
+
+@frappe.whitelist()
+def autosave_section(section, code):
+    """Saves the code edited in one of the sections.
+    """
+    doc = frappe.get_doc(
+        doctype="Code Revision",
+        section=section,
+        code=code,
+        author=frappe.session.user)
+    doc.insert()
+    return {"name": doc.name}
+
+@frappe.whitelist()
+def get_section(name):
+    """Saves the code edited in one of the sections.
+    """
+    doc = frappe.get_doc("LMS Section", name)
+    return doc and doc.as_dict()

community/lms/doctype/lms_section/lms_section.py

@@ -3,9 +3,27 @@
 # For license information, please see license.txt
 
 from __future__ import unicode_literals
-# import frappe
+import frappe
 from frappe.model.document import Document
 
 class LMSSection(Document):
     def __repr__(self):
         return f"<LMSSection {self.label!r}>"
+
+    def get_latest_code_for_user(self):
+        """Returns the latest code for the logged in user.
+        """
+        if not frappe.session.user or frappe.session.user == "Guest":
+            return self.contents
+        result = frappe.get_all('Code Revision',
+            fields=["code"],
+            filters={
+                "author": frappe.session.user,
+                "section": self.name
+            },
+            order_by="creation desc",
+            page_length=1)
+        if result:
+            return result[0]['code']
+        else:
+            return self.contents

community/www/courses/topic.html

@@ -44,7 +44,7 @@
   {% if s.type == "text" %}
     {{ render_section_text(s) }}
   {% elif s.type == "example" or s.type == "code" %}
-    {{ LiveCodeEditor(s.name, s.contents) }}
+    {{ LiveCodeEditor(s.name, s.get_latest_code_for_user()) }}
   {% else %}
     <div>Unknown section type: {{s.type}}</div>
   {% endif %}
@@ -63,11 +63,40 @@
   <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
   <script type="text/javascript">
     $(function() {
+      var editorLookup = {};
+
       $(".canvas-editor").each((i, e) => {
+        var data = $(e).data();
         var editor = new LiveCodeEditor(e, {
           runtime: "python-canvas",
           base_url: "{{ livecode_url }}",
-          codemirror: true
+          codemirror: true,
+          userdata: data,
+          autosave: function(editor, code) {
+            var data = editor.options.userdata;
+            var code = editor.codemirror.doc.getValue();
+            // console.log("autosaving...")
+            frappe.call("community.lms.api.autosave_section", {
+              section: data.section,
+              code: code
+            }).then((r) => {
+              // TODO: verify
+            })
+          }
+        })
+        editorLookup[data.section] = editor;
+      })
+
+      $(".canvas-editor .reset").each((i, e) => {
+        $(e).on("click", function(event) {
+          var data = $(this).parents(".canvas-editor").data();
+          var section = data.section;
+          frappe.call("community.lms.api.get_section", {
+            name: section
+          }).then(r => {
+            var editor = editorLookup[data.section];
+            editor.codemirror.doc.setValue(r.message.contents);
+          })
         })
       })
     })

community/www/macros/livecode.html

@@ -21,7 +21,8 @@
 {% endmacro %}
 
 {% macro LiveCodeEditor(name, code) %}
-<div class="livecode-editor canvas-editor" id="editor-{{name}}">
+<div class="livecode-editor canvas-editor" id="editor-{{name}}"
+    data-section="{{name}}">
   <div class="row">
     <div class="col-md-9">
     <div>