event_create.html

{% extends "./wrapper.html" %}
{% load actionkit_tags %}

{% block content %}
<img alt="" width="0" height="0" src="https://ms.clicks.actions.aclu.org/conversion?version=1&conversion_items=1&conversion_value=0" />

<form class="ak-form norecognize" name="act" method="POST" action="{% if update %}/update_action/{% else %}/act/{% endif %}" accept-charset="utf-8">
    <input type="hidden" name="page" value="{{ page.name }}">

<div class="ak-grid-row">
    <div class="ak-grid-col ak-grid-col-12-of-12">
        {% if not update %}
            <h2>{{ page.title }}</h2>
        {% else %}
            <h2>Update Event Information</h2>
        {% endif %}
    </div>
</div>

<div class="ak-grid-row ak-grid-row-inverted">

    {% if page.custom_fields.featured_image %}
    <div class="ak-grid-col ak-grid-col-3-of-12">
        <img class="ak-featured-img" src="{{page.custom_fields.featured_image}}">
    </div>
    {% endif %}

    <div class="ak-grid-col {% if page.custom_fields.featured_image %}ak-grid-col-9-of-12{% else %}ak-grid-col-12-of-12{% endif %}">

        {% if not update and form.host_text %}
            <div class="ak-page-content">
                {% include_tmpl form.host_text %}
            </div>
        {% endif %}

        <div id="event-create-form" class="ak-styled-fields ak-labels-before {{templateset.custom_fields.field_errors_class|default:"ak-errs-below"}}">

            <ul class="compact" id="ak-errors"></ul>

            <div id="ak-user-info">
                {% include "./user_form_wrapper.html" %}

                
            </div>

            <div id="ak-event-info">
                <h3>Event information</h3>
                <div>
                    {% if campaign.use_title %}
                        <div>
                            <label for="id_event_title">Event name<span class="ak-required-flag">*</span></label>
                            <input id="id_event_title" type="text" name="event_title"{% if campaign.id == 9 %} value="‘Let People Vote’ Launch Event"{% endif %}>
                        </div>
                    {% endif %}

                    {% with event_starts_at as date_field %}
                        <div id="id_event_starts_at_row">
                            <label for="id_event_starts_at">Start date/time</label>
                            {% include "./date_picker.html" %}
                        </div>
                        {% if campaign.id == 9 %}<p style="font-weight:200;width: 65%;margin-left: 35%;">Note: If you're hosting a launch event, it must be on 10/1 at 7pm ET / 6pm CT / 5pm MT / 4pm PT.</p>{% endif %}


                        <script type="text/javascript">
                            // Replace animation w/instant show, because anim
                            // breaks tabbing quickly past the date field.
                            jQuery.fn.showFast = function(speed, callback) {
                                this.show()
                                callback()
                            }
                            // Removing datepicker doesn't break anything, and
                            // it might even be useful -- I can imagine users
                            // being confused when the picker covers up other
                            // key form fields.
                            $(function() {
                                $("#id_event_starts_at_date").datepicker( {
                                    minDate: 0, showAnim: 'showFast'
                                } )
                            } );
                        </script>

                    {% endwith %}

                    {% if campaign.use_ends_at %}
                        {% with event_ends_at as date_field %}
                            <div>
                                <label for="id_event_ends_at">End time</label>
                                {% include "./date_picker.html" %}
                            </div>
                        {% endwith %}
                    {% endif %}

                    {% if campaign.allow_private %}
                        <div id="id_event_is_private_row" class="ak-checkbox-field">
                            <input id="id_event_is_private" type="checkbox" class="checkbox" name="event_is_private" value="1">
                            <label class="ak-checkbox-label" for="id_event_is_private">
                                Make event private
                            </label>
                        </div>
                    {% endif %}

                    <div>
                        <label for="id_event_max_attendees">Maximum attendance</label>
                        <input id="id_event_max_attendees" type="text" name="event_max_attendees" value="{{ campaign.default_event_size|default:"" }}" size=3>
                    </div>

                    {% include_tmpl form.custom_field_html %}
                </div>
            </div>

            {% if templateset.custom_fields.event_categories and campaign.id == 2 %}
            <div id="event-categories">
              <h3>Event categories</h3>
              {% with templateset.custom_fields.event_categories|load_json as categories_config %}
              {% for category in categories_config %}{% if not categories_config|nth:category|nth:"hidden"|default:0 %}
              <div class="ak-err-below">
                <input id="id_action_event_category_{{ category }}"
                       class="checkbox" type="checkbox"
                       name="action_event_category"
                       value="{{ category }}"
                       {% if event and event.custom_fields.category and event.custom_fields.category|force_list|contains:category %}checked{% endif %}
                >
                <label for="id_action_event_category_{{ category }}"
                       class="ak-checkbox-label ak-event-category-checkbox-label">
                  {{ categories_config|nth:category|nth:"label" }}
                </label>
              </div>
              {% endif %}{% endfor %}
              {% endwith %}
            </div>
            {% endif %}
            
            <div id="event-info">
                <h3>Event location</h3>
                <div class="unknown_user">
                    <!--
                        This only shows if the user form includes all of the
                        event fields (e.g., address1, country if you use it)
                    -->
                    <input id="id_at_my_house" type="checkbox" class="checkbox" name="at_my_house" value="1">
                    <label class="ak-checkbox-label" for="id_at_my_house">
                        Use my home address
                    </label>
                </div>
                <div>
                    {% with "event_" as input_name_prefix %}
                        <div>
                            <label for="id_event_venue">Venue<span class="ak-required-flag">*</span></label>
                            <input id="id_event_venue" type="text" if-at-my-house="Home" name="event_venue">
                        </div>
                        <div style="display:none;">
                            <label for="event_country">Country</label>
                            {% include "./country_select.html" %}
                        </div>
                        <div>
                            <label for="id_event_address1">Street address<span class="ak-required-flag">*</span></label>
                            <input id="id_event_address1" type="text" name="event_address1">
                        </div>
                        <div>
                            <label for="id_event_city">City<span class="ak-required-flag">*</span></label>
                            <input id="id_event_city" type="text" name="event_city" required>
                        </div>
                        <div>
                            <label for="id_event_state">State<span class="ak-required-flag">*</span></label>
                            {% include "./state_select.html" %}
                        </div>
                        <div>
                            <label for="id_event_postal">Postal<span class="ak-required-flag">*</span></label>
                            <input id="id_event_postal" type="text" name="event_postal">
                        </div>
                        <div>
                            <label for="id_event_zip">ZIP<span class="ak-required-flag">*</span></label>
                            <input id="id_event_zip" type="text" name="event_zip" required>
                        </div>
                        <!-- <div><label for="id_event_phone">Contact phone:</label> <input id="id_event_phone" type="tel" name="event_phone" size="12"></div> -->
                        {% if campaign.show_address1 %}
                            <p style="font-weight:200;width: 65%;margin-left: 35%;">NOTE: Event addresses are public.</p>
                        {% endif %}
                    {% endwith %}
                </div>

            </div>

            <div id="event-info">
                <h3>Event description</h3>
                <div class="ak-errs-below">
                    <label for="id_event_public_description">
                        Public description<span class="ak-required-flag">*</span>
                        <br><span class="ak-normal">
                            {% if campaign.allow_private %}
                                For public events, people
                            {% else %}
                                People
                            {% endif %}
                            will see this text before signing up
                        </span>
                    </label>
                    <textarea id="id_event_public_description" name="event_public_description">{% if campaign.id == 9 %}Trump is engaging in an assault on voting rights. We’re going to respond by going on offense at the state and local levels to expand access to the ballot and make our democracy more representative. Join us at a launch event on Sunday, October 1 as we kickoff a big new push to Let People Vote.{% endif %}</textarea>
                </div>

                <div>
                    <label for="id_event_directions">Directions to event</label>

                    <textarea id="id_event_directions" name="event_directions"></textarea>
                </div>

                <div style="display:none;">
                    <label for="id_event_note_to_attenddees">Note to attendees
                    </label>
                    <textarea id="id_event_note_to_attenddees" name="event_note_to_attendees"></textarea>
                </div>
            </div>

            {% if request.user.is_authenticated %}
              <div>
                <h3>STAFF ONLY</h3>
                <div class="ak-err-below">
                  <label>Redirect this event to another event</label>
                  <input type="text" name="action_replacement_event_id" {% if event.custom_fields.replacement_event_id %}value="{{ event.custom_fields.replacement_event_id }}"{% endif %} placeholder="Enter the replacement event ID"/>
                </div>
                <div class="ak-err-below">
                  <label>&nbsp;</label>
                  <input type="text" name="action_replacement_campaign_name" {% if event.custom_fields.replacement_campaign_name %}value="{{ event.custom_fields.replacement_campaign_name }}"{% endif %} placeholder="Enter the campaign name for the replacement event (action, voting_rights)"/>
                </div>
                <div class="ak-err-below">
                  <input id="id_action_event_category_plannedparenthood"
                         class="checkbox" type="checkbox"
                         name="action_event_category"
                         value="plannedparenthood"
                         {% if event and event.custom_fields.category and event.custom_fields.category|force_list|contains:"plannedparenthood" %}checked{% endif %}
                  >
                  <label for="id_action_event_category_plannedparenthood"
                         class="ak-checkbox-label ak-event-category-checkbox-label">
                    Add the Planned Parenthood category
                  </label>
                </div>
              </div>    
            {% endif %}

        </div><!--9-of-12-->

    </div>

</div>

<div class="ak-grid-row">
    <div class="ak-grid-col ak-grid-col-12-of-12">
        {% if not update %}
            {% if form.host_requirements|is_nonblank or form.ground_rules|is_nonblank %}
                <div id="ground-rules">
                    <h3>Event rules</h3>

                    {% if form.host_requirements %}
                        <p>Here are the basic requirements for event hosts:</p>
                        <div class="ak-signoff-box ak-errs-below">
                            <blockquote>
                                {% include_tmpl form.host_requirements %}
                            </blockquote>
                            <div>
                                <input id="id_event_host_requirements" type="checkbox" name="event_host_requirements" value="1">
                                <label class="ak-checkbox-label" for="id_event_host_requirements">
                                    <strong>Required:</strong>
                                    I can meet the requirements for hosting an event.
                                </label>
                            </div>
                        </div>
                    {% else %}
                        <input type="hidden" name="event_host_requirements" value="1">
                    {% endif %}

                    {% if form.ground_rules|is_nonblank %}
                        <p>Here are the rules for hosting events:</p>
                        <div class="ak-signoff-box ak-errs-below">
                            <blockquote>
                                {% include_tmpl form.ground_rules %}
                            </blockquote>
                            <div>
                                <input id="id_event_host_ground_rules" type="checkbox" name="event_host_ground_rules" value="1">
                                <label class="ak-checkbox-label" for="id_event_host_ground_rules">
                                    <strong>Required:</strong>
                                    I agree to the rules for hosting an event.
                                </label>
                            </div>
                        </div>
                    {% else %}
                        <input type="hidden" name="event_host_ground_rules" value="1">
                    {% endif %}
                </div>

            {% else %}
                <input type="hidden" name="event_host_requirements" value="1">
                <input type="hidden" name="event_host_ground_rules" value="1">
            {% endif %}
        {% else %}
            <input type="hidden" name="event_host_requirements" value="1">
            <input type="hidden" name="event_host_ground_rules" value="1">
        {% endif %}

        {% if not update %}
        <p>
			<strong>Next, we&rsquo;ll review your event for approval.</strong>
        </p>
        {% endif %}

        <input id="id_submit" type="submit" value="{% if update %}Update event{% else %}Continue to next step: Confirm event{% endif %}" class="ak-submit-button">

    </div>
</div>

</form>

{% endblock %}

{% block script_additions %}

{% include "includes/jquery_ui.html" %}

<script type="text/javascript">
 actionkit.forms.prefill = function(overwrite) {
     var forms = actionkit.forms, ak = actionkit;
     // some event handlers want to change behavior during prefill (like
     // maybe not fire). they can check actionkit.forms.prefilling.
     forms.prefilling = true;
     
     var prefill_data = (
         ( ak.context && ak.context.prefill_data )
         ? ak.context.prefill_data
         : ak.utils.getListArgs()
     );
     if ( prefill_data.form_name )
         forms.setForm(prefill_data.form_name);
     $(ak.form).deserialize(prefill_data, {overwrite: false});

     // Check/uncheck boxes, which deserialize() won't do
     $(ak.form).find('input:checkbox').each(function() {
         if (prefill_data[this.name] && prefill_data[this.name].constructor === Array) {
             this.checked = $.inArray(this.value, prefill_data[this.name]) !== -1;
         } else {
             this.checked = prefill_data[this.name] == this.value ? true : false;
         }
     })

     // checking for true, not just present
     if ( prefill_data['amount_other'] ) {
         $(ak.form).find('input.amount_radio_button').attr('checked', false)
         $(ak.form).find('input[name=amount_other]').click()
     }

     // fire onchange and onclick, for in-field labels etc.
     // unfortunately #id_subscription_consent's onchange turns on
     // suppress_subscribe, so leave it out.
     $(ak.form).find(':input:not(#id_subscription_consent)').change();
     $(ak.form).find(':input:checked').each(function(){
         // trigger radio handler used by donate form amount buttons
         // for checkboxes we just checked, click() would uncheck them
         if (this.type.toLowerCase() != 'checkbox')
             $(this).click();
         $(this).change();
     });

     // the change events forced above hide errors; show them again
     forms.handleQueryStringErrors()

     forms.prefilling = false;
 }
 
    isEventUnitedStates = function () {
        var country = actionkit.form && actionkit.form.event_country
        && actionkit.utils.val(actionkit.form.event_country)
        return country == 'United States' || country == 'US' || !country;
    };

    reflectEventCountryChange = function() {
        var is_us = isEventUnitedStates();
        var event_zip = actionkit.form.event_zip,
        event_postal = actionkit.form.event_postal,
        event_state = actionkit.form.event_state;
        if ( event_zip && event_postal ) {
            if ( is_us ) actionkit.forms.showAndHide(event_zip, event_postal);
            else actionkit.forms.showAndHide(event_postal,event_zip);
        }
        if ( event_state ) {
            if ( is_us ) {
                $(event_state).removeAttr('disabled');
                var shownRow = actionkit.forms.getRowForElement(event_state);
                shownRow.show();
            }
            else {
                $(event_state).attr('disabled', true);
                $(event_state).val('');
                $(event_state).change();
                var hiddenRow = actionkit.forms.getRowForElement(event_state);
                hiddenRow.hide();
            }
        }
    };

    actionkitFormReady =  function() {
        if ( (actionkit.form.event_zip && actionkit.form.event_postal)
        || (actionkit.form.event_state && actionkit.form.event_region) ) {
            if (actionkit.context.prefill_data) {
                var event_zip_val = actionkit.context.prefill_data.event_zip,
                event_postal_val = actionkit.context.prefill_data.event_postal;
            }
            reflectEventCountryChange();
            if (actionkit.context.prefill_data) {
                var is_us = isEventUnitedStates();
                if (is_us) {
                    actionkit.form.event_zip.value = event_zip_val;
                    $(actionkit.form.event_zip).change();
                }
                else {
                    actionkit.form.event_postal.value = event_postal_val;
                    $(actionkit.form.event_postal).change();
                }
            }
        }
    };

    $(document).ready( function() {

        var prev_is_us, now_is_us;
        $(actionkit.form.event_country).focus(function() {
            prev_is_us = isEventUnitedStates();
        }).change(function() {
            now_is_us = isEventUnitedStates();
            if ( prev_is_us != now_is_us ) {
                reflectEventCountryChange();
            }
        });
    });

    $(function() {
        if ( ( ! $('#id_event_starts_at_date[type="text"]').length ) && ! $('#id_event_starts_at_time[type="text"]').length ) {
            $('#id_event_starts_at_row .ak-datetime').wrap('<div class="ak-readonly-value">' );
        }
        $('.ak-signoff-box input[type="checkbox"]').on('change', function() {
            if ($(this).is(':checked')) {
                $(this).next('label.ak-checkbox-label').removeClass('ak-error');
            }
        });
    });
</script>

{% if update %}
    <script type="text/javascript">
    $( function() {
        $('#user-info input[name=email]').attr('disabled','disabled')
    } );
    </script>
{% endif %}

<script type="text/javascript">
var address_fields = [
    'address1', 'address2', 'city', 'state', 'zip', 'postal', 'country'
];
function copyEventAddress() {
    for (var i=0; i<address_fields.length; ++i)
    $('#id_event_' + address_fields[i]).val(
        $('#id_' + address_fields[i]).val() || ''
    ).change();
    // handle inconsistent id="state" in user_form and
    // id="event_country" from country_select.html
    $('#id_event_state').val($('#state').val() || $('#id_state').val() || '').change();
    $('#event_country').val($('#country').val() || $('#id_country').val() || '').change();
    if ( !$('#id_event_venue').val() )
        $('#id_event_venue').val($('#id_event_venue').attr('if-at-my-house') || '').change()

}
function clearEventAddress() {
    for (var i=0; i<address_fields.length; ++i)
        $('#id_event_' + address_fields[i]).val('').change();
    if ( $('#id_event_venue').val() == $('#id_event_venue').attr('if-at-my-house') )
        $('#id_event_venue').val('').change();
}
$('#id_at_my_house').click(function() {
    this.checked ? copyEventAddress() : clearEventAddress();
})
$( function () {
    // check whether "Use my home address" even makes sense
    for ( var i = 0; i < address_fields.length; ++i ) {
        var fieldName = address_fields[i];
        // if no #event_city, we don't care if user form has a #id_city
        if (!$('#id_event_' + fieldName + ', #event_' + fieldName).length)
            continue;
        // if no #id_address1 or #address1 to match #event_address1,
        // hide the checkbox since it won't work
        if (!$('#id_' + fieldName + ', #' + fieldName).length) {
            $('#id_at_my_house').parent().remove();
            break;
        }
    }
} );
$(window).load( function() {
$('label[for="id_mobile_phone"]').html('Mobile phone*');
	
	function getParameterByName(name) {
		name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
		var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
			results = regex.exec(location.search);
		return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}


	var categorychoice = getParameterByName("eventcategory");
	if (categorychoice == 'plannedparenthood') {
		$('#id_action_event_category_plannedparenthood').prop('checked', true);
		$('#event-categories').hide();
		$('#id_event_title').val('Planned Parenthood Action Event');
	} else {
		$('#id_action_event_category_plannedparenthood').closest('div').hide();
	}
	if (categorychoice == 'daca') {
		$('#id_action_event_category_daca').prop('checked', true);
		$('#event-categories').hide();
		$('#id_event_title').val('Save DACA Action');
	}
});
	
</script>

{% endblock %}