boxes, lists

itf/boxes/models.py

@@ -18,6 +18,7 @@ class ModelExtra(models.Model):
 
   def get_dict(self):
     return {
+      'id': self.id,
       'module': self.model.model_class()._meta.app_label,
       'model': self.model.model,
 #      'info': self.info,
@@ -25,17 +26,17 @@ class ModelExtra(models.Model):
       'friendly_name_plural': self.friendly_name_plural,
       'fk_filters': self.model.model_class().fk_filters,
       'fts_fields': self.model.model_class().fts_fields,
-      'sort_options': map(lambda x: {'key': x.key, 'text': x.text}, self.sort_options.all())
+      'sort_options': map(lambda x: {'key': x.key, 'operator': x.operator}, self.sort_options.all())
     }
 
 
 
 class ModelSort(models.Model):
-  key = models.CharField(max_length=64)
+  operator = models.CharField(max_length=64)
-  text = models.CharField(max_length=512)
+  key = models.CharField(max_length=512)
 
   def __unicode__(self):
-    return "%s: %s" % (self.key, self.text,)
+    return "%s: %s" % (self.operator, self.key,)
 
 
 
@@ -55,6 +56,7 @@ class Button(ItfModel):
 
   def get_dict(self):
     data = self.get_data()
+    data['id'] = self.id,
     data['type'] = self.typ,
     data['icon'] = self.icon,
     data['mouseover'] = self.mouseover
@@ -180,6 +182,7 @@ class StaticBox(Box):
 
   def get_dict(self):
     return {
+      'id': self.id,
       'type': 'StaticBox',
       'title': self.title,
       'html': self.html,
@@ -198,6 +201,7 @@ class ModelsBox(Box):
 
   def get_dict(self):
     data = {
+      'id': self.id,
       'type': 'ModelsBox',
       'title': self.title,
       'info': self.info,
@@ -220,6 +224,7 @@ class Panel(models.Model):
 
   def get_dict(self):
     return {
+      'id': self.id,
       'title': self.title,
       'boxes': map(lambda x: x.get_dict(), self.boxes.all())
     }

itf/static/js/itf/box_types.js

@@ -0,0 +1,36 @@
+ItfBoxTypes = {
+  'StaticBox': {
+    'buttons': [],
+    'render': function(data) {
+      return new Ox.Element().html(data.html);
+    }
+  },
+
+  'ModelsBox': {
+    'buttons': [
+      {
+        'type': 'search',
+        'icon': 'search',
+        'mouseover': 'Search'
+      },
+      {
+        'type': 'info',
+        'icon': 'info',
+        'mouseover': 'More about..'
+      }
+    ],
+    'render': function(data) {
+      var id = data.itfId + "ModelsContainer";
+      var that = new Ox.Element({
+        'id': id
+      });
+      that.updateView = function(model) {
+        var $list = new Ox.ItfList(model, data);
+        that.empty();
+        that.append($list);
+      }
+      that.updateView(data.default_model);
+      return that;      
+    }
+  }
+}

itf/static/js/itf/boxes.js

@@ -25,6 +25,7 @@ Ox.ItfPage = function(page, parentPanel) {
   return that;     
 }
 
+
 Ox.ItfPanel = function(panelData, displayed) {
   var items = [];
   var id = panelData.title;
@@ -41,15 +42,20 @@ Ox.ItfPanel = function(panelData, displayed) {
   that.displayed = displayed;
 };
 
+
 Ox.HiddenPanelContainer = function() {  
   
 };
 
+
 Ox.ItfBox = function(boxData) {
+  var self = {};
+  boxData.itfId = "Box" + boxData.id;
   var options = {
-    'title': boxData.title,
+    'id': boxData.itfId,
-  }
+    'title': boxData.title
-  var that = new Ox.Element(options, self);
+  };
+  var that = app.ui[boxData.itfId] = new Ox.Element(options, self);
   var $titlebar = new Ox.Bar({
     orientation: 'horizontal',
     size: '24
@@ -62,14 +68,59 @@ Ox.ItfBox = function(boxData) {
   var boxButtons = Ox.merge(ItfBoxTypes[boxData.type].buttons, boxData.extra_buttons);
   for (var i=0; i<boxButtons.length; i++) {
     var t = boxButtons[i];
-    var button = new Ox.ItfButton(t).appendTo($buttons);  
+    var button = new Ox.ItfButton(t, boxData).appendTo($buttons);  
   }
    
-  var $content = ItfBoxTypes[boxData.type].render(boxData);
+  $content = ItfBoxTypes[boxData.type].render(boxData);
   $content.appendTo(that);
+  that.$content = $content;
   return that;
 }
 
+
+Ox.ItfButton = function(buttonData, boxData) {
+  var button = new Ox.Button({
+    'id': boxData.itfId + "Button" + buttonData.id,
+    'style': 'symbol',
+    'title': buttonData.icon,
+    'tooltip': buttonData.mouseover,
+    'type': 'image'    
+  });
+  var that = ItfButtonTypes[buttonData.type](button, buttonData, boxData);
+  return that;
+}
+
+
+Ox.ItfList = function(modelData, boxData, size) {
+  var size = size || 256;
+  var id = "ModelList" + modelData.id;
+  var listOptions = {
+    'id': id,
+    'width': size, //FIXME: don't hardcode width - get these figures on init and set globals or something
+    'items': function(data, callback) {
+      app.api.find(getFindParams(modelData));
+    },
+    'max': 1,
+    'columns': [
+      {
+        align: 'left',
+        id: 'title',
+        operator: '-',
+        unique: false,
+        visible: true,
+        width: 256
+      },
+      {
+        id: 'id',
+        visible: false,
+        unique: true  
+      }
+    ],
+    'sort': modelData.sort_options  
+  }
+  var that = new Ox.List(
+}
+
 /*
 ItfBoxes.StaticBox = function(boxData) {
   var self = {};

itf/static/js/itf/button_types.js

@@ -0,0 +1,39 @@
+ItfButtonTypes = {
+
+  'search': function(button, buttonData, boxData) {
+    return button;
+  },
+
+  'info': function(button, buttonData, boxData) {
+    button.bindEvent("click", function() {
+      var info = boxData.info;
+      var d = new Ox.Dialog({
+        buttons: [
+          new Ox.Button({
+            id: 'cancel',
+            title: 'Close',
+            })
+            .bindEvent("click", function() { d.close(); })
+        ],
+        content: new Ox.Element().html(info),
+        title: boxData.title
+      })
+      .open();      
+    });
+    return button;
+  },
+
+  'views_menu': function(button, buttonData, boxData) {
+    return button;
+  },
+
+  'sort_menu': function(button, buttonData, boxData) {
+    return button;
+  },
+
+  'dialog': function(button, buttonData, boxData) {
+    return button;
+  }
+
+}
+