From 85c63d228f1045ea4c405d561382212e013300ca Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Thu, 26 Jan 2017 19:15:00 +0100
Subject: [PATCH] manage home dialog

---
 pandora/home/models.py  |   1 +
 static/js/homeDialog.js | 187 ++++++++++++++++++++++++++++++++++++++++
 static/js/mainMenu.js   |   3 +
 3 files changed, 191 insertions(+)
 create mode 100644 static/js/homeDialog.js

diff --git a/pandora/home/models.py b/pandora/home/models.py
index a2e11715d..219e6ed1a 100644
--- a/pandora/home/models.py
+++ b/pandora/home/models.py
@@ -44,6 +44,7 @@ class Item(models.Model):
                 changed = True
         if 'active' in data:
             self.active = data['active'] is True
+            changed = True
         if changed:
             self.save()
         return True
diff --git a/static/js/homeDialog.js b/static/js/homeDialog.js
new file mode 100644
index 000000000..1d1657a06
--- /dev/null
+++ b/static/js/homeDialog.js
@@ -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;
+
+};
\ No newline at end of file
diff --git a/static/js/mainMenu.js b/static/js/mainMenu.js
index 54c0df3e5..4e19ead8d 100644
--- a/static/js/mainMenu.js
+++ b/static/js/mainMenu.js
@@ -230,6 +230,7 @@ pandora.ui.mainMenu = function() {
                         { 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: '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: '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()
                     )).open();
+                } else if (data.id == 'managehome') {
+                    pandora.$ui.homeDialog = pandora.ui.homeDialog().open();
                 } else if (data.id == 'users') {
                     pandora.$ui.usersDialog = pandora.ui.usersDialog().open();
                 } else if (data.id == 'statistics') {