changeset 1015:af9879d72310

Updated UI, added window for filter management and added fieldset for query details.
author Raimund Renkert <raimund.renkert@intevation.de>
date Tue, 02 Feb 2016 15:25:16 +0100
parents 94a6b5415d73
children d6e259e76de6
files app.js app/controller/Filter.js app/controller/FilterManagement.js app/controller/ModeSwitcher.js app/model/Query.js app/store/ProbeQueries.js app/view/FilterPanel.js app/view/Viewport.js app/view/panel/FilterDetails.js app/view/widget/base/FavColumn.js app/view/window/FilterManagement.js resources/css/lada.css resources/i18n/Lada_de-DE.properties
diffstat 13 files changed, 442 insertions(+), 97 deletions(-) [+]
line wrap: on
line diff
--- a/app.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app.js	Tue Feb 02 15:25:16 2016 +0100
@@ -106,7 +106,6 @@
     },
 
     onLoginSuccess: function(response) {
-        Ext.create('Lada.view.Viewport');
 
         /* Parse Username and Timestamp */
         var json = Ext.decode(response.responseText);
@@ -164,6 +163,19 @@
             storeId: 'statusstufe',
             autoLoad: 'true'
         });
+        Ext.create('Lada.store.ProbeQueries', {
+            storeId: 'probequeries',
+            autoLoad: 'true'
+        });
+        Ext.create('Lada.store.MessprogrammQueries', {
+            storeId: 'messprogrammqueries',
+            autoLoad: 'true'
+        });
+        Ext.create('Lada.store.StammdatenQueries', {
+            storeId: 'stammdatenqueries',
+            autoLoad: 'true'
+        });
+
         //A Store containing all MST a User is allowed to set.
         Ext.create('Lada.store.Messstellen', {
             storeId: 'messstellenFiltered',
@@ -174,6 +186,7 @@
                 return false;
             }
         });
+        Ext.create('Lada.view.Viewport');
     },
 
     getServerVersion: function() {
@@ -219,6 +232,7 @@
         'Lada.controller.Map',
         'Lada.controller.form.Location',
         'Lada.controller.form.Messprogramm',
-        'Lada.controller.grid.Messmethode'
+        'Lada.controller.grid.Messmethode',
+        'Lada.controller.FilterManagement'
         ]
 });
--- a/app/controller/Filter.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/controller/Filter.js	Tue Feb 02 15:25:16 2016 +0100
@@ -15,6 +15,7 @@
 
     requires: [
         'Lada.view.widget.Messstelle',
+        'Lada.view.window.FilterManagement',
         'Lada.view.widget.Umwelt'
     ],
 
@@ -25,6 +26,10 @@
 
     displayFields: null,
 
+    managementWindow: null,
+
+    mode: 'proben',
+
     /**
      * Initialize this Controller
      * It has 4 Listeners
@@ -65,6 +70,9 @@
     selectSql: function(element, record) {
         var filters = element.up('panel[name=main]').down('fieldset[name=filtervariables]');
 
+        if (!record[0]) {
+            return;
+        }
         // Set "Filter Auswahl" Description
         var desc = element.up('fieldset').down('displayfield[name=description]');
         desc.setValue(record[0].data.description);
@@ -74,19 +82,13 @@
         var contentPanel = element.up('panel[name=main]').down('panel[name=contentpanel]');
         var queryType = record[0].get('type'); //The type of the query, might be proben, messprogramme,
             // or a stammdatendtype
+        var details = element.up('panel[name=main]').down('filterdetails');
+        details.setRecord(record[0]);
 
         this.reset(element);
 
         contentPanel.removeAll(); //clear the panel: make space for new grids
 
-        // Set "Filter Auswahl" Columns
-        var columns = element.up('fieldset').down('displayfield[name=columns]');
-        var columnString = [];
-        for (var i = 0; i < this.displayFields.length; i++) {
-            columnString.push(this.displayFields[i].header);
-        }
-        columns.setValue(columnString.join(', '));
-
         // Setup Columns
         if (this.displayFields) {
             this.displayFields.reverse();
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/controller/FilterManagement.js	Tue Feb 02 15:25:16 2016 +0100
@@ -0,0 +1,61 @@
+/* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
+ * Software engineering by Intevation GmbH
+ *
+ * This file is Free Software under the GNU GPL (v>=3)
+ * and comes with ABSOLUTELY NO WARRANTY! Check out
+ * the documentation coming with IMIS-Labordaten-Application for details.
+ */
+
+/**
+ *
+ */
+Ext.define('Lada.controller.FilterManagement', {
+    extend: 'Ext.app.Controller',
+
+    /**
+     * @private
+     * Initialize the controller.
+     */
+    init: function() {
+        var me = this;
+        this.control({
+            'filtermanagement grid favcolumn': {
+                checkchange: me.checkchange
+            },
+            'filtermanagement': {
+                close: me.windowClosed
+            }
+        });
+    },
+
+    checkchange: function(column, ndx, value) {
+        var store = column.up('grid').store;
+        var record = store.getAt(ndx);
+        if (value) {
+            Ext.Ajax.request({
+                url: 'lada-server/rest/favorite',
+                method: 'POST',
+                jsonData: {
+                    'queryId': record.get('id')
+                },
+                success: function() {
+                    record.set('favorite', true);
+                }
+            });
+        }
+        else {
+            Ext.Ajax.request({
+                url: 'lada-server/rest/favorite?queryId=' + record.get('id'),
+                method: 'DELETE',
+                success: function() {
+                    record.set('favorite', false);
+                }
+            });
+        }
+    },
+
+    windowClosed: function() {
+        var combobox = Ext.ComponentQuery.query('combobox[name=filter]')[0];
+        this.getController('Lada.controller.Filter').updateFilter(combobox);
+    }
+});
--- a/app/controller/ModeSwitcher.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/controller/ModeSwitcher.js	Tue Feb 02 15:25:16 2016 +0100
@@ -46,48 +46,8 @@
         filters.removeAll();
         filters.hide();
 
-        //Initialise variables which will define the querystore
-        // and the store which has to be loaded into the grid.
-        var querystorename = '';
-
-        // In dependence of the checkboxes input value,
-        // define the store of the filter.
-        //    app/controller/Filter.js contains similar code.
-        if (field.inputValue === 'messprogramme' && cbox) {
-            querystorename = 'Lada.store.MessprogrammQueries';
-        }
-        else if (field.inputValue === 'proben' && cbox) {
-            querystorename = 'Lada.store.ProbeQueries';
-        }
-        else if (field.inputValue === 'stammdaten' && cbox) {
-            querystorename = 'Lada.store.StammdatenQueries';
-        }
-
-        if (querystorename) {
-            var store = Ext.StoreManager.lookup(querystorename);
-
-            if (!store) {
-                store = Ext.create(querystorename, {
-                    //Select first Item on Load
-                    listeners: {
-                        load: function(store){
-                            var records = new Array();
-                            records.push(store.getAt(0));
-
-                            cbox.select(records[0]);
-                            cbox.fireEvent('select', cbox, records);
-                        }
-                    }
-                });
-            }
-
-            if (store) {
-                if (!store.autoLoad) {
-                    store.load();
-                }
-                //cbox.reset();
-                cbox.bindStore(store);
-            }
-        }
+        var filterController = this.getController('Lada.controller.Filter');
+        filterController.mode = field.inputValue;
+        filterController.updateFilter(cbox);
     }
 });
--- a/app/model/Query.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/model/Query.js	Tue Feb 02 15:25:16 2016 +0100
@@ -19,6 +19,8 @@
     }, {
         name: 'description'
     }, {
+        name: 'favorite'
+    }, {
         name: 'sql'
     }, {
         name: 'results'
--- a/app/store/ProbeQueries.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/store/ProbeQueries.js	Tue Feb 02 15:25:16 2016 +0100
@@ -12,7 +12,7 @@
 Ext.define('Lada.store.ProbeQueries', {
     extend: 'Ext.data.Store',
     model: 'Lada.model.Query',
-    autoLoad: true,
+//    autoLoad: true,
     proxy: {
         type: 'rest',
         url: 'lada-server/rest/query/probe',
--- a/app/view/FilterPanel.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/view/FilterPanel.js	Tue Feb 02 15:25:16 2016 +0100
@@ -17,7 +17,7 @@
         'Ext.layout.container.Column'
     ],
 
-    title: 'Filter-Auswahl',
+    title: 'Filter',
     initComponent: function() {
         this.layout = {
             type: 'vbox',
@@ -25,24 +25,36 @@
         };
         var me = this;
         this.items = [{
-            xtype: 'combobox',
-            name: 'filter',
-            editable: false,
-            store: Ext.create('Lada.store.ProbeQueries',{
-                listeners: {
-                    load: function(s){
-                        var records = new Array();
-                        records.push(s.getAt(0));
-
-                        var combo = me.down('combobox[name=filter]');
-                        combo.select(records[0]);
-                        combo.fireEvent('select', combo, records);
-                    }
-                }
-            }),
-            displayField: 'name',
-            valueField: 'id',
-            emptyText: 'Wählen Sie eine Abfrage'
+            layout: 'hbox',
+            border: false,
+            items: [{
+                xtype: 'combobox',
+                name: 'filter',
+                editable: false,
+                flex: 1,
+                displayField: 'name',
+                valueField: 'id',
+                queryMode: 'local',
+                emptyText: 'Wählen Sie eine Abfrage'
+            }, {
+                xtype: 'button',
+                action: 'details',
+                enableToggle: true,
+                text: 'Details',
+                margin: '0 0 0 10'
+            }]
+        }, {
+            xtype: 'checkbox',
+            name: 'favorites',
+            boxLabel: 'nur Favoriten',
+            margin: '0, 0, 0, 5',
+            checked: true
+        }, {
+            xtype: 'displayfield',
+            name: 'description',
+            shrinkWrap: 3,
+            margin: '0, 0, 0 ,5',
+            value: '-/-'
         }, {
             xtype: 'panel',
             border: false,
@@ -55,27 +67,31 @@
             }, {
                 xtype: 'button',
                 action: 'reset',
-                text: 'Zurücksetzen'
+                text: 'Zurücksetzen',
+                margin: '0 10 0 0'
+            }, {
+                xtype: 'button',
+                action: 'manage',
+                text: 'Filterauswahl bearbeiten'
             }],
             hidden: false
-        }, {
-            xtype: 'panel',
-            maxWidth: '500',
-            border: false,
-            margin: '0 10',
-            items: [{
-                xtype: 'displayfield',
-                name: 'description',
-                fieldLabel: 'Beschreibung',
-                shrinkWrap: 3,
-                value: '-/-'
-            }, {
-                xtype: 'displayfield',
-                name: 'columns',
-                fieldLabel: 'Spalten',
-                value: '-/-'
-            }]
         }];
         this.callParent(arguments);
+        var combo = me.down('combobox[name=filter]');
+        combo.store = Ext.create('Ext.data.Store', {
+            model: 'Lada.model.Query'
+        });
+        var store = Ext.StoreManager.get('probequeries');
+        store.on('load', function storeLoad () {
+            var entries = store.queryBy(function(record) {
+                if (record.get('favorite')) {
+                    return true;
+                }
+            });
+            combo.store.add(entries.items);
+            combo.select(combo.store.getAt(0));
+            combo.fireEvent('select', combo, [combo.store.getAt(0)]);
+            store.un('load', storeLoad);
+        });
     }
 });
--- a/app/view/Viewport.js	Thu Jan 21 08:59:13 2016 +0100
+++ b/app/view/Viewport.js	Tue Feb 02 15:25:16 2016 +0100
@@ -17,7 +17,8 @@
     extend: 'Ext.container.Viewport',
     requires: [
         'Lada.view.ModeSwitcher',
-        'Lada.view.FilterPanel'
+        'Lada.view.FilterPanel',
+        'Lada.view.panel.FilterDetails'
     ],
     layout: 'fit',
     initComponent: function() {
@@ -66,12 +67,11 @@
                     margin: '0, 10, 0, 10'
                 }, {
                 // Variables settings for the current selected sql statement.
-                    xtype: 'fieldset',
-                    name: 'filtervariables',
-                    title: 'Variablenbelegung',
+                    xtype: 'filterdetails',
+                    name: 'filterdetails',
+                    title: i18n.getMsg('filterdetails.title'),
                     hidden: true,
-                    margin: '0, 10, 0, 10',
-                    items: []
+                    margin: '0, 10, 0, 10'
                 }]
             }, {
                 xtype: 'panel',
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/view/panel/FilterDetails.js	Tue Feb 02 15:25:16 2016 +0100
@@ -0,0 +1,63 @@
+/**
+ *
+ */
+Ext.define('Lada.view.panel.FilterDetails', {
+    extend: 'Ext.form.FieldSet',
+    alias: 'widget.filterdetails',
+
+    record: null,
+
+    title: 'test',
+
+    /**
+     * @private
+     * Initialize the view.
+     */
+    initComponent: function() {
+        var me = this;
+        var i18n = Lada.getApplication().bundle;
+        //me.title = i18n.getMsg('filterdetails.title');
+
+        me.items = [{
+            xtype: 'displayfield',
+            margin: '5, 5, 5, 5',
+            name: 'name',
+            fieldLabel: 'Name'
+        }, {
+            xtype: 'displayfield',
+            margin: '0, 5, 5, 5',
+            name: 'beschreibung',
+            fieldLabel: 'Beschreibung'
+        }, {
+            xtype: 'displayfield',
+            margin: '0, 5, 5, 5',
+            name: 'filters',
+            fieldLabel: 'Filter'
+        }, {
+            xtype: 'displayfield',
+            margin: '0, 5, 5, 5',
+            name: 'columns',
+            fieldLabel: 'Spalten'
+        }];
+
+        this.callParent(arguments);
+    },
+
+    setRecord: function(record) {
+        this.record = record;
+        this.down('displayfield[name=name]').setValue(record.get('name'));
+        this.down('displayfield[name=beschreibung]').setValue(record.get('description'));
+        var columnString = [];
+        var value = record.get('results');
+        for (var i = 0; i < value.length; i++) {
+            columnString.push(value[i].header);
+        }
+        this.down('displayfield[name=columns]').setValue(columnString.join(', '));
+        value = record.get('filters');
+        var filterString = [];
+        for (var i = 0; i < value.length; i++) {
+            filterString.push(value[i].label);
+        }
+        this.down('displayfield[name=filters]').setValue(filterString.join(', '));
+    }
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/view/widget/base/FavColumn.js	Tue Feb 02 15:25:16 2016 +0100
@@ -0,0 +1,31 @@
+/* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
+ * Software engineering by Intevation GmbH
+ *
+ * This file is Free Software under the GNU GPL (v>=3)
+ * and comes with ABSOLUTELY NO WARRANTY! Check out
+ * the documentation coming with IMIS-Labordaten-Application for details.
+ */
+
+Ext.define('Lada.view.widget.base.FavColumn', {
+    extend: 'Ext.grid.column.CheckColumn',
+    alias: 'widget.favcolumn',
+/*
+    constructor: function() {
+        this.addEvents(
+            'checkchange'
+        );
+        this.callParent(arguments);
+    },
+*/
+    renderer: function(value, metaData, record) {
+        var cssPrefix = Ext.baseCSSPrefix;
+        var cls = [cssPrefix + 'grid-checkheader'];
+        if (value) {
+            cls.push(cssPrefix + 'grid-favcolumn-checked');
+        }
+        else {
+            cls.push(cssPrefix + 'grid-favcolumn-unchecked');
+        }
+        return '<div class="' + cls.join(' ') + '">&#160;</div>';
+    }
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/view/window/FilterManagement.js	Tue Feb 02 15:25:16 2016 +0100
@@ -0,0 +1,167 @@
+/* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
+ * Software engineering by Intevation GmbH
+ *
+ * This file is Free Software under the GNU GPL (v>=3)
+ * and comes with ABSOLUTELY NO WARRANTY! Check out
+ * the documentation coming with IMIS-Labordaten-Application for details.
+ */
+
+/**
+ *
+ */
+Ext.define('Lada.view.window.FilterManagement', {
+    extend: 'Ext.window.Window',
+    alias: 'widget.filtermanagement',
+
+    requires: [
+        'Lada.view.widget.base.FavColumn'
+    ],
+
+    layout: 'fit',
+    width: window.innerWidth - 100,
+    height: 500,
+    closeAction: 'hide',
+
+    /**
+     * @private
+     * Initialize the view.
+     */
+    initComponent: function() {
+        var i18n = Lada.getApplication().bundle;
+        var me = this;
+        this.buttons = [{
+            text: i18n.getMsg('close'),
+            scope: this,
+            handler: this.close
+        }];
+        var probenstore = Ext.StoreManager.get('probequeries');
+        var messpstore = Ext.StoreManager.get('messprogrammqueries');
+        var stammstore = Ext.StoreManager.get('stammdatenqueries');
+        me.items = [{
+            xtype: 'tabpanel',
+            items: [{
+                title: i18n.getMsg('querygrid.probe.title'),
+                xtype: 'grid',
+                viewConfig: {
+                    markDirty: false,
+                    getRowClass: function() {
+                        return 'x-lada-multiline-grid';
+                    }
+                },
+                store: probenstore,
+                columns: [{
+                    header: i18n.getMsg('querygrid.header.favorite'),
+                    width: 48,
+                    dataIndex: 'favorite',
+                    xtype: 'favcolumn'
+                }, {
+                    header: i18n.getMsg('querygrid.header.name'),
+                    dataIndex: 'name',
+                    width: 200
+                }, {
+                    header: i18n.getMsg('querygrid.header.description'),
+                    dataIndex: 'description',
+                    minWidth: 200,
+                    flex: 3
+                }, {
+                    header: i18n.getMsg('querygrid.header.columns'),
+                    dataIndex: 'results',
+                    width: 250,
+                    flex: 2,
+                    renderer: function(value) {
+                        var columnString = [];
+                        for (var i = 0; i < value.length; i++) {
+                            columnString.push(value[i].header);
+                        }
+                        return columnString.join(', ');
+                    }
+                }, {
+                    header: i18n.getMsg('querygrid.header.filters'),
+                    dataIndex: 'filters',
+                    width: 200,
+                    renderer: function(value) {
+                        var columnString = [];
+                        for (var i = 0; i < value.length; i++) {
+                            columnString.push(value[i].label);
+                        }
+                        return columnString.join(', ');
+                    }
+                }]
+            }, {
+                title: i18n.getMsg('querygrid.messprogramm.title'),
+                xtype: 'grid',
+                viewConfig: {
+                    markDirty: false,
+                    getRowClass: function() {
+                        return 'x-lada-multiline-grid';
+                    }
+                },
+                store: messpstore,
+                columns: [{
+                    header: i18n.getMsg('querygrid.header.favorite'),
+                    width: 48,
+                    dataIndex: 'favorite',
+                    xtype: 'favcolumn'
+                }, {
+                    header: i18n.getMsg('querygrid.header.name'),
+                    dataIndex: 'name',
+                    width: 200
+                }, {
+                    header: i18n.getMsg('querygrid.header.description'),
+                    dataIndex: 'description',
+                    minWidth: 200,
+                    flex: 3
+                }, {
+                    header: i18n.getMsg('querygrid.header.columns'),
+                    dataIndex: 'results',
+                    width: 250,
+                    flex: 2,
+                    renderer: function(value) {
+                        var columnString = [];
+                        for (var i = 0; i < value.length; i++) {
+                            columnString.push(value[i].header);
+                        }
+                        return columnString.join(', ');
+                    }
+                }, {
+                    header: i18n.getMsg('querygrid.header.filters'),
+                    dataIndex: 'filters',
+                    width: 200,
+                    renderer: function(value) {
+                        var columnString = [];
+                        for (var i = 0; i < value.length; i++) {
+                            columnString.push(value[i].label);
+                        }
+                        return columnString.join(', ');
+                    }
+                }]
+            }, {
+                title: i18n.getMsg('querygrid.stammdaten.title'),
+                xtype: 'grid',
+                viewConfig: {
+                    markDirty: false,
+                    getRowClass: function() {
+                        return 'x-lada-multiline-grid';
+                    }
+                },
+                store: stammstore,
+                columns: [{
+                    header: i18n.getMsg('querygrid.header.favorite'),
+                    width: 48,
+                    dataIndex: 'favorite',
+                    xtype: 'favcolumn'
+                }, {
+                    header: i18n.getMsg('querygrid.header.name'),
+                    dataIndex: 'name',
+                    width: 200
+                }, {
+                    header: i18n.getMsg('querygrid.header.description'),
+                    dataIndex: 'description',
+                    flex: 1
+                }]
+            }]
+        }];
+
+        this.callParent(arguments);
+    }
+});
--- a/resources/css/lada.css	Thu Jan 21 08:59:13 2016 +0100
+++ b/resources/css/lada.css	Tue Feb 02 15:25:16 2016 +0100
@@ -14,6 +14,10 @@
   border-color: #FF0000;
 }
 
+.x-lada-multiline-grid .x-grid-cell-inner{
+    white-space: normal !important;
+}
+
 .window-inactive .x-window-header-text {color: #a9a9a9;}
 
 
@@ -34,6 +38,21 @@
   background-image: url(../img/view-time-schedule-edit.png);
 }
 
+.x-grid-checkheader {
+  height: 16px;
+  background-image: url('images/unchecked.gif');
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.x-grid-favcolumn-checked {
+  background-image: url(../img/favorites.png);
+}
+
+.x-grid-favcolumn-unchecked {
+  background-image: url(../img/favorites_off.png);
+}
 
 /* do not display clear-button (x) in IE10+ Input fields */
 ::-ms-clear {
--- a/resources/i18n/Lada_de-DE.properties	Thu Jan 21 08:59:13 2016 +0100
+++ b/resources/i18n/Lada_de-DE.properties	Tue Feb 02 15:25:16 2016 +0100
@@ -236,3 +236,13 @@
 pn.gridTitle:Probenehmer
 pn.button.add:Probenehmer hinzufügen
 pn.button.delete:Probenehmer löschen
+
+filterdetails.title:Filterdetails
+querygrid.header.favorite:Favorit
+querygrid.header.name:Name
+querygrid.header.description:Beschreibung
+querygrid.header.columns:Spalten
+querygrid.header.filters:Filter
+querygrid.probe.title:Probenfilter
+querygrid.messprogramm.title:Messprogrammfilter
+querygrid.stammdaten.title:Stammdatenfilter

http://lada.wald.intevation.org