holderdeord/hdo-site

<h1 class="page-header">
  Widgets
</h1>

<ul class="nav nav-tabs">
  <li class="active"><a href="#docs" data-toggle="tab">Dokumentasjon</a></li>
  <li><a href="#issues" data-toggle="tab">Finn saker</a></li>
  <li><a href="#promises" data-toggle="tab">Finn løfter</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="docs">
    <div class="alert alert-info">
      <strong>NB</strong>: NRK-brukere må legge på parameteret <code>nrk=1</code> bak alle iframe-URLer for bruk på nrk.no.
    </div>

    <% @examples.each do |widget| %>
      <div class="row-fluid">
        <h3>
          <%= widget.title %>
          <small>- <%= widget.subtitle %></small>
        </h3>

        <div class="span5"> <!-- tab-pane messes up grid? -->
          Script
          <pre class="prettyprint"><code class="language-html"><%= "#{widget.script}<script src='#{widget_load_url}'></script>" %></code></pre>
          Iframe
          <pre class="prettyprint"><code class="language-html"><%= widget.iframe %></code></pre>
        </div>

        <div class="span6">
          <%= widget.script.html_safe %>
        </div>
      </div>

      <hr class="soften">
    <% end %>
  </div>

  <div class="tab-pane" id="promises">

    <form class="form-search span6" id="promise-search">
      <div class="input-append">
        <input type="search" autofocus class="span2 search-query">
        <button type="submit" class="btn">Søk</button>
      </div>
    </form>

    <div id="promise-hits" class="pull-right"></div>
    <%= spinner_tag %>


    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th style="min-width: 90px;">Periode</th>
          <th>Parti</th>
          <th>Tekst</th>
        </tr>
      </thead>

      <tbody id="promises-body"></tbody>
    </table>
  </div>

  <div class="tab-pane" id="issues">
    <table class="table table-striped">
      <thead>
        <th><%= Issue.human_attribute_name :id %></th>
        <th><%= Issue.human_attribute_name :title %></th>
      </thead>

      <tbody>
        <% @issues.each do |issue| %>
          <tr>
            <td><%= issue.id %></td>
            <td><%= link_to issue.title, issue %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<%= content_for :document_ready do %>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
      prettyPrint();

      $("#promise-search").submit(function (e) {
        e.preventDefault();

        var query, spinner, tbody, hits;

        query   = $(this).find("input").val();
        spinner = $("#spinner");
        tbody   = $("#promises-body");
        hits    = $("#promise-hits");

        tbody.html('');
        hits.html('');
        spinner.show();

        $.ajax({
          url: '/promises.json?size=500&parliament_period=2013-2017&q=' + encodeURIComponent(query),
          type: 'GET',
          dataType: 'json',
          complete: function(xhr, textStatus) { spinner.hide(); },
          success: function(promises, textStatus, xhr) {
            if (promises) {
              hits.html(promises.length + ' treff');

              $.each(promises, function () {
                $(tbody).append('<tr><td>' + this.id + '</td><td>' + this.parliament_period_name + '</td><td>' + this.party_names.join(',') + '</td><td>' + this.body + '</td>');
              });
            }
          },
          error: function(xhr, textStatus, errorThrown) {
            alert('Oops, noe gikk galt.');
          }
        });

        return false;
      });
    });
  </script>
<% end %>

<script src='<%= widget_load_url %>'></script>