block_overview.html

{% extends "base.html" %}

{% load i18n %}
{% load humanize %}
{% load btc_formats %}
{% load static %}

{% block title %}
  {% blocktrans with currency_name=coin_symbol|coin_symbol_to_currency_name block_hash=block_details.hash %}
    {{ currency_name }} Block {{ block_hash }}
  {% endblocktrans %}
{% endblock title %}

{% block meta_description %}
  {{ coin_symbol|coin_symbol_to_currency_name }}
  block {{ block_details.hash }}
  was confirmed as the {{ block_details.height|ordinal }} block on
  {{ block_details.received_time|date:'Y-m-d H:i' }} GMT.
  It had
  {{ block_details.n_tx|intcomma }} transaction{{ block_details.n_tx|pluralize}},
  which totaled
  {% satoshis_to_user_units_trimmed block_details.total 'btc' coin_symbol True 4 %}
  with
  {% satoshis_to_user_units_trimmed block_details.fees 'btc' coin_symbol True 4 %}
  in fees.
{% endblock meta_description %}

{% block page_header %}
  <h1>
    <i class="fa fa-cube"></i> 
    {{ coin_symbol|coin_symbol_to_display_name }} Block {{ block_details.height|intcomma }}
  </h1>
  <h2 class="tagline wrapit semi">{{ block_details.hash }}</h2>
{% endblock page_header %}

{% block content %}
<div class="container">
  <nav>
    {% if block_details.height != 1 %}
      <a href="{% url 'block_overview' coin_symbol block_details.prev_block %}" class="btn btn-default pull-left">
        <i class="fa fa-angle-double-left"></i> 
        Previous Block
      </a>
    {% endif %}
    {% if block_details.depth > 0 %}
      <a href="{% url 'block_overview' coin_symbol block_details.height|add:1 %}" class="btn btn-default pull-right">
        Next Block
        <i class="fa fa-angle-double-right"></i>
      </a>
    {% else %}
      {# TODO: something to mark that this is the current block? #}
    {% endif %}
    <div class="clearfix"></div>
  </nav>

  <div class="section">
    <div class="dash dash-3">
      <ul>
        <li>
          <span class="dash-label">Received</span><br>
          <i class="fa fa-clock-o"></i> 
          <time class="timeago" datetime="{{ block_details.received_time|date:'Y-m-d\TH:i:s' }}Z">
            {{ block_details.received_time|date:'Y-m-d H:i' }} GMT
          </time>
        </li>
        <li>
          <span class="dash-label">Total Transacted</span><br>
          {% satoshis_to_user_units_trimmed block_details.total tcp__user_units coin_symbol True 4 %}
        </li>
        <li>
          <span class="dash-label">Total Fees</span><br>
          {% satoshis_to_user_units_trimmed block_details.fees tcp__user_units coin_symbol True 4 %}
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
  </div>

  <p class="text-center">
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#advanced-details">
      Advanced Details 
      <b class="caret"></b>
    </button>
  </p>

  <div class="col-md-12 collapse" id="advanced-details">
    <div class="table-responsive">
      <table class="table">
        <tr>
          <th>Current Depth</th>
          <td>
            {{ block_details.depth|intcomma }}
          </td>
        </tr>
        {% if block_details.size %}
          <tr>
            <th>Block Size (bytes)</th>
            <td>
              {{ block_details.size|intcomma }}
            </td>
          </tr>
        {% endif %}
        <tr>
          <th>Nonce</th>
          <td>
            {{ block_details.nonce }}
          </td>
        </tr>
        <tr>
          <th>Merkle Root</th>
          <td>
            {{ block_details.mrkl_root }}
          </td>
        </tr>
        <tr>
          <th>Bits (difficulty target)</th>
          <td>
            {{ block_details.bits|intcomma }}
          </td>
        </tr>
        <tr>
          <th>Version</th>
          <td>
            {{ block_details.ver }}
          </td>
        </tr>
        {% if block_details.relayed_by %}
          <tr>
            <th>IP Relayed By</th>
            <td>
              {{ block_details.relayed_by }}
            </td>
          </tr>
        {% endif %}
        <tr>
          <td colspan="2" class="text-center">
            <a href="{{ api_url }}" class="btn btn-default">
              <i class="fa fa-code"></i> 
              API Call
            </a>
            <a href="http://dev.blockcypher.com/#blocks" class="btn btn-default">
              <i class="fa fa-external-link"></i> 
              API Docs
            </a>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <h2>
    {% if block_details.txids|length != block_details.n_tx %}
      {{ block_details.txids|length }}
      of
    {% endif %}
    {{ block_details.n_tx|intcomma }} Transaction{{ block_details.n_tx|pluralize}}
  </h2>

  <div class="section pager">
    <div class="row">
      <div class="col-sm-4 text-left">
      {% if current_page > 1 %}
        <a href="?page={{ current_page|add:-1|intcomma }}" class="btn btn-default">
          <i class="fa fa-angle-double-left"></i> 
          Previous Page
        </a>
      {% endif %}
      </div>

      <div class="col-sm-4 text-center">
        Page {{ current_page|intcomma }} of {{ max_pages|intcomma }}
      </div>

      <div class="col-sm-4 text-right">
      {% if current_page < max_pages %}
        <a href="?page={{ current_page|add:1|intcomma }}" class="btn btn-default">
          Next Page
          <i class="fa fa-angle-double-right"></i>
        </a>
      {% endif %}
      </div>
      <div class="clearfix"></div>
    </div>
  </div>

{% if block_details.txids %}

  {% for transaction in block_details.txids %}
      {% with force_include_tx_amount=True show_tx_hash=True show_num_confirmation=False num_inouts_to_display=5 %}
        {% include "partials/tx_hash.html" %}
      {% endwith %}
  {% endfor %}

  <div class="section pager">
    <div class="row">
      <div class="col-sm-4 text-left">
      {% if current_page > 1 %}
        <a href="?page={{ current_page|add:-1|intcomma }}" class="btn btn-default">
          <i class="fa fa-angle-double-left"></i> 
          Previous Page
        </a>
      {% endif %}
      </div>

      <div class="col-sm-4 text-center">
        Page {{ current_page|intcomma }} of {{ max_pages|intcomma }}
      </div>

      <div class="col-sm-4 text-right">
      {% if current_page < max_pages %}
        <a href="?page={{ current_page|add:1|intcomma }}" class="btn btn-default">
          Next Page
          <i class="fa fa-angle-double-right"></i>
        </a>
      {% endif %}
      </div>
      <div class="clearfix"></div>
    </div>
  </div>

{% else %}
  <p>
    {% if block_details.height == 1 %}
      The genesis block has no transactions.
    {% else %}
      No transactions. Something seems off, that doesn't make any sense!
    {% endif %}
  </p>
{% endif %}

{% url 'add_metadata_to_block' coin_symbol block_details.hash as add_metadata_uri %}
{% include "partials/metadata.html" %}

</div>

{% endblock content %}

{% block extra_js %}
  <script src="{% static "js/jquery.timeago.js" %}" type="text/javascript"></script>

  <script>

    $(document).ready(function(){

      $("time.timeago").timeago();

      if (window.location.hash == '#advanced-details') {
        $('#advanced-details').collapse('show');
      }

      fetch_metadata('{{ coin_symbol }}', 'block', '{{ block_details.hash }}');

    })

  </script>

{% endblock extra_js %}