js/StatTimeSelector.js

   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 });