Add localization

js/main.js

@@ -182,8 +182,8 @@
 	
 	};
 
-	var addField = function() {
-		$('.js-addField').on('click', function(event){
+	var addField = async function() {
+		$('.js-addField').on('click', async function(event){
 			
 			event.preventDefault();
 
@@ -219,7 +219,8 @@
 			inputElement.setAttribute("type","firstname");
 			inputElement.classList.add('form-control');
 			inputElement.setAttribute("id","firstname");
-			inputElement.setAttribute("placeholder","Vorname");
+			let firstname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"firstname");
+			inputElement.setAttribute("placeholder", firstname_placeholder);
 			formGroupDiv.appendChild(inputElement);
 
 			outerDiv.appendChild(firstNameDiv);
@@ -244,13 +245,14 @@
 			firstNameInputElement.setAttribute("type","lastname");
 			firstNameInputElement.classList.add('form-control');
 			firstNameInputElement.setAttribute("id","lastname");
-			firstNameInputElement.setAttribute("placeholder","Nachname");
+			let lastname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"lastname");
+			firstNameInputElement.setAttribute("placeholder", lastname_placeholder);
 			lastnameFormGroupDiv.appendChild(firstNameInputElement);
 
 			outerDiv.appendChild(lastNameDiv);	
 
 			container.appendChild(outerDiv);
-
+			
 			return false;
 		});
 	}
@@ -304,12 +306,7 @@
 
 }());
 
-
-
-
-//var form = document.getElementById("js-submitbtn");
-
-document.getElementById("js-submitbtn").addEventListener("click", function () {
+document.getElementById("js-submitbtn").addEventListener("click", async function () {
 	//form.submit();
 	//console.log("Hello world!");
 
@@ -319,8 +316,196 @@ document.getElementById("js-submitbtn").addEventListener("click", function () {
 	console.log("Vorname:" + inputs[0].value);
 	console.log("Nachname:" + inputs[1].value);
 	console.log("Telefon:" + inputs[2].value);
-	for (let i = 3; i < inputs.length; i+=2) {
+	console.log("E-Mail:" + inputs[3].value);
+	for (let i = 4; i < inputs.length; i+=2) {
 
 		console.log("Mitbringsel:" + inputs[i].value, inputs[i+1].value);
 	}
-  });
+
+	//Swal.fire("Our First Alert", "With some body text and success icon!", "success");
+
+	
+	document.getElementById("attentant-container").remove();
+	document.getElementById("js-submitbtn").disabled = 'true';
+	document.getElementById("js-submitbtn").textContent = await translator.getTranslationByKey(document.documentElement.lang,"already_participating");
+
+	let title = 'Teilgenommen';
+	let text = "Wir freuen uns auf euch!";
+	title = await translator.getTranslationByKey(document.documentElement.lang,"success_title");
+	text = await translator.getTranslationByKey(document.documentElement.lang,"success_text");
+	console.log(document.documentElement.lang);
+
+	swal({
+		title: title,
+		text: text,
+		type: 'success',
+		showConfirmButton: false,
+  		timer: 2000
+	  }).then(function () {
+	   //  swal( 'Ready?!', 'Your form is going to be submitted.' 'success');
+	   //document.querySelector('#myfrm').submit(); // manully submit 
+	  }).catch(function(timeout) { });
+
+
+	  //TODO: Refresh attentats count
+  });
+
+
+  class Translator {
+	constructor(options = {}) {
+	  this._options = Object.assign({}, this.defaultConfig, options);
+	  this._elements = document.querySelectorAll("[data-i18n]");
+	  this._cache = new Map();
+  
+	  if (this._options.detectLanguage) {
+		this._options.defaultLanguage = this._detectLanguage();
+	  }
+  
+	  if (
+		this._options.defaultLanguage &&
+		typeof this._options.defaultLanguage == "string"
+	  ) {
+		this._getResource(this._options.defaultLanguage);
+	  }
+	}
+  
+	_detectLanguage() {
+	  var stored = localStorage.getItem("language");
+  
+	  if (this._options.persist && stored) {
+		return stored;
+	  }
+  
+	  var lang = navigator.languages
+		? navigator.languages[0]
+		: navigator.language;
+  
+	  return lang.substr(0, 2);
+	}
+  
+	_fetch(path) {
+	  return fetch(path)
+		.then(response => response.json())
+		.catch(() => {
+		  console.error(
+			`Could not load ${path}. Please make sure that the file exists.`
+		  );
+		});
+	}
+  
+	async _getResource(lang) {
+	  if (this._cache.has(lang)) {
+		return JSON.parse(this._cache.get(lang));
+	  }
+  
+	  var translation = await this._fetch(
+		`${this._options.filesLocation}/${lang}.json`
+	  );
+  
+	  if (!this._cache.has(lang)) {
+		this._cache.set(lang, JSON.stringify(translation));
+	  }
+  
+	  return translation;
+	}
+  
+	async load(lang) {
+	  if (!this._options.languages.includes(lang)) {
+		return;
+	  }
+  
+	  this._translate(await this._getResource(lang));
+  
+	  document.documentElement.lang = lang;
+  
+	  if (this._options.persist) {
+		localStorage.setItem("language", lang);
+	  }
+	}
+  
+	async getTranslationByKey(lang, key) {
+	  if (!key) throw new Error("Expected a key to translate, got nothing.");
+  
+	  if (typeof key != "string")
+		throw new Error(
+		  `Expected a string for the key parameter, got ${typeof key} instead.`
+		);
+  
+	  var translation = await this._getResource(lang);
+  
+	  return this._getValueFromJSON(key, translation, true);
+	}
+  
+	_getValueFromJSON(key, json, fallback) {
+	  var text = key.split(".").reduce((obj, i) => obj[i], json);
+  
+	  if (!text && this._options.defaultLanguage && fallback) {
+		let fallbackTranslation = JSON.parse(
+		  this._cache.get(this._options.defaultLanguage)
+		);
+  
+		text = this._getValueFromJSON(key, fallbackTranslation, false);
+	  } else if (!text) {
+		text = key;
+		console.warn(`Could not find text for attribute "${key}".`);
+	  }
+  
+	  return text;
+	}
+  
+	_translate(translation) {
+	  var zip = (keys, values) => keys.map((key, i) => [key, values[i]]);
+	  var nullSafeSplit = (str, separator) => (str ? str.split(separator) : null);
+  
+	  var replace = element => {
+		var keys = nullSafeSplit(element.getAttribute("data-i18n"), " ") || [];
+		var properties = nullSafeSplit(
+		  element.getAttribute("data-i18n-attr"),
+		  " "
+		) || ["innerHTML"];
+  
+		if (keys.length > 0 && keys.length !== properties.length) {
+		  console.error(
+			"data-i18n and data-i18n-attr must contain the same number of items"
+		  );
+		} else {
+		  var pairs = zip(keys, properties);
+		  pairs.forEach(pair => {
+			const [key, property] = pair;
+			var text = this._getValueFromJSON(key, translation, true);
+  
+			if (text) {
+			  element[property] = text;
+			  element.setAttribute(property, text);
+			} else {
+			  console.error(`Could not find text for attribute "${key}".`);
+			}
+		  });
+		}
+	  };
+  
+	  this._elements.forEach(replace);
+	}
+  
+	get defaultConfig() {
+	  return {
+		persist: false,
+		languages: ["de"],
+		defaultLanguage: "",
+		detectLanguage: true,
+		filesLocation: "/i18n"
+	  };
+	}
+  }
+  
+
+  var translator = new Translator({
+	persist: false,
+	languages: ["hr", "de"],
+	defaultLanguage: "hr",
+	detectLanguage: true,
+	filesLocation: "/i18n"
+  });
+  translator.load("hr");
+  
+