templates/content/weather.html.twig line 1

Open in your IDE?
  1. <div>
  2.     {% set locationStore = [ ['garmisch', 'Garmisch Partenkirchen'],['hohenpeissenberg','Hohenpeißenberg'], ['altenstadt', 'Schongau'], ['holzkirchen', 'Bad Tölz'] ] %}
  3.     {% set locationSelect = pimcore_select('location', {
  4.         store: locationStore,
  5.         width: 300,
  6.         class: "align-middle",
  7.         defaultValue: "garmisch"
  8.     }) %}
  9.     {% set location = locationSelect.getData() %}
  11.     {% if location == 'garmisch' %}
  12.         {% set locationName = 'Garmisch Partenkirchen' %}
  13.     {% elseif location == 'hohenpeissenberg' %}
  14.         {% set locationName = 'Hohenpeißenberg' %}
  15.     {% elseif location == 'altenstadt' %}
  16.         {% set locationName = 'Altenstadt' %}
  17.     {% elseif location == 'holzkirchen' %}
  18.         {% set locationName = 'Bad Tölz' %}
  19.     {% endif %}
  21.     {% if editmode %}
  22.         {% block scripts %}
  23.             {{ encore_entry_script_tags('app') }}
  24.         {% endblock %}
  25.         {% block stylesheets %}
  26.             {{ encore_entry_link_tags('style') }}
  27.         {% endblock %}
  28.         {% block head_links %}
  29.             {{ pimcore_head_link() }}
  30.         {% endblock %}
  33.         <div style="display: inline-block; margin-left: 100px;" class="editmode-label">
  34.             <span>Snippet Content</span>
  35.             <div class="editmode-label">
  36.                 <span>Für welchen Ort soll das Wetter vorhergesagt werden:</span>
  37.                 <div>{{ locationSelect|raw }}</div>
  38.             </div>
  39.             <br>
  40.             <div class="bg-white shadow-card p-5 transition">
  41.                 <div class="h-[50px]">
  42.                     <h4 class="uppercase text-dark-blue text-sm">
  43.                         {{ pimcore_input('title', {
  44.                             width: 400,
  45.                             placeholder: 'Wetter',
  46.                             class: 'h-[50px] font-mont-heavy text-dark-blue uppercase'
  47.                         }) }}
  48.                     </h4>
  49.                 </div>
  50.             </div>
  51.             <div class="bg-white p-5">
  52.                 <h4 class="uppercase text-blue-light text-sm">
  53.                     {{ pimcore_link('forecast-link') }}
  54.                 </h4>
  55.             </div>
  56.         </div>
  57.     {% else %}
  58.         {% if pimcore_input('title') %}
  59.             <div class="fade-in delay-300">
  60.                 <div class="group relative bg-white dark:bg-neutral-900 dark:text-white rounded shadow-card p-5 md:hover:shadow-md transition">
  61.                     <div class="h-[200px]">
  62.                         <div class="flex h-full flex-col justify-between">
  63.                             <div class="col">
  64.                                 <a href="/radio/service#wetter"><h4 class="uppercase text-dark-blue dark:text-blue-light text-sm md:group-hover:translate-x-2 transition duration-300 ease-out">{{ pimcore_input('title') }}</h4></a>
  65.                                 <p class="uppercase text-gray-400 md:group-hover:translate-x-2 transition duration-300 ease-out">In {{ locationName }}</p>
  66.                             </div>
  67.                             <div class="col-auto">
  68.                                 <div class="vue-app">
  69.                                     <weather source="/api/get-dwd-weather?station={{ location }}"></weather>
  70.                                 </div>
  71.                             </div>
  72.                             <div class="col">
  73.                                 <h4 class="text-right uppercase text-blue-light text-sm md:group-hover:-translate-x-2 transition duration-300 ease-out">
  74.                                     {{ pimcore_link('forecast-link') }}
  75.                                 </h4>
  76.                             </div>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.             {% endif %}
  82.     {% endif %}
  83. </div>