const $ = require('jquery');
const Cookies = require('js-cookie');
// const Typeahead = require("typeahead.js/dist/typeahead.jquery.js");
class IHKSwitch {
constructor(section) {
const t = this;
this.serviceUrlBase = "/blueprint/servlet/serviceport/ihkfinder";
this.ihklListUrl = this.serviceUrlBase + "/ihk/all";
this.communitiesUrl = this.serviceUrlBase + "/community/all";
this.zipsUrl = this.serviceUrlBase + "/zip/";
this.ihkList = null;
this.nearestIhk = null;
this.formLocked = false;
$(section).addClass("initialized");
t.section = section;
t.form = section.find(".ihk-finder");
this.landingChangerBtn = $('.ihk-landing-changer');
if (this.landingChangerBtn.length) {
this.landingChangerBtn.on("click", (e) => {
e.preventDefault();
// lösche cookie so dass der User die Möglichkeit hat auf die neue IHK zu wechseln (Mit cookie wird es es nur weitergeleitet)
Cookies.remove('my-ihk', {expires: 365});
// clear session cookie just in case
if (window.sessionStorage && window.sessionStorage.getItem("my-ihk-ignore") === "true") {
window.sessionStorage.removeItem("my-ihk-ignore");
}
window.location = "/";
})
}
this.checkState();
this.initClosing();
}
isSessionStorageKeySet() {
try {
if (window.sessionStorage && window.sessionStorage.getItem("my-ihk-ignore") === "true") {
return true;
}
} catch (e) {
console.info("Something is wrong with session cookie", e)
}
return false;
}
initClosing() {
this.section.find('.closer').on('click', () => {
this.setSessionStorageCookie();
this.hideSwitch();
})
}
hideSwitch() {
this.section.addClass('hide');
setTimeout(() => {
this.section.removeAttr('data-show-step');
}, 400);
}
checkState() {
const cookie = Cookies.get('my-ihk');
if (cookie) {
this.initSwitch();
} else {
this.initSetCurrentIHK();
}
}
initTypeahead() {
const t = this;
var src = {
name: 'communities',
displayKey: 'name',
source: function (query, syncResults, asyncResults) {
return $.getJSON(t.zipsUrl + query, function (response) {
console.log(response);
if (response.jsonResponse && response.status === 200) {
if (response.jsonResponse.length > 0) {
return asyncResults(response.jsonResponse);
}
}
return asyncResults([]);
});
},
templates: {
empty: ['
Leider nichts gefunden
'].join('\n'),
suggestion: function (e) {
return ('' + e.name + '' + (e.zips ? e.zips.join(', ') : ' ') + '
');
}
}
}
const input = t.form.find('#zipSwitchInput');
t.zipInput = input;
t.zipInput.typeahead({
highlight: true,
ttl_ms: 0,
minLength: 5,
},
src
);
t.zipInput.bind('typeahead:selected', (e, item, sourceName) => {
if (item) {
if (!t.myLocation) {
t.myLocation = {}
}
t.setMyLocationAsObj(item);
t.setCookie();
t.initSuccess();
}
});
t.form.on('mouseenter', '.tt-suggestion', function () {
$('.marker#ihk-' + $(this).attr('data-id')).addClass('hover').siblings('hover').removeClass('hover');
})
t.form.on('mouseleave', '.tt-suggestion', function () {
$('.marker#ihk-' + $(this).attr('data-id')).removeClass('hover');
})
}
initForm() {
this.section.attr('data-show-step', 'form');
this.initTypeahead();
}
initSetCurrentIHK() {
this.section.attr('data-show-step', 'form');
this.section.find('.stay-here').on('click', () => {
this.getCurrentIhkAndSetCookie();
this.hideSwitch();
});
this.section.find('.set-session-cookie').on('click', () => {
this.setSessionStorageCookie();
this.hideSwitch();
})
}
// todo: delete this method after qs tests
fakeIHKsForTest(json) {
if (json.ihknr === 107 && ihk.settings.bIhkTestUrl !== "") {
json.homepage = ihk.settings.bIhkTestUrl;
} else if (json.ihknr === 118 && ihk.settings.doIhkTestUrl !== "") {
json.homepage = ihk.settings.doIhkTestUrl;
}
}
setMyLocationAsObj(item) {
this.fakeIHKsForTest(item);
this.myLocation = {
city: item.city,
country: item.country,
ihknr: item.ihknr,
zip: item.zip,
distance: item.distance || 0,
geodata: item.geodata,
homepage: item.homepage,
key: item.key,
longname: item.longname,
name: item.name
};
}
initSwitch() {
let myIHK;
const currIHK = parseInt(this.section.find('.current-ihk').attr('data-ihknr'));
const myihkCookie = Cookies.get('my-ihk');
if (this.myLocation && this.myLocation.ihknr && this.ihkList) {
myIHK = this.ihkList.find(ihk => {
return ihk.ihknr === this.myLocation.ihknr
})
} else if (myihkCookie) {
myIHK = JSON.parse(myihkCookie);
this.myLocation = myIHK;
}
if (myIHK && myIHK.ihknr && (currIHK !== myIHK.ihknr)) {
this.section.find('.my-ihk').text(myIHK.longname);
this.section.attr('data-show-step', 'switch');
} else {
this.hideSwitch();
}
this.section.find('.stay-here').on('click', () => {
this.getCurrentIhkAndSetCookie();
this.hideSwitch();
});
// this.section.find('.change-ihk').on('click', () => {
// this.initSuccess();
// })
this.section.find('.set-session-cookie').on('click', () => {
this.setSessionStorageCookie();
this.hideSwitch();
})
}
setSessionStorageCookie() {
try {
window.sessionStorage.setItem("my-ihk-ignore", "true");
} catch (e) {
console.info("Unable to set session Storage cookie, ", e)
}
}
getCurrentIhkAndSetCookie() {
this.getIhkList().then(() => {
let myIHK;
const currIHK = parseInt(this.section.find('.current-ihk').attr('data-ihknr'));
myIHK = this.ihkList.find(ihk => {
return ihk.ihknr === currIHK
});
this.setMyLocationAsObj(myIHK);
this.setCookie();
});
}
initSuccess() {
this.section.attr('data-show-step', 'success');
if (this.myLocation && this.myLocation.homepage) {
setTimeout(() => {
window.location = this.myLocation.homepage;
}, 2000)
}
}
initGeolocation() {
const t = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((pos) => {
this.getIhkList(pos)
}, (err) => {
this.locationError(err)
});
}
this.section.find('.change-location').on('click', () => {
t.initForm();
});
this.section.find('.accept-location').on('click', () => {
t.setCookie();
});
this.section.find('.toggle-location-info').on('click', (e) => {
e.preventDefault();
t.section.find('#location-info').slideToggle(250, 'swing');
});
}
locationError() {
this.section.attr('data-show-step', 'form');
this.initForm();
}
setCookie() {
try {
if (this.myLocation) {
Cookies.set('my-ihk', JSON.stringify(this.myLocation).toString(), {expires: 365});
}
} catch (e) {
console.log("Unable to set cookie");
}
this.initSwitch();
}
calculateDistance(ihk, currentPosition) {
const p = 0.017453292519943295;
const c = Math.cos;
const a = 0.5 - c((ihk.latitude - currentPosition.latitude) * p) / 2 + c(currentPosition.latitude * p) * c(ihk.latitude * p) * (1 - c((ihk.longitude - currentPosition.longitude) * p)) / 2;
const distance = 12742 * Math.asin(Math.sqrt(a));
return distance;
}
getIhkList(position) {
return $.getJSON(this.ihklListUrl, (response) => {
if (response.jsonResponse && response.status === 200) {
this.ihkList = response.jsonResponse;
if (position) {
this.showGeolocationStep(position);
}
}
})
}
showGeolocationStep(position) {
const t = this;
t.setNearestIhkFromJson(position);
t.section.find('.my-location').text(t.nearestIhk.zip + ' ' + t.nearestIhk.city);
t.setMyLocationAsObj(t.nearestIhk);
t.section.find('.my-ihk').text('IHK ' + t.nearestIhk.name);
t.section.attr('data-show-step', 'geolocation');
}
setNearestIhkFromJson(position) {
const t = this;
$.each(t.ihkList, function (index, ihk) {
const distance = t.calculateDistance(ihk.geodata, position.coords);
if (t.nearestIhk) {
if (t.nearestIhk.distance > distance) {
ihk.distance = distance;
t.nearestIhk = ihk;
}
} else {
ihk.distance = distance;
t.nearestIhk = ihk;
}
});
}
}
export default IHKSwitch;
$('body').on('ihk-init', () => {
$('.ihk-switch:not(.initialized)').each((el) => {
new IHKSwitch($(el));
});
});