[Bexley] Show selected asset ID.

This could be refactored with similar code in other cobrands.

1 files changed, 68 insertions, 12 deletions

diff --git a/web/cobrands/bexley/js.js b/web/cobrands/bexley/js.js
index 0ab9f6fb7..70c8ae255 100644
--- a/web/cobrands/bexley/js.js
+++ b/web/cobrands/bexley/js.js
@@ -23,6 +23,70 @@ var defaults = {
     strategy_class: OpenLayers.Strategy.FixMyStreet
 };
 
+var streetlight_default = {
+    fillColor: "#FFFF00",
+    fillOpacity: 0.6,
+    strokeColor: "#000000",
+    strokeOpacity: 0.8,
+    strokeWidth: 2,
+    pointRadius: 6
+};
+
+var pin_prefix = fixmystreet.pin_prefix || document.getElementById('js-map-data').getAttribute('data-pin_prefix');
+
+var streetlight_select = {
+    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: "${Unit_No}",
+    labelOutlineColor: "white",
+    labelOutlineWidth: 3,
+    labelYOffset: 65,
+    fontSize: '15px',
+    fontWeight: 'bold'
+};
+
+var streetlight_stylemap = new OpenLayers.StyleMap({
+  'default': new OpenLayers.Style(streetlight_default),
+  'select': new OpenLayers.Style(streetlight_select)
+});
+
+var labeled_defaults = $.extend(true, {}, defaults, {
+    select_action: true,
+    stylemap: streetlight_stylemap,
+    feature_code: 'Unit_No',
+    asset_type: 'spot',
+    asset_id_field: 'Unit_ID',
+    attributes: {
+        UnitID: 'Unit_ID'
+    },
+    actions: {
+        asset_found: function(asset) {
+          var id = asset.attributes[this.fixmystreet.feature_code] || '';
+          if (id !== '') {
+              var asset_name = this.fixmystreet.asset_item;
+              $('.category_meta_message').html('You have selected ' + asset_name + ' <b>' + id + '</b>');
+          } else {
+              $('.category_meta_message').html(this.fixmystreet.asset_item_message);
+          }
+        },
+        asset_not_found: function() {
+           $('.category_meta_message').html(this.fixmystreet.asset_item_message);
+        }
+    }
+});
+
 fixmystreet.assets.add(defaults, {
     http_options: {
         params: {
@@ -44,33 +108,25 @@ fixmystreet.assets.add(defaults, {
     })
 });
 
-fixmystreet.assets.add(defaults, {
+fixmystreet.assets.add(labeled_defaults, {
     http_options: {
         params: {
             TYPENAME: "Bollards"
         }
     },
-    asset_type: 'spot',
-    asset_id_field: 'Unit_ID',
-    attributes: {
-        UnitID: 'Unit_ID'
-    },
     asset_category: ["Traffic bollard"],
+    asset_item_message: 'Select the <b class="asset-spot"></b> on the map to pinpoint the exact location of a damaged traffic bollard.',
     asset_item: 'bollard'
 });
 
-fixmystreet.assets.add(defaults, {
+fixmystreet.assets.add(labeled_defaults, {
     http_options: {
         params: {
             TYPENAME: "Lighting"
         }
     },
-    asset_type: 'spot',
-    asset_id_field: 'Unit_ID',
-    attributes: {
-        UnitID: 'Unit_ID'
-    },
     asset_category: ["Lamp post", "Light in park or open space", "Underpass light", "Light in multi-storey car park", "Light in outside car park"],
+    asset_item_message: 'Please pinpoint the exact location for the street lighting fault.',
     asset_item: 'street light'
 });