eventcally/project/templates/event/update.html

{% extends "layout.html" %}
{% from "_macros.html" import render_manage_form_styles, render_manage_form_scripts, render_cropper_header, render_end_container_handling, render_jquery_steps_header, render_cropper_code, render_crop_image_form_section, render_radio_buttons, render_field_with_errors, render_field %}

{%- block title -%}
{{ _('Update event') }}
{%- endblock -%}

{% block styles %}
{{ render_manage_form_styles() }}
{% endblock %}

{% block header_before_site_js %}
{{ render_manage_form_scripts() }}
{{ render_jquery_steps_header() }}
{{ render_cropper_header() }}

  <script>
    $( function() {

      {{ render_cropper_code() }}

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

      $("#start-time").rules("add", "time");
      $("#end-time").rules("add", "time");

      // Organizer
      var organizer_select =$('#organizer_id');
      var input_group = organizer_select.parent();
      input_group.append('<button type="button" id="organizer-edit-btn" class="btn btn-outline-secondary my-1"><i class="fa fa-edit"></i></button>');
      input_group.append('<button type="button" id="organizer-add-btn" class="btn btn-outline-secondary m-1"><i class="fa fa-plus"></i></button>');
      $('#organizer-edit-btn').click(function () {
        window.open('/organizer/' + organizer_select.val() + '/update');
        return false;
      });
      $('#organizer-add-btn').click(function () {
        window.open('{{ url_for("manage_admin_unit_organizer_create", id=event.admin_unit_id) }}');
        return false;
      });

      // Place
      var place_select =$('#event_place_id');
      var input_group = place_select.parent();
      input_group.append('<button type="button" id="place-edit-btn" class="btn btn-outline-secondary my-1"><i class="fa fa-edit"></i></button>');
      input_group.append('<button type="button" id="place-add-btn" class="btn btn-outline-secondary m-1"><i class="fa fa-plus"></i></button>');
      $('#place-edit-btn').click(function () {
        window.open('/event_place/' + place_select.val() + '/update');
        return false;
      });
      $('#place-add-btn').click(function () {
        window.open('{{ url_for("manage_admin_unit_places_create", id=event.admin_unit_id) }}');
        return false;
      });

      $('#event_place_id').select2({
        width: '100%',
        theme: 'bootstrap4',
        ajax: {
          url: "{{ url_for('js_autocomplete_place') }}",
          dataType: 'json',
          delay: 250,
          cache: true,
          data: function (params) {
            return {
              keyword: params.term,
              admin_unit_id: '{{ event.admin_unit_id }}',
              exclude_gmaps: 1,
            };
          }
        },
        placeholder: "{{ _('Enter place or address') }}"
      });

      $('#organizer_id').select2({
        width: '100%',
        theme: 'bootstrap4',
        ajax: {
          url: "{{ url_for('api_v1_organization_organizer_list', id=event.admin_unit.id) }}",
          dataType: 'json',
          delay: 250,
          cache: true,
          data: function (params) {
            return {
              name: params.term,
              per_page: 5
            };
          },
          processResults: function (data) {
            return {
              results: data.items.map(p => ({"id": p.id, "text": p.name}))
            };
          }
        },
        placeholder: "{{ _('Enter organizer') }}"
      });

      $('#organizer_id,#event_place_id').on('select2:select', function (e) {
          $(this).valid();
      });

      $('#co_organizer_ids').select2({
        width: '100%',
        ajax: {
          url: "{{ url_for('api_v1_organization_organizer_list', id=event.admin_unit.id) }}",
          dataType: 'json',
          delay: 250,
          cache: true,
          data: function (params) {
            return {
              name: params.term,
              per_page: 5
            };
          },
          processResults: function (data) {
            return {
              results: data.items.map(p => ({"id": p.id, "text": p.name}))
            };
          }
        },
        placeholder: "{{ _('Enter organizer') }}"
      });

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

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

<form id="main-form" action="{{ url_for('event_update', event_id=event.id) }}" 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) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Event date') }}
    </div>
    <div class="card-body">
      <div id="single-event-container">
        {{ render_field_with_errors(form.start, **{"data-range-to":"#end", "data-range-max-days": "14", "data-allday": "#allday"}) }}
        {{ render_field_with_errors(form.allday, ri="checkbox") }}
        {{ render_field_with_errors(form.end, is_collapsible=1) }}
        <button type="button" id="recc-button" class="btn btn-outline-secondary"><i class="fas fa-history"></i> {{ _('Recurring event') }}</button>
      </div>
      <div id="recc-event-container">
        {{ render_field_with_errors(form.recurrence_rule, ri="rrule") }}
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Status') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.public_status, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.status, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.previous_start_date) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Organizer') }}
    </div>
    <div class="card-body pb-0">
      {{ render_field_with_errors(form.organizer_id, class="w-100", label_hidden=True) }}
      {{ render_field_with_errors(form.co_organizer_ids, class="w-100") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Place') }}
    </div>
    <div class="card-body pb-0">
      {{ render_field_with_errors(form.event_place_id, class="w-100", label_hidden=True) }}
    </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-multi 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 %}