<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpPZwcIZ6KnVjJh3MPqs8_XEfB3ZGKkYQ&libraries=geometry,places">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">
</script>
<div class="container">
<h3>Request generator</h3>
<p>Click on the map and choose the customers' preferences to create requests.</p>
<div class="row">
<div class="col-md-2">
<div class="popover-markup">
<div class="trigger form-group form-group-lg form-group-icon-left"><i class="fa fa-users input-icon input-icon-highlight"></i>
<label>Passenger request</label>
<input type="text" name="passengers" id="passengers" class="form-control" placeholder="Click to create request" disabled>
</div>
<div class="content hide">
<div id="compartmentSet">
</div>
<a class="btn btn-default btn-block demise">Select</a>
</div>
</div>
</div>
<div class="col-md-2">
<label>ID</label>
<input type="text" name="customer" id="customer" placeholder="Chuck Norris" class="form-control">
</div>
<div class="col-md-2">
<label>Latitude</label>
<input id="lat" name="lat" class="form-control" />
</div>
<div class="col-md-2">
<label>Longitude</label>
<input id="long" name="long" class="form-control"/>
</div>
<div class="col-md-2">
<label>Pickup delay</label>
<input id="pkDelay" name="pkDelay" class="form-control"/>
</div>
<div class="col-md-2">
<label>Travel time delay</label>
<input id="ttDelay" name="ttDelay" class="form-control"/>
</div>
</div>
<span id="list"></span>
<br />
<br />
<div id="map_canvas" style="width: 100%; height: 500px;"></div>
</div>
.popover-markup .popover{
width:150%;
}
.popover-markup label{
padding:0px;
}
.container{
margin:0px auto;
}
compartments = {XS:{current:0,max:5}, M:{current:0,max:5}, L:{current:0,max:5}, XL:{current:0,max:5}, A:{current:0,max:5}, C:{current:0,max:5}, B:{current:0,max:5}, I:{current:0,max:5}};
var par = 0;
var origin = 0;
var PK_DELAY = 180;
var TT_DELAY = 600;
$(function () {
$compartment_form = function(){
s = "";
for (var key in compartments) {
if (compartments.hasOwnProperty(key)) {
compartmentId = key;
capacity = compartments[key].current;
max = compartments[key].max
s += '<div class="form-group">';
s += '<label class="control-label col-md-5"><strong>'+compartmentId+'</strong> ('+max+')</label>';
s += '<div class="input-group number-spinner col-md-7">';
s += '<span class="input-group-btn">';
s += '<a class="btn btn-danger" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></a>';
s += '</span>';
s += '<input type="text" disabled name="'+compartmentId+'" id="'+compartmentId+'" class="form-control text-center" value="'+capacity+'" max="'+max+'" min=0>';
s += '<span class="input-group-btn">';
s += '<a class="btn btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></a>';
s += '</span>';
s += '</div>';
s += '</div>';
}
}
return s;
};
var $popover = $('.popover-markup>.trigger').popover({
html: true,
placement: 'bottom',
content: function () {
$("#compartmentSet").html($compartment_form);
return $(this).parent().find('.content').html();
}
});
// close popover
$(document).click(function (e) {
if ($(e.target).is('.demise')) {
$('.popover-markup>.trigger').popover('hide');
}
});
// store form value when popover closed
$popover.on('hide.bs.popover', function () {
$(".popover-content input").each(function() {
compartments[$(this)[0].id].current = $(this).val();
});
});
// spinner(+-btn to change value) & total to parent input
$(document).on('click', '.number-spinner a', function () {
var btn = $(this),
input = btn.closest('.number-spinner').find('input'),
oldValue = input.val().trim();
if (btn.attr('data-dir') == 'up') {
if(oldValue < input.attr('max')){
oldValue++;
}
} else {
if (oldValue > input.attr('min')) {
oldValue--;
}
}
compartments[input[0].id].current = oldValue;
var t = "";
for (var key in compartments) {
if (compartments.hasOwnProperty(key)) {
compartmentId = key;
capacity = compartments[key].current;
if (capacity>0){
t+=compartmentId+":"+capacity+"/";
}
}
}
$('#passengers').val(t);
input.val(oldValue);
});
$(".popover-markup>.trigger").popover('show');
$initialize = function() {
var myLatlng = new google.maps.LatLng(52.001333, 4.372167);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
var map;
var myCoords = []
var placeMarker = function(location) {
var marker = new google.maps.Marker({
draggable: false,
position: location,
map: map,
title: "Your location"
});
var pos = marker.getPosition();
if(par%2 ==0){
origin = pos;
console.log("origin:"+origin)
marker.setIcon('https://maps.google.com/mapfiles/ms/icons/green-dot.png');
}else{
marker.setIcon('https://maps.google.com/mapfiles/ms/icons/red-dot.png');
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
path: [origin, pos],
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
var pkDelay = document.getElementById("pkDelay").value;
var ttDelay = document.getElementById("ttDelay").value;
var ttDelay = document.getElementById("ttDelay").value;
if (pkDelay == ""){
pkDelay = PK_DELAY;
}
if (ttDelay == ""){
ttDelay = TT_DELAY;
}
var compartmentSet = document.getElementById("passengers").value;
var customerId = document.getElementById("customer").value;
if (compartmentSet == ""){
compartmentSet = "A:1/";
}
console.log("coords:"+origin+" -- "+pos);
var c = {revealing: moment().format('YYYY-MM-DD HH:MM'), compartmentSet:compartmentSet, customerId:customerId, from:origin, to: pos, pkDelay:pkDelay, ttDelay:ttDelay};
console.log(c);
myCoords.push(c);
document.getElementById("lat").value = c.from;
document.getElementById("long").value = c.to;
document.getElementById("list").innerHTML = getListCoords();
document.getElementById("customer").value = "";
}
par++;
}
var getListCoords = function(){
console.log(myCoords.length);
str = "<ul>";
for(i=0;i<myCoords.length;i++){
str+= "<li>"+ myCoords[i].revealing + "," + myCoords[i].from + "," + myCoords[i].to+","+myCoords[i].compartmentSet+","+ myCoords[i].pkDelay+","+ myCoords[i].ttDelay+","+ myCoords[i].customerId + "</li>";
}
str+= "</ul>";
return str;
}
google.maps.event.addDomListener(window, "load", $initialize);
});