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         onSelect: function() {
  77             this.updateVisibility();
  78         },
  79
  80         init: function(view) {
  81             let statics = Ext.getClass(view);
  82
  83             let yearsel = this.lookupReference('yearsel');
  84             let monthsel = this.lookupReference('monthsel');
  85             let daysel = this.lookupReference('daysel');
  86
  87             yearsel.setValue(statics.selected_year);
  88             monthsel.setValue(statics.selected_month);
  89             daysel.setValue(statics.selected_month ? statics.selected_day : 0);
  90
  91             this.updateVisibility();
  92         },
  93     },
  94
  95     items: [
  96         {
  97             xtype: 'combobox',
  98             reference: 'yearsel',
  99             store: {
 100                 fields: ['year'],
 101                 data: (function() {
 102                     let today = new Date();
 103                     let year = today.getFullYear();
 104                     return [{ year: year }, { year: year -1 }, { year: year -2 }];
 105                 }()),
 106             },
 107             listeners: { select: 'onSelect' },
 108             value: new Date().getFullYear(),
 109             queryMode: 'local',
 110             displayField: 'year',
 111             editable: false,
 112             valueField: 'year',
 113         },
 114         {
 115             xtype: 'combobox',
 116             reference: 'monthsel',
 117             store: {
 118                 fields: ['month', 'name'],
 119                 data: (function() {
 120                     let i;
 121                     let data = [{ month: 0, name: gettext('Whole year') }];
 122                     for (i = 1; i <= 12; i++) {
 123                         data.push({ month: i, name: Ext.Date.monthNames[i-1] });
 124                     }
 125                     return data;
 126                 }()),
 127             },
 128             listeners: { select: 'onSelect' },
 129             queryMode: 'local',
 130             displayField: 'name',
 131             editable: false,
 132             valueField: 'month',
 133         },
 134         {
 135             xtype: 'combobox',
 136             reference: 'daysel',
 137             store: {
 138                 fields: ['day', 'name'],
 139                 data: (function() {
 140                     let i;
 141                     let data = [{ day: 0, name: gettext('Whole month') }];
 142                     for (i = 1; i <= 31; i++) {
 143                         data.push({ day: i, name: i });
 144                     }
 145                     return data;
 146                 }()),
 147             },
 148             listeners: { select: 'onSelect' },
 149             queryMode: 'local',
 150             displayField: 'name',
 151             editable: false,
 152             valueField: 'day',
 153         },
 154     ],
 155 });