270 lines
8.2 KiB
JavaScript
270 lines
8.2 KiB
JavaScript
$(function() {
|
|
Ox.theme("modern");
|
|
var $body = $("body"),
|
|
$document = $(document),
|
|
app = new Ox.App({
|
|
requestURL: "http://blackbook.local:8000/api/"
|
|
// requestURL: "http://lion.oil21.org:8000/api/"
|
|
}),
|
|
$menu = new Ox.MainMenu({
|
|
menus: [
|
|
{
|
|
id: "demo",
|
|
title: "Demo",
|
|
items: [
|
|
{ id: "about", title: "About" }
|
|
]
|
|
},
|
|
{
|
|
id: "sort",
|
|
title: "Sort",
|
|
items: [
|
|
{ id: "sort_movies", title: "Sort Movies by", items: [
|
|
{ checked: false, group: "sort_movies", id: "title", title: "Title"},
|
|
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
|
|
{ checked: false, group: "sort_movies", id: "country", title: "Country" },
|
|
{ checked: true, group: "sort_movies", id: "year", title: "Year" },
|
|
] },
|
|
{ id: "order_movies", title: "Order Movies", items: [
|
|
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
|
|
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
|
|
] }
|
|
]
|
|
},
|
|
],
|
|
size: "large"
|
|
}),
|
|
groups = [
|
|
{
|
|
id: "director",
|
|
title: "Director"
|
|
},
|
|
{
|
|
id: "country",
|
|
title: "Country"
|
|
},
|
|
{
|
|
id: "year",
|
|
title: "Year"
|
|
},
|
|
/*
|
|
{
|
|
id: "language",
|
|
title: "Language"
|
|
},
|
|
{
|
|
id: "genre",
|
|
title: "Genre"
|
|
}
|
|
*/
|
|
],
|
|
elements = [],
|
|
documentWidth = $document.width();
|
|
Ox.print("documentWidth", documentWidth)
|
|
$.each(groups, function(i, v) {
|
|
var size = documentWidth / 3 + (documentWidth % 3 > i);
|
|
elements.push({
|
|
element: new Ox.TextList({
|
|
columns: [
|
|
{
|
|
align: "left",
|
|
id: "name",
|
|
operator: "+",
|
|
title: "Name",
|
|
visible: true,
|
|
width: size - 72
|
|
},
|
|
{
|
|
align: "right",
|
|
id: "items",
|
|
operator: "-",
|
|
title: "Items",
|
|
visible: true,
|
|
width: 60
|
|
}
|
|
],
|
|
id: "group_" + v.id,
|
|
request: function(options) {
|
|
delete options.keys;
|
|
app.request("find", $.extend(options, {
|
|
group: v.id,
|
|
query: {
|
|
conditions: [
|
|
{
|
|
key: "country",
|
|
value: "",
|
|
operator: ""
|
|
}
|
|
],
|
|
operator: ""
|
|
}
|
|
}), options.callback);
|
|
},
|
|
sort: [
|
|
{
|
|
key: "name",
|
|
operator: "+"
|
|
}
|
|
]
|
|
}),
|
|
size: size
|
|
});
|
|
});
|
|
Ox.print("elements", elements)
|
|
var $groups = new Ox.SplitPanel({
|
|
elements: elements,
|
|
orientation: "horizontal"
|
|
}),
|
|
$listbar = Ox.Bar({
|
|
size: 24
|
|
});
|
|
$select = Ox.Select({
|
|
id: "selectView",
|
|
items: [
|
|
{
|
|
checked: true,
|
|
id: "list",
|
|
title: "View: List"
|
|
},
|
|
{
|
|
id: "icons",
|
|
title: "View: Icons"
|
|
}
|
|
]
|
|
}).css({
|
|
margin: "4px"
|
|
}).width(128).appendTo($listbar);
|
|
$list = new Ox.TextList({
|
|
columns: [
|
|
{
|
|
align: "left",
|
|
id: "id",
|
|
operator: "+",
|
|
title: "ID",
|
|
visible: true,
|
|
width: 80
|
|
},
|
|
{
|
|
align: "left",
|
|
id: "title",
|
|
operator: "+",
|
|
title: "Title",
|
|
visible: true,
|
|
width: 160
|
|
},
|
|
{
|
|
align: "left",
|
|
id: "director",
|
|
operator: "+",
|
|
title: "Director",
|
|
visible: true,
|
|
width: 160
|
|
},
|
|
{
|
|
align: "left",
|
|
id: "country",
|
|
operator: "+",
|
|
title: "Country",
|
|
visible: true,
|
|
width: 120
|
|
},
|
|
{
|
|
align: "right",
|
|
id: "year",
|
|
operator: "-",
|
|
title: "Year",
|
|
visible: true,
|
|
width: 80
|
|
},
|
|
{
|
|
align: "right",
|
|
id: "runtime",
|
|
operator: "-",
|
|
title: "Runtime",
|
|
visible: true,
|
|
width: 80
|
|
},
|
|
{
|
|
align: "left",
|
|
id: "language",
|
|
operator: "+",
|
|
title: "Language",
|
|
visible: true,
|
|
width: 120
|
|
},
|
|
{
|
|
align: "left",
|
|
id: "genre",
|
|
operator: "+",
|
|
title: "Genre",
|
|
visible: true,
|
|
width: 120
|
|
},
|
|
{
|
|
align: "right",
|
|
id: "rating",
|
|
operator: "-",
|
|
title: "Rating",
|
|
visible: false,
|
|
width: 80
|
|
},
|
|
{
|
|
align: "right",
|
|
id: "votes",
|
|
operator: "-",
|
|
title: "Votes",
|
|
visible: false,
|
|
width: 80
|
|
}
|
|
],
|
|
id: "list",
|
|
request: function(options) {
|
|
app.request("find", $.extend(options, {
|
|
query: {
|
|
conditions: [
|
|
{
|
|
key: "country",
|
|
value: "",
|
|
operator: ""
|
|
}
|
|
],
|
|
operator: ""
|
|
}
|
|
}), options.callback);
|
|
},
|
|
sort: [
|
|
{
|
|
key: "year",
|
|
operator: "-"
|
|
}
|
|
]
|
|
}),
|
|
$right = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: $groups,
|
|
size: 128
|
|
},
|
|
{
|
|
element: $listbar,
|
|
size: 24
|
|
},
|
|
{
|
|
element: $list
|
|
}
|
|
],
|
|
orientation: "vertical"
|
|
})
|
|
$main = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: $menu,
|
|
size: 24
|
|
},
|
|
{
|
|
element: $right
|
|
}
|
|
],
|
|
orientation: "vertical"
|
|
}).appendTo($body);
|
|
});
|