New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  actions: {
    t1:function(arg) {
      alert('t1');
    },
    t2:function(arg) {
      arg.stopPropagation();
      alert('t2');
      return false;
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<div onclick={{action "t1" preventDefault=true bubbles=false}}>test1
<span onclick={{action "t2" preventDefault=true bubbles=false}}>test2</span>
</div>
{{my-component}}

my-component.component.js

import Ember from 'ember';


var boardlet = Ember.Component.extend( {
    tagName: 'section',
    classNameBindings: [':boardlet', ':boardlet-time'],

    mode: 'compact', // modes are 'boardlet' and 'compact' and are passed as paramter to the component, if null a standard boardlet will be rendered

    boardletMenuExtensionNames: ['boardlet-menu-extension-default'],

    activeController: null,

    shiftButtonLabel: 'Shift',
    dayButtonLabel: 'Day',
    weekButtonLabel: 'Week',
    monthButtonLabel: 'Month',
    yearButtonLabel: 'Year',
    selectDateButtonLabel: 'Select Date',
    applyButtonLabel: 'Apply',
    dropdownItemShiftLabel: 'Shift',
    dropdownItemTimeLabel: 'Time',
    earlyShiftLabel: '1st Shift',
    middleShiftLabel: '2nd Shift',
    lateShiftLabel: '3rd Shift',

    startDateLabel: 'Start Date',
    endDateLabel: 'End Date',
    placeholderDate: 'Add a date',

    placeholderDropdown: 'Please choose...',

    startDate: null,
    endDate: null,

    selectionDropdownOpen: false,
    timeTypes: false,

    boardletTitle: 'Time Boardlet',

    commitChangeLabel: 'Commit changes',

    boardletTimeFunctionParameter: Ember.computed(function() {
        return {
            parameterType: "Enum",
            value: this.get('yearButtonLabel'),
            editor: {
                component: 'dropdown-component',
                parameters: {
                    enumValues: this.get('shiftButtonLabel') + ',' + this.get('dayButtonLabel') + ',' + this.get('weekButtonLabel')  + ',' + this.get('monthButtonLabel')  + ',' + this.get('yearButtonLabel') + ',' + this.get('selectDateButtonLabel')
                }
            }
        };
    }),

    startDateTimeTypeParameter: Ember.computed(function() {
        return {
            parameterType: "Enum",
            value: this.get('shiftButtonLabel'),
            editor: {
                component: 'dropdown-component',
                parameters: {
                    enumValues: this.get('dropdownItemShiftLabel') + ',' + this.get('dropdownItemTimeLabel')
                }
            }
        };
    }),

    endDateTimeTypeParameter: Ember.computed(function() {
        return {
            parameterType: "Enum",
            value: this.get('shiftButtonLabel'),
            editor: {
                component: 'dropdown-component',
                parameters: {
                    enumValues: this.get('dropdownItemShiftLabel') + ',' + this.get('dropdownItemTimeLabel')
                }
            }
        };
    }),


    startDateShiftParameter: Ember.computed(function() {
        return {
            parameterType: "Enum",
            value: this.get('earlyShiftLabel'),
            editor: {
                component: 'dropdown-component',
                parameters: {
                    enumValues: this.get('earlyShiftLabel') + ',' + this.get('middleShiftLabel') + ',' + this.get('lateShiftLabel')
                }
            }
        };
    }),

    endDateShiftParameter: Ember.computed(function() {
        return {
            parameterType: "Enum",
            value: this.get('earlyShiftLabel'),
            editor: {
                component: 'dropdown-component',
                parameters: {
                    enumValues: this.get('earlyShiftLabel') + ',' + this.get('middleShiftLabel') + ',' + this.get('lateShiftLabel')
                }
            }
        };
    }),

    startDateTime: '00:00',
    endDateTime: '00:00',

    updatedStartDate: false,
    updatedEndDate: false,
    submitted: false,


    initControllers: function() {
        let self = this;

        this.set('activeController', 'Year');
        this.$('.timerange-controls').show();

        this.$('div.time-type-time').hide();

        this.$().click(function(){
            self.toggleProperty('submitted'); // made to ensure you submitt time controls every time
        });

        this.$('div.change-commit').hide();

    }.on('didInsertElement'),

    watchTimeTypes: function() {
        this.$('div.time-type-time').hide();
        this.$('div.time-type-shift').hide();

        if(this.get('startDateTimeTypeParameter.value') === this.get('dropdownItemTimeLabel')){
            this.$('div.time-type-time.start-date').show();
        } else {
            this.$('div.time-type-shift.start-date').show();
        }

        if(this.get('endDateTimeTypeParameter.value') === this.get('dropdownItemTimeLabel')){
            this.$('div.time-type-time.end-date').show();
        } else {
            this.$('div.time-type-shift.end-date').show();
        }
    }.observes('updatedStartDate', 'updatedEndDate'),

    watchTimeFunctionParameter: function() {
        this.set('activeController', this.get('boardletTimeFunctionParameter.value'));

        if(this.get('activeController') !== this.get('selectDateButtonLabel')) {
            this.$('li.timerange-controls').show();
            this.$('li.timerange-free-timerange').hide();

            //show the user that he needs to apply changes
            this.$('div.change-commit').show();
            this.$('div.time-info').addClass('lower-opacity');
        } else {
            this.$('li.timerange-controls').hide();
            this.$('li.timerange-free-timerange').show();
        }
    }.observes('boardletTimeFunctionParameter.value'),

    selectedTimeFrame: Ember.computed('activeController', 'selectionDropdownOpen', {
        get(key) {
            let date = new Date();
            let month = date.getUTCMonth() + 1; //months from 1-12
            let day = date.getUTCDate();
            let year = date.getUTCFullYear();

            if(this.get('activeController') === this.get('yearButtonLabel')) {
                return year;
            }

            if(this.get('activeController') === this.get('monthButtonLabel')) {
                return month + '/' + year;
            }

            if(this.get('activeController') === this.get('weekButtonLabel')) {
                let firstDayOfTheYear = new Date(year,0,1);
                return this.get('weekButtonLabel') + ' ' + Math.ceil((((date - firstDayOfTheYear) / 86400000) + firstDayOfTheYear.getDay() + 1)/7) + ', ' + date.getFullYear();
            }

            if(this.get('activeController') === this.get('dayButtonLabel')) {
                return day + '/' + month + '/' + year;
            }

            if(this.get('activeController') === this.get('shiftButtonLabel')) {
                //TODO(Christian): implement some sort of relevant shift logic
                return this.get('earlyShiftLabel');
            }

            if(this.get('activeController') === this.get('selectDateButtonLabel')) {
                if(!this.get('startDate') || !this.get('endDate')) {
                    return 'Please select both limits of the time interval!';
                }

                if(this.get('startDateTimeTypeParameter.value') === this.get('dropdownItemTimeLabel')) {
                    if(this.get('endDateTimeTypeParameter.value') === this.get('dropdownItemTimeLabel')) {
                        return this.get('startDate') + ' ' + this.get('startDateTime') + ' - ' + this.get('endDate') + ' ' +  this.get('endDateTime');
                    } else {
                        return this.get('startDate') + ' ' + this.get('startDateTime') + ' - ' + this.get('endDate') + ' ' + this.get('endDateShiftParameter.value');
                    }
                } else {
                    if(this.get('endDateTimeTypeParameter.value') === this.get('dropdownItemTimeLabel')) {
                        return this.get('startDate') + ' ' + this.get('startDateShiftParameter.value') + ' - ' + this.get('endDate') + ' ' + this.get('endDateTime');
                    } else {
                        return this.get('startDate') + ' ' + this.get('startDateShiftParameter.value') + ' - ' + this.get('endDate')  + ' ' + this.get('endDateShiftParameter.value');
                    }
                }
            }

            //show the user that he needs to apply changes
            Ember.run.scheduleOnce('afterRender', this, function() {
                this.$('div.change-commit').show();
                this.$('div.time-info').addClass('lower-opacity');
            });
        },

        set(key, value) {
            return value;
        }
    }),

    committedTimeFrame: Ember.computed(function() {
        return {
            dispalyName: "Selected Timeframe",
            value: '',
            editor: {

            }
        };
    }),

    activeControllerChanged: function() {
        //show the user that he needs to apply changes
        Ember.run.scheduleOnce('afterRender', this, function() {
            this.$('div.change-commit').show();
            this.$('div.time-info').addClass('lower-opacity');
        });

        this.$('.button-group.time-mode-buttons').children().removeClass('active');
        this.$('.button-' + this.get('activeController').toLowerCase()).addClass('active');
    }.observes('activeController'),

    dateSelectionDropdownClasses: Ember.computed('selectionDropdownOpen', 'activeController', function() {
        let classes = "button button-dropdown button-dropdown-free-timerange open-on-click ";
        if(this.get('selectionDropdownOpen') === true) {
            classes += "dropdown-open ";
        }
        if(this.get('activeController') === this.get('selectDateButtonLabel')) {
            classes += "active ";
        }
        return classes;
    }),

    actions: {
        clickedController: function(itemClicked) {
            this.set('activeController', itemClicked);
        },

        incrementTimeFrame: function() {
            this.$('div.change-commit').show();
            this.$('div.time-info').addClass('lower-opacity');

            if(this.get('activeController') === this.get('yearButtonLabel')) {
                let date = new Date(this.get('selectedTimeFrame'), 0, 1);

                date.setYear(date.getFullYear() + 1);
                this.set('selectedTimeFrame', date.getFullYear());
            }

            if(this.get('activeController') === this.get('monthButtonLabel')) {
                let [month, year] = this.get('selectedTimeFrame').split('/');
                let date = new Date(year, month - 1, 1); // months in Date are 0-11

                date.setMonth(month); // months in Date are 0-11
                this.set('selectedTimeFrame', (Number(date.getMonth()) + 1) + '/' + date.getFullYear());
            }

            if(this.get('activeController') === this.get('weekButtonLabel')) {
                let [week, year] = this.get('selectedTimeFrame').split(',');

                year = year.trim();
                week = week.split(' ')[1];

                if(Number(week) === 52) {
                    this.set('selectedTimeFrame', this.get('weekButtonLabel') + ' 1, ' + (Number(year) + 1));
                } else {
                    this.set('selectedTimeFrame', this.get('weekButtonLabel') + ' ' +  (Number(week) + 1) + ', '+ year);
                }
            }

            if(this.get('activeController') === this.get('dayButtonLabel')) {
                let [day, month, year] = this.get('selectedTimeFrame').split('/');
                let date = new Date(year, month - 1, day); // months are 0-11

                date.setDate(date.getDate() + 1);
                this.set('selectedTimeFrame', date.getDate() + '/' + (Number(date.getMonth()) + 1) + '/' + date.getFullYear());
            }

            if(this.get('activeController') === this.get('shiftButtonLabel')) {
                //TODO(Christian): add date (day/month/year) and increment (1 shift unit) the whole time window
                let selectedTimeFrame = this.get('selectedTimeFrame');

                if(selectedTimeFrame.indexOf('1') !== -1) {
                    this.set('selectedTimeFrame', '2nd shift');
                }

                if(selectedTimeFrame.indexOf('2') !== -1) {
                    this.set('selectedTimeFrame', '3rd shift');
                }

                if(selectedTimeFrame.indexOf('3') !== -1) {
                    this.set('selectedTimeFrame', '1st shift');
                }
            }

            if(this.get('activeController') === this.get('selectDateButtonLabel')) {
                let selectedTimeFrame = this.get('selectedTimeFrame');
                let incrementUnit = this._parseEndDateFromTimeFrame(selectedTimeFrame).getTime() - this._parseStartDateFromTimeFrame(selectedTimeFrame).getTime();

                let newStartDate = moment( this._parseStartDateFromTimeFrame(selectedTimeFrame).setTime(this._parseStartDateFromTimeFrame(selectedTimeFrame).getTime() + incrementUnit) );
                let newEndDate = moment( this._parseEndDateFromTimeFrame(selectedTimeFrame).setTime(this._parseEndDateFromTimeFrame(selectedTimeFrame).getTime() + incrementUnit));

                this.set('selectedTimeFrame', newStartDate.format("DD/MM/YYYY HH:mm").toString() + ' - ' + newEndDate.format("DD/MM/YYYY HH:mm").toString());
            }

        },

        decrementTimeFrame: function() {
            this.$('div.change-commit').show();
            this.$('div.time-info').addClass('lower-opacity');

            if(this.get('activeController') === this.get('yearButtonLabel')) {
                let date = new Date(this.get('selectedTimeFrame'), 0, 1);

                date.setYear(date.getFullYear() - 1);
                this.set('selectedTimeFrame', date.getFullYear());
            }

            if(this.get('activeController') === this.get('monthButtonLabel')) {
                let [month, year] = this.get('selectedTimeFrame').split('/');
                let date = new Date(year, month - 1, 1); // months in Date are 0-11

                date.setMonth(month - 2); // months in Date are 0-11
                this.set('selectedTimeFrame', (Number(date.getMonth()) + 1) + '/' + date.getFullYear());
            }

            if(this.get('activeController') === this.get('weekButtonLabel')) {
                let [week, year] = this.get('selectedTimeFrame').split(',');

                year = year.trim();
                week = week.split(' ')[1];

                if(Number(week) === 1) {
                    this.set('selectedTimeFrame', this.get('weekButtonLabel') + ' 52, ' + (Number(year) - 1));
                } else {
                    this.set('selectedTimeFrame', this.get('weekButtonLabel') + ' ' +  (Number(week) - 1) + ', '+ year);
                }
            }

            if(this.get('activeController') === this.get('dayButtonLabel')) {
                let [day, month, year] = this.get('selectedTimeFrame').split('/');
                let date = new Date(year, month - 1, day); // months in Date are 0-11

                date.setDate(date.getDate() - 1);
                this.set('selectedTimeFrame', date.getDate() + '/' + (Number(date.getMonth()) + 1) + '/' + date.getFullYear());
            }

            if(this.get('activeController') === this.get('shiftButtonLabel')) {
                //TODO(Christian): add date (day/month/year) and increment (1 shift unit) the whole time window
                let selectedTimeFrame = this.get('selectedTimeFrame');

                if(selectedTimeFrame.indexOf('1') !== -1) {
                    this.set('selectedTimeFrame', '3rd shift');
                }

                if(selectedTimeFrame.indexOf('2') !== -1) {
                    this.set('selectedTimeFrame', '1st shift');
                }

                if(selectedTimeFrame.indexOf('3') !== -1) {
                    this.set('selectedTimeFrame', '2nd shift');
                }
            }

            if(this.get('activeController') === this.get('selectDateButtonLabel')) {
                let selectedTimeFrame = this.get('selectedTimeFrame');
                let incrementUnit = this._parseEndDateFromTimeFrame(selectedTimeFrame).getTime() - this._parseStartDateFromTimeFrame(selectedTimeFrame).getTime();

                let newStartDate = moment( this._parseStartDateFromTimeFrame(selectedTimeFrame).setTime(this._parseStartDateFromTimeFrame(selectedTimeFrame).getTime() - incrementUnit) );
                let newEndDate = moment( this._parseEndDateFromTimeFrame(selectedTimeFrame).setTime(this._parseEndDateFromTimeFrame(selectedTimeFrame).getTime() - incrementUnit));

                this.set('selectedTimeFrame', newStartDate.format("DD/MM/YYYY HH:mm").toString() + ' - ' + newEndDate.format("DD/MM/YYYY HH:mm").toString());
            }
        },

        toggleDropDownArrow: function(event) {
          debugger;
            // ember is stupid for not having directed events
            if(Ember.$(event.target).html() !== this.get('selectDateButtonLabel')) {
                return false;
            }

            this.toggleProperty('selectionDropdownOpen');
            event.stopPropagation();
        },

        toggleDropDownApply: function(event) {
          debugger;
            // ember is stupid for not having directed events
            if(Ember.$(event.target).html() !== this.get('applyButtonLabel')) {
                return false;
            }

            this.set('startDate', this.$('input.start-date').val());
            this.set('endDate', this.$('input.end-date').val());

            this.set('activeController', this.get('selectDateButtonLabel'));

            this.toggleProperty('selectionDropdownOpen');
            event.stopPropagation();

            this.notifyPropertyChange('activeController');
        },

        commitChange: function() {
            this.$('div.time-info').removeClass('lower-opacity');
            this.$('div.change-commit').hide();

            let array = [];
            array.pushObject(this._parseStartDateFromTimeFrame(this.get('selectedTimeFrame')));
            array.pushObject(this._parseEndDateFromTimeFrame(this.get('selectedTimeFrame')));
            this.set('parameters.committedTimeFrame.value', array);
        },

        valueChanged: function(parameter, newValue) {
            Ember.set(parameter, 'value', newValue);
        }
    }
});

export default boardlet;

my-component.template.hbs

<div class="boardlet-content clearfix">
        <div class="time-selection-container">
            <div class="button-group time-nav-buttons">
                <div class="button" {{action 'decrementTimeFrame'}}>
                    <span class="button-text icon-left-open icon-only">
                    </span>
                </div>
                <div class="button" {{action 'incrementTimeFrame'}}>
                    <span class="button-text icon-right-open icon-only">
                    </span>
                </div>
            </div>

            <div class="time-info">
                {{selectedTimeFrame}}
            </div>

            <div class="change-commit">
                <div class="button icon-button save-dashboard" {{action 'commitChange'}}>
                    <a href="#" class="button-text icon-check" title={{commitChangeLabel}}>
                    </a>
                </div>
            </div>

            <div class="button-group time-mode-buttons">
                <div class="button button-shift" {{action 'clickedController' shiftButtonLabel}}><span class="button-text">{{shiftButtonLabel}}</span></div>
                <div class="button button-day" {{action 'clickedController' dayButtonLabel}}><span class="button-text">{{dayButtonLabel}}</span></div>
                <div class="button button-week" {{action 'clickedController' weekButtonLabel}}><span class="button-text">{{weekButtonLabel}}</span></div>
                <div class="button button-month" {{action 'clickedController' monthButtonLabel}}><span class="button-text">{{monthButtonLabel}}</span></div>
                <div class="button button-year" {{action 'clickedController' yearButtonLabel}}><span class="button-text">{{yearButtonLabel}}</span></div>
                <div class={{dateSelectionDropdownClasses}} onclick={{action 'toggleDropDownArrow' preventDefault=true bubbles=false}}>
                    <span class="button-text">{{selectDateButtonLabel}}</span>
                    <div class="dropdown">
                        <div class="dropdown-content">

                                <div class="form-line">
                                    <label>{{startDateLabel}}</label>
                                    <input type="text" class="form-control datepicker start-date" placeholder={{placeholderDate}}>
                                </div>

                                <div class="form-line form-row">
                                    <div class="form-col col-2">
                                        
                                    </div>

                                    <div class="form-col col-2">
                                        <div class="time-type-shift start-date">
                                           
                                        </div>
                                        <div class="time-type-time start-date timepicker">
                                            {{input type="text" class="" value=startDateTime}}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-line">
                                    <label>{{endDateLabel}}</label>
                                    <input type="text" class="form-control datepicker end-date" placeholder={{placeholderDate}}>
                                </div>

                                <div class="form-line form-row">
                                    <div class="form-col col-2">
                                     
                                    </div>

                                    <div class="form-col col-2">
                                        <div class="time-type-shift end-date">
                                         
                                        </div>
                                        <div class="time-type-time end-date timepicker">
                                            {{input type="text" class="" value=endDateTime}}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <button><span class="button-text" onclick={{action 'toggleDropDownApply' preventDefault=true bubbles=false}}>{{applyButtonLabel}}</span></button>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>

twiddle.json

{
  "version": "0.5.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}