previews and infos

itf/api/views.py

@@ -2,6 +2,7 @@
 # vi:si:et:sw=4:sts=4:ts=4
 from __future__ import division
 import os.path
+from os.path import join
 import re
 from datetime import datetime
 from urllib2 import unquote
@@ -97,8 +98,7 @@ def api_error(request):
 def api_find(request):
     data = json.loads(request.POST['data'])
 #    print json.dumps(data)   
-    module = __import__(data['module'])
-    model = module.models.__getattribute__(data['model'])
+    model = getModel(data)
     response = json_response({})
     l = model.get_list(data)
     if data.has_key('range'):
@@ -107,7 +107,38 @@ def api_find(request):
         response['data']['items'] = len(l)
     response['status'] = {'code': 200}
     return render_to_json_response(response)
-    
+
+def api_preview(request):
+    data = json.loads(request.POST['data'])
+    id = int(data['id'])
+    model = getModel(data)
+    response = json_response({})
+    response['status'] = {'code': 200}
+    obj = get_object_or_404(model, pk=id)
+    response['data'] = obj.preview_dict()  
+    response['template'] = getTemplate(data, "preview")
+    return render_to_json_response(response)
+
+#FIXME: Generalize based on these two functions being the same.
+def api_info(request):
+    data = json.loads(request.POST['data'])
+    id = int(data['id'])
+    model = getModel(data)
+    response = json_response({})
+    response['status'] = {'code': 200}
+    obj = get_object_or_404(model, pk=id)
+    response['data'] = obj.info_dict()  
+    response['template'] = getTemplate(data, "info")
+    return render_to_json_response(response)    
+
+def getTemplate(data, tmpl_name):
+    path = join(settings.PROJECT_PATH, "templates", data['module'], data['model'], tmpl_name + ".html")
+    return open(path).read().strip()
+
+def getModel(data):
+    module = __import__(data['module'])
+    return module.models.__getattribute__(data['model'])
+
 def get_api_doc(f):
     f = 'api_' + f
 

itf/bestpractices/models.py

@@ -39,6 +39,15 @@ class BestPractice(ItfModel):
       'category': self.category.name,
     }
 
+  def preview_dict(self):
+    return {      
+      'id': self.id,
+      'title': self.title,
+      'category': self.category.name,
+      'quick_howto': self.quick_howto,
+      'guideline': self.guideline
+    }
+
 
 class BestPracticeCategory(models.Model):
   name = models.CharField(max_length=256)

itf/static/css/itf.css

@@ -0,0 +1,8 @@
+.itfPreviewSub {
+  font-weight: bold;
+}
+
+.itfInfoSub {
+  font-weight: bold;
+  font-size: 1.2em;
+}

itf/static/js/itf/itf.js

@@ -7,7 +7,7 @@ var app = new Ox.App({
 });
 
 app.launch(function(data) {
-  Ox.theme("modern");
+  Ox.theme("classic");
   Ox.print(data);
 
   app.$body = $('body');
@@ -20,7 +20,7 @@ app.launch(function(data) {
 
 /*
   //FIXME: should this be a nested structure as their representation on the page?
-  app.constructors = ['wrapper', 'headerPanel', 'mainPanel', 'leftPanel', 'cityPicker', 'calendarBox', 'currentEventsList', 'middlePanel', 'middleTopPanel', 'newsfeedBox', 'aboutBox', 'itfBox', 'middleBottomPanel', 'erangBox', 'scriptArchiveBox', 'bestPracticesBox', 'biblioBox', 'offersNeedsBox', 'surveysBox', 'rightPanel', 'searchBox', 'loginBox', 'featureBox', 'footerPanel']
+  app.constructors = ['wrapper', 'headerPanel', 'mainPanel', 'leftPanel', 'cityPicker', 'calendarBox', 'currentEventsList', 'middlePanel', 'middleTopPanel', 'newsfeedBox', 'aboutBox', 'itfBox', 'middleBottomPanel', 'erangBox', 'scriptArchiveBox', 'bestPracticesBox', 'biblioBox', 'offersNeedsBox', 'surveysBox', 'rightPanel', 'searchBox', 'loginBox', 'previewBox', 'footerPanel']
 */
 
   app.$ui = {};
@@ -219,7 +219,7 @@ Structure:
           surveysBox
       rightPanel
         loginBox
-        featureBox        
+        previewBox        
     footerPanel
 */
 
@@ -534,12 +534,26 @@ BEGIN mainPanel
 
   'bestPracticesBox': function() {
     var id = 'bestpracticesBox';
+    var title = "Best Practices";
+    var module = "bestpractices";
+    var model = "BestPractice";
+    var info = "Some best practices lorem ipsum";
     var c = app.$ui[id] = new Ox.ItfBox({
       'id': id,
       'title': 'Best Practices',
       'module': 'bestpractices',
       'model': 'BestPractice',
       'info': 'Some best practices lorem ipsum'
+/*
+      'preview': function(data, callback) {
+        var selectedId = data.ids[0];
+        app.api.preview({
+          'model': model,
+          'module': module,
+          'data': {'id': selectedId}
+        }, callback);
+      }
+*/
     });
 //    c.html("best practices goes here");
     return c;
@@ -624,7 +638,7 @@ BEGIN mainPanel
           size: 256
         },
         {
-          element: app.construct.featureBox()
+          element: app.construct.previewBox()
         }
       ]
     });
@@ -640,12 +654,12 @@ BEGIN mainPanel
     return c;
   },
 
-  'featureBox': function() {
-    var id = 'featureBox';
+  'previewBox': function() {
+    var id = 'previewBox';
     var c = app.$ui[id] = new Ox.Element({
       id: id
     });
-    c.html("featured profile here");
+    c.html("previews here");
     return c;
   },
 
@@ -791,7 +805,7 @@ Ox.ItfBox = function(options, self) {
     .appendTo(that)
     .css({position: 'relative', height: '100%'});
 
-  var $list = new Ox.TextList({
+  var listOptions = $.extend(options, {
       'width': 256,
 //      'itemHeight': 16,
 //      'itemWidth': 250,
@@ -800,11 +814,15 @@ Ox.ItfBox = function(options, self) {
         return app.api.find(getQueryParams(data), callback)
       },
       'id': options.id + 'List',
+      
+
+/*
       'construct': function(data) {
         var $a = $('<a />').attr("href", "/" + options.module.toLowerCase() + "/" + data.id).text(data.title); 
         var $item = $('<div />').addClass('OxTarget').append($a);
         return $item;
       },
+*/
       'max': 1,
       'columns': [
         {
@@ -825,21 +843,54 @@ Ox.ItfBox = function(options, self) {
         key: 'title',
         operator: '-'
       }]        
-    })
-//    .css({position: 'relative', height: '100%'})
-    .appendTo($listContainer)
-    .bindEvent("select", function(e, data) {
-//      alert(JSON.stringify(data));
     });
 
+  var $list = new Ox.ItfList(listOptions)
+    .appendTo($listContainer);
 
-//  $buttons = new Ox.
   return that;   
 }
 
 Ox.ItfList = function(options, self) {
   var self = self || {};
-  var that = new Ox.List(options, self);
+  var that = new Ox.TextList(options, self);
+  that.bindEvent("select", function(e, data) {
+    app.api.preview({
+      model: options.model,
+      module: options.module,
+      id: data.ids[0]
+    }, function(response) {
+//      alert(JSON.stringify(response.data.data));
+      var html = $.tmpl(response['template'], response['data']);
+      app.$ui.previewBox.html(html);
+    }); 
+  });
+  that.bindEvent("open", function(e, data) {
+//    alert(JSON.stringify(data));
+    app.api.info({
+      model: options.model,
+      module: options.module,
+      id: data.ids[0] 
+    }, function(response) {
+      var html = $.tmpl(response['template'], response['data']);
+//      alert(html);
+      var d = new Ox.Dialog({
+        buttons: [
+          new Ox.Button({
+            id: 'cancel',
+            title: 'Close',
+            })
+            .bindEvent("click", function() { d.close(); })
+        ],
+        content: new Ox.Element().append(html),
+        title: options.title + ": " + response.data.title,
+        width: 800,
+        height: 500
+      })
+      .open();
+//      alert(response);      
+    });
+  });
   return that;
 }
 

itf/templates/bestpractices/BestPractice/info.html

@@ -0,0 +1,7 @@
+<div class="itfInfo">
+  <span class="itfInfoSub">Story: </span><span class="itfInfoInfo">${story}</span><br /><br />
+  <span class="itfInfoSub">Guideline: </span><span class="itfInfoInfo">${guideline}</span><br /><br />
+  <span class="itfInfoSub">Law: </span><span class="itfInfoInfo">${law}</span><br /><br />
+  <span class="itfInfoSub">Relevance to Theatre: </span><span class="itfInfoInfo">${theatre}</span><br /><br />
+  <span class="itfInfoSub">Quick Howto: </span><span class="itfInfoInfo">${quick_howto}</span><br /><br />
+</div>

itf/templates/bestpractices/BestPractice/preview.html

@@ -0,0 +1,4 @@
+<div class="itfPreview">
+  <span class="itfPreviewSub">Category: </span><span class="itfPreviewText">${category}</span> <br /><br />
+  <span class="itfPreviewSub">Quick Howto: </span><span class="itfPreviewText">${quick_howto}</span>
+</div>

itf/templates/index.html

@@ -5,6 +5,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
         <link rel="stylesheet" type="text/css" href="/static/oxjs/build/css/ox.ui.css"/>
+        <link rel="stylesheet" type="text/css" href="/static/css/itf.css"/>
 	<script type='text/javascript'>
 if(typeof(console)=='undefined') {
     console = {};