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

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  2. {% form_theme form 'bootstrap_4_horizontal_layout.html.twig' %}
  5. {% block pageTitle %}Veranstaltung eintragen{% endblock %}
  6. {% block pageDescription %}{% endblock %}
  8. {% block contentArea %}
  10. <div class="row">
  11. <div class="col-lg-8 col-12 mb-lg-0 mb-5">
  13. <h1>Veranstaltung eintragen</h1>
  14. <br>
  16. {% if not form.vars.valid %}
  17. <div class="form-error-box mb-5">
  18. <b>Die Veranstaltung wurde noch nicht übermittelt!</b><br>
  19. Bitte belegen Sie die fehlerhaften, rot markierten Felder unten im Formular.
  20. </div>
  21. {% endif %}
  23. {{ form_start(form, {'attr': {'id': 'form_vs_melden', 'class':'form-veranstaltung'}}) }}
  25. {# <h5>Veranstaltung - {{ abo.aboname }}</h5>#}
  27. {{ form_row(form.rubrik) }}
  28. {{ form_row(form.titel, {'attr':{'class':'jqTitelField'}}) }}
  29. {{ form_row(form.adresse) }}
  30. {{ form_row(form.region) }}
  31. {{ form_row(form.startdatum, {'attr':{'class':'jqBootstrapDatePicker', 'style':'width:160px'}}) }}
  32. {# {{ form_row(form.enddatum, {'attr':{'class':'jqBootstrapDatePicker', 'style':'width:160px'}}) }}#}
  33. {# {{ form_row(form.beginn_auswahl) }}#}
  34. {{ form_row(form.beginnzeit) }}
  35. {{ form_row(form.endzeit) }}
  36. {{ form_row(form.beschreibung, {'attr':{'class':'jqBeschreibungField'}}) }}
  37. {{ form_row(form.url) }}
  39. <div {% if not (abo.premiumMitInserat or abo.premiumOhneInserat) %}style="display: none"{% endif %}>
  40. {# --- VsImage Upload Logik #}
  41. <div class="form-group row" id="jqBildUpload1">
  42. {{ form_label(form.vsImageFilepath) }}
  43. <div class="col-sm-10">
  44. <div class="jqFileUploadBox" data-successcallbackfunction="fileUploadSuccessBild" data-uploadurl="{{ path('fe.veranstaltungen_jqueryfileupload', {'formGroupId':'jqBildUpload1', 'vsUuid':vs.uuid, 'action':'VSIMAGE_FRONTEND'}) }}">
  45. <div class="jqFileUploadForm btn btn-primary btn-sm">
  46. <span class="jqFileUploadFormFieldBtn">Bild hochladen</span>
  47. <input type="file" name="uploadfile" class="jqFileUploadInputField">
  48. </div>
  49. <div class="help-block mt-1" style="color:#7a7a7a;font-size:.9rem">{{ form.vsImageFilepath.vars.help }}</div>
  50. <span class="jqFileUploadErrorMsg form-error-message"></span>
  51. </div>
  52. <div class="jqImageFileShowPlaceholder" style="width: 100%;max-width: 200px"></div>
  53. <button type="button" class="jqFileDelete btn btn-primary btn-sm" style="display: none;margin-top:8px">Bild löschen</button>
  55. {{ form_widget(form.vsImageFilepath, {'attr':{'class':'jqImageFileWebPath'}}) }}
  56. </div>
  57. </div>
  58. <div style="display: none">
  59. {{ form_row(form.vsImageAlt, {'label':" "}) }}
  60. {{ form_row(form.vsImageCaption, {'label':" "}) }}
  61. </div>
  62. {# --- Ende Leadimage Upload Logik #}
  64. {{ form_row(form.videolink) }}
  65. {{ form_row(form.ticketsbestellen) }}
  66. {% do form.googlemaps.setRendered %}
  68. </div>
  72. <h5>Kunde</h5>
  74. {{ form_row(form.kveranstalter) }}
  75. {{ form_row(form.kvorname) }}
  76. {{ form_row(form.kname) }}
  77. {{ form_row(form.kstrasse) }}
  78. {{ form_row(form.kplz) }}
  79. {{ form_row(form.kort) }}
  80. {{ form_row(form.ktel) }}
  81. {{ form_row(form.kemail) }}
  82. {# {{ form_row(form.kkontaktieren) }}#}
  83. {# {{ form_row(form.kbemerkung, {'attr':{'placeholder':'Bemerkungen oder abweichende Rechnungsadresse hier eintragen.'}}) }}#}
  85. {% do form.export_uristier.setRendered %}
  86. {% do form.export_uw.setRendered %}
  87. {% do form.export_1_enddatum.setRendered %}
  89. <h5>Datenschutz</h5>
  90. {{ form_row(form.datenschutz) }}
  91. <br>
  93. <button type="submit" name="btnSubmit" class="btn btn-primary btn-sm" value="active-validation">Eintragen</button>
  94. &nbsp;&nbsp;&nbsp;
  95. <a href="{{ path('fe.veranstaltungen_produkt') }}" class="btn btn-link btn-sm">Abbrechen</a>
  98. {{ form_end(form) }}
  100. <br>
  101. <br>
  102. </div>
  104. <div class="col-lg-4 col-12">
  105. {{ include('frontend/_partials/_right_col_full.html.twig') }}
  106. </div>
  108. </div>
  110. {% endblock %}
  113. {% block onPageScriptsArea %}
  114. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
  115. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/jquery.iframe-transport.js') }}"></script>
  116. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/jquery.fileupload.js') }}"></script>
  118. <script>
  120. // Min. Max Length korrekt setzen
  121. $(document).ready(function() {
  123. {% if form.vars.value.abo %}
  124. {% if abo.maxLengthVsTitel %}
  125. $('.jqTitelField')
  126. .attr('maxlength', '{{ abo.maxLengthVsTitel }}')
  127. .attr('placeholder', 'Max. {{ abo.maxLengthVsTitel }} Zeichen erlaubt, z.B. Gisler 1843 - Lottomatch')
  128. ;
  129. {% endif %}
  131. {% if abo.maxLengthVsBeschreibung %}
  132. $('.jqBeschreibungField')
  133. .attr('maxlength', '{{ abo.maxLengthVsBeschreibung }}')
  134. .attr('placeholder', 'Max. {{ abo.maxLengthVsBeschreibung }} Zeichen erlaubt, korrekte Rechtschreibung wird vorausgesetzt, Abkürzungen werden nicht akzeptiert.')
  135. ;
  136. {% endif %}
  137. {% endif %}
  138. });
  139. // Ende
  144. {# --- Fileupload Logik ------------------------------------------------------------------------------------- #}
  145. $(document).ready(function () {
  147. showAllFileUploadImagesOrUploadButton();
  149. // Formfield wieder Anzeigen
  150. $('.jqFileDelete').on('click', function () {
  151. var formGroupId = $(this).closest('.form-group').attr('id');
  153. // Hidden Field (welches den Bildpfad enthält) leeren
  154. $('#' + formGroupId).find('.jqImageFileWebPath').val('');
  156. showAllFileUploadImagesOrUploadButton();
  158. });
  160. });
  162. // Logik zum Anzeigen des gerade hochgeladenen Bildes
  163. function fileUploadSuccessBild(data) {
  164. var formGroupId = data.result.requestQueryParams.formGroupId;
  166. //Hidden Formfield mit Bildpfad belegen
  167. $('#'+formGroupId).find('.jqImageFileWebPath').val(data.result.uploadedFileWebPath);
  169. showAllFileUploadImagesOrUploadButton();
  170. }
  171. // Ende
  173. // Zeige die gerade hochgeladenen Images
  174. function showAllFileUploadImagesOrUploadButton () {
  175. $('.jqImageFileWebPath').each(function () {
  177. var formGroupId = $(this).closest('.form-group').attr('id');
  178. var imageFileWebPath = $(this).val();
  180. if (imageFileWebPath.length > 1) {
  181. // Zeige Bild
  183. // Upload Formplugin verstecken
  184. $('#'+formGroupId).find('.jqFileUploadBox').hide();
  186. // Löschen Button zeigen
  187. $('#'+formGroupId).find('.jqFileDelete').show();
  189. // Hochgeladenes Bild zeigen
  190. $('#'+formGroupId).find('.jqImageFileShowPlaceholder').html('<img src="'+ imageFileWebPath +'" class="img-responsive" style="max-width: 300px">').show();
  192. } else {
  193. // Zeige Upload Button
  195. // Delete Button verstecken
  196. $('#'+formGroupId).find('.jqFileDelete').hide();
  198. // Bestehendes Bildvorschau verstecken
  199. $('#'+formGroupId).find('.jqImageFileShowPlaceholder').hide();
  201. // Upload Formularbox wieder anzeigen
  202. $('#'+formGroupId).find('.jqFileUploadBox').show();
  203. };
  205. });
  206. }
  209. $(document).ready(function() {
  211. // Custom jQuery File Upload Steuerung
  212. $(document).bind('drop dragover', function (e) {
  213. e.preventDefault();
  214. });
  217. $('.jqFileUploadBox').each(function () {
  219. var $inputField = $(this).find('.jqFileUploadInputField');
  221. var uploadUrl = $(this).data('uploadurl');
  222. var onSuccessCallback = $(this).data('successcallbackfunction');
  223. var $uploadBtn = $(this).find('.jqFileUploadFormFieldBtn');
  224. var $errorMsgBox = $(this).find('.jqFileUploadErrorMsg');
  225. var uploadBtnOrigMsg = $uploadBtn.html();
  228. $errorMsgBox.hide();
  229. $(this).on('click', function () {
  230. $errorMsgBox.hide();
  231. });
  233. $inputField.fileupload({
  234. dropZone: $inputField,
  235. url: uploadUrl,
  236. dataType: 'json',
  237. formData: [],
  238. start: function (e, data) {
  239. $errorMsgBox.hide().html('');
  240. },
  241. done: function (e, data) {
  242. if (data.result.success == true) {
  243. // Falls Callback vorhanden, diese mit den Daten ausführen
  244. if (onSuccessCallback) {
  245. eval(onSuccessCallback+'(data)');
  246. }
  247. // Orig. Button Text wieder einsetzen
  248. $uploadBtn.html(uploadBtnOrigMsg);
  249. } else {
  250. $errorMsgBox.html(data.result.msg).show();
  251. $uploadBtn.html(uploadBtnOrigMsg);
  252. }
  253. },
  254. progressall: function (e, data) {
  255. var progress = parseInt(data.loaded / data.total * 100, 10);
  256. // Fortschrittscounter Anzeige innerhalb Button aktualisieren
  257. $uploadBtn.html(progress + '%');
  258. //Ende
  259. }
  260. });
  261. });
  263. // Ende custom jQuery File Upload Steuerung
  264. });
  267. // Fehlermeldung Falschplatzierungsbug (Symfony Formtheme Bootstrap 4)
  268. // Bugfix https://github.com/symfony/symfony/issues/28086
  269. // gelöst via jQuery Script by BZ
  270. $(document).ready(function() {
  272. $('.invalid-feedback').each(function( index ) {
  273. var $labelElement = $(this).parent();
  274. var $formFieldElement = $labelElement.next();
  275. $(this).appendTo($formFieldElement);
  276. });
  278. });
  279. // Ende
  282. </script>
  285. {% endblock %}