]>
Commit | Line | Data |
---|---|---|
1 | Ext.define('PMG.StatTimeSelector', { | |
2 | extend: 'Ext.container.Container', | |
3 | xtype: 'pmgStatTimeSelector', | |
4 | ||
5 | statics: { | |
6 | selected_year: undefined, | |
7 | selected_month: undefined, | |
8 | selected_day: undefined, | |
9 | ||
10 | initSelected: function() { | |
11 | let today = new Date(); | |
12 | this.selected_year = today.getFullYear(); | |
13 | this.selected_month = today.getMonth() + 1; | |
14 | this.selected_day = today.getDate(); | |
15 | }, | |
16 | ||
17 | getTimeSpan: function() { | |
18 | if (this.selected_year === undefined) { | |
19 | this.initSelected(); | |
20 | } | |
21 | const year = this.selected_year; | |
22 | const month = this.selected_month; | |
23 | const day = this.selected_day; | |
24 | ||
25 | let starttime, endtime; | |
26 | if (!month) { | |
27 | starttime = new Date(year, 0); | |
28 | endtime = new Date(year + 1, 0); | |
29 | } else if (!day) { | |
30 | starttime = new Date(year, month - 1); | |
31 | endtime = new Date(year, month); | |
32 | } else { | |
33 | starttime = new Date(year, month - 1, day); | |
34 | endtime = new Date(year, month - 1, day + 1); | |
35 | } | |
36 | ||
37 | return { | |
38 | starttime: (starttime.getTime() / 1000).toFixed(0), | |
39 | endtime: (endtime.getTime() / 1000).toFixed(0), | |
40 | }; | |
41 | }, | |
42 | }, | |
43 | ||
44 | layout: { | |
45 | type: 'hbox', | |
46 | }, | |
47 | ||
48 | controller: { | |
49 | xclass: 'Ext.app.ViewController', | |
50 | ||
51 | updateVisibility: function() { | |
52 | let view = this.getView(); | |
53 | ||
54 | let yearsel = this.lookupReference('yearsel'); | |
55 | let monthsel = this.lookupReference('monthsel'); | |
56 | let daysel = this.lookupReference('daysel'); | |
57 | ||
58 | let year = yearsel.getValue(); | |
59 | let month = monthsel.getValue(); | |
60 | daysel.setVisible(month !== 0); | |
61 | if (!month) { | |
62 | daysel.setValue(0); | |
63 | } | |
64 | let day = daysel.getValue(); | |
65 | ||
66 | let statics = Ext.getClass(view); | |
67 | ||
68 | statics.selected_year = year; | |
69 | statics.selected_month = month; | |
70 | statics.selected_day = day; | |
71 | ||
72 | let data = statics.getTimeSpan(); | |
73 | Ext.GlobalEvents.fireEvent('pmgStatTimeSelectorUpdate', data); | |
74 | }, | |
75 | ||
76 | updateMaxDays: function() { | |
77 | let year = this.lookup('yearsel').getValue(); | |
78 | let month = this.lookup('monthsel').getValue(); | |
79 | // get last day of current month by wrapping back day 0 from next (zero indexed) month | |
80 | let maxDays = new Date(year, month, 0).getDate(); | |
81 | this.lookup('daysel').getStore().setFilters([{ | |
82 | property: 'day', | |
83 | operator: '<=', | |
84 | value: maxDays, | |
85 | }]); | |
86 | }, | |
87 | ||
88 | onSelect: function() { | |
89 | this.updateMaxDays(); | |
90 | this.updateVisibility(); | |
91 | }, | |
92 | ||
93 | init: function(view) { | |
94 | let statics = Ext.getClass(view); | |
95 | ||
96 | let yearsel = this.lookupReference('yearsel'); | |
97 | let monthsel = this.lookupReference('monthsel'); | |
98 | let daysel = this.lookupReference('daysel'); | |
99 | ||
100 | yearsel.setValue(statics.selected_year); | |
101 | monthsel.setValue(statics.selected_month); | |
102 | daysel.setValue(statics.selected_month ? statics.selected_day : 0); | |
103 | ||
104 | this.updateVisibility(); | |
105 | }, | |
106 | }, | |
107 | ||
108 | items: [ | |
109 | { | |
110 | xtype: 'combobox', | |
111 | reference: 'yearsel', | |
112 | store: { | |
113 | fields: ['year'], | |
114 | data: (function() { | |
115 | let today = new Date(); | |
116 | let year = today.getFullYear(); | |
117 | return [{ year: year }, { year: year -1 }, { year: year -2 }]; | |
118 | }()), | |
119 | }, | |
120 | listeners: { select: 'onSelect' }, | |
121 | value: new Date().getFullYear(), | |
122 | queryMode: 'local', | |
123 | displayField: 'year', | |
124 | editable: false, | |
125 | valueField: 'year', | |
126 | }, | |
127 | { | |
128 | xtype: 'combobox', | |
129 | reference: 'monthsel', | |
130 | store: { | |
131 | fields: ['month', 'name'], | |
132 | data: (function() { | |
133 | let i; | |
134 | let data = [{ month: 0, name: gettext('Whole year') }]; | |
135 | for (i = 1; i <= 12; i++) { | |
136 | data.push({ month: i, name: Ext.Date.monthNames[i-1] }); | |
137 | } | |
138 | return data; | |
139 | }()), | |
140 | }, | |
141 | listeners: { select: 'onSelect' }, | |
142 | queryMode: 'local', | |
143 | displayField: 'name', | |
144 | editable: false, | |
145 | valueField: 'month', | |
146 | }, | |
147 | { | |
148 | xtype: 'combobox', | |
149 | reference: 'daysel', | |
150 | store: { | |
151 | fields: ['day', 'name'], | |
152 | data: (function() { | |
153 | let i; | |
154 | let data = [{ day: 0, name: gettext('Whole month') }]; | |
155 | for (i = 1; i <= 31; i++) { | |
156 | data.push({ day: i, name: i }); | |
157 | } | |
158 | return data; | |
159 | }()), | |
160 | }, | |
161 | listeners: { select: 'onSelect' }, | |
162 | queryMode: 'local', | |
163 | displayField: 'name', | |
164 | editable: false, | |
165 | valueField: 'day', | |
166 | }, | |
167 | ], | |
168 | }); |