AJAX+state work

xoncept/static/html/xoncept.html

 <script id="lo-template" type="text/x-handlebars-template">
 <div class="lo_drag" style="border:1px solid #DDDDDD; width:200px; height:55px; display:inline-block; background-color: #FCFCFC; border-radius: 3px; padding:0px">
   <div style="block;background-color: #F0F0F0; height:20px; padding:3px;">
-    <div class="obj_title"> {{{{title}}}} </div>
-    <div class="obj_icons"> <a href="/wiki/{{{{title}}}}"><span  style="display:inline-block;" class="ui-icon ui-icon-pencil"></span></a> <span style="display:inline-block;" class="ui-icon ui-icon-close lo_close"></span> </div>
+    <div class="obj_title"> {{title}} </div>
+    <div class="obj_icons"> <a href="/wiki/{{title}}"><span  style="display:inline-block;" class="ui-icon ui-icon-pencil"></span></a> <span style="display:inline-block;" class="ui-icon ui-icon-close lo_close"></span> </div>
   </div>
   <div class="objective_desc">
-    {{{{{{render}}}}}}
+    {{{render}}}
   </div>
 </div>
 </script>
 
+<script id="initial-concept-map" type="text/x-concept-map">
+PLACEHOLDER_FOR_CONCEPT_MAP
+</script>
+
 <div class="concept_wrapper">
 <div>
   <div class="header"> Learning objectives </div>

xoncept/static/js/xoncept.js

@@ -8,9 +8,7 @@ function ConceptXBlock(runtime, element)
 {
     xblock_runtime = runtime;
     xblock_element = element;
-    console.log( runtime );
     init();
-    //console.log( element );
 }
 
 function update_item(item, slug, full)
@@ -20,7 +18,7 @@ function update_item(item, slug, full)
     item.mouseover(function() {
 	$(".description").html("<h1>"+slug+"</h1><p>"+full+"</p>");
     })
-    item.find(".lo_close").mouseup(function(event){item.remove()});
+    item.find(".lo_close").mouseup(function(event){item.remove(); dump_state();});
     dump_state();
 }
 
@@ -51,10 +49,15 @@ function dump_state()
 	     'exercised': $("#exercised").find(".lo_drag").map(function(){return $(this).data("slug")}).toArray(),
 	     'required' : $("#required").find(".lo_drag").map(function(){return $(this).data("slug")}).toArray()
 	    };
-    $.post("/update/", state).done( function(data){
+    state = JSON.stringify(state);
+    console.log(state);
+
+    url = xblock_runtime.handlerUrl(xblock_element, 'update_concept_map');
+    $.post(url, state, function(data) {
+    }).done( function(data){
     } ).fail( function(data){
-	console.log("Could not save");
-	console.log(state);
+    	console.log("Could not save");
+    	console.log(state);
     } );
     return state;
 }
@@ -62,20 +65,23 @@ function dump_state()
 function refresh_search(search_string)
 {
     url = xblock_runtime.handlerUrl(xblock_element, 'relay_handler')
-    //$.getJSON("http://pmitros.edx.org:8000/get_concept_list", {'q':search_string}, function(data) {
     $.post(url, JSON.stringify({'suffix':'get_concept_list','q':search_string}), function(data) {
 	$(".search_results").text("");
 	for (var i = 0; i<data.length; i++) {
 	    var slug = data[i];
 	    url = xblock_runtime.handlerUrl(xblock_element, 'relay_handler')
 	    $.post(url, JSON.stringify({'suffix':'get_concept/'+slug}), function(render) {
-	    //$.getJSON("http://pmitros.edx.org:8000/get_concept/"+slug, function(render) {
 		add_search_item(slug, render.article);
 	    })
 	}
     })
 }
 
+function populate(column, array) {
+    for(i=0; i<array.length; i++) {
+    }	
+}
+
 function init() {
     $(".obj_drop").sortable({
 	connectWith: ".obj_drop",
@@ -88,7 +94,13 @@ function init() {
 	    //ui.helper.css("border", "5px solid");
 	} 
     }).disableSelection();
-    
+
+    concept_map = $.parseJSON($("#initial-concept-map").text())
+    populate('required', concept_map.required)
+    populate('taught', concept_map.taught)
+    populate('exercised', concept_map.exercised)
+
+
     refresh_search("");
     
     $(".search_input").change(function(){

xoncept/xoncept.py

@@ -21,12 +21,24 @@ class XonceptXBlock(XBlock):
            help = "Concept map server URL"
         )
 
+    concept_map = String(
+        scope  = Scope.user_state_summary, # User scope: Global. Block scope: Usage
+        help = "Concept map"
+        )
+
+    @XBlock.json_handler
+    def update_concept_map(self, request, suffix):
+        print request
+        self.concept_map = json.dumps(request)
+        print "Wrote:", self.concept_map
+        return {'success':True}
+
     @XBlock.json_handler
     def relay_handler(self, request, suffix):
-        print request, type(request), dict(request)
+        #print request, type(request), dict(request)
         url = self.server+request['suffix']
         r = requests.get(url, params=request) 
-        print url,":", r.text[:80]
+        #print url,":", r.text[:80]
         return json.loads(r.text)
 
     def resource_string(self, path):
@@ -40,10 +52,13 @@ class XonceptXBlock(XBlock):
         The primary view of the XonceptXBlock, shown to students
         when viewing courses.
         """
-        html = self.resource_string("static/html/xoncept.html")
-        print self.server
-        print html.format
-        frag = Fragment(html.format(server = self.server))
+        print "HERE", self.concept_map
+        html = self.resource_string("static/html/xoncept.html")#.replace("PLACEHOLDER_FOR_CONCEPT_MAP",json.dumps(self.concept_map))
+        #print self.server
+        #print html.format
+        cm = self.concept_map
+        print "Read", cm
+        frag = Fragment(html.replace("PLACEHOLDER_FOR_CONCEPT_MAP",cm))   #)#format(server = self.server, concept_map = cm))
         frag.add_css_url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
         frag.add_css(self.resource_string("static/css/xoncept.css"))