manage home dialog

This commit is contained in:
j 2017-01-26 19:15:00 +01:00
parent 3a9c269b5e
commit 85c63d228f
3 changed files with 191 additions and 0 deletions

View file

@ -44,6 +44,7 @@ class Item(models.Model):
changed = True changed = True
if 'active' in data: if 'active' in data:
self.active = data['active'] is True self.active = data['active'] is True
changed = True
if changed: if changed:
self.save() self.save()
return True return True

187
static/js/homeDialog.js Normal file
View file

@ -0,0 +1,187 @@
'use strict';
pandora.ui.homeDialog = function() {
var $lists = Ox.Element();
var $item = $('<div>');
var $dialogPanel = Ox.SplitPanel({
elements: [
{element: $lists, size: 256},
{element: $item}
],
orientation: 'horizontal'
})
var that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'done',
title: Ox._('Done')
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $dialogPanel,
height: 576,
removeOnClose: true,
title: Ox._('Manage Home Screen'),
width: 768
});
pandora.api.getHomeItems({}, function(result) {
var $activeList = renderList(result.data.items.filter(function(item) {
return item.active;
})).appendTo($lists);
var $inactiveList = renderList(result.data.items.filter(function(item) {
return !item.active;
}))//.appendTo($lists);
});
function renderItem(data) {
var $item = $('<div>');
if (!data) {
return $item;
}
var $form = $('<div>').appendTo($item);
var $typeSelect = Ox.Select({
items: [
{id: 'custom', title: Ox._('Custom')},
{id: 'list', title: Ox._('List')},
{id: 'edit', title: Ox._('Edit')},
{id: 'collection', title: Ox._('Collection')}
],
label: Ox._('Type'),
labelWidth: 128,
width: 512
}).css({
margin: '4px'
}).bindEvent({
change: function(data) {
renderItem({type: data.value})
}
}).appendTo($form);
if (data.type == 'custom') {
var $imageInput = Ox.Input({
label: Ox._('Image URL'),
labelWidth: 128,
width: 512
}).css({
margin: '4px'
}).appendTo($form);
var $linkInput = Ox.Input({
label: Ox._('Link URL'),
labelWidth: 128,
width: 512
}).css({
margin: '4px'
}).appendTo($form);
} else {
var $nameInput = Ox.Input({
label: Ox._('List Name'),
labelWidth: 128,
width: 512
}).css({
margin: '4px'
}).appendTo($form);
}
var $preview = $('<div>').appendTo($item);
var $imageContainer = $('<div>').css({
background: 'rgb(0, 0, 0)', // FIXME: make themes
borderRadius: '32px',
height: '128px',
width: '128px'
}).appendTo($preview);
if (data.image) {
$image = $('<img>').attr({
src: data.image
}).css({
borderRadius: '32px',
height: '128px',
width: '128px'
}).appendTo($imageContainer)
}
Ox.EditableContent({
placeholder: '<span class="OxLight">' + Ox._('Title') + '</span>',
value: data.title
})
.bindEvent({
submit: function(data) {
editItem('title', data.value);
}
}).appendTo($preview);
Ox.EditableContent({
placeholder: '<span class="OxLight">' + Ox._('Text') + '</span>',
value: data.text
})
.bindEvent({
submit: function(data) {
editItem('text', data.value);
}
}).appendTo($preview);
return $item;
}
function renderList(items) {
console.log('LIST', items)
var $list = Ox.TableList({
columns: [
{
id: 'image',
format: function(value) {
return $('<img>').attr({
src: value
}).css({
borderRadius: '4px',
height: '14px',
margin: '0 0 0 -2px',
width: '14px',
})
},
visible: true,
width: 16,
},
{
id: 'title',
visible: true,
width: 224
},
{
id: 'active',
format: function(value) {
return value ? $('<img>').attr({
src: Ox.UI.getImageURL('symbolCheck')
}).css({
width: '10px',
height: '10px',
padding: '3px'
}) : ''
},
visible: true,
width: 16
}
],
items: items,
max: 1,
sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'id'
})
.bindEvent({
select: function() {
}
})
.css({
width: '256px'
});
return $list;
}
return that;
};

View file

@ -230,6 +230,7 @@ pandora.ui.mainMenu = function() {
{ id: 'places', title: Ox._('Manage Places...'), disabled: !pandora.site.capabilities.canManagePlacesAndEvents[pandora.user.level] }, { id: 'places', title: Ox._('Manage Places...'), disabled: !pandora.site.capabilities.canManagePlacesAndEvents[pandora.user.level] },
{ id: 'events', title: Ox._('Manage Events...'), disabled: !pandora.site.capabilities.canManagePlacesAndEvents[pandora.user.level] }, { id: 'events', title: Ox._('Manage Events...'), disabled: !pandora.site.capabilities.canManagePlacesAndEvents[pandora.user.level] },
{}, {},
{ id: 'managehome', title: Ox._('Manage Home...'), disabled: !pandora.site.capabilities.canManageHome[pandora.user.level] },
{ id: 'users', title: Ox._('Manage Users...'), disabled: !pandora.site.capabilities.canManageUsers[pandora.user.level] }, { id: 'users', title: Ox._('Manage Users...'), disabled: !pandora.site.capabilities.canManageUsers[pandora.user.level] },
{ id: 'statistics', title: Ox._('Statistics...'), disabled: !pandora.site.capabilities.canManageUsers[pandora.user.level] }, { id: 'statistics', title: Ox._('Statistics...'), disabled: !pandora.site.capabilities.canManageUsers[pandora.user.level] },
{}, {},
@ -626,6 +627,8 @@ pandora.ui.mainMenu = function() {
(pandora.$ui.eventsDialog || ( (pandora.$ui.eventsDialog || (
pandora.$ui.eventsDialog = pandora.ui.eventsDialog() pandora.$ui.eventsDialog = pandora.ui.eventsDialog()
)).open(); )).open();
} else if (data.id == 'managehome') {
pandora.$ui.homeDialog = pandora.ui.homeDialog().open();
} else if (data.id == 'users') { } else if (data.id == 'users') {
pandora.$ui.usersDialog = pandora.ui.usersDialog().open(); pandora.$ui.usersDialog = pandora.ui.usersDialog().open();
} else if (data.id == 'statistics') { } else if (data.id == 'statistics') {