{% extends "Layout/default.html.twig" %}
{% block content %}
{{ include('Navigation/breadcrumb.html.twig') }}
{{ include('Includes/main-title-block-editable.html.twig', {
styleModifier: 'container-sm text-center'
}) }}
{{ include('Includes/areablock.html.twig') }}
{% if editmode %}
<div class="editmode-box editmode-box--info">
<div class="editmode-box__header">
Region Select:
{{ pimcore_relations('regions') }}
</div>
</div>
{% endif %}
{% if not pimcore_relations('regions').empty %}
<div class="container content-block">
<div class="row justify-content-center">
<div class="col-md-7 col-xl-5">
<div class="dropdown dropdown-secondary">
<button type="button" class="font-default-bold dropdown-toggle dropdown-toggle--select" id="regionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ 'weather.Region wechseln'|trans }}
</button>
<div class="dropdown-menu" aria-labelledby="regionDropdown">
{% for region in pimcore_relations('regions').elements %}
<a class="dropdown-item" href="{{ region.siteConfig.weatherOverview }}">{{ region.name }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="container container-sm content-block content-block--sm">
{% if document.property('region') and document.property('region').isMainRegion %}
{{ include('Includes/tabs.html.twig', {
"items": [
{
"id": "weather-tab",
"text": "weather.Wetter"|trans,
"href": "#weather",
"isActive": true,
"targetId": "weather"
},
{
"id": "warning-tab",
"text": "weather.Lawinenwarnstufen"|trans,
"href": "#warning",
"isActive": false,
"targetId": "warning"
}
]
}) }}
{% endif %}
<div class="tab-content">
<div class="tab-pane fade show active" id="weather" aria-labelledby="weather-tab">
<div class="row">
<div class="col-md-9 mx-auto">
{% if editmode %}
<div class="alert alert-info">
either: <br>
- Region Objects (Weather Live Station will be used or Weather Station if Weather Live Station is not filled) -> will link to Region Weather Page
<br>
- Community Objects (Weather Live Station will be used or Weather Station if Weather Live Station is not filled) -> will link to Community Detailpage only this object will be considered in listing below<br>
- Weather Live Station <br>
- Weather Station <br>
</div>
{% endif %}
<div class="position-relative js-hotspot-container" data-hotspot-on-hover="true">
{{ pimcore_image('map', {
thumbnail: 'hotspot-map',
imgAttributes: {
class: 'js-lazy-img img-fluid img-dropshadow'
},
lowQualityPlaceholder: true
})|raw }}
{% for hotspot in pimcore_image('map').marker %}
{% if hotspot['data'][0] and hotspot['data'][0].type == 'object' %}
{% set element = hotspot['data'][0].value|default(false) %}
{% if element is instanceof('\\Pimcore\\Model\\DataObject\\Region') or element is instanceof('\\Pimcore\\Model\\DataObject\\Community') or element is instanceof('\\Pimcore\\Model\\DataObject\\WeatherLiveStation') or element is instanceof('\\Pimcore\\Model\\DataObject\\WeatherStation') %}
{{ include('Includes/hotspot.html.twig', getHotspotData(hotspot['left'], hotspot['top'], element, true)) }}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% if document.property('region') and document.property('region').isMainRegion %}
<div class="tab-pane fade" id="warning" aria-labelledby="warning-tab">
<script>
window._svgTransform = {
regionMap: {
'NORDALPEN WEST': '{{ 'map.nordalpen-west'|trans|raw|raw }}',
'NORDALPEN OST': '{{ 'map.nordalpen-ost'|trans|raw }}',
'NIEDERE TAUERN NORD': '{{ 'map.niedere-tauern-nord'|trans|raw }}',
'NIEDERE TAUERN SÜD': '{{ 'map.niedere-tauern-sued'|trans|raw }}',
'GURK- UND SEETALER ALPEN': '{{ 'map.gurk-seetaler-alpen'|trans|raw }}',
'STEIRISCHES RANDGEBIRGE WEST': '{{ 'map.steirisches-randgebierge-west'|trans|raw }}',
'STEIRISCHES RANDGEBIRGE OST': '{{ 'map.steirisches-randgebierge-ost'|trans|raw }}'
}
}
</script>
<div class="row">
<div class="col-md-9 mx-auto">
<div class="position-relative js-hotspot-container">
<div class="js-svg-converter region-map" data-json="regionMap">
{{ getFileContent("/home/steiermark/www/public/static/debug/svg-transform/map_lawine.svg")|raw }}
</div>
{% set nordalpenWest = pimcore_object(741) %}
{{ include('Includes/hotspot.html.twig', {left: 12, top: 18, isPlain: true, avalanche: 'avalanche-icon-' ~ nordalpenWest.symbol}) }}
{% set nordalpenMitte = pimcore_object(324899) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(37, 18, nordalpenMitte)) }}
{% set nordalpenOst = pimcore_object(740) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(62, 25, nordalpenOst)) }}
{% set niedereTauernNord = pimcore_object(742) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(22, 37, niedereTauernNord)) }}
{% set randgebirgeOst = pimcore_object(738) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(78, 39, randgebirgeOst)) }}
{% set niedereTauernSued = pimcore_object(743) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(35, 50, niedereTauernSued)) }}
{% set gurkSeetalerAlpen = pimcore_object(744) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(28, 65, gurkSeetalerAlpen)) }}
{% set randgebirgeWest = pimcore_object(739) %}
{{ include('Includes/hotspot.html.twig', getHotspotData(52, 60, randgebirgeWest)) }}
</div>
<div class="mt-4">
<h4 class="h6 text-uppercase font-decorative">{{ 'weather.Lawinengefahr'|trans }}:</h4>
</div>
<ul class="list-inline list-unstyled">
{% set legend = [
{
"icon": "avalanche-icon-stufe_1",
"text": "weather.Gering"|trans
},
{
"icon": "avalanche-icon-stufe_2",
"text": "weather.Mäßig"|trans
},
{
"icon": "avalanche-icon-stufe_3",
"text": "weather.Erheblich"|trans
},
{
"icon": "avalanche-icon-stufe_4",
"text": "weather.Groß"|trans
},
{
"icon": "avalanche-icon-stufe_5",
"text": "weather.Sehr groß"|trans
},
{
"icon": "avalanche-icon-tagesgang",
"text": "weather.Tagesgang"|trans
},
{
"icon": "avalanche-icon-hoehenabhaengigkeit",
"text": "weather.Höhenabhängigkeit"|trans
}
] %}
{% for item in legend %}
<li class="list-inline-item">
<span class="avalanche-icon {{ item.icon }}"></span>
<span class="d-block text-center fz12">{{ item.text }}</span>
</li>
{% endfor %}
</ul>
<small class="d-block text-right mt-3">
{{ 'general.Quelle'|trans }}
<a href="http://www.lawine-steiermark.at/" class="text-primary-light">www.lawine-steiermark.at</a> - {{ carbon().createFromTimestamp(nordalpenWest.modificationDate).format('H:i') }} {{ 'general.Uhr'|trans }}
</small>
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% set prognosis = getWeatherPrognosis() %}
{% if editmode or (app.request.locale == 'de' and prognosis['today'] is not empty) %}
<section class="content-block container container-sm">
{{ include('Includes/title-block-editable.html.twig', {
suffix: 'prognose',
isCentered: true
}) }}
<div class="row vertical-gutter--3">
{% if prognosis['today'] is not empty %}
<div class="col-md-6 vertical-gutter__item">
<span class="badge badge-primary">{{ 'weather.heute'|trans }}</span>
{% for item in prognosis['today'] %}
<div class="font-default-bold text-primary mt-2">{{ item.title }}</div>
<div class="wysiwyg">
{{ item.text }}
</div>
{% endfor %}
</div>
{% endif %}
{% if prognosis['tomorrow'] is not empty %}
<div class="col-md-6 vertical-gutter__item">
<span class="badge badge-primary">{{ 'weather.morgen'|trans }}</span>
{% for item in prognosis['tomorrow'] %}
<div class="font-default-bold text-primary mt-2">{{ item.title }}</div>
<div class="wysiwyg">
{{ item.text }}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% if prognosis['modifiedDate'] %}
<small class="d-block text-right mt-3">
{{ 'general.Quelle'|trans }}
<a href="https://www.zamg.ac.at" class="text-primary-light">ZAMG</a> - {{ prognosis['modifiedDate'].format('H:i') }} {{ 'general.Uhr'|trans }}
</small>
{% endif %}
</section>
{% endif %}
{% if editmode %}
<div class="editmode-box editmoe-box--info">
<div class="editmode-box__header">
BG Image
</div>
<div>
{{ pimcore_relation('bgImage', {'types': ['asset'], 'subtypes': ['image']}) }}
</div>
</div>
{% endif %}
<section class="slide slide--has-bg content-block">
<div class="slide__bg slide__bg--gradient js-lazy-img js-lazy-img--bg" data-lazy-img-background="{{ pimcore_relation('bgImage').empty ? '' : pimcore_relation('bgImage').element.thumbnail("region-slide-bg") }}"></div>
<div class="container">
{{ include("Includes/title-block-editable.html.twig", {
suffix: 'cities',
isCentered: true,
isWhite: true,
styleModifier: "title-block--shadow"
}) }}
<div class="js-ajax-form" data-ajax-form-add-url-params="true">
<div aria-live="polite">
<form action="/404"
data-action="{{ app.request.pathInfo }}"
class="js-ajax-form__form">
{% do jsConfig().add('typeaheadDataUrl', url('weather_typeahead', {region: document.property('region') ? document.property('region').id : null})) %}
<div class="row justify-content-center">
<div class="col-md-7 col-xl-4">
<div class="js-typeahead form-group d-flex mb-5" data-typeahead-placeholder="{{ 'weather.placholder.Suche nach Ort'|trans }}" data-typeahead-name="city" data-typeahead-min-length="2">
<button class="btn btn-white btn-rounded form-control-btn py-0" type="submit">{{ 'weather.Ort suchen'|trans }}</button>
</div>
</div>
</div>
</form>
<div class="js-ajax-form__notifications mb-3" hidden></div>
<div class="js-ajax-form__error-area mb-3" hidden>
<button class="js-ajax-form__retry btn btn-info ml-2">{{ 'general.Retry'|trans }}</button>
</div>
{{ include("Includes/loading-overlay.html.twig", {styleModifier: "js-ajax-form__loading"}) }}
<div class="js-ajax-form__result">
{{ include('Weather/accordion.html.twig') }}
</div>
</div>
</div>
</div>
</section>
{% if editmode %}
<div class="editmode-box editmoe-box--info">
<div class="editmode-box__header">
Settings (Slide will not show if 2500m and 1500m are empty)
</div>
<div>
<label>
BG Image
</label>
{{ pimcore_relation('bgImageMountain', {'types': ['asset'], 'subtypes': ['image']}) }}
</div>
<div>
<label>
2500m Weather Text Station (isMountain is true)
</label>
{{ pimcore_relation('mountain2500', {'types': ['object'], 'subtypes': ['object'], 'classes': ['WeatherTextStation']}) }}
</div>
<div>
<label>
1500m Weather Text Station (isMountain is true)
</label>
{{ pimcore_relation('mountain1500', {'types': ['object'], 'subtypes': ['object'], 'classes': ['WeatherTextStation']}) }}
</div>
</div>
{% endif %}
{% if editmode or not pimcore_relation('mountain2500').empty or not pimcore_relation('mountain1500').empty %}
<section class="container container-sm content-block">
{{ include("Includes/title-block-editable.html.twig", {
suffix: 'mountains',
isCentered: true
}) }}
<div class="row vertical-gutter--3">
<div class="col-md-6 vertical-gutter__item">
{{ include('Includes/Partials/mountain-weather-teaser.html.twig', {
'title': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].date.localeDayOfWeek,
'date': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].date,
'temp2500': pimcore_relation('mountain2500').empty ? false : pimcore_relation('mountain2500').element.weatherData.items[0].tmax,
'temp1500': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].tmax,
'content': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].text,
'icon': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].symbol,
'bgImage': pimcore_relation('bgImageMountain').empty ? false : pimcore_relation('bgImageMountain').element
}) }}
</div>
<div class="col-md-6 vertical-gutter__item">
{{ include('Includes/Partials/mountain-weather-teaser.html.twig', {
'title': pimcore_relation('mountain1500').empty or not pimcore_relation('mountain1500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain1500').element.weatherData.items[1].date.localeDayOfWeek,
'date': pimcore_relation('mountain1500').empty or not pimcore_relation('mountain1500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain1500').element.weatherData.items[1].date,
'temp2500': pimcore_relation('mountain2500').empty or not pimcore_relation('mountain2500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain2500').element.weatherData.items[1].tmax,
'temp1500': pimcore_relation('mountain1500').empty or not pimcore_relation('mountain1500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain1500').element.weatherData.items[1].tmax,
'content': pimcore_relation('mountain1500').empty or not pimcore_relation('mountain1500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain1500').element.weatherData.items[1].text,
'icon': pimcore_relation('mountain1500').empty or not pimcore_relation('mountain1500').element.weatherData.items[1]|default(false) ? false : pimcore_relation('mountain1500').element.weatherData.items[1].symbol,
'bgImage': pimcore_relation('bgImageMountain').empty ? false : pimcore_relation('bgImageMountain').element
}) }}
</div>
</div>
</section>
{% endif %}
{{ include('Includes/areablock.html.twig', {'areaName': 'bottomContent'}) }}
{% endblock %}
{% block javascripts %}
{% if not app.request.get('onlyInlineCss') %}
{{ include('Layout/includes/encore.html.twig', {
'staticDebugMode': staticDebugMode,
'file': 'js/weather'
}) }}
{% endif %}
{% endblock %}