Dm 3508 map component

app/admin/pages.rb

@@ -38,6 +38,10 @@
                     :cta_text,
                     :button_text,
                     :card,
+                    :display_successful_adoptions,
+                    :display_in_progress_adoptions,
+                    :display_unsuccessful_adoptions,
+                    :map_info_window_text,
                     :body,
                     :title_header,
                     :text_alignment,
@@ -119,14 +123,17 @@
             if (pc.component_type == 'PageHeader3Component' ||
                 pc.component_type == 'PageSubpageHyperlinkComponent' ||
                 pc.component_type == 'PageAccordionComponent' ||
+                pc.component_type == 'PageMapComponent' ||
                 pc.component_type == 'PageCompoundBodyComponent') && component&.title.present?
               para "Title: #{component.title}"
             end
             # Large title
             para "Large title: #{component.large_title}" if pc.component_type == 'PageCompoundBodyComponent' && component&.large_title
             # Description
             if (pc.component_type == 'PageHeader3Component' ||
-                pc.component_type == 'PageDownloadableFileComponent') && component&.description.present?
+                pc.component_type == 'PageDownloadableFileComponent' ||
+                pc.component_type == 'PageMapComponent') &&
+                component&.description.present?
               para component.description
             end
             # Text
@@ -155,6 +162,9 @@
             para component&.alt_text if pc.component_type == 'PageImageComponent'
             # Attachment file name
             para component&.attachment_file_name if pc.component_type == 'PageDownloadableFileComponent'
+            # Map Info Window Text
+            para component&.map_info_window_text if pc.component_type == 'PageMapComponent' && component&.map_info_window_text != ''
+
             # Display name
             para component&.display_name if pc.component_type == 'PageDownloadableFileComponent' && component&.display_name.present?
             # Margin bottom

app/assets/javascripts/application.js

@@ -57,4 +57,5 @@
 //= require visns/visn_va_facility_infowindow
 //= require jquery.collapser.js
 //= require category_usage.js
-//= require tinymce
+//= require tinymce
+//= require page/page_infowindow

app/assets/javascripts/page/page_infowindow.coffee

@@ -0,0 +1,22 @@
+class @PageInfoBoxBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder
+  # override method
+  create_infowindow: ->
+    return null unless _.isString @args.infowindow
+    boxText = document.createElement("div")
+    boxText.setAttribute('class', 'page-marker-container') #to customize
+    boxText.innerHTML = @args.infowindow
+    @infowindow = new InfoBox(@infobox(boxText))
+
+# add @bind_infowindow() for < 2.1
+
+  infobox: (boxText)->
+    content: boxText
+    pixelOffset: new google.maps.Size(-200, 137)
+    boxStyle: {
+      maxWidth: "400px",
+      maxHeight: "275px",
+      overflow: "auto",
+      backgroundColor: "white",
+      paddingBottom: "52px"
+    }
+    alignBottom: true

app/assets/javascripts/page/page_map.es6

@@ -0,0 +1,51 @@
+function initialize() {
+    const handler = Gmaps.build('Google', {
+        markers: {
+            clusterer: null
+        },
+        builders: {
+            Marker: PageInfoBoxBuilder
+        }
+    });
+    let markers;
+    let dataMarkers;
+
+    function buildMapMarkers(data) {
+        dataMarkers = _.map(data, function (json, index) {
+            json.marker = markers[index];
+            return json;
+        });
+    }
+
+    handler.buildMap({
+            provider: {
+                center: {lat: 39.8097343, lng: -98.5556199},
+                zoom: 4.2,
+                zoomControlOptions: {
+                    position: google.maps.ControlPosition.TOP_RIGHT
+                },
+                fullscreenControl: false,
+                mapTypeControl: false,
+                streetViewControl: false
+            },
+            internal: {id: 'page_builder_map'},
+            markers: {
+                options: {
+                    rich_marker: true
+                }
+            }
+        },
+        function () {
+            markers = handler.addMarkers(mapData);
+            buildMapMarkers(mapData);
+        });
+
+    google.maps.event.addListener(handler.getMap(), "idle", function () {
+        $("#page_builder_map").removeClass("display-none");
+        $(".dm-facilities-show-map-loading-spinner").addClass("display-none");
+    });
+}
+
+$(document).on("turbolinks:load", function () {
+    google.maps.event.addDomListener(window, "load", initialize);
+});

app/assets/stylesheets/dm/components/page_component.scss

@@ -151,11 +151,30 @@
     }
   }
 
+  .page-map-component {
+    .page-marker-container {
+      padding: 52px 8px 0 8px;
+    }
+
+    .infoBox {
+      img {
+        @include u-position('absolute');
+        @include u-right('105');
+        @include u-top('105');
+      }
+    }
+  }
+
+  .page_builder_map {
+    height: 440px;
+  }
+}
+
   .page-event-component {
     border-top: 1px solid black;
   }
 
   .page-news-component {
     @include u-margin-bottom(2);
   }
-}
+

app/controllers/page_controller.rb

@@ -3,6 +3,7 @@ def show
     page_slug = params[:page_slug] ? params[:page_slug] : 'home'
     @page = Page.includes(:page_group).find_by(slug: page_slug.downcase, page_groups: {slug: params[:page_group_friendly_id].downcase})
     @page_components = @page.page_components
+    get_map_components(@page_components)
     @path_parts = request.path.split('/')
     @facilities_data = VaFacility.cached_va_facilities.order_by_station_name
     @practice_list_components = []
@@ -22,8 +23,46 @@ def show
     end
   end
 
+
   private
 
+  def get_map_components(page_components)
+    page_components.each do |pc|
+      if pc.component_type == "PageMapComponent"
+        @map_component = PageMapComponent.find_by_id(pc.component_id)
+        build_map_component(@map_component.get_adopting_facility_ids)
+      end
+    end
+  end
+
+  def build_map_component(adopting_facility_ids)
+    va_facilities = VaFacility.where(id: adopting_facility_ids)
+    @va_facility_marker = Gmaps4rails.build_markers(va_facilities) do |facility, marker|
+      marker.lat facility.latitude
+      marker.lng facility.longitude
+      marker.picture({
+                         url: view_context.image_path('map-marker-default.svg'),
+                         width: 34,
+                         height: 46,
+                         scaledWidth: 34,
+                         scaledHeight: 46
+                     })
+      marker.shadow nil
+      marker.json({ id: facility.id })
+      adoption_count = DiffusionHistory.where(va_facility_id: facility.id).count
+      practice_data =  @map_component.get_practice_data_by_diffusion_histories(facility.id)
+      marker.infowindow render_to_string(
+                            partial: 'maps/page_map_infowindow',
+                            locals: {
+                                facility: facility,
+                                map_component: @map_component,
+                                practice_data: practice_data,
+                                adoption_count: adoption_count
+                            }
+                        )
+    end
+  end
+
   def collect_paginated_components(page_components)
     practice_lists = []
     events = []

app/models/page_component.rb

@@ -31,6 +31,7 @@ def destroy_component
       'Subpage Hyperlink': 'PageSubpageHyperlinkComponent',
       'YouTube Player': 'PageYouTubePlayerComponent',
       'Horizontal Separator': 'PageHrComponent',
+      'Google Map': 'PageMapComponent',
       'Text and Images': 'PageCompoundBodyComponent'
   }
 

app/models/page_map_component.rb

@@ -0,0 +1,35 @@
+class PageMapComponent < ApplicationRecord
+  has_one :page_component, as: :component, autosave: true
+
+  def get_practice_data_by_diffusion_histories(facility_id)
+    adoptions = DiffusionHistory.where(va_facility_id: facility_id)
+    info_window_practice_data = []
+    adoptions.each do |adoption|
+    adoption_practice = DiffusionHistory.get_with_practice(adoption.practice).first.practice
+      if practices.include?(adoption_practice.id.to_s)
+        info_window_practice_data << adoption_practice.slice(:name, :short_name, :tagline, :slug)
+      end
+    end
+    info_window_practice_data
+  end
+
+  def get_adopting_facility_ids
+    va_facility_ids = []
+    practices.each do |pr|
+      diffusion_histories = DiffusionHistory.where(practice_id: pr)
+      diffusion_histories.each do |dh|
+        dhs = DiffusionHistoryStatus.where(diffusion_history_id: dh[:id]).first.status
+        unless dh.va_facility_id.nil?
+          if (dhs == 'Completed' || dhs == 'Implemented' || dhs == 'Complete') && display_successful_adoptions
+            va_facility_ids.push dh.va_facility_id
+          elsif (dhs == 'In progress' || dhs == 'Planning' || dhs == 'Implementing') && display_in_progress_adoptions
+            va_facility_ids.push dh.va_facility_id
+          elsif dhs == "Unsuccessful" && display_unsuccessful_adoptions
+            va_facility_ids.push dh.va_facility_id
+          end
+        end
+      end
+    end
+    va_facility_ids
+  end
+end

app/views/active_admin/resource/_page_components_form.html.arb

@@ -16,6 +16,7 @@ f.has_many page_components, heading: nil, sortable: :position, sortable_start: 1
   pc.template.concat(render partial: 'page_hr_component_form', locals: {component: component.class == PageHrComponent ? component : nil, placeholder: placeholder})
   pc.template.concat(render partial: 'page_downloadable_file_component_form', locals: {component: component.class == PageDownloadableFileComponent ? component : nil, placeholder: placeholder})
   pc.template.concat(render partial: 'page_cta_component_form', locals: {component: component.class == PageCtaComponent ? component : nil, placeholder: placeholder})
+  pc.template.concat(render partial: 'page_map_component_form', locals: {component: component.class == PageMapComponent ? component : nil, placeholder: placeholder})
   pc.template.concat(
     render partial: 'page_compound_body_component_form',
         locals: {

app/views/active_admin/resource/_page_map_component_form.html.arb

@@ -0,0 +1,84 @@
+# TODO: get the placeholder how active admin does "NEW_#{association_human_name.upcase.split(' ').join('_')}_RECORD"
+placeholder ||= 'NEW_PAGE_COMPONENT_RECORD' # = "NEW_#{association_human_name.upcase.split(' ').join('_')}_RECORD"
+component ||= nil
+html = Arbre::Context.new do
+  li "", id: "PageMapComponent_poly_#{placeholder}", class: "input polyform component-#{placeholder}" do
+    fieldset class: "inputs" do
+      legend do
+        span 'Map'
+      end
+      ol do
+        if component
+          input type: 'hidden', value: component.id, name: "page[page_components_attributes][#{placeholder}][component_attributes][id]"
+        end
+
+        li class: 'url input required stringish', id: "page_page_components_attributes_#{placeholder}_component_attributes_title_input" do
+          label 'Title', for: "page_page_components_attributes_#{placeholder}_component_attributes_title", class: 'label'
+          input value: component&.title || nil, type: 'text', required: 'required',
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_title",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][title]"
+          para 'Enter a title for the map.', class: 'inline-hints'
+        end
+
+        li class: 'url input required stringish', id: "page_page_components_attributes_#{placeholder}_component_attributes_map_info_window_text_input" do
+          label 'Map Info Window Text', for: "page_page_components_attributes_#{placeholder}_component_attributes_map_info_window_text", class: 'label'
+          input value: component&.map_info_window_text || nil, type: 'text', required: 'required',
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_map_info_window_text",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][map_info_window_text]"
+          para 'Enter text or acronym to display in the maps info window.', class: 'inline-hints'
+        end
+
+        li class: 'url input required stringish', id: "page_page_components_attributes_#{placeholder}_component_attributes_description_input" do
+          label 'Description', for: "page_page_components_attributes_#{placeholder}_component_attributes_description", class: 'label'
+          input value: component&.description || nil, type: 'text', required: 'required',
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_description",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][description]"
+          para 'Enter a brief description of the map.', class: 'inline-hints'
+        end
+
+        li class: 'select input optional', id: "page_page_components_attributes_#{placeholder}_practices_attributes_input" do
+          label 'Innovation List', for: "page_page_components_attributes_#{placeholder}_component_attributes_map", class: 'label'
+          select required: 'required', multiple: 'multiple', size: '20',
+                 id: "page_page_components_attributes_#{placeholder}_component_attributes_map",
+                 name: "page[page_components_attributes][#{placeholder}][component_attributes][practices][]" do
+            Practice.order(name: :asc).each do |p|
+              option p.name, value: p.id, selected: component&.practices&.include?(p.id.to_s) ? 'selected' : nil
+            end
+          end
+          para 'Select which Innovations adoptions are displayed on the map.  Hold down the CTRL key and click on Innovation names to add to the list.', class: 'inline-hints'
+        end
+
+        li class: 'checkbox input optional', id: "page_page_components_attributes_#{placeholder}_component_attributes_display_successful_adoptions_input" do
+          if component
+            input type: 'hidden', value: '0', name: "page[page_components_attributes][#{placeholder}][component_attributes][display_successful_adoptions]"
+          end
+          label 'Successful', for: "page_page_components_attributes_#{placeholder}_component_attributes_display_successful_adoptions", class: 'label'
+          input value: component&.display_successful_adoptions || nil, type: 'checkbox', checked: component&.display_successful_adoptions?,
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_display_successful_adoptions",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][display_successful_adoptions]"
+        end
+        li class: 'checkbox input optional', id: "page_page_components_attributes_#{placeholder}_component_attributes_display_in_progress_adoptions_input" do
+          if component
+            input type: 'hidden', value: '0', name: "page[page_components_attributes][#{placeholder}][component_attributes][display_in_progress_adoptions]"
+          end
+          label 'In Progress', for: "page_page_components_attributes_#{placeholder}_component_attributes_display_in_progress_adoptions", class: 'label'
+          input value: '1', type: 'checkbox', checked: component&.display_in_progress_adoptions?,
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_display_in_progress_adoptions",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][display_in_progress_adoptions]"
+        end
+        li class: 'checkbox input optional', id: "page_page_components_attributes_#{placeholder}_component_attributes_display_unsuccessful_adoptions_input" do
+          if component
+            input type: 'hidden', value: '0', name: "page[page_components_attributes][#{placeholder}][component_attributes][display_unsuccessful_adoptions]"
+          end
+          label 'Unsuccessful', for: "page_page_components_attributes_#{placeholder}_component_attributes_display_unsuccessful_adoptions", class: 'label'
+          input value: '1', type: 'checkbox', checked: component&.display_unsuccessful_adoptions?,
+                id: "page_page_components_attributes_#{placeholder}_component_attributes_display_unsuccessful_adoptions",
+                name: "page[page_components_attributes][#{placeholder}][component_attributes][display_unsuccessful_adoptions]"
+        end
+        para 'Select which adoptions statuses should display on the map.', class: 'inline-hints'
+      end
+    end
+  end
+end
+
+return html.to_s

app/views/maps/_page_map_infowindow.html.erb

@@ -0,0 +1,30 @@
+<div class="line-height-sans-1">
+  <div class="margin-top-1">
+    <%
+      station_name = facility.official_station_name
+      map_info_window_text = map_component.map_info_window_text
+    %>
+    <p class="margin-0 padding-x-4">
+      <%= link_to "#{station_name} #{ show_common_name(station_name, facility.common_name)}", va_facility_path(facility), class: 'usa-link font-sans-md text-bold' %>
+    </p>
+    <div class="margin-top-0 text-normal theme-type-scale-sm padding-x-4">
+      <%= adoption_count %> <%= map_info_window_text.present? ? "#{map_info_window_text}" : 'Total' %> Innovation<%= 's' if adoption_count != 1 %>
+    </div>
+    <div class="text-bold font-sans-3xs">
+      <% practice_data.each do |pd| %>
+        <%
+          info_window_text = pd[:map_info_window_text]
+          name = pd[:name]
+        %>
+        <div class="radius-lg border border-solid padding-x-4 padding-y-105 border-base-lightest margin-bottom-2">
+          <a class="usa-link" href="/innovations/<%= pd[:slug] %>">
+            <%= info_window_text.present? ? "#{name} (#{info_window_text})" : "#{name}" %>
+          </a>
+          <div class="text-normal font-sans-3xs margin-top-3">
+            <%= pd[:tagline] %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/page/_page_map.html.erb

@@ -0,0 +1,10 @@
+<% if ENV['GOOGLE_API_KEY'].present? %>
+  <% provide :head_tags do %>
+    <%= javascript_tag 'data-turbolinks-track': 'reload' do %>
+    var mapData = <%= raw @va_facility_marker.to_json %>
+    <% end %>
+    <%= javascript_include_tag 'page/page_map', 'data-turbolinks-track': 'reload' %>
+  <% end %>
+  <div id="page_builder_map" class="display-none grid-col-12 desktop:grid-col-9 page_builder_map"></div>
+  <%= render partial: 'shared/loading_spinner', locals: { display: true, classes: 'flex-justify-center flex-align-self-center margin-y-8 desktop:margin-y-10 dm-facilities-show-map-loading-spinner text-center' } %>
+<% end %>

app/views/page/_page_map_data.js.erb

@@ -0,0 +1 @@
+var mapData = <%= raw @va_facility_marker.to_json %>;