Merge pull request #15245 from everypolitician/house-download

Add "House Download" page

app.rb

@@ -71,6 +71,13 @@
   erb :country_download
 end
 
+get '/:country/:house/download.html' do |country_slug, house_slug|
+  pass unless country = settings.index.country(country_slug)
+  pass unless house   = country.legislature(house_slug)
+  @page = Page::HouseDownload.new(house: house, index: settings.index)
+  erb :house_download
+end
+
 get '/status/all_countries.html' do
   @page = Page::SpiderBase.new
   erb :spider_base

lib/page/house_download.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Page
+  class HouseDownload
+    attr_reader :house
+
+    def initialize(house:, index:)
+      @house = house
+      @index = index
+    end
+
+    def country
+      house.country
+    end
+
+    def title
+      "EveryPolitician: #{country.name} - #{house.name}"
+    end
+
+    def legislative_periods
+      house.legislative_periods
+    end
+
+    def download_url
+      index.index_url
+    end
+
+    private
+
+    attr_reader :index
+  end
+end

t/page/house_download.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+require 'test_helper'
+require_relative '../../lib/page/house_download'
+
+describe 'HouseDownload' do
+  subject do
+    country = index_at_known_sha.country('united-states-of-america')
+    house   = country.legislature('senate')
+    Page::HouseDownload.new(
+      house: house,
+      index: index_at_known_sha
+    )
+  end
+
+  describe 'country' do
+    it 'should be the US' do
+      subject.country.name.must_equal 'United States of America'
+    end
+  end
+
+  describe 'house' do
+    it 'should be the Senate' do
+      subject.house.name.must_equal 'Senate'
+    end
+  end
+
+  describe 'title' do
+    it 'should contain the country name' do
+      subject.title.must_include 'United States of America'
+    end
+
+    it 'should contain the house name' do
+      subject.title.must_include 'Senate'
+    end
+  end
+
+  describe 'legislative_periods' do
+    it 'should contain the 114th congress period' do
+      subject.legislative_periods.first.slug.must_equal '114'
+    end
+  end
+
+  describe 'download_url' do
+    it 'should be at the correct SHA' do
+      subject.download_url.must_include 'd8a4682f'
+    end
+
+    it 'should be at rawgit' do
+      subject.download_url.must_include 'cdn.rawgit.com'
+    end
+  end
+end

t/web/house_download.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+require 'test_helper'
+require_relative '../../app'
+
+describe 'house download template' do
+  subject { Nokogiri::HTML(last_response.body) }
+  before { get '/united-states-of-america/senate/download.html' }
+
+  describe 'download links' do
+    let(:all_data)   { subject.css('.country__legislature a.button--download/@href') }
+    let(:last_term)  { subject.css('.avatar-unit a.button--download/@href').first }
+    let(:first_term) { subject.css('.avatar-unit a.button--download/@href').last }
+
+    it 'links to popolo file' do
+      all_data.first.text.must_include '/United_States_of_America/Senate/ep-popolo-v1.0.json'
+    end
+
+    it 'links to the names file' do
+      all_data[1].text.must_include '/United_States_of_America/Senate/names.csv'
+    end
+
+    it 'links to the last-term file' do
+      last_term.text.must_include '/United_States_of_America/Senate/term-114.csv'
+    end
+
+    it 'links to the first-term file' do
+      first_term.text.must_include '/United_States_of_America/Senate/term-97.csv'
+    end
+  end
+
+  describe 'terms information' do
+    it 'shows all the terms' do
+      subject.css('li[id*=term-]').count.must_equal 18
+    end
+
+    it 'shows the right name of a term' do
+      subject.css('#term-senate-114 h3').text.must_include '114th Congress'
+    end
+
+    it 'shows the right dates of a term' do
+      subject.css('#term-senate-113 p').text.strip.must_include '2013-01-06 - 2015-01-03'
+    end
+  end
+end

views/house_download.erb

@@ -0,0 +1,195 @@
+<div class="page-section page-section--grey text-center">
+  <div class="container">
+    <h3>Download data for politicians in this legislature.</h3>
+  </div>
+</div>
+
+  <div class="page-section">
+    <div class="container">
+      <div class="country__legislature" id="legislature-<%= @page.house.slug.downcase %>" data-house="<%= @page.house.slug.downcase %>">
+        <p>
+          Read more about
+          <a href="http://docs.everypolitician.org/data_summary.html">what’s in the data</a>
+          and how we use
+          <a href="http://docs.everypolitician.org/technical.html">CSV and JSON formats</a>.
+          If you’re a programmer, see our notes on
+          <a href="http://docs.everypolitician.org/use_the_data.html">how to use the data</a>.
+        </p>
+        <div class="layout-equal-columns">
+          <div class="first-column">
+            <h4>Data for the whole legislature</h4>
+            <p>
+              <em>All</em> the data we have for this legislature is available
+              in a single JSON file (using the Popolo open standard).
+              This includes all the terms <!-- FIXME: if there are multiple terms -->
+              and rich data — for example, multilingual versions of names,
+              start and end dates of memberships, and related links.
+            </p>
+            <p>
+              <a class="button button--download"
+                href="<%= @page.house.popolo_url %>">
+                <i class="fa fa-download"></i>
+                <span class="large-screen-only">Download as</span> JSON
+              </a>
+            </p>
+          </div>
+          <div class="second-column">
+            <h4>Just politicians’ names</h4>
+            <p>
+              We’ve also separated just the names into a CSV file. Note there
+              may be multiple names for a single politician (for example, this
+              data includes transliterations). We include the identifier too so
+              you can identify duplicates if you need to. For more control over
+              the data, use the JSON instead.
+            </p>
+            <p>
+              <a class="button button--download"
+                href="<%= @page.house.names_url %>">
+                <i class="fa fa-download"></i>
+                <span class="large-screen-only">Download</span> names.csv
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <h4>Data for specific terms</h4>
+      <p>
+        CSV files for individual terms have <em>simplified</em> data for each
+        member. This might be all you need if you’re looking for the core
+        data on these politicians; great for spreadsheets, perfect for
+        quick analysis.
+      </p>
+      <ul class="grid-list grid-list--vertically-center" id="terms-<%= @page.house.slug.downcase %>">
+        <% @page.legislative_periods.each do |t| %>
+          <li id="term-<%= @page.house.slug.downcase %>-<%= t.slug.downcase %>" style="margin-bottom:1.5em">
+            <div class="avatar-unit">
+              <span class="avatar"><i class="fa fa-university"></i></span>
+              <a href="<%= term_table_url(t) %>"><h3><%= t.name %></h3></a>
+              <p>
+                <% if t.start_date || t.end_date %>
+                 <%= t.start_date %> - <%=  t.end_date %>
+                <% end %>
+              </p>
+            </div>
+            <div class="avatar-unit">
+              <a class="button button--small button--download" style="margin:0.5em 0"
+                href="<%= t.csv_url %>">
+                <i class="fa fa-download"></i>
+                <span class="large-screen-only">Download</span> CSV
+              </a>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+
+<div class="page-section">
+  <div class="container">
+    <h3>Other countries</h3>
+    <div class="layout-equal-columns">
+      <div class="first-column">
+        <p>
+          Want politicians who aren’t from <%= @page.country.name %>?
+          No problem: we’ve got the world covered.
+        </p>
+        <p>
+          <a class="button button--quarternary" href="/countries.html">
+            <i class="fa fa-globe"></i>
+            <span class="large-screen-only">View</span> all countries
+          </a>
+        </p>
+      </div>
+      <div class="second-column">
+        <p>
+          The file <code>countries.json</code> is the machine-readable index of
+          all the countries (and their legislatures) we’ve got data for. This
+          is especially useful if you’re interested in coding a way to
+          automatically
+          <a href="http://docs.everypolitician.org/repo_structure.html">read our data</a>.
+        </p>
+        <p>
+          <a href="<%= @page.download_url %>" class="button button--download">
+            <i class="fa fa-download"></i>
+            <span class="large-screen-only">Download</span> countries.json
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+
+function get_q_param(key) {
+  var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
+  return match && decodeURIComponent(match[1].replace(/\+/g, " "));
+}
+
+var max_visible_terms = 6;
+var reduced_visible_terms = 3; // best odd, so wanted term is in middle?
+var wanted_house = get_q_param('house');
+var wanted_term = get_q_param('term');
+
+// for each house...
+
+// if there are more than `max_visible_terms` terms, hide them:
+// display `reduced_visible_terms`
+//   * selected term in the middle if possible
+//   * otherwise the most recent
+
+  // do this by giving all the terms we don't want to display
+  // class = "hidden-term" and then hiding them,
+  // display JS control for toggling them
+
+$(".country__legislature").each(function(){
+  var house_slug = $(this).data('house');
+  var $term_list_items = $('#terms-' + house_slug + ' li');
+  if ($term_list_items.size() > max_visible_terms) {
+    $term_list_items.addClass("hidden-term");
+    var wanted_house_index = 0;
+    // we need to hide some of these terms:
+    // find the one we want:
+    var wanted_id = "term-" + house_slug + '-' + wanted_term;
+    // want to use jQuery's .index() but it's not behaving as I expected
+    if (wanted_house && wanted_term &&
+      wanted_house == house_slug
+    ) {
+      $term_list_items.each(function(i){
+        if ($(this).attr('id') == wanted_id) {
+          wanted_house_index = i;
+          $(this).css("background-color", "#fffadd"); // highlight (FIXME?)
+          return false; // break
+        }
+      });
+    }
+    // want a slice around wanted_house_index of reduced_visible_terms items
+    var max_upper_bound = $term_list_items.length - 1;
+    var lower_bound = wanted_house_index - Math.floor(reduced_visible_terms/2);
+    var upper_bound = wanted_house_index + Math.floor(reduced_visible_terms/2);
+    var delta = upper_bound - max_upper_bound;
+    if (delta > 0) {
+      upper_bound = max_upper_bound;
+      lower_bound = lower_bound - delta;
+    }
+    if (lower_bound < 0) {
+      upper_bound = Math.min(upper_bound + Math.abs(lower_bound), max_upper_bound);
+      lower_bound = 0;
+    }
+    // would do this with jQuery's slice but it's not behaving as I expected
+    $term_list_items.each(function(i){
+      if (i >= lower_bound && i <= upper_bound) {
+        $(this).removeClass("hidden-term");
+      }
+    });
+    // add button to toggle view
+    $term_list_items.first().parent().before('<a href="#" class="button toggle-term-display" data-house="'
+    + house_slug + '">Show all ' + $term_list_items.length + ' terms</a>');
+  }
+});
+$('.hidden-term').hide();
+$('.button.toggle-term-display').on("click", function(e){
+  e.preventDefault();
+  var house = $(e.target).data("house");
+  $('#terms-' + house + " li.hidden-term").slideToggle();
+})
+</script>