templates/frontend/inserat-formular/index.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 %}{{ entity.selfTitle }} buchen{% 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>{{ entity.selfTitle }} buchen</h1>
  14. <br>
  16. {% if not form.vars.valid %}
  17. <div class="form-error-box mb-5">
  18. <b>{{ entity.selfTitle }} wurde noch nicht übermittelt!</b><br>
  19. Bitte belegen Sie die fehlerhaften, rot markierten Felder unten im Formular.
  20. </div>
  21. {% endif %}
  23. {% include 'frontend/inserat-formular/include/' ~ template %}
  25. <br>
  26. <br>
  27. </div>
  29. <div class="col-lg-4 col-12">
  30. {{ include('frontend/_partials/_right_col_full.html.twig') }}
  31. </div>
  33. </div>
  35. {% endblock %}
  38. {% block onPageScriptsArea %}
  39. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
  40. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/jquery.iframe-transport.js') }}"></script>
  41. <script src="{{ asset('bundles/app/frontend/js/blueimp-file-upload/js/jquery.fileupload.js') }}"></script>
  43. <script>
  45. {# --- Fileupload Logik ------------------------------------------------------------------------------------- #}
  46. $(document).ready(function () {
  48. showAllFileUploadImagesOrUploadButton();
  50. // Formfield wieder Anzeigen
  51. $('.jqFileDelete').on('click', function () {
  52. var formGroupId = $(this).closest('.form-group').attr('id');
  54. // Hidden Field (welches den Bildpfad enthaelt) leeren
  55. $('#' + formGroupId).find('.jqImageFileWebPath').val('');
  57. showAllFileUploadImagesOrUploadButton();
  59. });
  61. });
  63. // Logik zum Anzeigen des gerade hochgeladenen Bildes
  64. function fileUploadSuccessBild(data) {
  65. var formGroupId = data.result.requestQueryParams.formGroupId;
  67. //Hidden Formfield mit Bildpfad belegen
  68. $('#'+formGroupId).find('.jqImageFileWebPath').val(data.result.uploadedFileWebPath);
  70. showAllFileUploadImagesOrUploadButton();
  71. }
  72. // Ende
  74. // Zeige die gerade hochgeladenen Images
  75. function showAllFileUploadImagesOrUploadButton () {
  76. $('.jqImageFileWebPath').each(function () {
  78. var formGroupId = $(this).closest('.form-group').attr('id');
  79. var imageFileWebPath = $(this).val();
  81. if (imageFileWebPath.length > 1) {
  82. // Zeige Bild
  84. // Upload Formplugin verstecken
  85. $('#'+formGroupId).find('.jqFileUploadBox').hide();
  87. // Löschen Button zeigen
  88. $('#'+formGroupId).find('.jqFileDelete').show();
  90. // Hochgeladenes Bild zeigen
  91. $('#'+formGroupId).find('.jqImageFileShowPlaceholder').html('<img src="'+ imageFileWebPath +'" class="img-responsive" style="max-width: 300px">').show();
  93. } else {
  94. // Zeige Upload Button
  96. // Delete Button verstecken
  97. $('#'+formGroupId).find('.jqFileDelete').hide();
  99. // Bestehendes Bildvorschau verstecken
  100. $('#'+formGroupId).find('.jqImageFileShowPlaceholder').hide();
  102. // Upload Formularbox wieder anzeigen
  103. $('#'+formGroupId).find('.jqFileUploadBox').show();
  104. };
  106. });
  107. }
  110. $(document).ready(function() {
  112. // Custom jQuery File Upload Steuerung
  113. $(document).bind('drop dragover', function (e) {
  114. e.preventDefault();
  115. });
  118. $('.jqFileUploadBox').each(function () {
  120. var $inputField = $(this).find('.jqFileUploadInputField');
  122. var uploadUrl = $(this).data('uploadurl');
  123. var onSuccessCallback = $(this).data('successcallbackfunction');
  124. var $uploadBtn = $(this).find('.jqFileUploadFormFieldBtn');
  125. var $errorMsgBox = $(this).find('.jqFileUploadErrorMsg');
  126. var uploadBtnOrigMsg = $uploadBtn.html();
  129. $errorMsgBox.hide();
  130. $(this).on('click', function () {
  131. $errorMsgBox.hide();
  132. });
  134. $inputField.fileupload({
  135. dropZone: $inputField,
  136. url: uploadUrl,
  137. dataType: 'json',
  138. formData: [],
  139. start: function (e, data) {
  140. $errorMsgBox.hide().html('');
  141. },
  142. done: function (e, data) {
  143. if (data.result.success == true) {
  144. // Falls Callback vorhanden, diese mit den Daten ausfuehren
  145. if (onSuccessCallback) {
  146. eval(onSuccessCallback+'(data)');
  147. }
  148. // Orig. Button Text wieder einsetzen
  149. $uploadBtn.html(uploadBtnOrigMsg);
  150. } else {
  151. $errorMsgBox.html(data.result.msg).show();
  152. $uploadBtn.html(uploadBtnOrigMsg);
  153. }
  154. },
  155. progressall: function (e, data) {
  156. var progress = parseInt(data.loaded / data.total * 100, 10);
  157. // Fortschrittscounter Anzeige innerhalb Button aktualisieren
  158. $uploadBtn.html(progress + '%');
  159. //Ende
  160. }
  161. });
  162. });
  164. // Ende custom jQuery File Upload Steuerung
  165. });
  168. // Fehlermeldungs Falschplazierungsbug (Symfony Formtheme Bootstrap 4)
  169. // Bugfix https://github.com/symfony/symfony/issues/28086
  170. // gelost via jQuery Script by BZ
  171. $(document).ready(function() {
  173. $('.invalid-feedback').each(function( index ) {
  174. var $labelElement = $(this).parent();
  175. var $formFieldElement = $labelElement.next();
  176. $(this).appendTo($formFieldElement);
  177. });
  179. });
  180. // Ende
  183. </script>
  186. {% endblock %}