srehg
October 13, 2016, 4:09am
1
Hi there!
Does anyone have an example of a stopwatch built in ember? Something that displays times for minutes and seconds, and allows users to start, stop and reset?
I was able to find one example, but after replicating the component, was unable to determine how to actually get this to display and function on a page:
import Ember from 'ember';
export default Ember.Component.extend({
state: 'reset',
timeElapsed: 0,
lapTime: 0,
isResetState: Ember.computed.equal('state', 'reset'),
isRunState: Ember.computed.equal('state', 'run'),
isPauseState: Ember.computed.equal('state', 'pause'),
isLapState: Ember.computed.equal('state', 'lap'),
incrementTimeElapsed(startDate) {
let currentDate = new Date();
if (this.get('isRunState') || this.get('isLapState')) {
this.incrementProperty('timeElapsed', currentDate.valueOf() - startDate.valueOf());
Ember.run.next(this, 'incrementTimeElapsed', new Date());
}
This file has been truncated. show original
l_tonz
October 21, 2016, 10:29pm
2
are you using the component to display the data?
//stopwatch-component.hbs
{{timeElasped}}
<button {{action 'start'}}>Start</button>
<button {{action 'stop'}}>Stop</button>
<button {{action 'reset'}}>Reset</button>
//stopwatch-component.js
actions: {
start() {
this.set(‘state’, ‘run’);
this.incrementTimeElapsed(new Date());
},
stop() {
this.set('state', 'pause');
},
reset() {
this.set('state', 'reset');
this.set('timeElapsed', 0);
},
hold() {
this.set('lapTime', this.get('timeElapsed'));
this.set('state', 'lap');
},
continue() {
this.set('state', 'run');
},
},