Mercurial > lada > lada-client

comparison app/view/widget/DayOfYear.js @ 1199:0a7f0a09151c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Replace date-time picker with appropriate widget to select day of year. Validity period is not specific for a year. The calender widget was not appropriate here.
author Tom Gottfried <tom@intevation.de>
date Fri, 23 Sep 2016 16:49:26 +0200
parents
children 05c8bd380fd5
comparison
equal deleted inserted replaced
1198:3b6f40541ac6 1199:0a7f0a09151c
1 /* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
2 * Software engineering by Intevation GmbH
3 *
4 * This file is Free Software under the GNU GPL (v>=3)
5 * and comes with ABSOLUTELY NO WARRANTY! Check out
6 * the documentation coming with IMIS-Labordaten-Application for details.
7 */
8
9 var monthsStore = Ext.create('Ext.data.Store', {
10 fields: ['id', 'name'],
11 data: [{
12 'id': 0,
13 'name': 'Januar'
14 }, {
15 'id': 1,
16 'name': 'Februar'
17 }, {
18 'id': 2,
19 'name': 'März'
20 }, {
21 'id': 3,
22 'name': 'April'
23 }, {
24 'id': 4,
25 'name': 'Mai'
26 }, {
27 'id': 5,
28 'name': 'Juni'
29 }, {
30 'id': 6,
31 'name': 'Juli'
32 }, {
33 'id': 7,
34 'name': 'August'
35 }, {
36 'id': 8,
37 'name': 'September'
38 }, {
39 'id': 9,
40 'name': 'Oktober'
41 }, {
42 'id': 10,
43 'name': 'November'
44 }, {
45 'id': 11,
46 'name': 'Dezember'
47 }]
48 });
49
50 /**
51 * Panel to select month and day of month,
52 * that can be serialized to day of year
53 */
54 Ext.define('Lada.view.widget.DayOfYear', {
55 extend: 'Ext.panel.Panel',
56 alias: 'widget.dayofyear',
57
58 layout: {
59 type: 'hbox',
60 pack: 'end',
61 defaultMargins: '3'
62 },
63
64 initComponent: function() {
65 var me = this;
66
67 /*
68 * Create hidden field to hold the day of year value
69 * for/of the record of the form.
70 */
71 var DOYField = Ext.create('Ext.form.field.Number', {
72 name: this.name,
73 hidden: true,
74 listeners: this.listeners
75 });
76 /* Use dirtychange to avoid endless loop with change listeners on
77 * visible items. This one is for initialisation by the form. */
78 DOYField.addListener('dirtychange', me.setFields);
79
80 /*
81 * Add hidden field and visible fields to let the user choose
82 * day and month to the panel.
83 */
84 this.items = [{
85 xtype: 'numberfield',
86 isFormField: false,
87 fieldLabel: this.fieldLabel,
88 labelWidth: this.labelWidth,
89 width: 50 + this.labelWidth,
90 msgTarget: 'none',
91 allowDecimals: false,
92 maxLength: 2,
93 enforceMaxLength: true,
94 allowBlank: this.allowBlank,
95 minValue: 1,
96 maxValue: 31,
97 emptyText: 'Tag',
98 listeners: {
99 /* we have to listen on change because checkMaxDay() might
100 * change the value. UI events like blur do not track this. */
101 change: { fn: me.setDOY }
102 }
103 }, {
104 xtype: 'combobox',
105 isFormField: false,
106 width: 100,
107 msgTarget: 'none',
108 store: monthsStore,
109 allowBlank: this.allowBlank,
110 forceSelection: true,
111 valueField: 'id',
112 displayField: 'name',
113 emptyText: 'Monat',
114 queryMode: 'local',
115 listeners: {
116 collapse: { fn: me.setDOY },
117 change: { fn: me.checkMaxDay }
118 }
119 }, {
120 xtype: 'image',
121 name: 'warnImg',
122 src: 'resources/img/dialog-warning.png',
123 width: 14,
124 height: 14,
125 hidden: true
126 }, {
127 xtype: 'image',
128 name: 'errorImg',
129 src: 'resources/img/emblem-important.png',
130 width: 14,
131 height: 14,
132 hidden: true
133 }, DOYField];
134
135 this.callParent(arguments);
136 },
137
138 /*
139 * Set values in panel items for day and month
140 * from hidden day of year field
141 */
142 setFields: function() {
143 var panel = this.up('panel');
144
145 // create a date object with arbitrary non-leap year
146 var doy = panel.down('numberfield[hidden]').getValue();
147
148 if (doy != null) {
149 var date = Ext.Date.subtract(
150 new Date(1970, 0, 1), Ext.Date.DAY, -doy);
151 var month = date.getMonth();
152 var day = date.getDate();
153 panel.down('combobox').setValue(month);
154 panel.down('numberfield[hidden=false]').setValue(day);
155 }
156 },
157
158 /*
159 * Function to be called from listeners of visible items
160 * to set the value of the hidden day of year field.
161 */
162 setDOY: function() {
163 var panel = this.up('panel');
164 var month = panel.down('combobox').getValue();
165 var day = panel.down('numberfield[hidden=false]').getValue();
166 var maxDay = panel.down('numberfield[hidden=false]').maxValue;
167
168 if (month != null && day != null && day <= maxDay) {
169 // create a date object with arbitrary non-leap year
170 var date = new Date(1970, month, day);
171 var doy = Ext.Date.getDayOfYear(date);
172 panel.down('numberfield[hidden]').setValue(doy);
173 }
174 },
175
176 /*
177 * Call from listener of month selection widget to set maximum and
178 * validate associated day value.
179 */
180 checkMaxDay: function() {
181 this.up('panel').down('numberfield[hidden=false]')
182 .clearInvalid();
183
184 // create a date object with arbitrary non-leap year
185 var maxDay = Ext.Date.getDaysInMonth(
186 new Date(1970, this.getValue()));
187 this.up('panel').down('numberfield[hidden=false]')
188 .setMaxValue(maxDay);
189
190 var curDay = this.up('panel')
191 .down('numberfield[hidden=false]').getValue();
192 if (curDay > maxDay) {
193 this.up('panel').down('numberfield[hidden=false]')
194 .setValue(maxDay);
195 }
196 },
197
198
199 showWarnings: function(warnings) {
200 var img = this.down('image[name=warnImg]');
201 Ext.create('Ext.tip.ToolTip', {
202 target: img.getEl(),
203 html: warnings
204 });
205 img.show();
206 this.down('numberfield[hidden=false]').invalidCls = 'x-lada-warning';
207 this.down('numberfield[hidden=false]').markInvalid('');
208 this.down('combobox').markInvalid('');
209 var fieldset = this.up('fieldset[collapsible=true]');
210 if (fieldset) {
211 var i18n = Lada.getApplication().bundle;
212 var warningText = i18n.getMsg(this.name) + ': ' + warnings;
213 fieldset.showWarningOrError(true, warningText);
214 }
215 },
216
217 showErrors: function(errors) {
218 var img = this.down('image[name=errorImg]');
219 var warnImg = this.down('image[name=warnImg]');
220 warnImg.hide();
221 Ext.create('Ext.tip.ToolTip', {
222 target: img.getEl(),
223 html: errors
224 });
225 this.down('numberfield[hidden=false]').invalidCls = 'x-lada-error';
226 this.down('numberfield[hidden=false]').markInvalid('');
227 this.down('combobox').markInvalid('');
228 img.show();
229 var fieldset = this.up('fieldset[collapsible=true]');
230 if (fieldset) {
231 var i18n = Lada.getApplication().bundle;
232 var errorText = i18n.getMsg(this.name) + ': ' + errors;
233 fieldset.showWarningOrError(false, '', true, errorText);
234 }
235 },
236
237 clearWarningOrError: function() {
238 this.down('image[name=errorImg]').hide();
239 this.down('image[name=warnImg]').hide();
240 },
241
242 getValue: function() {
243 this.down('numberfield[hidden]').getValue();
244 },
245
246 setValue: function(value) {
247 this.down('numberfield[hidden]').setValue(value);
248 }
249 });
http://lada.wald.intevation.org