templates/frontend/veranstaltungen/liste.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  3. {% block pageTitle %}Veranstaltungen Uri{% endblock %}
  4. {% block pageDescription %}Was ist los in Uri? Der Urner Veranstaltungskalender informiert über Events, Feste, Veranstaltungen und Anlässe rund um Kultur, Musik, Kino, Kunst, Theater, Brauchtum, Vereine und Sport.{% endblock %}
  5. {% block pageKeywords %}Veranstaltungen, Events, Veranstaltungskalender, Anlässe, Feste, Konzerte, Bühne, Theater, Vorträge, Bildung, Führungen{% endblock %}
  7. {% block contentArea %}
  9. <style>
  10. .vsPrevNextBtn {
  11. padding: 0 4px;
  12. border: 1px solid #e56500;
  13. border-radius:4px;
  14. }
  15. </style>
  17. <div class="row">
  19. <div class="col-lg-8 col-12 mb-lg-0">
  20. <h1 class="mb-2">Veranstaltungen </h1>
  21. <div class="row">
  22. <div class="col-lg-6 col-12">
  23. {% if filter.d_prev %}
  24. <a href="{{ path('fe.veranstaltungen', {'d':filter.d_prev|date('d.m.Y'), 's':filter.s, 'r':filter.r}) }}" title="Vorherige Veranstaltungen"><i class="fa fa-angle-double-left vsPrevNextBtn" aria-hidden="true"></i></a>&nbsp;
  25. {% endif %}
  27. {% if filter.d_bis and filter.d_next %}
  28. &nbsp;Vom {{ filter.d|format_datetime(pattern="d. MMM", locale='de') }} - {{ filter.d_bis|format_datetime(pattern="d. MMM yyyy", locale='de') }}
  29. &nbsp;&nbsp;<a href="{{ path('fe.veranstaltungen', {'d':filter.d_next|date('d.m.Y'), 's':filter.s, 'r':filter.r}) }}" title="Weitere Veranstaltungen"><i class="fa fa-angle-double-right vsPrevNextBtn" aria-hidden="true"></i></a>
  30. {% else %}
  31. &nbsp;Ab {{ filter.d|format_datetime(pattern="d. MMMM Y", locale='de') }}
  32. {% endif %}
  33. </div>
  34. <div class="col-lg-6 col-12 text-right mt-lg-0 mt-3">
  35. <a href="{{ path('fe.veranstaltungen_produkt') }}" class="btn btn-primary btn-sm">Veranstaltung eintragen</a>
  36. </div>
  37. </div>
  39. <p class="mt-4 vs-rubriken-box">
  40. {# <h2 class="titel">Rubriken:</h2>#}
  41. {% set filterDateActive = filter.d|date('d.m.Y') %}
  42. {% set rubrikenLinks = ['<a href="' ~ path('fe.veranstaltungen') ~ '">Alle</a>'] %}
  43. {% for rubrik in rubriken %}
  44. {% set rubrikenLinks = rubrikenLinks|merge(['<a href="' ~ path('fe.veranstaltungen', { 'd': filterDateActive, 's': '', 'r': rubrik.id }) ~ '">' ~ rubrik.rubrikname ~ '</a>']) %}
  45. {% endfor %}
  46. {{ rubrikenLinks|join(' | ')|raw }}
  47. </p>
  49. {# {% set filterDateActive = filter.d|date('Ymd') != 'now'|date('Ymd') %}#}
  50. {# {% if filter.r or filter.s or filterDateActive %}#}
  51. {# <div style="margin-top:-1.4rem">#}
  52. {# {% if filter.s %}<button class="btn btn-light btn-sm jqFilterSearchRemoveBtn" title="Filter entfernen"><i class="fa fa-filter" aria-hidden="true"></i> - Suchbegriff</button>{% endif %}#}
  53. {# {% if filterDateActive %}<button class="btn btn-light btn-sm jqFilterDateRemoveBtn" title="Filter entfernen"><i class="fa fa-filter" aria-hidden="true"></i> - Datum</button>{% endif %}#}
  54. {# {% if filter.r %}<button class="btn btn-light btn-sm jqFilterRubrikRemoveBtn" title="Filter entfernen"><i class="fa fa-filter" aria-hidden="true"></i> - Rubrik</button>{% endif %}#}
  55. {# <hr class="mt-2">#}
  56. {# </div>#}
  57. {# {% endif %}#}
  59. {% if not einzellVs and not restVs %}
  60. <p class="mt-4">
  61. Keine Veranstaltungen gefunden!<br>
  62. {# <br>#}
  63. {# {% if filter.s or filter.r %}#}
  64. {# Passen Sie Ihre Suchauswahl an oder <a href="javascript:false;" class="jqFilterRemoveBtn">heben Sie diese auf</a>.#}
  65. {# {% endif %}#}
  66. </p>
  67. {# <p class="mt-5">#}
  68. {# <a href="{{ path('fe.veranstaltungen_produkt') }}" class="btn btn-primary btn-sm">Veranstaltung eintragen</a>#}
  69. {# </p>#}
  70. {% else %}
  71. {% set currentDate = null %}
  73. <div id="accord" class="accordion accordion-layout-1">
  74. {% for id, vs in einzellVs %}
  75. {% if not (vs.startdatum == currentDate) %}
  76. <h2 class="mt-3 mb-3">{{ vs.startdatum|format_datetime(pattern='EEEE, dd. MMM',locale='de') }}</h2>
  77. {% endif %}
  79. {% set currentDate = vs.startdatum %}
  80. {{ include('frontend/veranstaltungen/_veranstaltung_teaser_accordion.html.twig', {'vs':vs}) }}
  81. {% endfor %}
  83. {% if restVs %}
  84. <h2 class="mb-4{{ einzellVs ? ' mt-5' : '' }}">Dies und Das</h2>
  85. {% for id, vs in restVs %}
  86. {{ include('frontend/veranstaltungen/_veranstaltung_teaser_accordion.html.twig', {'vs':vs}) }}
  87. {% endfor %}
  88. {% endif %}
  89. </div>
  91. <p class="mt-3 mb-4">
  92. {% if filter.d_prev %}
  93. <a href="{{ path('fe.veranstaltungen', {'d':filter.d_prev|date('d.m.Y'), 's':filter.s, 'r':filter.r}) }}" title="Vorherige Veranstaltungen"><i class="fa fa-angle-double-left vsPrevNextBtn" aria-hidden="true"></i></a>&nbsp;
  94. {% endif %}
  96. {% if filter.d_bis and filter.d_next %}
  97. &nbsp;Vom {{ filter.d|format_datetime(pattern="d. MMM", locale='de') }} - {{ filter.d_bis|format_datetime(pattern="d. MMM yyyy", locale='de') }}
  98. &nbsp;&nbsp;<a href="{{ path('fe.veranstaltungen', {'d':filter.d_next|date('d.m.Y'), 's':filter.s, 'r':filter.r}) }}" title="Weitere Veranstaltungen"><i class="fa fa-angle-double-right vsPrevNextBtn" aria-hidden="true"></i></a>
  99. {% else %}
  100. &nbsp;Ab {{ filter.d|format_datetime(pattern="d. MMMM Y", locale='de') }}
  101. {% endif %}
  102. </p>
  104. {% endif %}
  105. </div>
  107. <div class="col-lg-4 col-12">
  109. <div class="vs-filter-box mt-3">
  111. <b>Veranstaltungen suchen</b><br>
  112. <input type="search" class="jqFilterSearch" value="{{ filter.s }}" placeholder="" style="width: 68%">
  113. <button type="button" class="jqFilterSearchBtn btn btn-primary btn-sm" style="width: 30%">Suchen</button>
  115. <b class="d-block mt-3">Ab Datum</b>
  116. <div class="jqBootstrapVeranstaltungenDatePickerInline" data-date="{{ filter.d|date('d.m.Y') }}" style="background-color: #fff"></div>
  119. <b class="d-block mt-3">Rubrik</b>
  120. <select class="jqFilterRubrik" style="width: 100%">
  121. <option value="">Alle</option>
  122. {% for rubrik in rubriken %}
  123. <option value="{{ rubrik.id }}" {% if filter.r == rubrik.id %}selected{% endif %}>{{ rubrik.rubrikname }}</option>
  124. {% endfor %}
  125. </select>
  127. {# Alle Filter zurücksetzen Btn #}
  128. {% set filterDateActive = filter.d|date('Ymd') != 'now'|date('Ymd') %}
  129. {% if filter.r or filter.s or filterDateActive %}
  130. <div class="mt-4 text-center jqFilterRemoveBtn">
  131. <button class="btn btn-primary btn-sm">Auswahl aufheben</button>
  132. </div>
  133. {% endif %}
  135. </div>
  137. <div class="mt-4 mb-3" style="padding:20px 20px;border:1px solid #ccc">
  138. Die Einträge des Veranstaltungskalenders erscheinen im «Urner Wochenblatt» und im Gratisanzeiger «Uristier» sowie online auf
  139. <a href="{{ path('fe.veranstaltungen') }}">urnerwochenblatt.ch</a> und <a href="https://www.uristier.ch/" target="_blank" rel="noopener">uristier.ch</a>.
  140. <div class="mt-3 text-center">
  141. <a href="{{ path('fe.veranstaltungen_produkt') }}" class="btn btn-primary btn-sm">Veranstaltung eintragen</a>
  142. </div>
  143. </div>
  146. {{ include('frontend/_partials/_right_col_block-1.html.twig') }}
  148. </div>
  149. <div class="col-lg-8 col-12 mb-lg-0 mb-5">
  150. {# {{ include('frontend/_partials/_accordion_faq.html.twig') }}#}
  151. <div class="accordion-content-box">
  152. {{ contentSeoVeranstaltungen.content_html|accordion|raw }}
  153. </div>
  154. </div>
  155. </div>
  158. {% endblock %}
  162. {% block onPageScriptsArea %}
  164. <script>
  166. $(document).ready(function() {
  167. $('.jqBootstrapVeranstaltungenDatePickerInline, .jqFilterRubrik').change(function () {
  168. submitSearchForm();
  169. });
  171. $(".jqFilterSearch").on('keyup', function (e) {
  172. if (e.keyCode === 13) {
  173. submitSearchForm();
  174. }
  175. });
  176. $('.jqFilterSearchBtn').click(function () {
  177. submitSearchForm();
  178. });
  180. $('.jqFilterRemoveBtn').click(function () {
  181. submitSearchForm(true);
  182. });
  185. // $('.jqFilterSearchRemoveBtn').click(function () {
  186. // $('.jqFilterSearch').val('').trigger('change');
  187. // });
  188. //
  189. // $('.jqFilterRubrikRemoveBtn').click(function () {
  190. // $('.jqFilterRubrik').val('').trigger('change');
  191. // });
  192. //
  193. // $('.jqFilterDateRemoveBtn').click(function () {
  194. // $('.jqBootstrapVeranstaltungenDatePickerInline').data('date', '').trigger('change');
  195. // })
  196. });
  198. function submitSearchForm(resetFilters) {
  200. var url = '{{ path('fe.veranstaltungen') }}';
  202. if (resetFilters === undefined) {
  203. resetFilters = false;
  204. }
  206. var params = {};
  208. if (!resetFilters) {
  209. params.d = $('.jqBootstrapVeranstaltungenDatePickerInline').data('date');
  210. params.s = $('.jqFilterSearch').val();
  211. params.r = $('.jqFilterRubrik').val();
  212. }
  214. var queryParam = $.param( params );
  216. setTimeout(function() {
  217. if (queryParam.length > 0) {
  218. window.location.href = url +'?'+ queryParam;
  219. } else {
  220. window.location.href = url;
  221. }
  222. }, 0);
  223. }
  225. </script>
  227. {% endblock %}