Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

modified task style for locked and added style for badimagery #47

Merged
merged 2 commits into from
Mar 10, 2017
Merged

modified task style for locked and added style for badimagery #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4363ff3
modified task style for locked and added style for badimagery
feenster Mar 9, 2017
861e7db
corrected tstyle colour comments
feenster Mar 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions client/app/services/style.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,15 @@
*/
function getTaskStyleFunction(feature){

var FILL_COLOUR_READY = 'rgba(223,223,223,0.1)';//very light gray, 0.1 opacity
var FILL_COLOUR_INVALIDATED = 'rgba(84,84,84,0.4)';//grey, 0.4 opacity
var FILL_COLOUR_READY = 'rgba(223,223,223,0.1)';//very light grey, 0.1 opacity
var FILL_COLOUR_INVALIDATED = 'rgba(255,0,0,0.4)';//red, 0.4 opacity
var FILL_COLOUR_DONE = 'rgba(255,165,0,0.4)';//orange, 0.4 opacity
var FILL_COLOUR_VALIDATED = 'rgba(0,128,0,0.4)';//green, 0.4 opacity
var FILL_COLOUR_LOCKED = 'rgba(30,144,255,0.4)';//blue, 0.4 opacity
var FILL_COLOUR_BADIMAGERY = 'rgba(0,0,0,0.4)';//black, 0.4 opacity

var STROKE_COLOUR_LOCKED = 'rgba(255,165,0,1)';//orange, 1.0 opacity
var STROKE_COLOUR_UNLOCKED = 'rgba(84,84,84,0.7)';//grey, 0.7 opacity

var STROKE_WIDTH_HEAVY = 2;
var STROKE_WIDTH_LIGHT = 1;
var STROKE_COLOUR = 'rgba(84,84,84,0.7)';//grey, 0.7 opacity
var STROKE_WIDTH = 1;

// Get the feature's properties that control styling
var status = feature.get('taskStatus');
Expand All @@ -44,7 +43,10 @@
// calculate the fill colour and opacity settings based on status, use rgba because this is the way to
// set opacity in OL3, but also better for cross browser than named colors
var fillColor = null;
if (status === 'READY') {
if( typeof(isLocked) === 'boolean' && isLocked ){
fillColor = FILL_COLOUR_LOCKED;
}
else if (status === 'READY') {
fillColor = FILL_COLOUR_READY;
}
else if (status === 'INVALIDATED') {
Expand All @@ -56,20 +58,18 @@
else if (status === 'VALIDATED') {
fillColor = FILL_COLOUR_VALIDATED
}

// calculate the outline colour, weight and opacity settings based on status, use rgba because
// this is the way to set opacity in OL3, but also better for cross browser than named colors
var outlineColor = typeof(isLocked) === "boolean" && isLocked ? STROKE_COLOUR_LOCKED : STROKE_COLOUR_UNLOCKED;
var outlineWeight = typeof(isLocked) === "boolean"&& isLocked ? STROKE_WIDTH_HEAVY : STROKE_WIDTH_LIGHT;
else if (status === 'BADIMAGERY') {
fillColor = FILL_COLOUR_BADIMAGERY
}

// build an ol.style.Style to be returned using calculated settings
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: fillColor
}),
stroke: new ol.style.Stroke({
color: outlineColor,
width: outlineWeight
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
})

Expand Down
129 changes: 40 additions & 89 deletions tests/client/unit/app/services/test.style.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
describe('style.service', function () {
var styleService = null;

var FILL_COLOUR_READY = 'rgba(223,223,223,0.1)';//very light gray, 0.1 opacity
var FILL_COLOUR_INVALIDATED = 'rgba(84,84,84,0.4)';//grey, 0.4 opacity
var FILL_COLOUR_READY = 'rgba(223,223,223,0.1)';//very light grey, 0.1 opacity
var FILL_COLOUR_INVALIDATED = 'rgba(255,0,0,0.4)';//red, 0.4 opacity
var FILL_COLOUR_DONE = 'rgba(255,165,0,0.4)';//orange, 0.4 opacity
var FILL_COLOUR_VALIDATED = 'rgba(0,128,0,0.4)';//green, 0.4 opacity
var FILL_COLOUR_LOCKED = 'rgba(30,144,255,0.4)';//blue, 0.4 opacity
var FILL_COLOUR_BADIMAGERY = 'rgba(0,0,0,0.4)';//black, 0.4 opacity

var STROKE_COLOUR_LOCKED = 'rgba(255,165,0,1)';//orange, 1.0 opacity
var STROKE_COLOUR_UNLOCKED = 'rgba(84,84,84,0.7)';//grey, 0.7 opacity

var STROKE_WIDTH_HEAVY = 2;
var STROKE_WIDTH_LIGHT = 1;
var STROKE_COLOUR = 'rgba(84,84,84,0.7)';//grey, 0.7 opacity
var STROKE_WIDTH = 1;

beforeEach(function () {
module('taskingManager');
Expand All @@ -22,20 +21,20 @@ describe('style.service', function () {
});
});

it('should return correct style for status = "READY" and taskLocked = False', function () {
it('should return correct style for status taskLocked = True', function () {
// arrange
var taskFeature = new ol.Feature({
'taskStatus': 'READY',
'taskLocked': false
'taskStatus': 'MADE_UP_STATUS',
'taskLocked': true
});

var expectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: FILL_COLOUR_READY
color: FILL_COLOUR_LOCKED
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -46,20 +45,20 @@ describe('style.service', function () {
expect(style).toEqual(expectedStyle);
});

it('should return correct style for taskStatus = "READY" and taskLocked = true', function () {
it('should return correct style for taskStatus = "READY" and taskLocked = False', function () {
// arrange
var taskFeature = new ol.Feature({
'taskStatus': 'READY',
'taskLocked': true
'taskLocked': false
});

var expectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: FILL_COLOUR_READY
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_LOCKED,
width: STROKE_WIDTH_HEAVY
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -82,32 +81,8 @@ describe('style.service', function () {
color: FILL_COLOUR_INVALIDATED
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
})
});

// act
var style = styleService.getTaskStyleFunction(taskFeature)

// assert
expect(style).toEqual(expectedStyle);
});

it('should return correct style for taskStatus = "INVALIDATED" and taskLocked = True', function () {
// arrange
var taskFeature = new ol.Feature({
'taskStatus': 'INVALIDATED',
'taskLocked': true
});

var expectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: FILL_COLOUR_INVALIDATED
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_LOCKED,
width: STROKE_WIDTH_HEAVY
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -130,32 +105,8 @@ describe('style.service', function () {
color: FILL_COLOUR_DONE
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
})
});

// act
var style = styleService.getTaskStyleFunction(taskFeature)

// assert
expect(style).toEqual(expectedStyle);
});

it('should return correct style for taskStatus = "DONE" and taskLocked = True', function () {
// arrange
var taskFeature = new ol.Feature({
'taskStatus': 'DONE',
'taskLocked': true
});

var expectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: FILL_COLOUR_DONE
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_LOCKED,
width: STROKE_WIDTH_HEAVY
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -178,8 +129,8 @@ describe('style.service', function () {
color: FILL_COLOUR_VALIDATED
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -190,20 +141,20 @@ describe('style.service', function () {
expect(style).toEqual(expectedStyle);
});

it('should return correct style for taskStatus = "VALIDATED" and taskLocked = True', function () {
it('should return correct style for taskStatus = "BADIMAGERY" and taskLocked = False', function () {
// arrange
var taskFeature = new ol.Feature({
'taskStatus': 'VALIDATED',
'taskLocked': true
'taskStatus': 'BADIMAGERY',
'taskLocked': false
});

var expectedStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: FILL_COLOUR_VALIDATED
color: FILL_COLOUR_BADIMAGERY
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_LOCKED,
width: STROKE_WIDTH_HEAVY
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -225,8 +176,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -248,8 +199,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -271,8 +222,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -294,8 +245,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -317,8 +268,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand All @@ -340,8 +291,8 @@ describe('style.service', function () {
color: null
}),
stroke: new ol.style.Stroke({
color: STROKE_COLOUR_UNLOCKED,
width: STROKE_WIDTH_LIGHT
color: STROKE_COLOUR,
width: STROKE_WIDTH
})
});

Expand Down