ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-16 15:29:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Timer] Updated Timer UI to indicate playing or paused state

Browse Source 
Removed PauseCheck & TimeOfPause from properties, Removed duplicate functionality Resume class , replaced peeking restart at 0 button with persistent play/pause button
This commit is contained in:
DJ 2017-01-18 07:08:54 -06:00
parent d04bdd2685
commit ecf1bac5c7
15 changed files with 201 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
platform/features/clock/bundle.js
View File

@ -30,7 +30,6 @@ define([
"./src/actions/RestartTimerAction",
"./src/actions/StopTimerAction",
"./src/actions/PauseTimerAction",
"./src/actions/ResumeTimerAction",
"text!./res/templates/clock.html",
"text!./res/templates/timer.html",
'legacyRegistry'
@ -44,7 +43,6 @@ define([
RestartTimerAction,
StopTimerAction,
PauseTimerAction,
ResumeTimerAction,
clockTemplate,
timerTemplate,
legacyRegistry
@ -145,17 +143,6 @@ define([
"cssclass": "icon-play",
"priority": "preferred"
},
{
"key": "timer.restart",
"implementation": RestartTimerAction,
"depends": [
"now"
],
"category": "contextual",
"name": "Restart at 0",
"cssclass": "icon-refresh",
"priority": "preferred"
},
{
"key": "timer.pause",
"implementation": PauseTimerAction,
@ -168,14 +155,14 @@ define([
"priority": "preferred"
},
{
"key": "timer.resume",
"implementation": ResumeTimerAction,
"key": "timer.restart",
"implementation": RestartTimerAction,
"depends": [
"now"
],
"category": "contextual",
"name": "Resume",
"cssclass": "icon-play",
"name": "Restart at 0",
"cssclass": "icon-refresh",
"priority": "preferred"
},
{
@ -277,16 +264,6 @@ define([
"name": "hh:mm:ss"
}
]
},
{
"key": "paused",
"control": "boolean",
"name": "PauseCheck"
},
{
"key": "pausedTime",
"control": "long",
"name": "TimeOfPause"
}
],
"model": {

2
platform/features/clock/res/templates/timer.html
View File

@ -23,7 +23,7 @@
<div class="l-elem-wrapper l-flex-row">
<a ng-click="timer.clickButton()"
title="{{timer.buttonText()}}"
class="flex-elem control s-icon-button {{timer.buttonCssClass()}}"></a>
class="flex-elem s-icon-button {{timer.buttonCssClass()}}"></a>
<span class="flex-elem l-value {{timer.signClass()}}">
<span class="value"
ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}

19
platform/features/clock/src/actions/AbstractTimerAction.js
View File

@ -50,15 +50,26 @@ define(
now = this.now;
function setTimestamp(model) {
model.timestamp = now();
//if we are resuming
if (model.pausedTime) {
var timeShift = now() - model.pausedTime;
model.timestamp = model.timestamp + timeShift;
} else {
model.timestamp = now();
}
}
function setPaused(model) {
model.paused = false;
function setTimerState(model) {
model.timerState = 'play';
}
function setPausedTime(model) {
model.pausedTime = undefined;
}
return domainObject.useCapability('mutation', setTimestamp) &&
domainObject.useCapability('mutation', setPaused);
domainObject.useCapability('mutation', setTimerState) &&
domainObject.useCapability('mutation', setPausedTime);
};
return AbstractTimerAction;

19
platform/features/clock/src/actions/PauseTimerAction.js
View File

@ -25,10 +25,10 @@ define(
function (AbstractTimerAction) {
/**
* Implements the "Start" action for timers.
* Implements the "Pause" action for timers.
*
* Sets the reference timestamp in a timer to the current
* time, such that it begins counting up.
* Sets the reference pausedTime in a timer to the current
* time, such that it stops counting up.
*
* @extends {platform/features/clock.AbstractTimerAction}
* @implements {Action}
@ -51,25 +51,26 @@ define(
{};
// We show this variant for timers which do not yet have
// a target time.
// We show this variant for timers which have
// a target time, or is in a playing state.
return model.type === 'timer' &&
model.timestamp !== undefined && !model.paused;
(model.timestamp !== undefined ||
model.timerState === 'play');
};
PauseTimerAction.prototype.perform = function () {
var domainObject = this.domainObject,
now = this.now;
function setPaused(model) {
model.paused = true;
function setTimerState(model) {
model.timerState = 'pause';
}
function setPausedTime(model) {
model.pausedTime = now();
}
return domainObject.useCapability('mutation', setPaused) &&
return domainObject.useCapability('mutation', setTimerState) &&
domainObject.useCapability('mutation', setPausedTime);
};

3
platform/features/clock/src/actions/RestartTimerAction.js
View File

@ -53,7 +53,8 @@ define(
// We show this variant for timers which already have
// a target time.
return model.type === 'timer' &&
model.timestamp !== undefined;
(model.timestamp !== undefined ||
model.timerState !== undefined);
};
return RestartTimerAction;

85
platform/features/clock/src/actions/ResumeTimerAction.js
View File

@ -1,85 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2009-2016, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
['./AbstractTimerAction'],
function (AbstractTimerAction) {
/**
* Implements the "Start" action for timers.
*
* Sets the reference timestamp in a timer to the current
* time, such that it begins counting up.
*
* @extends {platform/features/clock.AbstractTimerAction}
* @implements {Action}
* @memberof platform/features/clock
* @constructor
* @param {Function} now a function which returns the current
* time (typically wrapping `Date.now`)
* @param {ActionContext} context the context for this action
*/
function ResumeTimerAction(now, context) {
AbstractTimerAction.apply(this, [now, context]);
}
ResumeTimerAction.prototype =
Object.create(AbstractTimerAction.prototype);
ResumeTimerAction.appliesTo = function (context) {
var model =
(context.domainObject && context.domainObject.getModel()) ||
{};
// We show this variant for timers which do not yet have
// a target time.
return model.type === 'timer' &&
model.timestamp !== undefined &&
model.paused;
};
ResumeTimerAction.prototype.perform = function () {
var domainObject = this.domainObject,
now = this.now;
function setPaused(model) {
model.paused = false;
}
function setTimestamp(model) {
var timeShift = now() - model.pausedTime;
model.timestamp = model.timestamp + timeShift;
}
function setPausedTime(model) {
model.pausedTime = undefined;
}
return domainObject.useCapability('mutation', setPaused) &&
domainObject.useCapability('mutation', setTimestamp) &&
domainObject.useCapability('mutation', setPausedTime);
};
return ResumeTimerAction;
}
);

3
platform/features/clock/src/actions/StartTimerAction.js
View File

@ -53,7 +53,8 @@ define(
// We show this variant for timers which do not yet have
// a target time.
return model.type === 'timer' &&
model.timestamp === undefined;
(model.timestamp === undefined ||
model.timerState !== 'play');
};
return StartTimerAction;

20
platform/features/clock/src/actions/StopTimerAction.js
View File

@ -25,10 +25,10 @@ define(
function (AbstractTimerAction) {
/**
* Implements the "Start" action for timers.
* Implements the "Stop" action for timers.
*
* Sets the reference timestamp in a timer to the current
* time, such that it begins counting up.
* Sets the reference timestamp in a timer undefined,
* such that it is reset and makes no movements.
*
* @extends {platform/features/clock.AbstractTimerAction}
* @implements {Action}
@ -54,7 +54,8 @@ define(
// We show this variant for timers which do not yet have
// a target time.
return model.type === 'timer' &&
model.timestamp !== undefined;
(model.timestamp !== undefined ||
model.timerState !== undefined);
};
StopTimerAction.prototype.perform = function () {
@ -64,12 +65,17 @@ define(
model.timestamp = undefined;
}
function setPaused(model) {
model.paused = false;
function setTimerState(model) {
model.timerState = undefined;
}
function setPausedTime(model) {
model.pausedTime = undefined;
}
return domainObject.useCapability('mutation', setTimestamp) &&
domainObject.useCapability('mutation', setPaused);
domainObject.useCapability('mutation', setTimerState) &&
domainObject.useCapability('mutation', setPausedTime);
};
return StopTimerAction;

35
platform/features/clock/src/controllers/TimerController.js
View File

@ -42,6 +42,7 @@ define(
active = true,
relativeTimestamp,
lastTimestamp,
relativeTimerState,
self = this;
function update() {
@ -68,24 +69,34 @@ define(
relativeTimestamp = timestamp;
}
function updateTimerState(timerState) {
relativeTimerState = timerState;
}
function isPaused() {
return relativeTimerState === 'pause';
}
function updateObject(domainObject) {
var model = domainObject.getModel(),
timestamp = model.timestamp,
formatKey = model.timerFormat,
timerState = model.timerState,
actionCapability = domainObject.getCapability('action'),
actionKey = (timestamp === undefined) ?
'timer.start' : 'timer.restart';
actionKey = (timerState !== 'play') ?
'timer.start' : 'timer.pause';
self.paused = model.paused;
self.timerState = model.timerState;
self.pausedTime = model.pausedTime;
//if paused on startup show last known position
if (self.paused && !lastTimestamp){
lastTimestamp = self.pausedTime;
}
updateFormat(formatKey);
updateTimestamp(timestamp);
updateTimerState(timerState);
//if paused on startup show last known position
if (isPaused() && !lastTimestamp) {
lastTimestamp = self.pausedTime;
}
self.relevantAction = actionCapability &&
actionCapability.getActions(actionKey)[0];
@ -107,7 +118,7 @@ define(
var lastSign = self.signValue,
lastText = self.textValue;
if (!self.paused) {
if (!isPaused()) {
lastTimestamp = now();
update();
}
@ -141,7 +152,7 @@ define(
/**
* Get the CSS class to display the right icon
* for the start/restart button.
* for the start/pause button.
* @returns {string} cssclass to display
*/
TimerController.prototype.buttonCssClass = function () {
@ -150,7 +161,7 @@ define(
};
/**
* Get the text to show for the start/restart button
* Get the text to show for the start/pause button
* (e.g. in a tooltip)
* @returns {string} name of the action
*/
@ -161,7 +172,7 @@ define(
/**
* Perform the action associated with the start/restart button.
* Perform the action associated with the start/pause button.
*/
TimerController.prototype.clickButton = function () {
if (this.relevantAction) {

54
platform/features/clock/test/actions/PauseTimerActionSpec.js
View File

@ -57,7 +57,7 @@ define(
});
testModel = {};
testContext = { domainObject: mockDomainObject };
testContext = {domainObject: mockDomainObject};
action = new PauseTimerAction(mockNow, testContext);
});
@ -68,36 +68,36 @@ define(
expect(testModel.timestamp).toEqual(12000);
});
it("applies only to timers without a target time", function () {
//Timer is on
testModel.type = 'timer';
testModel.timestamp = 12000;
it("applies only to timers in a playing state", function () {
//in a stopped state
testStates(testModel, 'timer', undefined, undefined, false);
testModel.paused = true;
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
//in a paused state
testStates(testModel, 'timer', 'pause', undefined, false);
testModel.paused = false;
expect(PauseTimerAction.appliesTo(testContext)).toBeTruthy();
//in a playing state
testStates(testModel, 'timer', 'play', undefined, true);
//Timer has not started
testModel.timestamp = undefined;
testModel.paused = true;
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
testModel.paused = false;
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
//Timer is actually a clock
testModel.type = 'clock';
testModel.timestamp = 12000;
testModel.paused = true;
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
testModel.paused = false;
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy();
//not a timer
testStates(testModel, 'clock', 'pause', undefined, false);
});
function testStates(testModel, type, timerState, timestamp, expected) {
testModel.type = type;
testModel.timerState = timerState;
testModel.timestamp = timestamp;
if (expected) {
expect(PauseTimerAction.appliesTo(testContext)).toBeTruthy()
} else {
expect(PauseTimerAction.appliesTo(testContext)).toBeFalsy()
}
//first test without time, this test with time
if (timestamp === undefined) {
testStates(testModel, type, timerState, 12000, expected);
}
}
});
}
);

37
platform/features/clock/test/actions/RestartTimerActionSpec.js
View File

@ -68,19 +68,36 @@ define(
expect(testModel.timestamp).toEqual(12000);
});
it("applies only to timers with a target time", function () {
testModel.type = 'timer';
testModel.timestamp = 12000;
expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy();
it("applies only to timers in a non-stopped state", function () {
//in a stopped state
testStates(testModel, 'timer', undefined, undefined, false);
testModel.type = 'timer';
testModel.timestamp = undefined;
expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
//in a paused state
testStates(testModel, 'timer', 'pause', undefined, true);
testModel.type = 'clock';
testModel.timestamp = 12000;
expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy();
//in a playing state
testStates(testModel, 'timer', 'play', undefined, true);
//not a timer
testStates(testModel, 'clock', 'pause', undefined, false);
});
function testStates(testModel, type, timerState, timestamp, expected) {
testModel.type = type;
testModel.timerState = timerState;
testModel.timestamp = timestamp;
if (expected) {
expect(RestartTimerAction.appliesTo(testContext)).toBeTruthy()
} else {
expect(RestartTimerAction.appliesTo(testContext)).toBeFalsy()
}
//first test without time, this test with time
if (timestamp === undefined) {
testStates(testModel, type, timerState, 12000, expected);
}
}
});
}
);

103
platform/features/clock/test/actions/ResumeActionTimerSpec.js
View File

@ -1,103 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2009-2016, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
["../../src/actions/ResumeTimerAction"],
function (ResumeTimerAction) {
describe("A timer's Resume action", function () {
var mockNow,
mockDomainObject,
testModel,
testContext,
action;
function asPromise(value) {
return (value || {}).then ? value : {
then: function (callback) {
return asPromise(callback(value));
}
};
}
beforeEach(function () {
mockNow = jasmine.createSpy('now');
mockDomainObject = jasmine.createSpyObj(
'domainObject',
['getCapability', 'useCapability', 'getModel']
);
mockDomainObject.useCapability.andCallFake(function (c, v) {
if (c === 'mutation') {
testModel = v(testModel) || testModel;
return asPromise(true);
}
});
mockDomainObject.getModel.andCallFake(function () {
return testModel;
});
testModel = {};
testContext = { domainObject: mockDomainObject };
action = new ResumeTimerAction(mockNow, testContext);
});
it("updates the model with a timestamp", function () {
mockNow.andReturn(12000);
action.perform();
expect(testModel.timestamp).toEqual(12000);
});
it("applies only to timers without a target time", function () {
//Timer is on
testModel.type = 'timer';
testModel.timestamp = 12000;
testModel.paused = true;
expect(ResumeTimerAction.appliesTo(testContext)).toBeTruthy();
testModel.paused = false;
expect(ResumeTimerAction.appliesTo(testContext)).toBeFalsy();
//Timer has not started
testModel.timestamp = undefined;
testModel.paused = true;
expect(ResumeTimerAction.appliesTo(testContext)).toBeFalsy();
testModel.paused = false;
expect(ResumeTimerAction.appliesTo(testContext)).toBeFalsy();
//Timer is actually a clock
testModel.type = 'clock';
testModel.timestamp = 12000;
testModel.paused = true;
expect(ResumeTimerAction.appliesTo(testContext)).toBeFalsy();
testModel.paused = false;
expect(ResumeTimerAction.appliesTo(testContext)).toBeFalsy();
});
});
}
);

47
platform/features/clock/test/actions/StartTimerActionSpec.js
View File

@ -33,10 +33,10 @@ define(
function asPromise(value) {
return (value || {}).then ? value : {
then: function (callback) {
return asPromise(callback(value));
}
};
then: function (callback) {
return asPromise(callback(value));
}
};
}
beforeEach(function () {
@ -57,7 +57,7 @@ define(
});
testModel = {};
testContext = { domainObject: mockDomainObject };
testContext = {domainObject: mockDomainObject};
action = new StartTimerAction(mockNow, testContext);
});
@ -68,19 +68,36 @@ define(
expect(testModel.timestamp).toEqual(12000);
});
it("applies only to timers without a target time", function () {
testModel.type = 'timer';
testModel.timestamp = 12000;
expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
it("applies only to timers not in a playing state", function () {
//in a stopped state
testStates(testModel, 'timer', undefined, undefined, true);
testModel.type = 'timer';
testModel.timestamp = undefined;
expect(StartTimerAction.appliesTo(testContext)).toBeTruthy();
//in a paused state
testStates(testModel, 'timer', 'pause', undefined, true);
testModel.type = 'clock';
testModel.timestamp = 12000;
expect(StartTimerAction.appliesTo(testContext)).toBeFalsy();
//in a playing state
testStates(testModel, 'timer', 'play', undefined, false);
//not a timer
testStates(testModel, 'clock', 'pause', undefined, false);
});
function testStates(testModel, type, timerState, timestamp, expected) {
testModel.type = type;
testModel.timerState = timerState;
testModel.timestamp = timestamp;
if (expected) {
expect(StartTimerAction.appliesTo(testContext)).toBeTruthy()
} else {
expect(StartTimerAction.appliesTo(testContext)).toBeFalsy()
}
//first test without time, this test with time
if (timestamp === undefined) {
testStates(testModel, type, timerState, 12000, expected);
}
}
});
}
);

47
platform/features/clock/test/actions/StopTimerActionSpec.js
View File

@ -33,10 +33,10 @@ define(
function asPromise(value) {
return (value || {}).then ? value : {
then: function (callback) {
return asPromise(callback(value));
}
};
then: function (callback) {
return asPromise(callback(value));
}
};
}
beforeEach(function () {
@ -57,7 +57,7 @@ define(
});
testModel = {};
testContext = { domainObject: mockDomainObject };
testContext = {domainObject: mockDomainObject};
action = new StopTimerAction(mockNow, testContext);
});
@ -68,19 +68,36 @@ define(
expect(testModel.timestamp).toEqual(12000);
});
it("applies only to timers without a target time", function () {
testModel.type = 'timer';
testModel.timestamp = 12000;
expect(StopTimerAction.appliesTo(testContext)).toBeTruthy();
it("applies only to timers in a non-stopped state", function () {
//in a stopped state
testStates(testModel, 'timer', undefined, undefined, false);
testModel.type = 'timer';
testModel.timestamp = undefined;
expect(StopTimerAction.appliesTo(testContext)).toBeFalsy();
//in a paused state
testStates(testModel, 'timer', 'pause', undefined, true);
testModel.type = 'clock';
testModel.timestamp = 12000;
expect(StopTimerAction.appliesTo(testContext)).toBeFalsy();
//in a playing state
testStates(testModel, 'timer', 'play', undefined, true);
//not a timer
testStates(testModel, 'clock', 'pause', undefined, false);
});
function testStates(testModel, type, timerState, timestamp, expected) {
testModel.type = type;
testModel.timerState = timerState;
testModel.timestamp = timestamp;
if (expected) {
expect(StopTimerAction.appliesTo(testContext)).toBeTruthy()
} else {
expect(StopTimerAction.appliesTo(testContext)).toBeFalsy()
}
//first test without time, this test with time
if (timestamp === undefined) {
testStates(testModel, type, timerState, 12000, expected);
}
}
});
}
);

26
platform/features/clock/test/controllers/TimerControllerSpec.js
View File

@ -34,13 +34,13 @@ define(
mockDomainObject,
mockActionCapability,
mockStart,
mockRestart,
mockPause,
testModel,
controller;
function invokeWatch(expr, value) {
mockScope.$watch.calls.forEach(function (call) {
if (call.args[0] === expr) {
if (call.args[0] === expr) {
call.args[1](value);
}
});
@ -67,8 +67,8 @@ define(
'start',
['getMetadata', 'perform']
);
mockRestart = jasmine.createSpyObj(
'restart',
mockPause = jasmine.createSpyObj(
'pause',
['getMetadata', 'perform']
);
mockNow = jasmine.createSpy('now');
@ -82,11 +82,11 @@ define(
mockActionCapability.getActions.andCallFake(function (k) {
return [{
'timer.start': mockStart,
'timer.restart': mockRestart
'timer.pause': mockPause
}[k]];
});
mockStart.getMetadata.andReturn({ cssclass: "icon-play", name: "Start" });
mockRestart.getMetadata.andReturn({ cssclass: "icon-refresh", name: "Restart" });
mockStart.getMetadata.andReturn({cssclass: "icon-play", name: "Start"});
mockPause.getMetadata.andReturn({cssclass: "icon-pause", name: "Pause"});
mockScope.domainObject = mockDomainObject;
testModel = {};
@ -144,18 +144,18 @@ define(
expect(controller.text()).toEqual("0D 00:00:00");
});
it("shows cssclass & name for the applicable start/restart action", function () {
it("shows cssclass & name for the applicable start/pause action", function () {
invokeWatch('domainObject', mockDomainObject);
expect(controller.buttonCssClass()).toEqual("icon-play");
expect(controller.buttonText()).toEqual("Start");
testModel.timestamp = 12321;
invokeWatch('model.modified', 1);
expect(controller.buttonCssClass()).toEqual("icon-refresh");
expect(controller.buttonText()).toEqual("Restart");
expect(controller.buttonCssClass()).toEqual("icon-pause");
expect(controller.buttonText()).toEqual("Pause");
});
it("performs correct start/restart action on click", function () {
it("performs correct start/pause action on click", function () {
invokeWatch('domainObject', mockDomainObject);
expect(mockStart.perform).not.toHaveBeenCalled();
controller.clickButton();
@ -163,9 +163,9 @@ define(
testModel.timestamp = 12321;
invokeWatch('model.modified', 1);
expect(mockRestart.perform).not.toHaveBeenCalled();
expect(mockPause.perform).not.toHaveBeenCalled();
controller.clickButton();
expect(mockRestart.perform).toHaveBeenCalled();
expect(mockPause.perform).toHaveBeenCalled();
});
it("stops requesting animation frames when destroyed", function () {