Feature/fsr 491 - Stations-overview fixes (#269)

* re-adding export csv button and styling fixes

* display logic for latest value error field

* adding in no crawl meta tag for stations-overview page

* setting drop down column names to be bold

* updating file name and csv column names

package.json

@@ -52,6 +52,8 @@
     "body-scroll-lock": "^3.1.5",
     "core-js": "2.6.11",
     "d3": "^7.1.1",
+    "datatables.net-buttons": "^2.0.1",
+    "datatables.net-buttons-dt": "^2.0.1",
     "datatables.net-dt": "^1.11.3",
     "elm-pep": "^1.0.6",
     "geojson": "0.5.0",
@@ -70,7 +72,6 @@
     "webpack": "^5.57.1",
     "webpack-cli": "^4.9.0"
   },
-  "devDependencies": {},
   "standard": {
     "ignore": [
       "server/dist",

server/src/js/pages/stations-overview.js

@@ -1,10 +1,31 @@
 import $ from 'jquery'
 import 'datatables.net-dt'
+import 'datatables.net-buttons'
+import 'datatables.net-buttons/js/buttons.html5.js'
 window.jQuery = $
 window.$ = $
 
 $(document).ready(function () {
   $('#stations-overview').DataTable({
+    dom: 'lBfrtip',
+    buttons: [{
+      extend: 'csv',
+      text: 'Export as csv',
+      filename: 'stations-overview-' + new Date().toISOString(),
+      exportOptions: {
+        modifier: {
+          search: 'none'
+        },
+        format: {
+          header: (data, row, column, node) => {
+            if (data.indexOf('<select>') > -1) {
+              data = data.match(/(?<=">)(.*?)(?=<\/option>)/g)[0] || data
+            }
+            return data
+          }
+        }
+      }
+    }],
     initComplete: function () {
       this.api().columns().every(function () {
         const column = this
@@ -23,7 +44,7 @@ $(document).ready(function () {
           'percentile_95'
         ]
         if (noSelect.indexOf(column.header().innerHTML) === -1) {
-          const select = $('<select><option value="">' + column.header().innerHTML + '</option></select>')
+          const select = $('<select><option value="" style="font-weight:800">' + column.header().innerHTML + '</option></select>')
             .appendTo($(column.header()).empty())
             .on('change', function () {
               const val = $.fn.dataTable.util.escapeRegex(
@@ -44,6 +65,11 @@ $(document).ready(function () {
       $('#stations-overview').removeClass('off-screen')
       // After processing adjust body to match table
       $('body').width($('table').width() + 30)
+
+      // wrap top controls
+      $('.dataTables_length, .dt-buttons, .dataTables_filter').wrapAll('<div class="top-controls" />')
+      // wrap bottom controls
+      $('.dataTables_info, .dataTables_paginate').wrapAll('<div class="bottom-controls" />')
     }
   })
 })

server/src/sass/application.scss

@@ -60,10 +60,12 @@ $govuk-breakpoints: (
 @import "components/flood-location-link";
 @import "components/toggle-list-display";
 @import "components/social";
+@import "components/stations-overview";
 
 // Utilities
 @import "utilities/details";
 @import "utilities/summary-list";
 
 // Datatables
 @import "node_modules/datatables.net-dt/css/jquery.dataTables";
+@import "node_modules/datatables.net-buttons-dt/css/buttons.dataTables";

server/src/sass/components/_stations-overview.scss

@@ -0,0 +1,31 @@
+ #stations-overview_wrapper {
+  .top-controls,
+  .bottom-controls {
+    overflow: auto;
+  }
+  .dataTables_length,
+  .dt-buttons {
+    text-align: left !important;
+  }
+  .dt-buttons,
+  .dataTables_length,
+  .dataTables_filter {
+    padding-right: 10px;
+  }
+
+  .dataTables_length {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .dataTables_filter {
+    padding-top: 5px;
+  }
+
+  .dataTables_paginate,
+  .dataTables_filter {
+    float: left !important;
+  }
+  .dataTables_info {
+    float: right !important;
+  }
+}

server/views/stations-overview.html

@@ -1,5 +1,10 @@
 {% extends 'layout.html' %}
 
+{% block head %}
+{{ super() }}
+<meta name="robots" content="noindex" />
+{% endblock %}
+
 {% block content %}
 <style>
   .govuk-width-container {
@@ -27,6 +32,16 @@ <h2 class="govuk-heading-m" id="loading">Loading data, one moment please...</h2>
           <td class="govuk-table__cell">
             {% if name === 'rloi_id' %}
             <a href="/station/{{ value }}{% if station.direction === 'd' %}/downstream{% endif%}" target="_blank">{{ value }}</a>
+            {% elif name === 'error' %}
+              {% if value %}
+                yes
+              {% else %}
+                {% if value === false %}
+                  no
+                {% else %}
+                  n/a
+                {% endif %}
+              {% endif %}
             {% else %}
               {{ value }}
             {% endif %}