tine20/Calendar/js/EventFinderOptionsDialog.js
Rama main · réplica de lectura del repositorio original.
/*
* Tine 2.0
*
* @license http://www.gnu.org/licenses/agpl.html AGPL Version 3
* @author Michael Spahn <m.spahn@metaways.de>
* @copyright Copyright (c) 2017 Metaways Infosystems GmbH (http://www.metaways.de)
*/
Ext.ns('Tine.Calendar');
/**
* File picker dialog
*
* @namespace Tine.Calendar
* @class Tine.Calendar.EventFinderOptionsDialog
* @extends Ext.FormPanel
* @constructor
* @param {Object} config The configuration options.
*/
Tine.Calendar.EventFinderOptionsDialog = Ext.extend(Ext.Panel, {
defaultOptions: [
{id: 'MO', active: true, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'TU', active: true, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'WE', active: true, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'TH', active: true, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'FR', active: true, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'SA', active: false, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }},
{id: 'SU', active: false, config: [8, 18.00], period: {from: '08:00:00', until: '18:00:00' }}
],
windowNamePrefix: 'eventfinderoptionsdialog_',
app: null,
cls: 'tw-editdialog',
header: false,
border: false,
layout: 'fit',
wkdays: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
MOSlider: null,
TUSlider: null,
WESlider: null,
THSlider: null,
FRSlider: null,
SASlider: null,
SUSlider: null,
MOCheckbox: null,
TUCheckbox: null,
WECheckbox: null,
THCheckbox: null,
FRCheckbox: null,
SACheckbox: null,
SUCheckbox: null,
stateId: 'eventFinderOptions',
stateConfig: [],
initComponent: function () {
if (null === this.app) {
this.app = Tine.Tinebase.appMgr.get('Calendar');
}
this.title = this.titleText ? this.titleText : this.app.i18n._('Event finder options');
this.window.setTitle(this.title);
this.initActions();
this.initButtons();
this.stateConfig = Ext.state.Manager.get(this.stateId, this.defaultOptions);
this.items = this.getFormItems();
this.supr().initComponent.apply(this, arguments);
},
initButtons: function () {
this.fbar = [
'->'
];
this.fbar.push(this.action_cancel, this.action_saveAndClose);
},
initActions: function () {
this.action_saveAndClose = new Ext.Action({
text: this.app.i18n._('Ok'),
minWidth: 70,
ref: '../btnSaveAndClose',
scope: this,
handler: function () {
this.onSaveAndClose();
},
variant: 'primary',
iconCls: 'action_saveAndClose'
});
this.action_cancel = new Ext.Action({
text: this.app.i18n._('Cancel'),
minWidth: 70,
scope: this,
handler: this.onCancel,
iconCls: 'action_cancel'
});
this.actionUpdater = new Tine.widgets.ActionUpdater({
evalGrants: false
});
this.actionUpdater.addActions([
this.action_saveAndClose,
this.action_cancel
]);
},
onCancel: function () {
this.window.close();
},
/**
* Get a time period of a given slider range
*
* 0:0:0 - 23:59:59
*
* @param range
* @return {{from: *, until: *}}
*/
getPeriodFromSliderRange: function (range) {
var hoursStart = Tine.Tinebase.common.trunc(range[0]);
var minStart = Tine.Tinebase.common.trunc(Math.round((range[0] % 1) * 100) * 0.60);
var hoursEnd = Tine.Tinebase.common.trunc(range[1]);
var minEnd = Tine.Tinebase.common.trunc((range[1] % 1) * 100 * 0.60);
var startDate = new Date();
startDate.setHours(hoursStart);
startDate.setMinutes(minStart);
startDate.setSeconds(0);
var endDate = new Date();
endDate.setHours(hoursEnd);
endDate.setMinutes(minEnd);
endDate.setSeconds((hoursEnd === 23 && minEnd === 59) ? 59 : 0);
var pattern = 'H:i:s';
return {
from: startDate.format(pattern),
until: endDate.format(pattern)
};
},
onSaveAndClose: function () {
var data = [{
id: 'MO',
active: this.MOCheckbox.getValue(),
config: this.MOSlider.getRange(),
period: this.getPeriodFromSliderRange(this.MOSlider.getRange())
}, {
id: 'TU',
active: this.TUCheckbox.getValue(),
config: this.TUSlider.getRange(),
period: this.getPeriodFromSliderRange(this.TUSlider.getRange())
}, {
id: 'WE',
active: this.WECheckbox.getValue(),
config: this.WESlider.getRange(),
period: this.getPeriodFromSliderRange(this.WESlider.getRange())
}, {
id: 'TH',
active: this.THCheckbox.getValue(),
config: this.THSlider.getRange(),
period: this.getPeriodFromSliderRange(this.THSlider.getRange())
}, {
id: 'FR',
active: this.FRCheckbox.getValue(),
config: this.FRSlider.getRange(),
period: this.getPeriodFromSliderRange(this.FRSlider.getRange())
}, {
id: 'SA',
active: this.SACheckbox.getValue(),
config: this.SASlider.getRange(),
period: this.getPeriodFromSliderRange(this.SASlider.getRange())
}, {
id: 'SU',
active: this.SUCheckbox.getValue(),
config: this.SUSlider.getRange(),
period: this.getPeriodFromSliderRange(this.SUSlider.getRange())
}];
Ext.state.Manager.set(this.stateId, data);
this.fireEvent('apply', this, Ext.encode(data));
this.window.close();
},
onCheckSlider: function (cb, checked) {
this[cb.name + 'Slider'].setDisabled(!checked);
},
getCheckboxSliderRowFor: function (id) {
var _ = window.lodash;
var config = _.find(this.stateConfig, function (o) {
return o.id === id;
});
return {
layout: 'hbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
height: 30,
items: [
{
xtype: 'checkbox',
checked: !!config && config.active,
boxLabel: Date.dayNames[this.wkdays.indexOf(id)],
name: id,
anchor: '95%',
flex: 1,
ref: '../../../../../' + id + 'Checkbox',
listeners: {scope: this, check: this.onCheckSlider}
}, this.getSliderFor(id, config)
]
};
},
getSliderFor: function (id, config) {
var _ = window.lodash;
var sliderId = id + 'Slider';
var sliderStart = 0;
var sliderEnd = 23.9999;
if (config) {
sliderStart = config.config[0];
sliderEnd = config.config[1];
}
return new Tine.Tinebase.RangeSliderComponent({
width: 500,
ref: '../../../../../' + sliderId,
currentStart: sliderStart,
currentEnd: sliderEnd,
disabled: !config || !config.active
});
},
/**
* @todo: improve layout, rangeslidercomponent can't deal with resizing! Techically it can but it's extremely slow atm!
*/
getFormItems: function () {
var wkdayItems = [];
for (var i = 0, d; i < 7; i++) {
d = (i + Ext.DatePicker.prototype.startDay) % 7;
wkdayItems.push(this.getCheckboxSliderRowFor(this.wkdays[d]));
}
var sliderElements = [{
layout: 'vbox',
border: false,
layoutConfig: {
align: 'stretch',
pack: 'start'
},
items: wkdayItems
}];
return {
xtype: 'tabpanel',
border: false,
plain: true,
defaults: {
hideMode: 'offsets'
},
plugins: [{
ptype: 'ux.tabpanelkeyplugin'
}],
activeTab: 0,
items: [{
title: this.title,
autoScroll: true,
border: false,
frame: true,
layout: 'border',
items: [{
region: 'center',
layout: 'fit',
border: false,
items: sliderElements
}]
}]
};
}
});
/**
* Create new EventFinderOptionsDialog window
*/
Tine.Calendar.EventFinderOptionsDialog.openWindow = function (config) {
var window = Tine.WindowFactory.getWindow({
width: 800,
height: 300,
name: Tine.Calendar.EventFinderOptionsDialog.prototype.windowNamePrefix + config.recordId,
contentPanelConstructor: 'Tine.Calendar.EventFinderOptionsDialog',
contentPanelConstructorConfig: config
});
return window;
};