Map Based Entry System.

index.html

{% extends "base.html" %}

{% block header %}
<div class="back">
    {% for p in parent_url %}
    <a href="{{ p.url }}">
        &lt; <span class="parent_text">{{ p.name }}</span>
    </a>
    {% endfor %}
</div>
{% endblock header %}

{% block title %}
<h2 class='light'>{{ title }}</h2>
<h4 class='light accent'>{{ message }}</h4>
{% endblock title %}

{% load static %}

{% block content %}
<form class='form' action="{{ post_url }}" method="post">
    {% if vendor_form.errors or errors %}
    <div class='error'>
        {% for error in vendor_form.errors %}
        {% if error != "lat" and error != "long" %}
        <h4 class='light warning'>Invalid {{ error|escape }}!</h4>
        {% endif %}
        {% endfor %}
        {% for error in errors %}
        <h4 class='light warning'>{{ error|escape }}</h4>
        {% endfor %}
    </div>
    {% endif %}
    <h4 id='error_tag' class='light warning'></h4>
    {% csrf_token %}
    <div class='entry_box'>
        {% if vendor_form.instance.pk != None %}
        <button  class='dbutton' type="button" onclick="deleteVendor();return false;" />Delete</button>
        {% endif %}
        <h3>Basic Info</h3>
        <p class="field_text">Name*:</p>
        {{ vendor_form.name }}
        <p class="field_text">Hours*:</p>
        {{ vendor_form.hours }}
        <p class="field_text">Description*:</p>
        {{ vendor_form.description }}
        <p class="field_text">Story:</p>
        {{ vendor_form.story }}
        <p class=" field_text">In Port:</p>
        {{ vendor_form.status }}
        <h3>Location</h3><br>


        <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>

        <div><input type="text" id="us3-address" onkeypress="removerEnter(event)" name="location" required="true" /></div>

        <div><input type="hidden" name="street" required="true" ></div>
        <div><input type="hidden" name="city" required="true" ></div>
        <div><input type="hidden" name="state" required="true" ></div>
        <div><input type="hidden" name="zip" required="true" ></div>

        <div id="us3" class="map"></div><br>     <!-- Provides the map -->

        <p class="field_text">Latitude*:</p>
        <div><input type="text" id="us3-lat" onkeypress="removerEnter(event)" name="latitude" required="true" /></div>

        <p class="field_text">Longitude*:</p>
        <div><input type="text" id="us3-lon" onkeypress="removerEnter(event)" name="longitude" required="true" /></div>

        <p class=" field_text">Location Description:</p>
        {{ vendor_form.location_description }}
        <h3>Contact info: </h3>
        <p class="field_text">Contact Name*:</p>
        {{ vendor_form.contact_name }}
        <p class=" field_text">Website:</p>
        {{ vendor_form.website }}
        <p class=" field_text">Email:</p>
        {{ vendor_form.email }}
        <p class=" field_text">Phone:</p>
        {{ vendor_form.phone }}
        <h3 class="title">Products</h3>
        <button type="button" onclick="appendProduct()">Add Product</button>
        <div class="container">
            {% if existing_product_preparations %}
            {% for pp in existing_product_preparations %}
            <div class="product">
                <select disabled id="existing{{ pp.id }}">
                    <option value="{{ pp.product }}">{{ pp.product }}</option>
                </select>
                <select disabled id="existing{{ pp.id }}" class="preparation">
                    <option value="{{ pp.id }}">{{ pp.preparation_text }}</option>
                </select>
                <a href="#" onclick="deleteProduct(this);return false;">
                    <img class="delete" src="{% static 'delete.png' %}" />
                </a>
            </div>
            {% endfor %}
            {% else %}
            <span class="no_products">No Products Yet!</span>
            {% endif %}
            <input id="preparation_ids" name="preparation_ids" type="hidden" />
        </div>
        <button type="submit" onclick="setPreparationField();" />Save</button>
    </div>
</form>
<!-- The template div used by appendProduct() -->
<div id='new_product'>
    <div class='product'>
        <select id="product$iteration" onchange="showPreparations($iteration)">
            <option selected disabled></option>
            {% for product in product_list %}
            <option value="{{ product }}">{{ product }}</option>
            {% endfor %}
        </select>
        <select disabled id="preparation$iteration" class="preparation">
            <option selected disabled></option>
        </select>
        <a href="#" onclick="deleteProduct(this);return false;">
            <img class="delete" src="{% static 'delete.png' %}" />
        </a>
    </div>
</div>
{% endblock content %}
{% block footer %}
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script>
<script>

$('#us3').locationpicker({
    location: {latitude: 44.563781, longitude: -123.27944400000001},
    radius: false,
    inputBinding: {
        latitudeInput: $('#us3-lat'),
        longitudeInput: $('#us3-lon'),
        locationNameInput: $('#us3-address')

    },
    enableAutocomplete: true,
    onchanged: function (currentLocation, radius,  isMarkerDropped) {
        console.log($('#us3').data("locationpicker").addressComponents);
        alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");


        $('input[name="street"]').val($('#us3').data("locationpicker").addressComponents.streetName);
        $('input[name="city"]').val($('#us3').data("locationpicker").addressComponents.city);
        $('input[name="state"]').val($('#us3').data("locationpicker").addressComponents.stateOrProvince);
        $('input[name="zip"]').val($('#us3').data("locationpicker").addressComponents.postalCode);
    }

    oninitialized: function() {
        console.log($('#us3').data("locationpicker").addressComponents);

        // $('input[name="location"]').val($('#us3').data("locationpicker").locationNameInput);
        // $('input[name="latitude"]').val($('#us3').data("locationpicker").latitudeInput);
        // $('input[name="longitude"]').val($('#us3').data("locationpicker").longitudeInput);


        // $('input[name="street"]').val($('#us3').data("locationpicker").addressComponents.streetName);
        // $('input[name="city"]').val($('#us3').data("locationpicker").addressComponents.city);
        // $('input[name="state"]').val($('#us3').data("locationpicker").addressComponents.stateOrProvince);
        // $('input[name="zip"]').val($('#us3').data("locationpicker").addressComponents.postalCode);

    }

});


    function removerEnter(e) {
        if (e.which == 13 || e.keyCode == 13) {
            e.preventDefault();
        }
    }


    var preparation_options = {{ json_preparations|safe }};

    number_of_products = 0;

    function deleteProduct(element)
    {
        $( element ).parent().css("display", "none");
        if ($( ".preparation:visible" ).length === 0) {
            $( ".no_products" ).show();
        };
    }

    function deleteVendor()
    {
        if(confirm('Are you sure you want to delete this vendor?')) {
            $.ajax({
                type: 'DELETE',
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                statusCode: {
                    404: function() {
                        $("#error_tag").text('Unable to delete vendor!');
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                    },
                    200: function() {
                        window.location.replace('{% with parent_url|last as last %}{{ last.url }}{% endwith %}/?success=true');
                    }
                }
            });
        }
    }

    function showPreparations(prep_number)
    {
        var preparation_select = document.getElementById("preparation" + prep_number);
        var product_select = document.getElementById("product" + prep_number);
        var current_product = product_select.options[product_select.selectedIndex].value
        preparation_select.options.length = 0;
        for (preparation in preparation_options[current_product]) {
            var option = document.createElement("option");
            option.value = preparation_options[current_product][preparation].value;
            option.text = preparation_options[current_product][preparation].name;
            preparation_select.add(option);
        }
        preparation_select.disabled=false;
    }

    function appendProduct()
    {
        $( ".no_products" ).hide();
        var new_product_html = $('#new_product').html();
        var new_product_html = new_product_html.split("$iteration").join(number_of_products);
        $( ".container" ).append( new_product_html );
        number_of_products++;
    }

    function setPreparationField()
    {
        var preparation_ids = []
        $( ".preparation:visible" ).each( function( index, element ){
            preparation_ids.push(this.options[this.selectedIndex].value);
        });

        $('input[name="preparation_ids"]').val(preparation_ids);
    }

</script>
{% endblock footer %}

.us2{
width: 550px;
height: 400px;
}