Skip to content

Instantly share code, notes, and snippets.

@iCHAIT
Last active Aug 29, 2015
Embed
What would you like to do?
Map Based Entry System.
{% 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 %}
@ameenkhan07
Copy link

ameenkhan07 commented May 27, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment