Skip to content

Instantly share code, notes, and snippets.

@AlexandrBasan
Last active August 29, 2015 14:07
Show Gist options
  • Save AlexandrBasan/3edfc68e8ddd21196017 to your computer and use it in GitHub Desktop.
Save AlexandrBasan/3edfc68e8ddd21196017 to your computer and use it in GitHub Desktop.
Teleport SaaS (www.teleport-ds.com) create inquiry form
<!-- Our module use: - Google Maps API 3 for Autocompete Addresses, - Raty Jquery Rating, - Bootstrap 3.0 for styling -->
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- CSS Styles-->
<style>
.overflowb{
overflow: auto!important;
height: 100%;
max-height: 800px;
}
</style>
<!-- Google autocomplete script -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&language=en"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
//https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
var placeSearch, autocomplete;
// Delivery Rates END ADDRESS CODE
var placeSearch, autocomplete2;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name'
// postal_code: 'short_name'
};
//Delivery Rate END ADDRESS CODE
var componentForm2 = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name'
// postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
//Delivery Rate END ADDRESS CODE
autocomplete2 = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete2')),
{ types: ['geocode'] });
// Delivery Rates END ADDRESS
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
});
//Delivery Rate END ADDRESS CODE
google.maps.event.addListener(autocomplete2, 'place_changed', function () {
fillInAddress2();
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
// Set map marker autocomplete - MAP in Warehouses
var map = new google.maps.Map(document.getElementById('map-canvas'));
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
// Set map marker autocomplete - MAP in Warehouses
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
/////////////////// Temporaly action change city
if (val == "Kiev")
{var val = "Kyyiv";}
else
{}
/////////////////// temporaly action change city
document.getElementById(addressType).value = val;
}
}
// Set map marker autocomplete - MAP in Warehouses
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
// Set map marker autocomplete - MAP in Warehouses
}
//Delivery Rate END ADDRESS CODE
// [START region_fillform]
function fillInAddress2() {
// Get the place details from the autocomplete object.
var place = autocomplete2.getPlace();
for (var component in componentForm2) {
document.getElementById('e' + component).value = '';
document.getElementById('e' + component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm2[addressType]) {
var val = place.address_components[i][componentForm2[addressType]];
/////////////////// Temporaly action change city
if (val == "Kiev")
{var val = "Kyyiv";}
else
{}
/////////////////// temporaly action change city
document.getElementById('e' + addressType).value = val;
}
}
}
// [END region_fillform]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
</script>
<script>
var geocoder;
// Geocode inquiry
function geocode_inquiry() {
// check autocomplete element before send reques to geocode
var autocomplete_value = document.getElementById('autocomplete').value
var address_value = document.getElementById('address2').value
if ((autocomplete_value == "") || (address_value == "") || (address_value != autocomplete_value)){
//alert('AUTOCOMPLETE EMPTY');
var address = document.getElementById('address2').value;
geocoder.geocode({ 'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var arrAddress = results[0].address_components;
$.each(arrAddress, function (i, address_component) {
if (address_component.types[0] == "locality"){
if (address_component.long_name == "Kiev")
{var locality = "Kyyiv";}
else
{var locality = address_component.long_name;}
document.getElementById('locality').value = locality;
}
if (address_component.types[0] == "administrative_area_level_1"){
document.getElementById('administrative_area_level_1').value = address_component.long_name;
}
if (address_component.types[0] == "country"){
document.getElementById('country').value = address_component.long_name;
}
if (address_component.types[0] == "route"){
document.getElementById('route').value = address_component.long_name;
}
if (address_component.types[0] == "street_number"){
document.getElementById('street_number').value = address_component.long_name;
}
//return false; // break the loop
});
// set address to inquiry create form
document.getElementById('autocomplete').value = document.getElementById('address2').value
// show address on map
var map;
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 14,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
//alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
</script>
<!-- Google autocomplete script -->
<!-- Initialize AJAX -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Initialize AJAX -->
<!-- RATY star rating -->
<script>
/*!
* jQuery Raty - A Star Rating Plugin
*
* Licensed under The MIT License
*
* @version 2.5.2
* @author Washington Botelho
* @documentation wbotelhos.com/raty
*
*/
;(function(b){var a={init:function(c){return this.each(function(){a.destroy.call(this);this.opt=b.extend(true,{},b.fn.raty.defaults,c);var e=b(this),g=["number","readOnly","score","scoreName"];a._callback.call(this,g);if(this.opt.precision){a._adjustPrecision.call(this);}this.opt.number=a._between(this.opt.number,0,this.opt.numberMax);this.opt.path=this.opt.path||"";if(this.opt.path&&this.opt.path.slice(this.opt.path.length-1,this.opt.path.length)!=="/"){this.opt.path+="/";}this.stars=a._createStars.call(this);this.score=a._createScore.call(this);a._apply.call(this,this.opt.score);var f=this.opt.space?4:0,d=this.opt.width||(this.opt.number*this.opt.size+this.opt.number*f);if(this.opt.cancel){this.cancel=a._createCancel.call(this);d+=(this.opt.size+f);}if(this.opt.readOnly){a._lock.call(this);}else{e.css("cursor","pointer");a._binds.call(this);}if(this.opt.width!==false){e.css("width",d);}a._target.call(this,this.opt.score);e.data({settings:this.opt,raty:true});});},_adjustPrecision:function(){this.opt.targetType="score";this.opt.half=true;},_apply:function(c){if(c&&c>0){c=a._between(c,0,this.opt.number);this.score.val(c);}a._fill.call(this,c);if(c){a._roundStars.call(this,c);}},_between:function(e,d,c){return Math.min(Math.max(parseFloat(e),d),c);},_binds:function(){if(this.cancel){a._bindCancel.call(this);}a._bindClick.call(this);a._bindOut.call(this);a._bindOver.call(this);},_bindCancel:function(){a._bindClickCancel.call(this);a._bindOutCancel.call(this);a._bindOverCancel.call(this);},_bindClick:function(){var c=this,d=b(c);c.stars.on("click.raty",function(e){c.score.val((c.opt.half||c.opt.precision)?d.data("score"):this.alt);if(c.opt.click){c.opt.click.call(c,parseFloat(c.score.val()),e);}});},_bindClickCancel:function(){var c=this;c.cancel.on("click.raty",function(d){c.score.removeAttr("value");if(c.opt.click){c.opt.click.call(c,null,d);}});},_bindOut:function(){var c=this;b(this).on("mouseleave.raty",function(d){var e=parseFloat(c.score.val())||undefined;a._apply.call(c,e);a._target.call(c,e,d);if(c.opt.mouseout){c.opt.mouseout.call(c,e,d);}});},_bindOutCancel:function(){var c=this;c.cancel.on("mouseleave.raty",function(d){b(this).attr("src",c.opt.path+c.opt.cancelOff);if(c.opt.mouseout){c.opt.mouseout.call(c,c.score.val()||null,d);}});},_bindOverCancel:function(){var c=this;c.cancel.on("mouseover.raty",function(d){b(this).attr("src",c.opt.path+c.opt.cancelOn);c.stars.attr("src",c.opt.path+c.opt.starOff);a._target.call(c,null,d);if(c.opt.mouseover){c.opt.mouseover.call(c,null);}});},_bindOver:function(){var c=this,d=b(c),e=c.opt.half?"mousemove.raty":"mouseover.raty";c.stars.on(e,function(g){var h=parseInt(this.alt,10);if(c.opt.half){var f=parseFloat((g.pageX-b(this).offset().left)/c.opt.size),j=(f>0.5)?1:0.5;h=h-1+j;a._fill.call(c,h);if(c.opt.precision){h=h-j+f;}a._roundStars.call(c,h);d.data("score",h);}else{a._fill.call(c,h);}a._target.call(c,h,g);if(c.opt.mouseover){c.opt.mouseover.call(c,h,g);}});},_callback:function(c){for(i in c){if(typeof this.opt[c[i]]==="function"){this.opt[c[i]]=this.opt[c[i]].call(this);}}},_createCancel:function(){var e=b(this),c=this.opt.path+this.opt.cancelOff,d=b("<img />",{src:c,alt:"x",title:this.opt.cancelHint,"class":"raty-cancel"});if(this.opt.cancelPlace=="left"){e.prepend("&#160;").prepend(d);}else{e.append("&#160;").append(d);}return d;},_createScore:function(){return b("<input />",{type:"hidden",name:this.opt.scoreName}).appendTo(this);},_createStars:function(){var e=b(this);for(var c=1;c<=this.opt.number;c++){var f=a._getHint.call(this,c),d=(this.opt.score&&this.opt.score>=c)?"starOn":"starOff";d=this.opt.path+this.opt[d];b("<img />",{src:d,alt:c,title:f}).appendTo(this);if(this.opt.space){e.append((c<this.opt.number)?"&#160;":"");}}return e.children("img");},_error:function(c){b(this).html(c);b.error(c);},_fill:function(d){var m=this,e=0;for(var f=1;f<=m.stars.length;f++){var g=m.stars.eq(f-1),l=m.opt.single?(f==d):(f<=d);if(m.opt.iconRange&&m.opt.iconRange.length>e){var j=m.opt.iconRange[e],h=j.on||m.opt.starOn,c=j.off||m.opt.starOff,k=l?h:c;if(f<=j.range){g.attr("src",m.opt.path+k);}if(f==j.range){e++;}}else{var k=l?"starOn":"starOff";g.attr("src",this.opt.path+this.opt[k]);}}},_getHint:function(d){var c=this.opt.hints[d-1];return(c==="")?"":(c||d);},_lock:function(){var d=parseInt(this.score.val(),10),c=d?a._getHint.call(this,d):this.opt.noRatedMsg;b(this).data("readonly",true).css("cursor","").attr("title",c);this.score.attr("readonly","readonly");this.stars.attr("title",c);if(this.cancel){this.cancel.hide();}},_roundStars:function(e){var d=(e-Math.floor(e)).toFixed(2);if(d>this.opt.round.down){var c="starOn";if(this.opt.halfShow&&d<this.opt.round.up){c="starHalf";}else{if(d<this.opt.round.full){c="starOff";}}this.stars.eq(Math.ceil(e)-1).attr("src",this.opt.path+this.opt[c]);}},_target:function(f,d){if(this.opt.target){var e=b(this.opt.target);if(e.length===0){a._error.call(this,"Target selector invalid or missing!");}if(this.opt.targetFormat.indexOf("{score}")<0){a._error.call(this,'Template "{score}" missing!');}var c=d&&d.type=="mouseover";if(f===undefined){f=this.opt.targetText;}else{if(f===null){f=c?this.opt.cancelHint:this.opt.targetText;}else{if(this.opt.targetType=="hint"){f=a._getHint.call(this,Math.ceil(f));}else{if(this.opt.precision){f=parseFloat(f).toFixed(1);}}if(!c&&!this.opt.targetKeep){f=this.opt.targetText;}}}if(f){f=this.opt.targetFormat.toString().replace("{score}",f);}if(e.is(":input")){e.val(f);}else{e.html(f);}}},_unlock:function(){b(this).data("readonly",false).css("cursor","pointer").removeAttr("title");this.score.removeAttr("readonly","readonly");for(var c=0;c<this.opt.number;c++){this.stars.eq(c).attr("title",a._getHint.call(this,c+1));}if(this.cancel){this.cancel.css("display","");}},cancel:function(c){return this.each(function(){if(b(this).data("readonly")!==true){a[c?"click":"score"].call(this,null);this.score.removeAttr("value");}});},click:function(c){return b(this).each(function(){if(b(this).data("readonly")!==true){a._apply.call(this,c);if(!this.opt.click){a._error.call(this,'You must add the "click: function(score, evt) { }" callback.');}this.opt.click.call(this,c,{type:"click"});a._target.call(this,c);}});},destroy:function(){return b(this).each(function(){var d=b(this),c=d.data("raw");if(c){d.off(".raty").empty().css({cursor:c.style.cursor,width:c.style.width}).removeData("readonly");}else{d.data("raw",d.clone()[0]);}});},getScore:function(){var d=[],c;b(this).each(function(){c=this.score.val();d.push(c?parseFloat(c):undefined);});return(d.length>1)?d:d[0];},readOnly:function(c){return this.each(function(){var d=b(this);if(d.data("readonly")!==c){if(c){d.off(".raty").children("img").off(".raty");a._lock.call(this);}else{a._binds.call(this);a._unlock.call(this);}d.data("readonly",c);}});},reload:function(){return a.set.call(this,{});},score:function(){return arguments.length?a.setScore.apply(this,arguments):a.getScore.call(this);},set:function(c){return this.each(function(){var e=b(this),f=e.data("settings"),d=b.extend({},f,c);e.raty(d);});},setScore:function(c){return b(this).each(function(){if(b(this).data("readonly")!==true){a._apply.call(this,c);a._target.call(this,c);}});}};b.fn.raty=function(c){if(a[c]){return a[c].apply(this,Array.prototype.slice.call(arguments,1));}else{if(typeof c==="object"||!c){return a.init.apply(this,arguments);}else{b.error("Method "+c+" does not exist!");}}};b.fn.raty.defaults={cancel:false,cancelHint:"Cancel this rating!",cancelOff:"cancel-off.png",cancelOn:"cancel-on.png",cancelPlace:"left",click:undefined,half:false,halfShow:true,hints:["bad","poor","regular","good","gorgeous"],iconRange:undefined,mouseout:undefined,mouseover:undefined,noRatedMsg:"Not rated yet!",number:5,numberMax:20,path:"",precision:false,readOnly:false,round:{down:0.25,full:0.6,up:0.76},score:undefined,scoreName:"score",single:false,size:16,space:true,starHalf:"star-half.png",starOff:"star-off.png",starOn:"star-on.png",target:undefined,targetFormat:"{score}",targetKeep:false,targetText:"",targetType:"hint",width:undefined};})(jQuery);
</script>
<!-- RATY star rating -->
</head>
<body onload="initialize(), codeAddress2(), codeAddress()">
<!-- Teleport LOGO for some CMS delivery select -->
<img id="teleport_logo" onclick="ShowForm()" src="http://www.teleport-ds.com/assets/teleport_logo_eng_0-97dc4f4c6a152de97ea2e046e7dcc824.png">
<!-- Show form if logo click -->
<script>
$( "#teleport_logo" ).click(function() {
$( "#select_delivery_method_teleport" ).show();
});
</script>
<!--<div hidden="" id="select_delivery_method_teleport" >-->
<div id="select_delivery_method_teleport" >
<div class="row">
<div class="panel-group" id="accordion">
<!--Inquiry form-->
<div class="row-fluid">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseinquiry">
Create inquiry
</a>
</h4>
</div>
<div id="collapseinquiry" class="panel-collapse collapse in">
<form id="create_inquiry" accept-charset="UTF-8">
<!-- General Params -->
<!-- Store ID -->
<input id="inquiry_store_id" name="inquiry[store_id]" type="hidden" value="4">
<!-- Delivery company ID -->
<input id="inquiry_delivery_company_id" name="inquiry[delivery_company_id]"
readonly="readonly" type="hidden"
value="1">
<!--Sender address-->
<input type="hidden" id="inquiry_sender_address" name="inquiry[sender_address]" value="16">
<!-- If you use 2 Google autocomplete field - for sender andress -->
<input id="ecountry" name="inquiry[sender_country]" type="hidden" value="Ukraine">
<input id="elocality" name="inquiry[sender_city]" type="hidden" value="Kyyiv">
<input id="eadministrative_area_level_1" name="inquiry[sender_state]" type="hidden" value="Kyiv city">
<input id="estreet_number" name="inquiry[sender_street_number]" type="hidden" value="">
<input id="eroute" name="inquiry[sender_route]" type="hidden" value="">
<!-- Sender -->
<input type="hidden" id="inquiry_sender_name" name="inquiry[sender_name]" value="4">
<!-- Delivery rate -->
<input type="hidden" id="inquiry_delivery_rate" name="inquiry[delivery_rate]" value="dd">
<!-- Total delivery weight -->
<input type="hidden" id="inquiry_total_delivery_weight"
name="inquiry[total_delivery_weight]" value="1">
<!-- Length -->
<input type="hidden" id="inquiry_dimension_length" name="inquiry[dimension_length]"
value="15">
<!-- Width -->
<input type="hidden" id="inquiry_dimension_width" name="inquiry[dimension_width]"
value="15">
<!-- Height -->
<input type="hidden" id="inquiry_dimension_height" name="inquiry[dimension_height]"
value="15">
<!-- Declared value -->
<input type="hidden" id="inquiry_declared_value" name="inquiry[declared_value]"
type="number" value="0">
<!-- Total goods priece -->
<input type="hidden" id="inquiry_total_goods_price" name="inquiry[total_goods_price]"
value="0">
<!-- Delivery address -->
<label>Delivery address</label>
<label>Google Autocomplete</label>
<input id="autocomplete" name="inquiry[delivery_address]" type="text"
placeholder="Enter a location"
autocomplete="off" class="form-control">
<label>Google Geocoder</label>
<input id="address2" name="inquiry[delivery_address]" type="text"
placeholder="Enter a location"
autocomplete="off" class="form-control" onblur="geocode_inquiry()">
<div id="map-canvas"></div>
<input id="street_number" name="inquiry[street_number]" type="hidden">
<input id="route" name="inquiry[route]" type="hidden">
<input id="country" name="inquiry[country]" type="hidden">
<input id="locality" name="inquiry[city]" type="hidden">
<input id="administrative_area_level_1" name="inquiry[state]" type="hidden">
<!-- Delivery address additional information -->
<label>Delivery address apartment</label>
<input id="inquiry_additional_information_delivery_address"
name="inquiry[additional_information_delivery_address]"
type="text" class="form-control">
<!-- Receiver name -->
<label>Receiver name</label>
<input id="inquiry_receiver_name" name="inquiry[receiver_name]" type="text" class="form-control" value="Update2">
<!-- Receiver Countrycode -->
<label>Receiver country code</label>
<select id="inquiry_receiver_countrycode" name="inquiry[receiver_countrycode]" class="form-control">
<option value="+376">Andorre (+376)</option>
<option value="+971">United Arab Emirates (+971)</option>
<option value="+93">Afghanistan (+93)</option>
<option value="+1">Antigua and Barbuda (+1)</option>
<option value="+1">Anguilla (+1)</option>
<option value="+355">Albania (+355)</option>
<option value="+374">Armenia (+374)</option>
<option value="+599">Netherlands Antilles (+599)</option>
<option value="+244">Angola (+244)</option>
<option value="+672">Antarctica (+672)</option>
<option value="+54">Argentina (+54)</option>
<option value="+1">American Samoa (+1)</option>
<option value="+43">Austria (+43)</option>
<option value="+61">Australia (+61)</option>
<option value="+297">Aruba (+297)</option>
<option value="+358">Åland Islands (+358)</option>
<option value="+994">Azerbaijan (+994)</option>
<option value="+387">Bosnia and Herzegovina (+387)</option>
<option value="+1">Barbade (+1)</option>
<option value="+880">Bangladesh (+880)</option>
<option value="+32">Belgium (+32)</option>
<option value="+226">Burkina Faso (+226)</option>
<option value="+359">Bulgaria (+359)</option>
<option value="+973">Bahrain (+973)</option>
<option value="+257">Burundi (+257)</option>
<option value="+229">Benin (+229)</option>
<option value="+590">Saint Barthélemy (+590)</option>
<option value="+1">Bermuda (+1)</option>
<option value="+673">Brunei (+673)</option>
<option value="+591">Bolivia (+591)</option>
<option value="+599">Bonaire, Sint Eustatius and Saba (+599)</option>
<option value="+55">Brazil (+55)</option>
<option value="+1">Bahamas (+1)</option>
<option value="+975">Bhutan (+975)</option>
<option value="+">Bouvet Island (+)</option>
<option value="+267">Botswana (+267)</option>
<option value="+375">Belarus (+375)</option>
<option value="+501">Belize (+501)</option>
<option value="+1">Canada (+1)</option>
<option value="+61">Cocos (Keeling) Islands (+61)</option>
<option value="+243">Congo (Dem. Rep.) (+243)</option>
<option value="+236">Central African Republic (+236)</option>
<option value="+242">Congo (+242)</option>
<option value="+41">Switzerland (+41)</option>
<option value="+225">Côte D'Ivoire (+225)</option>
<option value="+682">Cook Islands (+682)</option>
<option value="+56">Chile (+56)</option>
<option value="+237">Cameroon (+237)</option>
<option value="+86">China (+86)</option>
<option value="+57">Colombia (+57)</option>
<option value="+506">Costa Rica (+506)</option>
<option value="+53">Cuba (+53)</option>
<option value="+238">Cape Verde (+238)</option>
<option value="+599">Curaçao (+599)</option>
<option value="+61">Christmas Island (+61)</option>
<option value="+357">Cyprus (+357)</option>
<option value="+420">Czech Republic (+420)</option>
<option value="+49">Germany (+49)</option>
<option value="+253">Djibouti (+253)</option>
<option value="+45">Denmark (+45)</option>
<option value="+1">Dominica (+1)</option>
<option value="+1">Dominican Republic (+1)</option>
<option value="+213">Algeria (+213)</option>
<option value="+593">Ecuador (+593)</option>
<option value="+372">Estonia (+372)</option>
<option value="+20">Egypt (+20)</option>
<option value="+212">Western Sahara (+212)</option>
<option value="+291">Eritrea (+291)</option>
<option value="+34">Spain (+34)</option>
<option value="+251">Ethiopia (+251)</option>
<option value="+358">Finland (+358)</option>
<option value="+679">Fiji (+679)</option>
<option value="+500">Falkland Islands (+500)</option>
<option value="+691">Micronesia (+691)</option>
<option value="+298">Faroe Islands (+298)</option>
<option value="+33">France (+33)</option>
<option value="+241">Gabon (+241)</option>
<option value="+44">United Kingdom (+44)</option>
<option value="+1">Grenada (+1)</option>
<option value="+995">Georgia (+995)</option>
<option value="+594">French Guiana (+594)</option>
<option value="+44">Guernsey and Alderney (+44)</option>
<option value="+233">Ghana (+233)</option>
<option value="+350">Gibraltar (+350)</option>
<option value="+299">Greenland (+299)</option>
<option value="+220">Gambia (+220)</option>
<option value="+224">Guinea (+224)</option>
<option value="+590">Guadeloupe (+590)</option>
<option value="+240">Equatorial Guinea (+240)</option>
<option value="+30">Greece (+30)</option>
<option value="+500">South Georgia and the South Sandwich Islands (+500)</option>
<option value="+502">Guatemala (+502)</option>
<option value="+1">Guam (+1)</option>
<option value="+245">Guinea-Bissau (+245)</option>
<option value="+592">Guyana (+592)</option>
<option value="+852">Hong Kong (+852)</option>
<option value="+">Heard and McDonald Islands (+)</option>
<option value="+504">Honduras (+504)</option>
<option value="+385">Croatia (+385)</option>
<option value="+509">Haiti (+509)</option>
<option value="+36">Hungary (+36)</option>
<option value="+62">Indonesia (+62)</option>
<option value="+353">Ireland (+353)</option>
<option value="+972">Israel (+972)</option>
<option value="+44">Isle of Man (+44)</option>
<option value="+91">India (+91)</option>
<option value="+246">British Indian Ocean Territory (+246)</option>
<option value="+964">Iraq (+964)</option>
<option value="+98">Iran (+98)</option>
<option value="+354">Iceland (+354)</option>
<option value="+39">Italy (+39)</option>
<option value="+44">Jersey (+44)</option>
<option value="+1">Jamaica (+1)</option>
<option value="+962">Jordan (+962)</option>
<option value="+81">Japan (+81)</option>
<option value="+254">Kenya (+254)</option>
<option value="+996">Kyrgyzstan (+996)</option>
<option value="+855">Cambodia (+855)</option>
<option value="+686">Kiribati (+686)</option>
<option value="+269">Comoros (+269)</option>
<option value="+1">Saint Kitts and Nevis (+1)</option>
<option value="+850">Korea (North) (+850)</option>
<option value="+82">Korea (South) (+82)</option>
<option value="+965">Kuwait (+965)</option>
<option value="+1">Cayman Islands (+1)</option>
<option value="+7">Kazakhstan (+7)</option>
<option value="+856">Laos (+856)</option>
<option value="+961">Lebanon (+961)</option>
<option value="+1">Saint Lucia (+1)</option>
<option value="+423">Liechtenstein (+423)</option>
<option value="+94">Sri Lanka (+94)</option>
<option value="+231">Liberia (+231)</option>
<option value="+266">Lesotho (+266)</option>
<option value="+370">Lithuania (+370)</option>
<option value="+352">Luxembourg (+352)</option>
<option value="+371">Latvia (+371)</option>
<option value="+218">Libya (+218)</option>
<option value="+212">Morocco (+212)</option>
<option value="+377">Monaco (+377)</option>
<option value="+373">Moldova (+373)</option>
<option value="+382">Crna Gora (+382)</option>
<option value="+590">Saint Martin (+590)</option>
<option value="+261">Madagascar (+261)</option>
<option value="+692">Marshall Islands (+692)</option>
<option value="+389">Macedonia (+389)</option>
<option value="+223">Mali (+223)</option>
<option value="+95">Myanmar (+95)</option>
<option value="+976">Mongolia (+976)</option>
<option value="+853">Macao (+853)</option>
<option value="+1">Northern Mariana Islands (+1)</option>
<option value="+596">Martinique (+596)</option>
<option value="+222">Mauritania (+222)</option>
<option value="+1">Montserrat (+1)</option>
<option value="+356">Malta (+356)</option>
<option value="+230">Mauritius (+230)</option>
<option value="+960">Maldives (+960)</option>
<option value="+265">Malawi (+265)</option>
<option value="+52">Mexico (+52)</option>
<option value="+60">Malaysia (+60)</option>
<option value="+258">Mozambique (+258)</option>
<option value="+264">Namibia (+264)</option>
<option value="+687">New Caledonia (+687)</option>
<option value="+227">Niger (+227)</option>
<option value="+672">Norfolk Island (+672)</option>
<option value="+234">Nigeria (+234)</option>
<option value="+505">Nicaragua (+505)</option>
<option value="+31">Netherlands (+31)</option>
<option value="+47">Norway (+47)</option>
<option value="+977">Nepal (+977)</option>
<option value="+674">Nauru (+674)</option>
<option value="+683">Niue (+683)</option>
<option value="+64">New Zealand (+64)</option>
<option value="+968">Oman (+968)</option>
<option value="+507">Panama (+507)</option>
<option value="+51">Peru (+51)</option>
<option value="+689">French Polynesia (+689)</option>
<option value="+675">Papua New Guinea (+675)</option>
<option value="+63">Philippines (+63)</option>
<option value="+92">Pakistan (+92)</option>
<option value="+48">Poland (+48)</option>
<option value="+508">Saint Pierre and Miquelon (+508)</option>
<option value="+">Pitcairn (+)</option>
<option value="+1">Puerto Rico (+1)</option>
<option value="+970">Palestine (+970)</option>
<option value="+351">Portugal (+351)</option>
<option value="+680">Palau (+680)</option>
<option value="+595">Paraguay (+595)</option>
<option value="+974">Qatar (+974)</option>
<option value="+262">Réunion (+262)</option>
<option value="+40">Romania (+40)</option>
<option value="+381">Serbia (+381)</option>
<option value="+7">Russia (+7)</option>
<option value="+250">Rwanda (+250)</option>
<option value="+966">Saudi Arabia (+966)</option>
<option value="+677">Solomon Islands (+677)</option>
<option value="+248">Seychelles (+248)</option>
<option value="+249">Sudan (+249)</option>
<option value="+46">Sweden (+46)</option>
<option value="+65">Singapore (+65)</option>
<option value="+290">Saint Helena (+290)</option>
<option value="+386">Slovenia (+386)</option>
<option value="+47">Svalbard and Jan Mayen (+47)</option>
<option value="+421">Slovakia (+421)</option>
<option value="+232">Sierra Leone (+232)</option>
<option value="+378">San Marino (+378)</option>
<option value="+221">Senegal (+221)</option>
<option value="+252">Somalia (+252)</option>
<option value="+597">Suriname (+597)</option>
<option value="+211">South Sudan (+211)</option>
<option value="+239">São Tomé and Príncipe (+239)</option>
<option value="+503">El Salvador (+503)</option>
<option value="+1">Sint Maarten (+1)</option>
<option value="+963">Syria (+963)</option>
<option value="+268">Swaziland (+268)</option>
<option value="+1">Turks and Caicos Islands (+1)</option>
<option value="+235">Chad (+235)</option>
<option value="+">French Southern Territories (+)</option>
<option value="+228">Togo (+228)</option>
<option value="+66">Thailand (+66)</option>
<option value="+992">Tajikistan (+992)</option>
<option value="+690">Tokelau (+690)</option>
<option value="+670">East Timor (+670)</option>
<option value="+993">Turkmenistan (+993)</option>
<option value="+216">Tunisia (+216)</option>
<option value="+676">Tonga (+676)</option>
<option value="+90">Turkey (+90)</option>
<option value="+1">Trinidad and Tobago (+1)</option>
<option value="+688">Tuvalu (+688)</option>
<option value="+886">Taiwan (+886)</option>
<option value="+255">Tanzania (+255)</option>
<option value="+380">Ukraine (+380)</option>
<option value="+256">Uganda (+256)</option>
<option value="+">United States Minor Outlying Islands (+)</option>
<option value="+1">United States of America (+1)</option>
<option value="+598">Uruguay (+598)</option>
<option value="+998">Uzbekistan (+998)</option>
<option value="+39">Vatican City (+39)</option>
<option value="+1">Saint Vincent and the Grenadines (+1)</option>
<option value="+58">Venezuela (+58)</option>
<option value="+1">British Virgin Islands (+1)</option>
<option value="+1">Virgin Islands of the United States (+1)</option>
<option value="+84">Vietnam (+84)</option>
<option value="+678">Vanuatu (+678)</option>
<option value="+681">Wallis and Futuna (+681)</option>
<option value="+685">Samoa (+685)</option>
<option value="+967">Yemen (+967)</option>
<option value="+262">Mayotte (+262)</option>
<option value="+27">South Africa (+27)</option>
<option value="+260">Zambia (+260)</option>
<option value="+263">Zimbabwe (+263)</option>
</select>
<!-- Receiver phone -->
<label>Receiver phone</label>
<input id="inquiry_receiver_phone" name="inquiry[receiver_phone]" type="text" class="form-control">
<label>Delivery cost</label>
<input id="inquiry_delivery_cost" name="inquiry[delivery_cost]" readonly="readonly"
type="text" value="0.00" class="form-control">
<!-- General Params -->
<!-- Not Reguired params -->
<!-- Receiver e-mail -->
<label>Receiver e-mail</label>
<input id="inquiry_receiver_email" name="inquiry[receiver_email]" type="text" class="form-control">
<!-- About delivery information -->
<label>About delivery information</label>
<textarea type="hidden" id="inquiry_about_delivery_information"
name="inquiry[about_delivery_information]" class="form-control"></textarea>
<!-- Receiver prepaid -->
<input type="hidden" id="inquiry_receiver_prepaid" name="inquiry[receiver_prepaid]"
type="checkbox" value="0">
<!-- About goods information -->
<input type="hidden" id="inquiry_goods_information" name="inquiry[goods_information]">
<!-- Sender prepaid delivery -->
<input type="hidden" id="inquiry_sender_prepaid_delivery"
name="inquiry[sender_prepaid_delivery]" type="checkbox"
value="0">
<!-- Receiver pays delivery partial -->
<input type="hidden" id="inquiry_receiver_pays_delivery_partial"
name="inquiry[receiver_pays_delivery_partial]"
value="0">
<!-- Not Reguired params -->
<div class="actions text-center">
<input class="btn btn-sm btn-primary" name="commit" type="submit" value="Select Delivery Company">
</div>
</form>
</div>
</div>
<!-- Delete inquiry block -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseinquiry">
Delete inquiry
</a>
</h4>
</div>
<input readonly="readonly" id="delete_inquiry_id" name="delete_inquiry_id" class="form-control"
value="0">
<div class="actions text-center">
<input class="btn btn-sm btn-primary" onclick="Delete_inquiry()" type="submit" value="Delete inquiry">
</div>
</div>
<!-- Delete inquiry block -->
</div>
<!-- Script send form -->
<!-- Script recive delivery companies -->
<script>
// Your login and Password for Teleport SaaS
var login = "2@gmail.com";
var pass = "infinity8";
$("#create_inquiry").submit(function (event) {
event.preventDefault();
// Show Please wait
$('#delivery_companies').empty();
$('#delivery_companies').append('<p>Receiving information from Teleport Delivery Service. Please wait...</p>');
// Send reguest to Teleport SaaS - Receive information about delivery companies
jQuery.ajax({
// Test Server configuration
url: 'http://localhost:3000/api/receive_information_about_delivery_companies?email='+ login + '&pass=' + pass,
//url: 'https://immense-river-1801.herokuapp.com/api/receive_information_about_delivery_companies?email='+ login +'&pass=' + pass,
// Work Server configuration
//url: 'https://saas.teleport-ds.com/api/receive_information_about_delivery_companies?email='+ login +'&pass=' + pass,
crossDomain: true,
method: 'POST',
data: $('#create_inquiry').serialize()
}).done(function (response) {
// Do something with the response
var json_resp = JSON.stringify(response)
var data = $.parseJSON(json_resp);
$('#delivery_companies').empty();
//alert(JSON.stringify(data));
//$('#delivery_companies').append(JSON.stringify(data));
if (data.error)
{
// Return information Teleport SaaS Error
$('#delivery_companies').append('<p>Sorry, check your data.</p>');
var error_data = data.error
$('#delivery_companies').append(error_data);
}
else
{
for (var i = 0; i < data.delivery_rates.length; i++) {
// Initialize vars
var name = data.delivery_rates[i].delivery_company.name;
var avatar = data.delivery_rates[i].delivery_company_avatar;
var delivery_cost = data.delivery_rates[i].delivery_cost;
var period = data.delivery_rates[i].period;
var buttonid = [i];
var delivery_company_id = data.delivery_rates[i].delivery_company.id;
// Your site currency
var currency = data.delivery_rates[i].delivery_company.balance_currency;
$('#delivery_companies').append('<div id="innerdelivery_companies"></div>');
$('#innerdelivery_companies').attr('id', 'innerdelivery_companies_' + [i]);
$('#innerdelivery_companies_' + [i]).addClass( "col-md-4" );
// Add table
$('#innerdelivery_companies_' + [i]).append('<table id="main" class="table table-bordered"></table>');
$('#main').attr('id', 'table_' + [i]);
// Save delivery company ID to hidden field - NOT DELETE!
$('#table_' + [i]).append('<input type="hidden" id="inquiry_delivery_company_id_t" value="0">');
$('#inquiry_delivery_company_id_t').attr('id', 'inquiry_delivery_company_id_t_td_' + [i]).attr('value', delivery_company_id);
// Save delivery cost to hidden field - NOT DELETE!
$('#table_' + [i]).append('<input type="hidden" id="inquiry_delivery_cost_id_t" value="0">');
$('#inquiry_delivery_cost_id_t').attr('id', 'inquiry_delivery_cost_id_t_td_' + [i]).attr('value', delivery_cost);
// Add Avatar
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'avatar_td_' + [i]);
$('#avatar_td_' + [i]).prepend('<img width="81" height="50" id="theImg" src="" />');
$('#theImg').attr('id', 'delco_image_' + [i]);
$('#delco_image_' + [i]).attr('src', avatar);
//$('#avatar_td_' + [i]).append(JSON.stringify(data.delivery_rates[i].delivery_company_avatar));
// Add company name
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'name_td_' + [i]);
$('#name_td_' + [i]).append(name);
// Add rating
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'delivery_company_rating_td_' + [i]);
// Raty show delivery company rating
// http://wbotelhos.com/raty
$('#delivery_company_rating_td_' + [i]).raty({
width: 130,
readOnly: true,
score: (JSON.stringify(data.delivery_rates[i].delivery_company_rating)),
path: 'https://saas.teleport-ds.com/assets'
});
// Show text rating value
// Vars for correct show delivery company rate
if (currency == null)
{var currency = " ";}
else
{var currency = currency;}
if (period == "3h")
{var period = "3 hour";}
else if (period == "12h")
{var period = "12 hour";}
else if (period == "24h")
{var period = "24 hours";}
else if (period == "48h")
{var period = "48 hours";}
else if (period == "120h")
{var period = "120 hours";}
else
{var period = "-";}
//$('#delivery_company_rating_td_' + [i]).append(JSON.stringify(data.delivery_rates[i].delivery_company_rating));
// 1 tr for select delivery rate
// We recommend use this view in delivery company show block < 70 % screen
// Add delivery cost
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'delivery_cost_td_' + [i]);
$('#delivery_cost_td_' + [i]).append(delivery_cost);
// Add currency for delivery cost
$('#delivery_cost_td_' + [i]).append(' '+ currency);
// Add period
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'period_td_' + [i]);
$('#period_td_' + [i]).append(period);
// Add choice delivery company button
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'choice_button_td_' + [i]);
$('#choice_button_td_' + [i]).prepend('<button id="choice_button" onclick="SelectDeliveryCompany()" class="btn btn-sm btn-primary">Select</button>');
$('#choice_button').attr('id', 'choice_button_' + [i]);
$('#choice_button_' + [i]).attr('onclick', 'SelectDeliveryCompany(' + [i] + ')');
// 1 tr for select delivery rate
// Row for select delivery rate
// We recommend use this view in delivery company show block >= 70 % screen
$('#table_' + [i]).append('<tr><td id="main_td" class="text-center"></td></tr>');
$('#main_td').attr('id', 'rate_delivery_companies_td_' + [i]);
$('#rate_delivery_companies_td_' + [i]).append('<div class="row" id="ratedelivery_companies"></div>');
$('#ratedelivery_companies').attr('id', 'ratedelivery_companies_' + [i]);
//First Col-md
$('#ratedelivery_companies_' + [i]).append('<div id="first_col_md" class="col-md-4 text-center"></div>');
$('#first_col_md').attr('id', 'first_col_md_' + [i]);
// Add data to First Col-md
$('#first_col_md_' + [i]).append(delivery_cost);
// Add currency for delivery cost
$('#first_col_md_' + [i]).append(' '+ currency);
//Two Col-md
$('#ratedelivery_companies_' + [i]).append('<div id="two_col_md" class="col-md-4 text-center"></div>');
$('#two_col_md').attr('id', 'two_col_md_' + [i]);
// Add data to Two Col-md
$('#two_col_md_' + [i]).append(period);
//Three Col-md
$('#ratedelivery_companies_' + [i]).append('<div id="three_col_md" class="col-md-4 text-center"></div>');
$('#three_col_md').attr('id', 'three_col_md_' + [i]);
// Add data to Three Col-md
$('#three_col_md_' + [i]).prepend('<button id="choice_button" onclick="SelectDeliveryCompany()" class="btn btn-sm btn-primary">Select</button>');
$('#choice_button').attr('id', 'choice_button_row_' + [i]);
$('#choice_button_row_' + [i]).attr('onclick', 'SelectDeliveryCompany(' + [i] + ')');
// Row for select delivery rate
}
}
}).fail(function () {
// Whoops; show an error.
});
});
</script>
<!-- Script recive delivery companies -->
<!-- Script send complete inquiry -->
<script>
// Your login and Password for Teleport SaaS
var login = "2@gmail.com";
var pass = "infinity8";
// Inquiry ID for Update
var inquiry_id = "6";
function SelectDeliveryCompany(i) {
// Set correct value to form after user select delivery company
var delivery_company_id_for_create = document.getElementById('inquiry_delivery_company_id_t_td_' + i).value;
var delivery_company_cost_for_create = document.getElementById('inquiry_delivery_cost_id_t_td_' + i).value;
//alert(delivery_company_id_for_create);
//alert(delivery_company_cost_for_create);
document.getElementById('inquiry_delivery_company_id').value = delivery_company_id_for_create;
document.getElementById('inquiry_delivery_cost').value = delivery_company_cost_for_create;
// Show Please wait
$('#delivery_companies').empty();
$('#delivery_companies').append('<p>Receiving information from Teleport Delivery Service. Please wait...</p>');
// Send reguest to Teleport SaaS - Create inquiry
jQuery.ajax({
// Test Server configuration
url: 'http://localhost:3000/api/create_inquiry?email='+ login +'&pass=' + pass,
// URL FOR CREATE INQUIRY
//url: 'https://immense-river-1801.herokuapp.com/api/create_inquiry?email='+ login +'&pass=' + pass,
// URL FOR UPDATE INQUIRY
//url: 'https://immense-river-1801.herokuapp.com/api/update_inquiry?email='+ login +'&pass=' + pass + '&id=' + inquiry_id,
// Work Server configuration
//url: 'https://saas.teleport-ds.com/api/create_inquiry?email='+ login +'&pass=' + pass,
method: 'POST',
crossDomain: true,
data: $('#create_inquiry').serialize()
}).done(function (response) {
$('#delivery_companies').empty();
// Do something with the response
var json_resp = JSON.stringify(response)
var data = $.parseJSON(json_resp);
//alert(JSON.stringify(data.error));
if (data.error)
{
// Return information Teleport SaaS Error
$('#delivery_companies').append('<p>Sorry, check your data.</p>');
var error_data = data.error
$('#delivery_companies').append(error_data);
}
else
{
// Return information about new inquiry
$('#delivery_companies').append('<p>Inquiry success created.</p>');
var inquiry_id = data.id;
var inquiry_number = data.inquiry_number;
$('#delivery_companies').append('<p><strong>Inquiry ID:<strong></p>');
$('#delivery_companies').append(inquiry_id);
$('#delivery_companies').append('<p><strong>Inquiry number:<strong></p>');
$('#delivery_companies').append(inquiry_number);
// If you need some else field to show user you may take fields names from our API
}
}).fail(function () {
$('#delivery_companies').empty();
$('#delivery_companies').append('<p>Sorry, inquiry doesnt created, check all your fields. Maybe you forget input phone number.</p>');
// Whoops; show an error.
});
};
</script>
<!-- Script send complete inquiry -->
<!-- Delete inquiry script -->
<script>
// Your login and Password for Teleport SaaS
var login = "2@gmail.com";
//var pass = "infinity8";
var pass = "infinity8";
// Inquiry ID for Update
var inquiry_id = document.getElementById('delete_inquiry_id').value;
function Delete_inquiry() {
// Show Please wait
$('#delivery_companies').empty();
$('#delivery_companies').append('<p>Deleting inquiry. Please wait...</p>');
// Send reguest to Teleport SaaS - Create inquiry
jQuery.ajax({
// Test Server configuration
url: 'http://localhost:3000/api/delete_inquiry?email='+ login +'&pass=' + pass + '&id=' + inquiry_id,
// URL FOR DELETE INQUIRY
//url: 'https://immense-river-1801.herokuapp.com/api/create_inquiry?email='+ login +'&pass=' + pass + '&id=' + inquiry_id,
//url: 'https://saas.teleport-ds.com/api/create_inquiry?email='+ login +'&pass=' + pass + '&id=' + inquiry_id,
method: 'DELETE',
crossDomain: true
}).done(function (response) {
$('#delivery_companies').empty();
// Do something with the response
var json_resp = JSON.stringify(response)
var data = $.parseJSON(json_resp);
//alert(JSON.stringify(data.error));
if (data.error)
{
// Return information Teleport SaaS Error
var error_data = data.error
$('#delivery_companies').append(error_data);
}
else
{
// Return information about new inquiry
$('#delivery_companies').append('<p>Inquiry success deleted.</p>');
}
}).fail(function () {
$('#delivery_companies').empty();
$('#delivery_companies').append('<p>Sorry, inquiry doesnt deleted.</p>');
// Whoops; show an error.
});
};
</script>
<!-- Delete inquiry script -->
<!-- Show user information about Delivery Companies -->
<div class="col-md-8">
<div class="panel panel-default overflowb">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsecompany">
Delivery companies select
</a>
</h4>
</div>
<div id="collapsecompany" class="panel-collapse collapse in">
<div class="panel-body">
<div id="delivery_companies"></div>
</div>
</div>
</div>
</div>
<!-- Show user information about Delivery Companies -->
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment