Mako templates

recommender/recommender.py

 """TO-DO: Write a description of what this XBlock is."""
 
+import json
+
 import pkg_resources
+from mako.template import Template
+from mako.lookup import TemplateLookup
+
 
 from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String, BlockScope, List
@@ -51,13 +56,16 @@ class RecommenderXBlock(XBlock):
     """
     This XBlock will show a set of recommended resources
     """
+    # Scope-wide. List of JSON objects corresponding to recommendations combine XML and user. 
+    recommendations = List(help="List of help resources", default=0, scope=Scope.content)
+    # Scope-wide. List of JSON objects corresponding to recommendations as defined in XML. 
+    recommendations = List(help="List of help resources", default=0, scope=Scope.content)
+    # Upvotes for this particular user
+    upvotes = List(help="List of items user gave upvote to", default=False, scope=Scope.user_state)
+    # Downvotes for this particular user
+    downvotes = List(help="List of items user gave downvote to", default=False, scope=Scope.user_state)
 
-    # Fields are defined on the class.  You can access them in your code as
-    # self.<fieldname>.
-    objects = List(
-           scope = BlockScope, 
-           help = "List of help resources"
-        )
+    template_lookup = None
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
@@ -70,15 +78,17 @@ class RecommenderXBlock(XBlock):
         The primary view of the RecommenderXBlock, shown to students
         when viewing courses.
         """
-        html = self.resource_string("static/html/recommender.html")
-        print html.format
-        frag = Fragment(html.format())
+        if not self.template_lookup:
+            self.template_lookup = TemplateLookup() 
+            self.template_lookup.put_string("recommender.html", self.resource_string("static/html/recommender.html"))
+            self.template_lookup.put_string("resourcebox.html", self.resource_string("static/html/resourcebox.html"))
+
+        frag = Fragment(self.template_lookup.get_template("recommender.html").render())
         frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
         frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
         frag.add_css(self.resource_string("static/css/recommender.css"))
         frag.add_javascript(self.resource_string("static/js/src/recommender.js"))
         frag.initialize_js('RecommenderXBlock')
-        print self.xml_text_content()
         return frag
 
     # TO-DO: change this to create the scenarios you'd like to see in the
@@ -90,10 +100,28 @@ class RecommenderXBlock(XBlock):
             ("RecommenderXBlock",
              """<vertical_demo>
                   <recommender> 
-                     
-                  </recommender>
-                  <recommender> 
+                     {"title": "Textbook page 501", "up" : 50, "down" : 75, "url" : "google.com"}
                   </recommender>
                 </vertical_demo>
              """),
         ]
+
+    @classmethod
+    def parse_xml(cls, node, runtime, keys, id_generator):
+        """
+        Parse the XML for an HTML block.
+
+        The entire subtree under `node` is re-serialized, and set as the
+        content of the XBlock.
+
+        """
+        block = runtime.construct_xblock_from_class(cls, keys)
+        lines = []
+        for line in node.text.split('\n'):
+            line = line.strip()
+            if len(line) > 2:
+                print "Decoding", line
+                lines.append(json.loads(line))
+    
+        block.default_recommendations = lines
+        return block

recommender/static/html/recommender.html

+<style>
+.recommender_block {
+  width : 100%;
+}
+
+.recommender_resource {
+  border : 1;
+  padding : 1;
+  margin : 10;
+  display:table-cell;
+  width:300px;
+  border-color:red;
+  border-width:1px;
+  border-style:solid;
+  border-radius:5px;
+}
+
+.recommender_header {
+  display : flex;
+  padding : 0 0 10 0;
+}
+
+.recommender_title {
+  flex-grow : 1
+}
+
+.recommender_recommendations {
+  display:table;
+  width:100%;
+}
+
+.recommender_blurb {
+  display:inline-block;
+  vertical-align: middle;
+  width:225px;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+
+.recommender_vote_box {
+  display:inline-block;
+  vertical-align: middle;
+  width:45px;
+}
+
+.recommender_vote_arrow_up {
+  margin-left:auto;
+  margin-right:auto;
+  text-align:center;
+}
+
+.recommender_vote_arrow_down {
+  margin-left:auto;
+  margin-right:auto;
+  text-align:center;
+}
+
+.recommender_vote_score {
+  width:100%;
+}
+
+.recommender_edit{
+  display:inline-block;
+  vertical-align: top;
+}
+</style>
+
 <div class="recommender_block">
-Helpful resources
-<table>
-<tr>
-<td>
-</td>
-</tr>
-</table>
-<span class="ui-icon ui-icon-plusthick"></span>
+  <div class="recommender_header"> <div class="recommender_title">Helpful resources</div><div class="recommender_add"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
+
+  <div class="recommender_recommendations">
+    <div class="recommender_row">
+      <div class="recommender_resource">
+	<div class="recommender_vote_box">
+	  <div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
+	  <!--div class="recommender_vote_score_dislikes">2927</div-->
+	  <div class="recommender_vote_score">2926</div>
+	  <!--div class="recommender_vote_score_likes">2927</div-->
+	  <div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span></div>
+	</div>
+	<div class="recommender_blurb">Textbook Page 501</div>
+	<div class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
+      </div>
+      <div class="recommender_resource">
+	Textbook Page 502
+      </div>
+    </div>
+    <div class="recommender_row">
+      <div class="recommender_resource">
+	Textbook Page 504
+      </div>
+      <div class="recommender_resource">
+	Textbook Page 505
+      </div>
+    </div>
+  </div>
+  <div class="recommender_description">
+  </div>
 </div>

recommender/static/html/resourcebox.html

+      <div class="recommender_resource">
+	<div class="recommender_vote_box">
+	  <div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
+	  <!--div class="recommender_vote_score_dislikes">2927</div-->
+	  <div class="recommender_vote_score">2926</div>
+	  <!--div class="recommender_vote_score_likes">2927</div-->
+	  <div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span></div>
+	</div>
+	<div class="recommender_blurb">Textbook Page 501</div>
+	<div class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
+      </div>