Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (125 sloc) 6.14 KB
extends layout
block content
div(id="app")
p Choose result type:
form
span(:title="pga.titles.position", style="margin-right:10px; cursor: default;")
input(id="position", type="radio", name="endPoint", v-model="pga.resultType", value="position", @change="getResult(value)", checked)
|
label(for="position") Position
|
span(:title="pga.titles.object", style="margin-right:10px; cursor: default;")
input(id="object", type="radio", name="endPoint", v-model="pga.resultType", value="object", @change="getResult(value)")
|
label(for="object") Object
span(:title="pga.titles.cities", style="margin-right:10px; cursor: default;")
input(id="cities", type="radio", name="endPoint", v-model="pga.resultType", value="names", @change="getResult(value)")
|
label(for="cities") Cities
span(:title="pga.titles.distance", style="cursor: default;")
input(id="distance", type="radio", name="endPoint", v-model="pga.resultType", value="distance", :title="pga.titles.distance", @change="getResult(value)")
|
label(for="distance") Distance
select(id="unit", v-if="multiple === true", :title="pga.titles.unit", v-model="pga.distanceUnit", @change="getResult(value)")
option(value="m") Meter
option(value="km") Kilometer
option(value="ft") Feet
option(value="mi") Miles
p(v-if="multiple") Choose two postcodes:
p(v-else) Choose postcode:
multiselect(id="zip", :title="title", v-model="value", :options="options", :multiple="multiple", :max="max", :placeholder="placeholder", @search-change="getOptions", @input="getResult")
br
br
textarea(id="result", readonly="false", placeholder="Result", v-model="pga.result", rows="10", class="multiselect__input multiselect__tags")
script.
'use strict'
var app = new Vue({
el: '#app',
components: { 'Multiselect': VueMultiselect.default },
data () {
return {
value: null,
options: [],
multiple: false,
max: false,
placeholder: 'Enter PLZ or city',
title:'The city name or postcode (PLZ - Postleitzahl) of interest, e.g. 45130',
pga: {
titles: {
position: 'Returns the geoposition for one postcode',
object: 'Returns a JSON object with details on the given postcode',
cities: 'Returns all (city) names for all postcodes within the given lead region, e.g. 45',
distance: 'Returns the linear distance in the given unit between the central points of the two given postcodes',
unit: 'The unit to be used for the distance value (defaults to meter)',
},
proxy: {
path: `${!{JSON.stringify(proxyFullPath)}}`,
qs: {
options: '',
results: '',
},
_csrf: `${!{JSON.stringify(csrfToken)}}`,
},
resultType: 'position',
distanceUnit: 'm',
result: '',
},
};
},
methods: {
getOptions(currentInput) {
if(currentInput.length === 2 && ! isNaN(currentInput)) {
this.pga.proxy.qs.options = `?endPoint=names&leadRegion=${encodeURIComponent(currentInput)}`;
this.sendRequest(this.pga.proxy.qs.options, 'options');
}
if(currentInput.length === 4 && currentInput.match(/[0-9\sa-zA-ZäAöÖüÜß]{4,4}/)) {
this.pga.proxy.qs.options = `?endPoint=names&namesPattern=${encodeURIComponent(currentInput)}`;
this.sendRequest(this.pga.proxy.qs.options, 'options');
}
},
getResult(currentInput) {
this.pga.result = '';
switch(this.pga.resultType) {
case 'position':
case 'object':
this.multiple = false;
this.max = false;
this.pga.proxy.qs.results = (typeof(currentInput) === 'string' || Array.isArray(currentInput)) ? `?endPoint=${this.pga.resultType}&postcode=${encodeURIComponent(currentInput).substring(0,5)}` : '';
break;
case 'names':
this.multiple = false;
this.max = false;
this.pga.proxy.qs.results = (typeof(currentInput) === 'string' || Array.isArray(currentInput)) ? `?endPoint=${this.pga.resultType}&leadRegion=${encodeURIComponent(currentInput).substring(0,2)}` : '';
break;
case 'distance':
this.multiple = true;
this.max = 2;
this.pga.proxy.qs.results = (Array.isArray(currentInput)) ? `?endPoint=${this.pga.resultType}&start=${encodeURIComponent(currentInput[0]).substring(0,5)}&end=${encodeURIComponent(currentInput[1]).substring(0,5)}&unit=${this.pga.distanceUnit}` : '';
break;
default:
this.pga.proxy.qs.results = '';
}
if(typeof(currentInput) === 'string' && this.pga.resultType === 'position' ||
Array.isArray(currentInput) && typeof(currentInput[0]) === 'string' && this.pga.resultType === 'position' ||
typeof(currentInput) === 'string' && this.pga.resultType === 'object' ||
Array.isArray(currentInput) && typeof(currentInput[0]) === 'string' && this.pga.resultType === 'object' ||
typeof(currentInput) === 'string' && this.pga.resultType === 'names' ||
Array.isArray(currentInput) && typeof(currentInput[0]) === 'string' && this.pga.resultType === 'names' ||
Array.isArray(currentInput) && currentInput.length === 2 && this.pga.resultType === 'distance') {
this.sendRequest(this.pga.proxy.qs.results, 'result');
}
},
sendRequest(qs, key) {
var xhr = new XMLHttpRequest();
xhr.open('GET', `${this.pga.proxy.path}${qs}&_csrf=${this.pga.proxy._csrf}`);
xhr.onload = function() {
if(key === 'options') {
app[key] = JSON.parse(xhr.responseText);
} else {
app.pga[key] = xhr.responseText;
}
};
xhr.send();
},
},
});