[Bucks] display street light numbers upon select

When a user selects a street light display the street light column
number beneath the asset on the map. Also replace the "Select a street
light" text with an indication of which street light has been selected.

2 files changed, 73 insertions, 1 deletions

diff --git a/web/cobrands/buckinghamshire/assets.js b/web/cobrands/buckinghamshire/assets.js
index 220454903..c32da247c 100644
--- a/web/cobrands/buckinghamshire/assets.js
+++ b/web/cobrands/buckinghamshire/assets.js
@@ -43,7 +43,43 @@ fixmystreet.assets.add($.extend(true, {}, defaults, {
     asset_item: 'grit bin'
 }));
 
+var pin_prefix = fixmystreet.pin_prefix || document.getElementById('js-map-data').getAttribute('data-pin_prefix');
+var streetlight_stylemap = new OpenLayers.StyleMap({
+    'default': new OpenLayers.Style({
+        fillColor: "#FFFF00",
+        fillOpacity: 0.6,
+        strokeColor: "#000000",
+        strokeOpacity: 0.8,
+        strokeWidth: 2,
+        pointRadius: 6
+    }),
+    'select': new OpenLayers.Style({
+        externalGraphic: pin_prefix + "pin-spot.png",
+        fillColor: "#55BB00",
+        graphicWidth: 48,
+        graphicHeight: 64,
+        graphicXOffset: -24,
+        graphicYOffset: -56,
+        backgroundGraphic: pin_prefix + "pin-shadow.png",
+        backgroundWidth: 60,
+        backgroundHeight: 30,
+        backgroundXOffset: -7,
+        backgroundYOffset: -22,
+        popupYOffset: -40,
+        graphicOpacity: 1.0,
+
+        label: "${Feature_id}",
+        labelOutlineColor: "white",
+        labelOutlineWidth: 3,
+        labelYOffset: 65,
+        fontSize: '15px',
+        fontWeight: 'bold'
+    })
+});
+
 fixmystreet.assets.add($.extend(true, {}, defaults, {
+    select_action: true,
+    stylemap: streetlight_stylemap,
     http_options: {
         params: {
             TYPENAME: "StreetLights_Merged"
@@ -58,7 +94,15 @@ fixmystreet.assets.add($.extend(true, {}, defaults, {
         'Street light dim',
         'Street light intermittent',
         'Street light not working' ],
-    asset_item: 'street light'
+    asset_item: 'street light',
+    actions: {
+        asset_found: function(asset) {
+          $('.category_meta_message').html('You have selected street light <b>' + asset.attributes.Feature_id + '</b>');
+        },
+        asset_not_found: function() {
+           $('.category_meta_message').html('You can pick a <b class="asset-spot">street light</b> from the map &raquo;');
+        }
+    }
 }));
 
 
diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js
index 036302cab..65b507467 100644
--- a/web/cobrands/fixmystreet/assets.js
+++ b/web/cobrands/fixmystreet/assets.js
@@ -20,6 +20,8 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
     initialize: function(name, options) {
         OpenLayers.Layer.Vector.prototype.initialize.apply(this, arguments);
         // Update layer based upon new data from category change
+        $(fixmystreet).on('assets:selected', this.checkSelected.bind(this));
+        $(fixmystreet).on('assets:unselected', this.checkSelected.bind(this));
         $(fixmystreet).on('report_new:category_change', this.update_layer_visibility.bind(this));
     },
 
@@ -95,6 +97,31 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
         }
     },
 
+    checkSelected: function(evt, lonlat) {
+        if (!this.getVisibility()) {
+          return;
+        }
+        if (this.fixmystreet.select_action) {
+            if (fixmystreet.assets.selectedFeature()) {
+                this.asset_found();
+            } else {
+                this.asset_not_found();
+            }
+        }
+    },
+
+    asset_found: function() {
+        if (this.fixmystreet.actions) {
+            this.fixmystreet.actions.asset_found(fixmystreet.assets.selectedFeature());
+        }
+    },
+
+    asset_not_found: function() {
+        if (this.fixmystreet.actions) {
+            this.fixmystreet.actions.asset_not_found();
+        }
+    },
+
     CLASS_NAME: 'OpenLayers.Layer.VectorAsset'
 });
 
@@ -288,6 +315,7 @@ function asset_unselected(e) {
     if (this.fixmystreet.attributes) {
         clear_fields_for_attributes(this.fixmystreet.attributes);
     }
+    $(fixmystreet).trigger('assets:unselected');
 }
 
 function set_fields_from_attributes(attributes, feature) {