diff --git a/observations/static/observations/js/observationList.js b/observations/static/observations/js/observationList.js
index 9d8d0df4332f7d7b1d7ed79c2522951b92c96224..563a0efb6e6e2221d267ace626564a5847d417b2 100644
--- a/observations/static/observations/js/observationList.js
+++ b/observations/static/observations/js/observationList.js
@@ -26,14 +26,21 @@ var observationLayer;
* Default coloring
* @type Array
*/
-var ageColors = [
- [7, 'rgba(233, 13, 0, 1.0)'], // Red #e90d00
- [30, 'rgba(253, 202, 00, 1.0)'], // Orange #fdca00
- [60, 'rgba(0, 120, 253, 1.0)'], // Blue #0078fd
+let ageColors = [
+ [7, 'rgba(240, 86, 77, 1.0)'], // Red #F0564D
+ [30, 'rgba(228, 183, 1, 1.0)'], // Orange #e4b701
+ [60, 'rgba(255, 239, 179, 1.0)'], // Light orange #ffefb3
];
+let negativeObsAgeColors = [
+ [7, 'rgba(59, 145, 102, 1.0)'], // Dark Green 40% #3b9166
+ [30, 'rgba(111, 196, 154, 1.0)'], // Medium green 60% #6FC49A
+ [60, 'rgba(183, 225, 204, 1.0)'], // Light green 80% #b7e1cc
+];
-var ageStyles, poiDetails, popOverlay;
+let ageStyles = null;
+let negativeObsAgeStyles = null;
+var poiDetails, popOverlay;
/*
* Observation map
@@ -186,7 +193,7 @@ var displayFeatureDetails = function(pixel, coordinate) {
for(var i in observations){
var observation = observations[i];
var obsDate = moment(observation.timeOfObservation).format("YYYY-MM-DD");
- observationsHTML += "<li><i style='color: " + getObservationAgeColor(observation.timeOfObservation) + ";' class='fa fa-square' aria-hidden='true'></i> [" + obsDate + "] <a href='/observations/" + observation.observationId + "' target='new'>" + observation.organismName + " " + gettext ("in") + " " + observation.cropOrganismName.toLowerCase() + "</a></li>";
+ observationsHTML += "<li><i style='color: " + getObservationAgeColor(observation.timeOfObservation, observation.isPositive) + ";' class='fa fa-square' aria-hidden='true'></i> [" + obsDate + "] <a href='/observations/" + observation.observationId + "' target='new'>" + observation.organismName + " " + gettext ("in") + " " + observation.cropOrganismName.toLowerCase() + "</a></li>";
}
observationsHTML += "</ul>";
@@ -495,6 +502,32 @@ var styleOld =
})
]);
}
+ negativeObsAgeStyles = [];
+ for(var i in negativeObsAgeColors)
+ {
+ negativeObsAgeStyles.push([
+ negativeObsAgeColors[i][0],
+ new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: negativeObsAgeColors[i][1].replace("1.0","0.2")
+ }),
+ stroke: new ol.style.Stroke({
+ color: negativeObsAgeColors[i][1],
+ width: 1
+ }),
+ image: new ol.style.Circle({
+ radius: 6,
+ fill: new ol.style.Fill({
+ color: negativeObsAgeColors[i][1]
+ }),
+ stroke: new ol.style.Stroke({
+ color: '#ffffff',
+ width: 1
+ })
+ })
+ })
+ ]);
+ }
};
/**
@@ -510,11 +543,25 @@ var getCorrectStyle = function(feature){
{
return styleInvisible;
}
- for(var i in ageStyles)
+
+ if(feature.get("isPositive"))
{
- if(age < ageStyles[i][0])
+ for(var i in ageStyles)
{
- return ageStyles[i][1];
+ if(age < ageStyles[i][0])
+ {
+ return ageStyles[i][1];
+ }
+ }
+ }
+ else
+ {
+ for(var i in negativeObsAgeStyles)
+ {
+ if(age < negativeObsAgeStyles[i][0])
+ {
+ return negativeObsAgeStyles[i][1];
+ }
}
}
return styleOld;
@@ -525,13 +572,8 @@ var getCorrectStyle = function(feature){
*/
var getObservationRelativeAge = function(feature)
{
- var observation = getObservation(feature.get("observationId")); // TODO include observations timestamp in feature. Speeds things up
- if(observation == null)
- {
- console.info("No obs with id=" + feature.get("observationId"));
- return null; // Means invisible
- }
- return Math.floor((currentDateInMillis - getUnixTimestampFromJSON(observation.timeOfObservation)) / (1000 * 60 * 60 * 24)) + 1;
+ observationAge = feature.get("timestamp");
+ return Math.floor(((currentDateInMillis - observationAge) / (1000 * 60 * 60 * 24)) + 1);
};
/**
@@ -539,7 +581,7 @@ var getObservationRelativeAge = function(feature)
* @param aDate
* @returns
*/
-function getObservationAgeColor(aDate)
+function getObservationAgeColor(aDate, isPositive)
{
var age = getDaysSince(aDate);
if(age == null)
@@ -550,11 +592,14 @@ function getObservationAgeColor(aDate)
{
return styleInvisible.getFill().getColor();
}
- for(var i in ageColors)
+
+ let colors = (isPositive == false && isPositive != undefined) ? negativeObsAgeColors : ageColors;
+
+ for(var i in colors)
{
- if(age < ageColors[i][0])
+ if(age < colors[i][0])
{
- return ageColors[i][1];
+ return colors[i][1];
}
}
return styleOld.getFill().getColor();
@@ -578,9 +623,9 @@ function initMapLegend()
var html = "<div><strong>" + gettext("Days since observation") + "</strong></div><ul>";
for(var i in ageColors)
{
- html += '<li><i style="color: ' + ageColors[i][1] + ';" class="fa fa-square" aria-hidden="true"></i> ' + (i > 0 ? ageColors[i-1][0] + 1 : '0') + '-' + ageColors[i][0] + ' ' + gettext("Days").toLowerCase() + '</li>';
+ html += '<li><i style="color: ' + ageColors[i][1] + ';" class="fa fa-square" aria-hidden="true"></i>/' + '<i style="color: ' + negativeObsAgeColors[i][1] + ';" class="fa fa-square" aria-hidden="true"></i> ' + (i > 0 ? ageColors[i-1][0] + 1 : '0') + '-' + ageColors[i][0] + ' ' + gettext("Days").toLowerCase() + '</li>';
}
- html += '<li><i style="color: black;" class="fa fa-square" aria-hidden="true"></i> ' + gettext("Older") + '</li>';
+ html += '<li><i style="color: black;" class="fa fa-square" aria-hidden="true"></i>/<i style="color: black;" class="fa fa-square-o" aria-hidden="true"></i> ' + gettext("Older") + '</li>';
html += "</ul>";
lBox.innerHTML = html;
}