heating-timeline

This README outlines the details of collaborating on this Ember addon.

Adding to existing project

• Install private addon npm install https://bitbucket.org/sauceio/heating-timeline#tag --save
• Install Hammer.js bower install hammerjs --save
• Add hammer js file to ember-cli-build.js app.import('bower_components/hammerjs/hammer.min.js');
• Add css styles (currently found in tests/dummy/app/styles/app.scss)

Component

Add the following component to you hbs views.

{{heating-timeline}}

Attributes

Model

A collection of ember models representing heating periods. Each period must have the following attributes:

• start - A decimal number between 0 and - 24 using .25 increments
• end - A decimal number between 0 and - 24 using .25 increments
• temp - A decimal number between 10 - 30 using .5 increments

Minimized

The timeline has two modes, expanded (default) and minimized. Pass false to this attributes to display the minimized view.

{{heating-timeline minimized=true}}

Actions

periodSelected

This action is called when a period is selected. The action is passed the period object as a parameter

emptyPeriodSelected

This action is called when an empty period is selected. The action is passed an empty period object as a parameter. This object has start and end properties which will represent the whole of the empty period.

panDisabled

Whnce set to true the timeline can not be panned by swiping along the x axis

Service

The heating timeline comes with an ember service which you should use to control the scale and offset from your routes or other components.

timeline: Ember.inject.service(),

Methods

Go to period

Zoom the timeline to a given period defined by the start and end params. The timeline will zoom in so the given period takes the middle 50% of the x axis. In the following example the time line will scale to 3x and the x axis will start at 15:00.

this.get('timeline').goToPeriod(17, 21)

Reset

This is the same as setting the scale to 1 & offset to 0. It will reset the timeline to the 24 hour view.

this.get('timeline').reset()

Active Period

Set a period as active so it's temperature can be adjusted.

this.get('timeline').set('activePeriod', period);

Scale

Sets the scale of the timelines x axis. This default is 1 and will display 24 hours along the x axis. 2 will display 12 hours etc.

this.get('timeline').set('scale', 2);

Offset

Combined with scale this offsets the x axis by a number of hours. The defaut is 0 so the x axis starts at 00:00. 8 will offset the x axis so it starts at 08:00 etc.

this.get('timeline').set('offset', 8);

Installation

• git clone https://bitbucket.org/sauceio/heating-timeline this repository
• cd heating-timeline
• npm install
• bower install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.