aero_weather-1.0.3/templates/aero-weather-vertical-block.html.twig
templates/aero-weather-vertical-block.html.twig
{#
/**
* @file
* Default theme implementation for the Aero Weather block.
*
* This template renders a weather dashboard that displays the current weather,
* detailed weather metrics, and an optional daily forecast, including temperature,
* precipitation, wind speed, humidity, air quality, sunrise, and sunset times.
*
* The template dynamically adjusts based on the configuration passed from the controller
* or preprocess function. It supports both a vertical layout for the current weather
* and an optional forecast view.
*
* Variables expected from the controller or preprocess:
* - weather_data.location.name: The name of the location (e.g., city name).
* - weather_data.location.country: The country of the location.
* - weather_data.location.localtime: The local time at the location.
* - weather_data.current.temp_c: The current temperature in Celsius.
* - weather_data.current.temp_f: The current temperature in Fahrenheit.
* - weather_data.current.humidity: The current humidity percentage.
* - weather_data.current.pressure_mb: The current atmospheric pressure in hPa.
* - weather_data.current.wind_kph: The current wind speed in kilometers per hour.
* - weather_data.current.wind_dir: The direction of the current wind.
* - weather_data.current.feelslike_c: The feels-like temperature in Celsius.
* - weather_data.current.feelslike_f: The feels-like temperature in Fahrenheit.
* - weather_data.current.condition.icon: The icon representing the current weather condition.
* - weather_data.forecast.forecastday[]: An array of forecast data for multiple days.
* Each entry contains weather information for a particular day (e.g., date, min/max temp, icon, etc.).
*
* The template includes:
* - Current weather information with temperature (both Celsius and Fahrenheit), condition icon,
* humidity, pressure, wind speed, and wind direction.
* - Detailed weather metrics like UV index, precipitation, cloud coverage, visibility, air quality,
* sunrise, and sunset times.
* - Dynamic layout based on the configuration settings:
* - config.layout: The layout style for the weather card.
* - config.color_palette: Color scheme for the card.
* - config.show_forecast: Determines whether the daily forecast is shown.
* - config.round_border: Whether the card has rounded corners.
* - config.uuid: A unique identifier for the weather card.
* - config.background_image_url: Background image for the weather card (if provided).
* - config.formatted_date: The formatted date for the location's current time.
* - config.icon_settings: Configuration for icons representing various weather metrics.
* - config.forecast_days: The number of forecast days to display.
*
* The template also supports:
* - A selectable forecast metric (temperature, precipitation, wind, etc.) that changes how the forecast
* is displayed.
* - Swapping between Celsius and Fahrenheit temperature units.
* - Dynamic rendering of forecast information, including temperature, wind speed, and precipitation.
* - An optional "forecast" section that displays the daily forecast for a specified number of days.
*/
#}
{% if weather_data %}
{% set bottom_metrics %}
<div class="flex bottom-metrics">
<div class="flex metric-item-bottom">
<span class="metric-text" id="humidity">{{ weather_data.current.humidity }}</span>
<span class="metric-unit">%</span>
{% include '@aero_weather/templates/icons/humidity.html.twig' with { icon_config:config['icon_settings']['humidity'] }%}
</div>
<div class="flex metric-item-bottom">
<span class="metric-text" id="pressure">{{ weather_data.current.pressure_mb|round }}</span>
<span class="metric-unit">hPa</span>
{% include '@aero_weather/templates/icons/pressure.html.twig' with { icon_config:config['icon_settings']['pressure'] }%}
</svg>
</div>
<div class="flex metric-item-bottom">
<span class="metric-text" id="wind-speed">{{ weather_data.current.wind_kph|round }}</span>
<span class="metric-unit">km/h</span>
<span class="text-white text-lg font-medium ml-1" id="wind-direction">{{ weather_data.current.wind_dir }}</span>
{% include '@aero_weather/templates/icons/wind.html.twig' with { icon_config:config['icon_settings']['wind'] }%}
</svg>
</div>
</div>
{% endset %}
{% set dynamic_classes = [
config.layout,
config.color_palette,
config.show_forecast ? 'show-forecast' : 'not-show-forecast',
config.round_border ? 'round-border' : '',
config.background_image_url ? 'has-bg-image' : '',
config.uuid
] %}
<div class="weather-card-vertical flex {{ dynamic_classes|join(' ') }}"
data-id="{{ config.uuid }}"
{% if config.background_image_url %}
style="background-image: url('{{ config.background_image_url|escape('html_attr') }}'); background-size: cover; background-position: center;"
{% endif %}>
<div class="primary-weather-details-wrapper">
<div class="flex header-content">
<div class="flex location-and-search">
<span id="location-name">{{ weather_data.location.name }},
{{ weather_data.location.country }}</span>
</div>
<div class="text-sm opacity-80 current-date">{{ config.formatted_date }}</div>
</div>
<div class="flex current-weather-section">
<div class="flex current-weather-details">
<div class="flex temp-and-icon">
<img id="current-weather-icon" src="https:{{ weather_data.current.condition.icon }}" alt="{{ weather_data.current.condition.text }}" class="w-16 h-16">
<div class="text-white text-7xl font-light leading-none" id="current-temp">
<div class="temp-c">{{ weather_data.current.temp_c|round }}</div>
<div class="temp-f hidden">{{ weather_data.current.temp_f|round }}</div>
</div>
<div class="flex temp-units" id="temp-units-{{ config.uuid }}">
<input type="radio" name="temp-unit-{{ config.uuid }}" id="celsius-{{ config.uuid }}" class="celsius temp-unit checked" checked>
<label for="celsius-{{ config.uuid }}" class="celsius opacity-70">°C</label>
<input type="radio" name="temp-unit-{{ config.uuid }}" id="fahrenheit-{{ config.uuid }}" class="fahrenheit temp-unit">
<label for="fahrenheit-{{ config.uuid }}" class="fahrenheit opacity-70">°F</label>
</div>
</div>
<div class="min-max-temp">
<span class="min-temp-f">
<span class="opacity-70">{{ 'L:'|trans }}</span>
{{ weather_data.forecast.forecastday[0].day.mintemp_f|round }}°</span>
<span class="max-temp-f">
<span class="opacity-70">{{ 'H:'|trans }}</span>
{{ weather_data.forecast.forecastday[0].day.maxtemp_f|round }}°</span>
<span class="min-temp-c hidden">
<span class="opacity-70">{{ 'L:'|trans }}</span>
{{ weather_data.forecast.forecastday[0].day.mintemp_c|round }}°</span>
<span class="max-temp-c hidden">
<span class="opacity-70">{{ 'H:'|trans }}</span>
{{ weather_data.forecast.forecastday[0].day.maxtemp_c|round }}°</span>
</div>
<div class="feels-like-condition">
{{ 'Feels Like'|trans }}
<span id="feels-like-temp">
<span class="temp-c">{{ weather_data.current.feelslike_c|round }}°</span>
<span class="temp-f hidden">{{ weather_data.current.feelslike_f|round }}°</span>
</span>
<span id="current-condition">{{ weather_data.current.condition.text }}</span>
</div>
</div>
</div>
{% if not config.show_forecast %}
{{ bottom_metrics }}
{% endif %}
<div class="detailed-metrics">
{% if config.icon_settings.uv_index is defined and weather_data.current.uv is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/uv-index.html.twig' with { icon_config: config.icon_settings.uv_index } %}
<span>{{ 'UV Index'|trans }}</span>
</div>
<div class="metric-value" id="uv-index">{{ weather_data.current.uv|default('N/A') }}</div>
</div>
{% endif %}
{% if config.icon_settings.precipitation is defined and weather_data.current.precip_mm is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/precipitation.html.twig' with { icon_config: config.icon_settings.precipitation } %}
<span>{{ 'Precipitation'|trans }}</span>
</div>
<div class="metric-value" id="precipitation">{{ weather_data.current.precip_mm|default('N/A') }} {{ 'mm'|trans }}</div>
</div>
{% endif %}
{% if config.icon_settings.clouds is defined and weather_data.current.cloud is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/clouds.html.twig' with { icon_config: config.icon_settings.clouds } %}
<span>{{ 'Clouds'|trans }}</span>
</div>
<div class="metric-value" id="clouds">{{ weather_data.current.cloud|default('N/A') }}%</div>
</div>
{% endif %}
{% if config.icon_settings.visibility is defined and weather_data.current.vis_km is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/visibility.html.twig' with { icon_config: config.icon_settings.visibility } %}
<span>{{ 'Visibility'|trans }}</span>
</div>
<div class="metric-value" id="visibility">{{ weather_data.current.vis_km|default('N/A') }} {{ 'km'|trans }}</div>
</div>
{% endif %}
{% set astro = weather_data.forecast.forecastday[0].astro|default({}) %}
{% if config.icon_settings.sunrise is defined and astro.sunrise is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/sunrise.html.twig' with { icon_config: config.icon_settings.sunrise } %}
<span>{{ 'Sunrise'|trans }}</span>
</div>
<div class="metric-value" id="sunrise-time">{{ astro.sunrise|default('N/A') }}</div>
</div>
{% endif %}
{% if config.icon_settings.sunset is defined and astro.sunset is defined %}
<div class="metric-item">
<div class="metric-label">
{% include '@aero_weather/templates/icons/sunset.html.twig' with { icon_config: config.icon_settings.sunset } %}
<span>{{ 'Sunset'|trans }}</span>
</div>
<div class="metric-value" id="sunset-time">{{ astro.sunset|default('N/A') }}</div>
</div>
{% endif %}
</div>
</div>
{% if config.show_forecast %}
<div class="seconday-weather-details-wrapper">
{{ bottom_metrics }}
<div class="flex forecast-header">
<h3 class="text-xl font-semibold text-white">{{ 'Daily Forecast'|trans }}</h3>
<div class="relative">
<select class="forecast-option forecast-select focus-outline-none" id="forecast-option-{{ config.uuid }}">
<option value="temperature">{{ 'Temperature'|trans }}</option>
<option value="precipitation">{{ 'Precipitation'|trans }}</option>
<option value="wind">{{ 'Wind'|trans }}</option>
<option value="avghumidity">{{ 'Humidity'|trans }}</option>
<option value="daily_chance_of_rain">{{ 'Rain Chance'|trans }}</option>
<option value="daily_chance_of_snow">{{ 'Snow Chance'|trans }}</option>
</select>
</div>
</div>
<div class="flex flex-col forecast-list" id="forecast-list">
{% for day in weather_data.forecast.forecastday|slice(0, config.forecast_days) %}
{% set day_name = loop.index0 == 0 ? 'Today' : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][day.date|date('w')] %}
{% set day_month = day.date|date('M d') %}
<div class="forecast-item" data-day="{{ day_name }}">
<div class="forecast-day-info flex">
<span class="text-sm font-medium mr-2">{{ day_name }}</span>
<span class="text-xs opacity-70">{{ day_month }}</span>
<img src="https:{{ day.day.condition.icon }}" alt="Weather Icon" class="w-8 h-8 mx-2">
</div>
<div class="text-sm font-medium text-right forecast-values">
<span class="value-temperature">
<div class="temp-c">{{ day.day.mintemp_c|round }}° /
{{ day.day.maxtemp_c|round }}°</div>
<div class="temp-f hidden">{{ day.day.mintemp_f|round }}° /
{{ day.day.maxtemp_f|round }}°</div>
</span>
<span class="value-precipitation hidden">{{ day.day.totalprecip_mm }}
{{ 'mm'|trans }}</span>
<span class="value-wind hidden">{{ day.day.maxwind_kph|round }}
{{ 'km/h'|trans }}</span>
<span class="value-avghumidity hidden">{{ day.day.avghumidity }}
%</span>
<span class="value-daily_chance_of_rain hidden">{{ day.day.daily_chance_of_rain }}
%</span>
<span class="value-daily_chance_of_snow hidden">{{ day.day.daily_chance_of_snow }}
%</span>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
