history.html

---
layout: default
title: "Drafty: History"
class: page--history
js_url: "/assets/js/history-filters.js"
---
<h1>History</h1>

{% assign num_rows = site.data.all | size | times: 1.0 | round %}

<h2 class="visually-hidden">Filter Options</h2>

{% assign months = "" | split: "" %}
{% for row in site.data.all %}
  {% capture month_and_year %}{{ row.time | date: "%B %Y" }}{% endcapture %}
  {% assign already_in_list = false %}
  {% for month in months %}
    {% if month == month_and_year %}
      {% assign already_in_list = true %}
    {% endif %}
  {% endfor %}
  {% if already_in_list == false %}
    {% assign months = months | push: month_and_year %}
  {% endif %}
{% endfor %}

<div class="filter-option-container">
  <h3 id="month-filter-form-heading" class="filter-option-heading">Filter by Month</h3>
  <form id="month-filter-form" class="form--filter-by-month" aria-describedby="month-filter-form-heading">
    <label for="month">Month</label>
    <select id="month">
      <option value=""></option>
      {% for month in months %}
      <option value="{{ month }}">{{ month }}</option>
      {% endfor %}
    </select>
    <button type="submit">Filter by month</button>
  </form>
</div>

<span class="filter-options-divider">or</span>

<div class="filter-option-container">
  <h3 class="filter-option-heading">Show All (Default)</h3>
  <button type="button" id="show-all">Show all ({{ num_rows }} rows)</button>
</div>

<h2 id="table-heading">All Data ({{ num_rows }} rows)</h2>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th scope="col">Date & Time</th>
        <th scope="col">Temperature</th>
        <th scope="col">Humidity</th>
        <th scope="col">Lux</th>
        <th scope="col">Local Weather Conditions</th>
        <th scope="col">Outdoor Temperature</th>
        <th scope="col">Outdoor Humidity</th>
      </tr>
    </thead>
    <tbody>
      {% for row in site.data.all reversed %}
      <tr>
        <td>{{ row.time | date: "%B %e, %Y, %r" }}</td>
        <td>{{ row.temp_f }}&deg;F</td>
        <td>{{ row.humidity }}%</td>
        <td>{{ row.lux | round: 0 }}</td>
        <td>{% if row.nws_conditions %}{{ row.nws_conditions }}{% else %}n/a{% endif %}</td>
        <td>{% if row.nws_temp_f %}{{ row.nws_temp_f }}&deg;F{% else %}n/a{% endif %}</td>
        <td>{% if row.nws_humidity %}{{ row.nws_humidity }}%{% else %}n/a{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<script src="{{ page.js_url | relative_url }}"></script>