templates/Weather/overview.html.twig line 1

Open in your IDE?
  1. {% extends "Layout/default.html.twig" %}
  2. {% block content %}
  3.     {{ include('Navigation/breadcrumb.html.twig') }}
  4.     {{ include('Includes/main-title-block-editable.html.twig', {
  5.         styleModifier: 'container-sm text-center'
  6.     }) }}
  7.     {{ include('Includes/areablock.html.twig') }}
  8.     {% if editmode %}
  9.         <div class="editmode-box editmode-box--info">
  10.             <div class="editmode-box__header">
  11.                 Region Select:
  12.                 {{ pimcore_relations('regions') }}
  13.             </div>
  14.         </div>
  15.     {% endif %}
  16.     {% if not pimcore_relations('regions').empty %}
  17.         <div class="container content-block">
  18.             <div class="row justify-content-center">
  19.                 <div class="col-md-7 col-xl-5">
  20.                     <div class="dropdown dropdown-secondary">
  21.                         <button type="button" class="font-default-bold dropdown-toggle dropdown-toggle--select" id="regionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  22.                             {{ 'weather.Region wechseln'|trans }}
  23.                         </button>
  24.                         <div class="dropdown-menu" aria-labelledby="regionDropdown">
  25.                             {% for region in pimcore_relations('regions').elements %}
  26.                                 <a class="dropdown-item" href="{{ region.siteConfig.weatherOverview }}">{{ region.name }}</a>
  27.                             {% endfor %}
  28.                         </div>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     {% endif %}
  34.     <div class="container container-sm content-block content-block--sm">
  35.         {% if document.property('region') and document.property('region').isMainRegion %}
  36.             {{ include('Includes/tabs.html.twig', {
  37.                 "items": [
  38.                     {
  39.                         "id": "weather-tab",
  40.                         "text": "weather.Wetter"|trans,
  41.                         "href": "#weather",
  42.                         "isActive": true,
  43.                         "targetId": "weather"
  44.                     },
  45.                     {
  46.                         "id": "warning-tab",
  47.                         "text": "weather.Lawinenwarnstufen"|trans,
  48.                         "href": "#warning",
  49.                         "isActive": false,
  50.                         "targetId": "warning"
  51.                     }
  52.                 ]
  53.             }) }}
  54.         {% endif %}
  55.         <div class="tab-content">
  56.             <div class="tab-pane fade show active" id="weather" aria-labelledby="weather-tab">
  57.                 <div class="row">
  58.                     <div class="col-md-9 mx-auto">
  59.                         {% if editmode %}
  60.                             <div class="alert alert-info">
  61.                                 either: <br>
  62.                                 - Region Objects (Weather Live Station will be used or Weather Station if Weather Live Station is not filled) -> will link to Region Weather Page
  63.                                 <br>
  64.                                 - 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>
  65.                                 - Weather Live Station <br>
  66.                                 - Weather Station <br>
  67.                             </div>
  68.                         {% endif %}
  69.                         <div class="position-relative js-hotspot-container" data-hotspot-on-hover="true">
  70.                             {{ pimcore_image('map', {
  71.                                 thumbnail: 'hotspot-map',
  72.                                 imgAttributes: {
  73.                                     class: 'js-lazy-img img-fluid img-dropshadow'
  74.                                 },
  75.                                 lowQualityPlaceholder: true
  76.                             })|raw }}
  77.                             {% for hotspot in pimcore_image('map').marker %}
  78.                                 {% if hotspot['data'][0] and hotspot['data'][0].type == 'object' %}
  79.                                     {% set element = hotspot['data'][0].value|default(false) %}
  80.                                     {% 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') %}
  81.                                         {{ include('Includes/hotspot.html.twig', getHotspotData(hotspot['left'], hotspot['top'], element, true)) }}
  82.                                     {% endif %}
  83.                                 {% endif %}
  84.                             {% endfor %}
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.             </div>
  89.             {% if document.property('region') and document.property('region').isMainRegion %}
  90.                 <div class="tab-pane fade" id="warning" aria-labelledby="warning-tab">
  91.                     <script>
  92.                         window._svgTransform = {
  93.                             regionMap: {
  94.                                 'NORDALPEN WEST': '{{ 'map.nordalpen-west'|trans|raw|raw }}',
  95.                                 'NORDALPEN OST': '{{ 'map.nordalpen-ost'|trans|raw }}',
  96.                                 'NIEDERE TAUERN NORD': '{{ 'map.niedere-tauern-nord'|trans|raw }}',
  97.                                 'NIEDERE TAUERN SÜD': '{{ 'map.niedere-tauern-sued'|trans|raw }}',
  98.                                 'GURK- UND SEETALER ALPEN': '{{ 'map.gurk-seetaler-alpen'|trans|raw }}',
  99.                                 'STEIRISCHES RANDGEBIRGE WEST': '{{ 'map.steirisches-randgebierge-west'|trans|raw }}',
  100.                                 'STEIRISCHES RANDGEBIRGE OST': '{{ 'map.steirisches-randgebierge-ost'|trans|raw }}'
  101.                             }
  102.                         }
  103.                     </script>
  104.                     <div class="row">
  105.                         <div class="col-md-9 mx-auto">
  106.                             <div class="position-relative js-hotspot-container">
  107.                                 <div class="js-svg-converter region-map" data-json="regionMap">
  108.                                     {{ getFileContent("/home/steiermark/www/public/static/debug/svg-transform/map_lawine.svg")|raw }}
  109.                                 </div>
  110.                                 {% set nordalpenWest = pimcore_object(741) %}
  111.                                 {{ include('Includes/hotspot.html.twig', {left: 12, top: 18, isPlain: true, avalanche: 'avalanche-icon-' ~ nordalpenWest.symbol}) }}
  112.                                 {% set nordalpenMitte = pimcore_object(324899) %}
  113.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(37, 18, nordalpenMitte)) }}
  114.                                 {% set nordalpenOst = pimcore_object(740) %}
  115.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(62, 25, nordalpenOst)) }}
  116.                                 {% set niedereTauernNord = pimcore_object(742) %}
  117.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(22, 37, niedereTauernNord)) }}
  118.                                 {% set randgebirgeOst = pimcore_object(738) %}
  119.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(78, 39, randgebirgeOst)) }}
  120.                                 {% set niedereTauernSued = pimcore_object(743) %}
  121.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(35, 50, niedereTauernSued)) }}
  122.                                 {% set gurkSeetalerAlpen = pimcore_object(744) %}
  123.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(28, 65, gurkSeetalerAlpen)) }}
  124.                                 {% set randgebirgeWest = pimcore_object(739) %}
  125.                                 {{ include('Includes/hotspot.html.twig', getHotspotData(52, 60, randgebirgeWest)) }}
  126.                             </div>
  127.                             <div class="mt-4">
  128.                                 <h4 class="h6 text-uppercase font-decorative">{{ 'weather.Lawinengefahr'|trans }}:</h4>
  129.                             </div>
  130.                             <ul class="list-inline list-unstyled">
  131.                                 {% set legend = [
  132.                                     {
  133.                                         "icon": "avalanche-icon-stufe_1",
  134.                                         "text": "weather.Gering"|trans
  135.                                     },
  136.                                     {
  137.                                         "icon": "avalanche-icon-stufe_2",
  138.                                         "text": "weather.Mäßig"|trans
  139.                                     },
  140.                                     {
  141.                                         "icon": "avalanche-icon-stufe_3",
  142.                                         "text": "weather.Erheblich"|trans
  143.                                     },
  144.                                     {
  145.                                         "icon": "avalanche-icon-stufe_4",
  146.                                         "text": "weather.Groß"|trans
  147.                                     },
  148.                                     {
  149.                                         "icon": "avalanche-icon-stufe_5",
  150.                                         "text": "weather.Sehr groß"|trans
  151.                                     },
  152.                                     {
  153.                                         "icon": "avalanche-icon-tagesgang",
  154.                                         "text": "weather.Tagesgang"|trans
  155.                                     },
  156.                                     {
  157.                                         "icon": "avalanche-icon-hoehenabhaengigkeit",
  158.                                         "text": "weather.Höhenabhängigkeit"|trans
  159.                                     }
  160.                                 ] %}
  161.                                 {% for item in legend %}
  162.                                     <li class="list-inline-item">
  163.                                         <span class="avalanche-icon {{ item.icon }}"></span>
  164.                                         <span class="d-block text-center fz12">{{ item.text }}</span>
  165.                                     </li>
  166.                                 {% endfor %}
  167.                             </ul>
  168.                             <small class="d-block text-right mt-3">
  169.                                 {{ 'general.Quelle'|trans }}
  170.                                 <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 }}
  171.                             </small>
  172.                         </div>
  173.                     </div>
  174.                 </div>
  175.             {% endif %}
  176.         </div>
  177.     </div>
  178.     {% set prognosis = getWeatherPrognosis() %}
  179.     {% if editmode or (app.request.locale == 'de' and prognosis['today'] is not empty) %}
  180.         <section class="content-block container container-sm">
  181.             {{ include('Includes/title-block-editable.html.twig', {
  182.                 suffix: 'prognose',
  183.                 isCentered: true
  184.             }) }}
  185.             <div class="row vertical-gutter--3">
  186.                 {% if prognosis['today'] is not empty %}
  187.                     <div class="col-md-6 vertical-gutter__item">
  188.                         <span class="badge badge-primary">{{ 'weather.heute'|trans }}</span>
  189.                         {% for item in prognosis['today'] %}
  190.                             <div class="font-default-bold text-primary mt-2">{{ item.title }}</div>
  191.                             <div class="wysiwyg">
  192.                                 {{ item.text }}
  193.                             </div>
  194.                         {% endfor %}
  195.                     </div>
  196.                 {% endif %}
  197.                 {% if prognosis['tomorrow'] is not empty %}
  198.                     <div class="col-md-6 vertical-gutter__item">
  199.                         <span class="badge badge-primary">{{ 'weather.morgen'|trans }}</span>
  200.                         {% for item in prognosis['tomorrow'] %}
  201.                             <div class="font-default-bold text-primary mt-2">{{ item.title }}</div>
  202.                             <div class="wysiwyg">
  203.                                 {{ item.text }}
  204.                             </div>
  205.                         {% endfor %}
  206.                     </div>
  207.                 {% endif %}
  208.             </div>
  209.             {% if prognosis['modifiedDate'] %}
  210.                 <small class="d-block text-right mt-3">
  211.                     {{ 'general.Quelle'|trans }}
  212.                     <a href="https://www.zamg.ac.at" class="text-primary-light">ZAMG</a> - {{ prognosis['modifiedDate'].format('H:i') }} {{ 'general.Uhr'|trans }}
  213.                 </small>
  214.             {% endif %}
  215.         </section>
  216.     {% endif %}
  217.     {% if editmode %}
  218.         <div class="editmode-box editmoe-box--info">
  219.             <div class="editmode-box__header">
  220.                 BG Image
  221.             </div>
  222.             <div>
  223.                 {{ pimcore_relation('bgImage', {'types': ['asset'], 'subtypes': ['image']}) }}
  224.             </div>
  225.         </div>
  226.     {% endif %}
  227.     <section class="slide slide--has-bg content-block">
  228.         <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>
  229.         <div class="container">
  230.             {{ include("Includes/title-block-editable.html.twig", {
  231.                 suffix: 'cities',
  232.                 isCentered: true,
  233.                 isWhite: true,
  234.                 styleModifier: "title-block--shadow"
  235.             }) }}
  236.             <div class="js-ajax-form" data-ajax-form-add-url-params="true">
  237.                 <div aria-live="polite">
  238.                     <form action="/404"
  239.                           data-action="{{ app.request.pathInfo }}"
  240.                           class="js-ajax-form__form">
  241.                         {% do jsConfig().add('typeaheadDataUrl', url('weather_typeahead', {region: document.property('region') ? document.property('region').id : null})) %}
  242.                         <div class="row justify-content-center">
  243.                             <div class="col-md-7 col-xl-4">
  244.                                 <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">
  245.                                     <button class="btn btn-white btn-rounded form-control-btn py-0" type="submit">{{ 'weather.Ort suchen'|trans }}</button>
  246.                                 </div>
  247.                             </div>
  248.                         </div>
  249.                     </form>
  250.                     <div class="js-ajax-form__notifications mb-3" hidden></div>
  251.                     <div class="js-ajax-form__error-area mb-3" hidden>
  252.                         <button class="js-ajax-form__retry btn btn-info ml-2">{{ 'general.Retry'|trans }}</button>
  253.                     </div>
  254.                     {{ include("Includes/loading-overlay.html.twig", {styleModifier: "js-ajax-form__loading"}) }}
  255.                     <div class="js-ajax-form__result">
  256.                         {{ include('Weather/accordion.html.twig') }}
  257.                     </div>
  258.                 </div>
  259.             </div>
  260.         </div>
  261.     </section>
  262.     {% if editmode %}
  263.         <div class="editmode-box editmoe-box--info">
  264.             <div class="editmode-box__header">
  265.                 Settings (Slide will not show if 2500m and 1500m are empty)
  266.             </div>
  267.             <div>
  268.                 <label>
  269.                     BG Image
  270.                 </label>
  271.                 {{ pimcore_relation('bgImageMountain', {'types': ['asset'], 'subtypes': ['image']}) }}
  272.             </div>
  273.             <div>
  274.                 <label>
  275.                     2500m Weather Text Station (isMountain is true)
  276.                 </label>
  277.                 {{ pimcore_relation('mountain2500', {'types': ['object'], 'subtypes': ['object'], 'classes': ['WeatherTextStation']}) }}
  278.             </div>
  279.             <div>
  280.                 <label>
  281.                     1500m Weather Text Station (isMountain is true)
  282.                 </label>
  283.                 {{ pimcore_relation('mountain1500', {'types': ['object'], 'subtypes': ['object'], 'classes': ['WeatherTextStation']}) }}
  284.             </div>
  285.         </div>
  286.     {% endif %}
  287.     {% if editmode or not pimcore_relation('mountain2500').empty or not pimcore_relation('mountain1500').empty %}
  288.         <section class="container container-sm content-block">
  289.             {{ include("Includes/title-block-editable.html.twig", {
  290.                 suffix: 'mountains',
  291.                 isCentered: true
  292.             }) }}
  293.             <div class="row vertical-gutter--3">
  294.                 <div class="col-md-6 vertical-gutter__item">
  295.                     {{ include('Includes/Partials/mountain-weather-teaser.html.twig', {
  296.                         'title': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].date.localeDayOfWeek,
  297.                         'date': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].date,
  298.                         'temp2500': pimcore_relation('mountain2500').empty ? false : pimcore_relation('mountain2500').element.weatherData.items[0].tmax,
  299.                         'temp1500': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].tmax,
  300.                         'content': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].text,
  301.                         'icon': pimcore_relation('mountain1500').empty ? false : pimcore_relation('mountain1500').element.weatherData.items[0].symbol,
  302.                         'bgImage':  pimcore_relation('bgImageMountain').empty ? false : pimcore_relation('bgImageMountain').element
  303.                     }) }}
  304.                 </div>
  305.                 <div class="col-md-6 vertical-gutter__item">
  306.                     {{ include('Includes/Partials/mountain-weather-teaser.html.twig', {
  307.                         '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,
  308.                         '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,
  309.                         '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,
  310.                         '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,
  311.                         '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,
  312.                         '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,
  313.                         'bgImage':  pimcore_relation('bgImageMountain').empty ? false : pimcore_relation('bgImageMountain').element
  314.                     }) }}
  315.                 </div>
  316.             </div>
  317.         </section>
  318.     {% endif %}
  319.     {{ include('Includes/areablock.html.twig', {'areaName': 'bottomContent'}) }}
  320. {% endblock %}
  321. {% block javascripts %}
  322.     {% if not app.request.get('onlyInlineCss') %}
  323.         {{ include('Layout/includes/encore.html.twig', {
  324.             'staticDebugMode': staticDebugMode,
  325.             'file': 'js/weather'
  326.         }) }}
  327.     {% endif %}
  328. {% endblock %}