eventcally/project/templates/event/create.html

{% extends "layout.html" %}
{% from "_macros.html" import render_cropper_header, render_end_container_handling, render_jquery_steps_header, render_google_place_autocomplete_field, render_google_place_autocomplete_header, render_cropper_header, render_cropper_code, render_crop_image_form_section, render_radio_buttons, render_field_with_errors, render_field %}
{%- block title -%}
{{ _('Create event') }}
{%- endblock -%}
{% block header_before_site_js %}
{{ render_jquery_steps_header() }}
{{ render_cropper_header() }}
{{ render_google_place_autocomplete_header(False, 'new_event_place-') }}
<script>
$( function() {

  {{ render_cropper_code() }}

  var form = $("#main-form");
  form.validate({
        rules: {
          start: {
            dateRange: ["#start", "#end"]
          },
          end: {
            dateRangeDay: ["#start", "#end"]
          }
        }
    });

  function update_place_container(value) {
    switch (value) {
      case '1':
        $('#existing_place_container').show();
        $('#new_place_container').hide();
        break;
      case '2':
        $('#existing_place_container').hide();
        $('#new_place_container').show();
        break;
    }
  }

  $('input[type=radio][name=event_place_choice]').on('change', function() {
    update_place_container($(this).val());
  });

  update_place_container($('input[type=radio][name=event_place_choice]:checked').val());

  function update_organizer_container(value) {
    switch (value) {
      case '1':
        $('#existing_organizer_container').show();
        $('#new_organizer_container').hide();
        break;
      case '2':
        $('#existing_organizer_container').hide();
        $('#new_organizer_container').show();
        break;
    }
  }

  $('input[type=radio][name=organizer_choice]').on('change', function() {
    update_organizer_container($(this).val());
  });

  update_organizer_container($('input[type=radio][name=organizer_choice]:checked').val());

  {{ render_end_container_handling() }}
});
</script>
{% endblock %}
{% block content %}

<h1>{{ _('Create event') }}</h1>

<form id="main-form" action="" method="POST" enctype="multipart/form-data">
  {{ form.hidden_tag() }}

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Event') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.name) }}
      {{ render_field_with_errors(form.description, style="min-height:10rem;") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Event date') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.start, **{"data-range-to":"#end", "data-range-max-days": "14"}) }}
      {{ render_field_with_errors(form.end, is_collapsible=1) }}
      {{ render_field_with_errors(form.recurrence_rule, ri="rrule") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Organizer') }} *
    </div>
    <div class="card-body">
      <div>
        <div class="form-text mt-0 text-muted w-100">{{ _("Select the organizer. If the organizer is not yet on the list, just enter it.") }}</div>
        {{ render_radio_buttons(form.organizer_choice) }}
      </div>

      <div class="my-2" id="existing_organizer_container">
        {{ render_field_with_errors(form.organizer_id, class="autocomplete w-100", is_required=True) }}
      </div>

      <div class="my-2" id="new_organizer_container">
        {{ form.new_organizer.hidden_tag() }}
        {{ render_field_with_errors(form.new_organizer.form.name, is_required=True) }}
        {{ form.new_organizer.form.location.hidden_tag() }}
        {{ render_field_with_errors(form.new_organizer.form.location.street) }}
        {{ render_field_with_errors(form.new_organizer.form.location.postalCode) }}
        {{ render_field_with_errors(form.new_organizer.form.location.city) }}
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Place') }} *
    </div>
    <div class="card-body">

      <div>
        <div class="form-text mt-0 text-muted w-100">{{ _("Choose where the event takes place. If the venue is not yet in the list, just enter it.") }}</div>
        {{ render_radio_buttons(form.event_place_choice) }}
      </div>

      <div class="my-2" id="existing_place_container">
        {{ render_field_with_errors(form.event_place_id, class="autocomplete w-100", is_required=True) }}
      </div>

      <div class="my-2" id="new_place_container">
        {{ render_google_place_autocomplete_field() }}
        {{ form.new_event_place.hidden_tag() }}
        {{ render_field_with_errors(form.new_event_place.form.name, is_required=True) }}
        {{ form.new_event_place.form.location.hidden_tag() }}
        {{ render_field_with_errors(form.new_event_place.form.location.street) }}
        {{ render_field_with_errors(form.new_event_place.form.location.postalCode) }}
        {{ render_field_with_errors(form.new_event_place.form.location.city) }}
      </div>

    </div>
  </div>

  {{ render_crop_image_form_section(form.photo) }}

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Access') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.accessible_for_free, ri="switch") }}
      {{ render_field_with_errors(form.registration_required, ri="switch") }}
      {{ render_field_with_errors(form.price_info) }}
      {{ render_field_with_errors(form.ticket_link) }}
      {{ render_field_with_errors(form.booked_up, ri="switch") }}
      {{ render_field_with_errors(form.attendance_mode, class="autocomplete w-100") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Target group') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.target_group_origin, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.kid_friendly, ri="switch") }}
      {{ render_field_with_errors(form.age_from) }}
      {{ render_field_with_errors(form.age_to) }}
      {{ render_field_with_errors(form.expected_participants) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Additional information') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.category_ids, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.tags) }}
      {{ render_field_with_errors(form.external_link) }}
    </div>
  </div>

  {% if form.rating.choices|length > 1 %}
  <div class="card mb-4">
    <div class="card-header">
      {{ _('Rating') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.rating) }}
    </div>
  </div>
  {% endif %}

  {{ render_field(form.submit) }}

</form>

{% endblock %}