CAMP/it
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

mockup for box

Browse Source
This commit is contained in:
sanj 2011-01-06 11:29:08 +05:30
parent 7827d617df
commit 7a40236189
2 changed files with 125 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
itf/app/models.py
View File

@ -75,7 +75,8 @@ class ItfModel(models.Model):
'page_no': 1, 'page_no': 1,
'list_size': 8, 'list_size': 8,
'search': '', 'search': '',
'sort': [] 'sort': [],
'range': [0,50]
} }
options.update(data) options.update(data)
ret = [] ret = []
@ -91,13 +92,10 @@ class ItfModel(models.Model):
if sort != []: if sort != []:
qset = qset.order_by(sort[0]) #FIXME: Do Sort! qset = qset.order_by(sort[0]) #FIXME: Do Sort!
paginator = Paginator(qset, list_size) r0 = options['range'][0]
try: r1 = options['range'][1]
results = paginator.page(page_no) results = qset[r0:r1]
except (EmptyPage, InvalidPage): for r in results:
results = paginator.page(paginator.num_pages)
for r in results.object_list:
ret.append(r.list_dict()) ret.append(r.list_dict())
return ret return ret

176
itf/static/js/itf/itf.js
View File

@ -7,6 +7,7 @@ var app = new Ox.App({
}); });
app.launch(function(data) { app.launch(function(data) {
Ox.theme("modern");
Ox.print(data); Ox.print(data);
app.$body = $('body'); app.$body = $('body');
@ -269,10 +270,10 @@ BEGIN headerPanel
'homeBox': function() { 'homeBox': function() {
var id = 'homeBox'; var id = 'homeBox';
var c = app.$ui.homeBox = new Ox.Container({ var c = app.$ui.homeBox = new Ox.Element({
id: id id: id
}); });
c.$content.html("This is the header - maybe load from a template?"); c.html("This is the header - maybe load from a template?");
return c; return c;
}, },
@ -309,18 +310,18 @@ BEGIN mainPanel
{ {
element: app.construct.leftPanel(), element: app.construct.leftPanel(),
size: 256, size: 256,
resizable: true, // resizable: true,
resize: [0, 128, 256, 384] // resize: [0, 128, 256, 384]
}, },
{ {
element: app.construct.middlePanel(), element: app.construct.middlePanel()
resizable: true // resizable: true
}, },
{ {
element: app.construct.rightPanel(), element: app.construct.rightPanel(),
size: 256, size: 256,
resizable: true, // resizable: true,
resize: [0, 128, 256, 384] // resize: [0, 128, 256, 384]
} }
] ]
}); });
@ -372,19 +373,19 @@ BEGIN mainPanel
'calendarBox': function() { 'calendarBox': function() {
var id = 'calendarBox'; var id = 'calendarBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("somehow, the bookmyshow calendar goes here."); c.html("somehow, the bookmyshow calendar goes here.");
return c; return c;
}, },
'currentEventsList': function() { 'currentEventsList': function() {
var id = 'currentEventsList'; var id = 'currentEventsList';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("List of current events"); c.html("List of current events");
return c; return c;
}, },
/* /*
@ -403,20 +404,20 @@ BEGIN mainPanel
{ {
element: app.construct.middleTopPanel(), element: app.construct.middleTopPanel(),
size: 128, size: 128,
resizable: true, // resizable: true,
resize: [0, 64, 128, 196, 256], // resize: [0, 64, 128, 196, 256],
collapsible: true // collapsible: true
}, },
{ {
element: app.construct.middleMiddlePanel(), element: app.construct.middleMiddlePanel(),
collapsible: true // collapsible: true
}, },
{ {
element: app.construct.middleBottomPanel(), element: app.construct.middleBottomPanel(),
size: 128, size: 128,
resizable: true, // resizable: true,
resize: [0, 64, 128, 196, 256], // resize: [0, 64, 128, 196, 256],
collapsible: true // collapsible: true
} }
] ]
}); });
@ -450,7 +451,7 @@ BEGIN mainPanel
'newsfeedBox': function() { 'newsfeedBox': function() {
var id = 'newsfeedBox'; var id = 'newsfeedBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id, id: id,
title: 'ITF NewsFeed' title: 'ITF NewsFeed'
}); });
@ -463,20 +464,20 @@ BEGIN mainPanel
'aboutBox': function() { 'aboutBox': function() {
var id = 'aboutBox'; var id = 'aboutBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id, id: id,
title: 'About' title: 'About'
}); });
c.$content.html("about goes here"); c.html("about goes here");
return c; return c;
}, },
'itfBox': function() { 'itfBox': function() {
var id = 'itfBox'; var id = 'itfBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("about itf goes here"); c.html("about itf goes here");
return c; return c;
}, },
/* /*
@ -511,10 +512,10 @@ BEGIN mainPanel
'erangBox': function() { 'erangBox': function() {
var id = 'erangBox'; var id = 'erangBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("erang goes here"); c.html("erang goes here");
return c; return c;
}, },
@ -524,9 +525,10 @@ BEGIN mainPanel
'id': id, 'id': id,
'title': 'Script Bank', 'title': 'Script Bank',
'module': 'scriptbank', 'module': 'scriptbank',
'model': 'Script' 'model': 'Script',
'info': 'Script Archives are great, etc.'
}); });
// c.$content.html("script archive goes here"); // c.html("script archive goes here");
return c; return c;
}, },
@ -536,9 +538,10 @@ BEGIN mainPanel
'id': id, 'id': id,
'title': 'Best Practices', 'title': 'Best Practices',
'module': 'bestpractices', 'module': 'bestpractices',
'model': 'BestPractice' 'model': 'BestPractice',
'info': 'Some best practices lorem ipsum'
}); });
// c.$content.html("best practices goes here"); // c.html("best practices goes here");
return c; return c;
}, },
@ -573,28 +576,28 @@ BEGIN mainPanel
'biblioBox': function() { 'biblioBox': function() {
var id = 'biblioBox'; var id = 'biblioBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("biblioBox here"); c.html("biblioBox here");
return c; return c;
}, },
'offersNeedsBox': function() { 'offersNeedsBox': function() {
var id = 'offersNeedsBox'; var id = 'offersNeedsBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("offers and needs here"); c.html("offers and needs here");
return c; return c;
}, },
'surveysBox': function() { 'surveysBox': function() {
var id = 'surveysBox'; var id = 'surveysBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("surveys go here"); c.html("surveys go here");
return c; return c;
}, },
@ -630,19 +633,19 @@ BEGIN mainPanel
'loginBox': function() { 'loginBox': function() {
var id = 'loginBox'; var id = 'loginBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("login goes here"); c.html("login goes here");
return c; return c;
}, },
'featureBox': function() { 'featureBox': function() {
var id = 'featureBox'; var id = 'featureBox';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("featured profile here"); c.html("featured profile here");
return c; return c;
}, },
@ -659,10 +662,10 @@ BEGIN footerPanel
*/ */
'footerPanel': function() { 'footerPanel': function() {
var id = 'footerPanel'; var id = 'footerPanel';
var c = app.$ui[id] = new Ox.Container({ var c = app.$ui[id] = new Ox.Element({
id: id id: id
}); });
c.$content.html("footer goes here"); c.html("footer goes here");
return c; return c;
} }
/* /*
@ -673,13 +676,12 @@ END footerPanel
/* /*
Ox.Box - generic box element, with a bar, some help, possibility for a short menu, and should some-how be able to contain items / elements. Ox.Box - generic box element, with a bar, some help, search, a menu, etc.
*/ */
Ox.ItfBox = function(options, self) { Ox.ItfBox = function(options, self) {
var self = self || {}; var self = self || {};
var that = new Ox.Container(options, self) var that = new Ox.Element(options, self)
.defaults({ .defaults({
'title': '' 'title': ''
}) })
@ -703,35 +705,94 @@ Ox.ItfBox = function(options, self) {
}) })
.css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'}) .css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'})
.appendTo(that) .appendTo(that)
.hide(); .hide()
.bindEvent("submit", function(value) {
$list.options("request", function(data, callback) {
return app.api.find(getQueryParams(data), callback)
});
});
var $switch = new Ox.Button({
id: options.id + 'Switch', var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '1px'});
var $infoBtn = new Ox.Button({
id: options.id + "InfoBtn",
style: 'symbold',
title: 'info',
type: 'image',
tooltip: 'More info about ' + options.title
})
.appendTo($buttons)
.bindEvent("click", function() {
var info = options.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: options.title
})
.open();
});
var $searchBtn = new Ox.Button({
id: options.id + 'SearchBtn',
style: 'symbol', style: 'symbol',
title: 'collapse', title: 'find',
type: 'image', type: 'image',
tooltip: 'Search' tooltip: 'Search'
}) })
.css({'position': 'absolute', 'top': '1px', 'right': '1px', 'marginLeft': '6px'})
.bindEvent("click", function() { .bindEvent("click", function() {
// alert("foo"); // alert("foo");
// $search.slideDown(); // $search.slideDown();
$search.is(":visible") ? $search.slideUp() : $search.slideDown(); $search.is(":visible") ? $search.slideUp() : $search.slideDown();
$search.focus();
}) })
.appendTo($title); .appendTo($buttons);
var $menuBtn = new Ox.Button({
id: options.id + 'MenuBtn',
style: 'symbol',
title: 'collapse',
type: 'image',
tooltip: 'Show Menu'
}).appendTo($buttons);
var $menu = new Ox.Menu({
id: options.id + 'Menu',
element: $menuBtn,
items: [
{id: 'Test', title: 'Menu Item 1'},
{id: 'Test2', title: 'Menu Item 2'}
]
});
var $list = new Ox.ItfList({ $menuBtn.bindEvent("click", function() {
$menu.showMenu();
});
function getQueryParams(data) {
// Ox.print("SEARCHVAL", $search.val());
return $.extend(data, {
'search': $search.value() == 'Search' ? '' : $search.value(),
'model': options.model,
'module': options.module
});
}
var $list = new Ox.List({
'width': 256, 'width': 256,
'itemWidth': 256, 'itemHeight': 16,
'itemWidth': 250,
'orientation': 'horizontal', 'orientation': 'horizontal',
'request': function(data, callback) { 'request': function(data, callback) {
// var queryParams = $.extend(data, {'model': options.id, 'query': app.Query.toObject()}); return app.api.find(getQueryParams(data), callback)
var queryParams = $.extend(data, {'model': options.model, 'module': options.module, 'query': {}});
// alert(JSON.stringify(queryParams));
return app.api.find(queryParams, callback)
}, },
'id': options.id + 'List', 'id': options.id + 'List',
'construct': function(data) { 'construct': function(data) {
@ -740,6 +801,7 @@ Ox.ItfBox = function(options, self) {
return $item; return $item;
} }
}) })
.css({'overflow-x': 'hidden'})
.appendTo(that); .appendTo(that);