Mercurial > lada > lada-client
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(' ') + '"> </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