gallery/gallery/easel/route/view/weather/templates/weather.html

{% extends "base.html" %}
{% set date = response.date %}

{% block title %}{{_("Weather")}} | {{response.location}} | {{format_date(response.date, DATE_FORMAT,
locale=request.state.language)}}{% endblock %}

{% block header %}
<app-link href="/weather"
          icon="brightness-high">{{_("Weather")}}</app-link>
{% endblock %}

{% block content %}
<h4>
  {% if response.period == 'day' %}
  <a class="icon-link {{'disabled' if date == datetime.date.today() else ''}}"
     href="{{build_url(request, path=['..', date - datetime.timedelta(days=1)])}}">
    <i class="bi bi-arrow-left-square"></i>
  </a>
  <a class="icon-link"
     href="{{build_url(request, path=['..', '..', 'days', '10'])}}">
    <i class="bi bi-arrow-up-square"></i>
  </a>
  <span class="badge rounded-pill text-bg-secondary fs-6">{{provider}}</span>
  <span>{{response.location}} | {{format_date(response.date, DATE_FORMAT, locale=request.state.language)}}</span>
  <a class="icon-link"
     href="{{build_url(request, path=['..', date + datetime.timedelta(days=1)])}}">
    <i class="bi bi-arrow-right-square"></i>
  </a>
  {% endif %}
  {% if response.period == 'days' %}
  <span class="badge rounded-pill text-bg-secondary fs-6">{{provider}}</span>
  <span>{{response.location}} | {{format_date(response.date, DATE_FORMAT, locale=request.state.language)}}</span>
  <span>- {{format_date(response.date + datetime.timedelta(days=(response.values | length - 1)), DATE_FORMAT,
    locale=request.state.language)}}</span>
  {% endif %}
</h4>
<div class="table-responsive">
  <table class="table table-weather table-borderless table-compact text-center w-auto"
         style="font-size: 130%;">
    <tbody>
      <!-- date -->
      <tr>
        {% for value in response.values %}
        {% if response.period == 'day' %}
        <td
            class="date {{'now' if value.date < datetime.datetime.now() and value.date + datetime.timedelta(hours=3) > datetime.datetime.now() else ''}}">
          <span class="value">{{value.date.strftime('%H:%M')}}</span>
        </td>
        {% endif %}
        {% if response.period == 'days' %}
        <td class="date {{'now' if value.date.date() == datetime.date.today() else ''}}">
          <span class="value {{'text-danger' if value.date.weekday() in [5,6] else ''}}">
            <a href="{{build_url(request, path=['..', '..', 'day', value.date.date()])}}">
              {{format_date(value.date, 'E d', locale=request.state.language)}}
            </a>
          </span>
        </td>
        {% endif %}
        {% endfor %}
      </tr>
      <!-- cloudness -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Cloudiness")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="cloudness"
            data-bs-toggle="tooltip"
            data-bs-title="{{ value.sky }}">
          {% for icon in value.sky | cloudness_icon(value.date, response.period) %}
          <div class="wi-svg wi-l wi-border"
               style="margin: 0 auto;">{{ icon | weather_icon_svg }}</div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- temperature -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Temperature, °C")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="temperature">
          {% for temperature in value.temperature %}
          <div class="value {{'positive' if temperature > 0 else 'negative'}}"
               style="background-color: rgba(255, 128, 128, {{(temperature - 10) * 0.015}});">
            {{temperature}}
          </div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- wind_direction -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Wind direction")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="wind"
            data-bs-toggle="tooltip"
            data-bs-title="{{ value.wind_direction }}">
          <div class="wi-svg wi-s wi-{{value.wind_direction | wind_direction_icon}}"
               style="margin: 0 auto;">{{ 'wind-deg' | weather_icon_svg }}</div>
        </td>
        {% endfor %}
      </tr>
      <!-- wind_speed -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Wind speed, m/s")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="wind"
            style="background-color: rgba(128, 128, 128, {{value.wind_speed * 0.05}});">
          <span class="speed">{{value.wind_speed}}</span>
          {% if value.wind_gust != value.wind_speed and value.wind_gust > 0 %}
          <span class="gust">
            ({{value.wind_gust}})
          </span>
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      <!-- precipitation -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Precipitation, mm")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="precipitation"
            style="background-color: rgba(0, 128, 255, {{value.precipitation * 0.1}});">
          <span class="value">{{(value.precipitation | round(2)) if value.precipitation else ' '}}</span>
        </td>
        {% endfor %}
      </tr>
      <!-- pressure -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Pressure, mmHg")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="pressure">
          {% for pressure in value.pressure %}
          <div class="value"
               style="background-color: rgba(128, 0, 255, {{(pressure - 720) * 0.008}});">
            {{pressure}}</div>
          {% endfor %}
        </td>
        {% endfor %}
      </tr>
      <!-- humidity -->
      <tr>
        <td colspan="{{response.values | length}}"
            class="header">
          {{_("Humidity, %")}}
        </td>
      </tr>
      <tr>
        {% for value in response.values %}
        <td class="humidity"
            style="background-color: rgba(128, 128, 255, {{value.humidity * 0.005}});">
          {% if value.humidity > -1%}<span class="value">{{value.humidity}}</span>{% endif %}
        </td>
        {% endfor %}
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}