Merge pull request #386 from unepwcmc/refresh-marine-sites

Refresh marine sites

app/controllers/marine_controller.rb

@@ -12,11 +12,14 @@ class MarineController < ApplicationController
   before_action :most_protected_areas, only: [:index]
   before_action :national_statistics, only: [:index]
   before_action :designations, only: [:index, :download_designations]
-  before_action :green_list_areas, only: [:index]
 
   before_action :load_cms_content
 
   def index
+    @marineSites = ProtectedArea.marine_areas.limit(3) ## FERDI 3 marine PAs
+    @marineSitesTotal = number_with_delimiter(ProtectedArea.marine_areas.count())
+    @marineViewAllUrl = '/' #TODO URL to filtered search results page
+
     @regionCoverage = Region.without_global.map do |region|
       RegionPresenter.new(region).marine_coverage
     end
@@ -278,8 +281,4 @@ def pledges
       ]
     }.to_json
   end
-
-  def green_list_areas
-    @green_list_areas = ProtectedArea.marine_areas.green_list_areas
-  end
 end

app/helpers/application_helper.rb

@@ -5,7 +5,13 @@ module ApplicationHelper
     ProtectedArea => :protected_area_cover,
     Country => :country_cover,
     Region => :region_cover
-  }
+  }.freeze
+
+  PLACEHOLDERS = {
+    ProtectedArea => "search-placeholder-country.png",
+    Country => "search-placeholder-country.png",
+    Region => "search-placeholder-region.png"
+  }.freeze
 
   def commaify number
     number_with_delimiter(number, delimeter: ',')
@@ -32,31 +38,49 @@ def cover item
     send COVER_HELPERS[item.class], item
   end
 
+  def cover_placeholder klass
+    PLACEHOLDERS[klass]
+  end
+
+  def cover_data(image_params, item_class)
+    placeholder = cover_placeholder(item_class)
+    {
+      'data-src': tiles_path(image_params),
+      'data-error': image_path(placeholder),
+      'data-loading': image_path(placeholder),
+    }
+  end
+
   def protected_area_cover protected_area
     version = Rails.application.secrets.mapbox[:version]
     image_params = {id: protected_area.wdpa_id, type: "protected_area", version: version}
+    data = cover_data(image_params, protected_area.class)
 
     image_tag(
-      "search-placeholder-country.png",
-      alt: protected_area.name,
-      data: {async: tiles_path(image_params)},
-      class: 'image' #TODO find a way to add classes via parameters
+      cover_placeholder(protected_area.class),
+      {
+        alt: protected_area.name,
+        class: 'image' #TODO find a way to add classes via parameters
+      }.merge(data)
     )
   end
 
   def country_cover country
     version = Rails.application.secrets.mapbox[:version]
     image_params = {id: country.iso, type: "country", version: version}
+    data = cover_data(image_params, country.class)
 
     image_tag(
-      "search-placeholder-country.png",
-      alt: country.name,
-      data: {async: tiles_path(image_params)},
+      cover_placeholder(country.class),
+      {alt: country.name}.merge(data)
     )
   end
 
   def region_cover region
-    image_tag("search-placeholder-region.png", alt: region.name)
+    image_tag(
+      cover_placeholder(region.class),
+      alt: region.name
+    )
   end
 
   def site_title

app/javascript/vue.js

@@ -8,6 +8,7 @@ import Vue from 'vue/dist/vue.esm'
 import VueAnalytics from 'vue-analytics'
 import Vue2TouchEvents from 'vue2-touch-events'
 import ScrollMagic from 'scrollmagic'
+import VueLazyload from 'vue-lazyload'
 // import VueAgile from 'vue-agile'
 
 // store
@@ -49,15 +50,17 @@ import Tooltip from './components/tooltip/Tooltip'
 import VSelectSearchable from './components/select/VSelectSearchable'
 import VTable from './components/table/VTable'
 
-document.addEventListener('DOMContentLoaded', () => { 
+document.addEventListener('DOMContentLoaded', () => {
   if(document.getElementById('v-app')) {
 
     Vue.use(VueAnalytics, { id: 'UA-12920389-2' }) // production
 
     Vue.prototype.$eventHub = new Vue()
 
     Vue.use(Vue2TouchEvents)
-
+
+    Vue.use(VueLazyload)
+
     const app = new Vue({
       el: '#v-app',
       store,
@@ -100,4 +103,4 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     })
   }
-})
+})

app/views/marine/index.html.erb

@@ -60,7 +60,13 @@
 
 <%= render partial: "marine/sections/coverage_map" %>
 
-<%#= render partial: "partials/cards/sites", locals: { cards: @wdpa } %>
+<section class="container">
+  <%= render partial: "partials/cards/sites", locals: { 
+    cards: @marineSites, 
+    title: "#{t('global.area-types.wdpa')} (#{@marineSitesTotal})",
+    url: @marineViewAllUrl
+  } %>
+</section>
 
 <%= render "partials/carousels/themes" %>
 

app/views/partials/cards/_sites.html.erb

@@ -1,24 +1,22 @@
-<div class="cards--sites">
 
-  <h3><%#= title %></h3>
+<% if local_assigns.has_key? :url %>
+  <div class="flex flex-v-center flex-h-between">
+    <h2><%= title %></h2>
+    <%= link_to t('global.button.all'), url, title: t('global.button.all'), class: 'button--all' %>
+  </div>
+<% end %>
 
-  <%#= link_to t('global.button.all'), url, target: '_blank', title: t('global.button.all') %>
+<div class="cards--search-results-areas">
+  <% cards.each do |card| %>
+    <%= link_to protected_area_path(card.wdpa_id), title: "View more about the site: #{ card.name }", class: "card__link" do %>
 
-  <div class="cards__cards">
-    <% cards.each do |card| %>
-      <%= link_to protected_area_path(card.wdpa_id), title: "View more about the site: #{card.name}", class: "card" do %>
-        <%= cover card %>
+      <div v-lazy-container="{ selector: 'img' }">
+        <%= protected_area_cover(card) %>
+      </div>
 
-        <h3><%= card.name %></h3>
-        <div>
-          <p>
-            <% card.countries_for_index.each do |country| %>
-              <span><%= country.iso_3 %></span>
-              <%= country.name %>
-            <% end %>
-          </p>
-        </div>
-      <% end %>
+      <div class="card__content">
+        <h3 class="card__title"><%= card.name %></h3>
+      </div>
     <% end %>
-  </div>
-</div>
+  <% end %>
+</div>

config/routes.rb

@@ -17,6 +17,8 @@
   #TODO
   get '/:id', to: 'protected_areas#show', as: 'protected_area'
 
+  get '/assets/tiles/:id', to: 'assets#tiles', as: 'tiles'
+
   scope "(:locale)", locale: /en|es|fr/ do
 
     root to: 'home#index'
@@ -25,7 +27,6 @@
     put '/admin/maintenance', as: 'maintenance'
     put '/admin/clear_cache', as: 'clear_cache'
 
-    get '/assets/tiles/:id', to: 'assets#tiles', as: 'tiles'
 
     namespace :api do
       namespace :v3 do

package.json

@@ -14,6 +14,7 @@
     "save": "^2.4.0",
     "scrollmagic": "^2.0.6",
     "vue": "^2.6.10",
+    "vue-lazyload": "^1.3.3",
     "vue-agile": "^1.0.11",
     "vue-analytics": "^5.17.2",
     "vue-loader": "^15.7.0",