Übernachtungsangebot

ReadMe.md

@@ -1,6 +1,10 @@
 
 [localization](https://codesandbox.io/s/i18n-example-ipfeu?from-embed=&file=/i18n/de.json:0-652)
 
+# Run http server:
+
+ngx http-server
+
 
 Thanks for downloading this theme!
 

css/style.css

@@ -1876,4 +1876,45 @@ form label {
   opacity: 0;
 }
 
+.overnight {
+  display: table; 
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.overnight > label {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 20px;
+}
+
+.overnight > input {
+  display: table-cell;
+  padding: 0px;
+  height: 40px;
+  width: 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  border: 2px solid #34495E;
+  border-radius: 4px;
+  outline: none;
+  transition-duration: 0.3s;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.overnight > input:checked {
+  border: 2px solid #34495E;
+  background-color: #F14E95;
+}
+
+.overnight > input:active {
+  border: 3px solid #34495E;
+}
+
 /*# sourceMappingURL=style.css.map */

index.html

@@ -132,41 +132,44 @@
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="firstname" class="sr-only">Vorname</label>
-										<input type="firstname" class="form-control" id="firstname" data-i18n="firstname" data-i18n-attr="placeholder"
+										<input type="firstname" class="form-control js-form-input" id="firstname" data-i18n="firstname" data-i18n-attr="placeholder"
 											placeholder="Vorname">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="lastname" class="sr-only">Nachname</label>
-										<input type="lastname" class="form-control" id="lastname" data-i18n="lastname" data-i18n-attr="placeholder"
+										<input type="lastname" class="form-control js-form-input" id="lastname" data-i18n="lastname" data-i18n-attr="placeholder"
 											placeholder="Nachname">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="tel" class="sr-only">Telefonnummer</label>
-										<input type="telephon" class="form-control" id="tel" data-i18n="telephone_number" data-i18n-attr="placeholder"
+										<input type="telephon" class="form-control js-form-input" id="tel" data-i18n="telephone_number" data-i18n-attr="placeholder"
 											placeholder="Telefonnummer">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="email" class="sr-only">E-Mail Addresse</label>
-										<input type="email" class="form-control" id="email" data-i18n="E-Mail" data-i18n-attr="placeholder"
+										<input type="email" class="form-control js-form-input" id="email" data-i18n="E-Mail" data-i18n-attr="placeholder"
 											placeholder="E-Mail">
 									</div>
 								</div>
 							</div>
 						</form>
 					</div>
-
 					<div class="plus-button col-md-2">
 						<span class="icon">
 							<a href="#" class="js-addField"><i class="icon-plus"></i></a>
 						</span>
 					</div>
 				</div>
+				<div class="row animate-box overnight">
+					<input type="checkbox" id="overnight" name="overnight" checked>
+					<label for="overnight">Übernachtungsangebot</label>
+				</div>
 				<div class="row animate-box">
 					<div class="col-md-4 col-md-offset-4 text-center fh5co-heading">
 						<button type="submit" id="js-submitbtn" data-i18n="submit" class="btn btn-default btn-block">Absenden</button>
@@ -174,11 +177,11 @@
 				</div>
 				<div class="row animate-box" style="margin-top: 50px;">
 					<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
-						<div class="feature-center">
+						<div id="guest_counter_holder" class="feature-center">
 							<span class="icon">
 								<i class="icon-users"></i>
 							</span>
-							<span class="counter js-counter" data-from="0" data-to="500" data-speed="5000"
+							<span id="guest_counter" class="counter js-counter" data-from="0" data-to="500" data-speed="5000"
 								data-refresh-interval="50">1</span>
 							<span class="counter-label" data-i18n="guest_count">Geschätzte Gäste</span>
 						</div>

js/main.js

@@ -187,6 +187,12 @@
 			
 			event.preventDefault();
 
+			if(totalFieldCount >=2)
+			{
+				return;
+			}
+			totalFieldCount++;
+
 			// Container <div> where dynamic content will be placed
 			var container = document.getElementById("js-attentants");
 			// Clear previous contents of the container
@@ -218,6 +224,7 @@
 			var inputElement = document.createElement("input");
 			inputElement.setAttribute("type","firstname");
 			inputElement.classList.add('form-control');
+			inputElement.classList.add('js-form-input');
 			inputElement.setAttribute("id","firstname");
 			let firstname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"firstname");
 			inputElement.setAttribute("placeholder", firstname_placeholder);
@@ -244,6 +251,7 @@
 			var firstNameInputElement = document.createElement("input");
 			firstNameInputElement.setAttribute("type","lastname");
 			firstNameInputElement.classList.add('form-control');
+			firstNameInputElement.classList.add('js-form-input');
 			firstNameInputElement.setAttribute("id","lastname");
 			let lastname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"lastname");
 			firstNameInputElement.setAttribute("placeholder", lastname_placeholder);
@@ -262,8 +270,19 @@
 		$(".fh5co-loader").fadeOut("slow");
 	};
 
-	var counter = function() {
+	var counter = async function() {
+		let res = await fetch("https://localhost:5001/family/familycount", {
+			method: "GET",
+			headers: {
+				'Content-Type': 'application/json'
+			}
+			//body: JSON.stringify(data)
+		});
+		let json = await res.json();
 		$('.js-counter').countTo({
+			from: 0,
+			to: json,
+			speed: 5000,
 			 formatter: function (value, options) {
 	      return value.toFixed(options.decimals);
 	    },
@@ -307,48 +326,162 @@
 }());
 
 document.getElementById("js-submitbtn").addEventListener("click", async function () {
-	//form.submit();
-	//console.log("Hello world!");
-
 	//document.getElementById("js-attentants").elements["foo"]
-	var inputs = document.querySelectorAll('input');
+	let inputs = document.querySelectorAll('.js-form-input');
-	console.log(inputs);
-	console.log("Vorname:" + inputs[0].value);
-	console.log("Nachname:" + inputs[1].value);
-	console.log("Telefon:" + inputs[2].value);
-	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);
+	console.log(inputs);
+
+	let firstname = inputs[0].value;
+	let lastname = inputs[1].value;
+	let telephonenumber = inputs[2].value;
+	let eMail = inputs[3].value;
+
+	if(StringLengthLT2(firstname))
+	{
+		SubmitError("Firstname too short!");
+		return;
 	}
 
-	//Swal.fire("Our First Alert", "With some body text and success icon!", "success");
+	if(StringLengthLT2(lastname))
+	{
+		SubmitError("Lastname too short!");
+		return;
+	}
+
+	if(StringLengthLT2(telephonenumber))
+	{
+		SubmitError("Telephonenumber too short!");
+		return;
+	}
+
+	if(!OnlyNumbersInString(telephonenumber))
+	{
+		SubmitError("Telephonenumber can only contain numbers!");
+		return;	
+	}
+
+	if(StringLengthLT2(eMail))
+	{
+		SubmitError("E-Mail too short!");
+		return;
+	}
+
+	let family = {
+		name: lastname,
+		overnight: true,
+		telephonenumber: telephonenumber,
+		email: eMail,
+		members: []
+	  };
+
+	let familyMember = {
+		name: firstname + " " + lastname,
+		isChild: false
+	}
+
+	family.members.push(familyMember);
+
+	for (let i = 4; i < inputs.length; i+=2) 
+	{
+		let firstname = inputs[i].value;
+		let lastname = inputs[i+1].value;
+		if(StringLengthLT2(firstname))
+		{
+			SubmitError("Firstname of accompaniment too short!");
+			return;
+		}
+		if(StringLengthLT2(lastname))
+		{
+			SubmitError("Lastname of accompaniment too short!");
+			return;
+		}
+		let familyMember = {
+			name: firstname + " " + lastname,
+			isChild: false
+		}
+
+		family.members.push(familyMember);
+	}
+
+	console.log("Request: " + JSON.stringify(family));
 
 	
-	document.getElementById("attentant-container").remove();
+	const response = await fetch("https://localhost:5001/family", {
-	document.getElementById("js-submitbtn").disabled = 'true';
+		method: 'POST', // *GET, POST, PUT, DELETE, etc.
-	document.getElementById("js-submitbtn").textContent = await translator.getTranslationByKey(document.documentElement.lang,"already_participating");
+		mode: 'cors', // no-cors, *cors, same-origin
+		cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+		//credentials: 'same-origin', // include, *same-origin, omit
+		headers: {
+		  'Content-Type': 'application/json'
+		  // 'Content-Type': 'application/x-www-form-urlencoded',
+		},
+		redirect: 'follow', // manual, *follow, error
+		referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+		body: JSON.stringify(family) // body data type must match "Content-Type" header
+	  });
+	if(response.ok)
+	{
+		let jsonResponse = await response.json();
+		console.log("Response: " + jsonResponse);
+		SubmitSuccess();
+	}
+	else
+	{
+		SubmitError();
+	}
+	  //TODO: Refresh attentats count
+  });
 
+  function OnlyNumbersInString(string)
+  {
+	  return /^\d+$/.test(string);
+  }
+
+  function StringLengthLT2(string)
+  {  
+	  return string.length < 2;
+  }
+
+  async function SubmitError(reason) {
+	  let errorText = "Something went wrong...";
+	  if(reason)
+	  {
+		errorText = reason;
+	  }
+	swal({
+		type: 'error',
+		title: 'Oops...',
+		text: errorText,
+	}).then(function () {
+		//  swal( 'Ready?!', 'Your form is going to be submitted.' 'success');
+		//document.querySelector('#myfrm').submit(); // manully submit 
+	}).catch(function (timeout) { });
+	return;
+  }
+
+  async function SubmitSuccess() {
 	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
+		timer: 2000
-	  }).then(function () {
+	}).then(function () {
-	   //  swal( 'Ready?!', 'Your form is going to be submitted.' 'success');
+		//  swal( 'Ready?!', 'Your form is going to be submitted.' 'success');
-	   //document.querySelector('#myfrm').submit(); // manully submit 
+		//document.querySelector('#myfrm').submit(); // manully submit 
-	  }).catch(function(timeout) { });
+	}).catch(function (timeout) { });
 
+	document.getElementById("attentant-container").remove();
+	document.getElementById("js-submitbtn").disabled = 'true';
+	document.getElementById("js-submitbtn").textContent = await translator.getTranslationByKey(document.documentElement.lang,"already_participating");
+	return;
+  }
 
-	  //TODO: Refresh attentats count
-  });
 
 
   class Translator {
@@ -361,6 +494,8 @@ document.getElementById("js-submitbtn").addEventListener("click", async function
 		this._options.defaultLanguage = this._detectLanguage();
 	  }
 
+	  document.documentElement.lang = this._options.defaultLanguage;
+  
 	  if (
 		this._options.defaultLanguage &&
 		typeof this._options.defaultLanguage == "string"
@@ -416,8 +551,6 @@ document.getElementById("js-submitbtn").addEventListener("click", async function
   
 	  this._translate(await this._getResource(lang));
   
-	  document.documentElement.lang = lang;
-  
 	  if (this._options.persist) {
 		localStorage.setItem("language", lang);
 	  }
@@ -506,6 +639,7 @@ document.getElementById("js-submitbtn").addEventListener("click", async function
 	detectLanguage: true,
 	filesLocation: "/i18n"
   });
-  translator.load("hr");
 
+  var totalFieldCount = 0;
 
+  //translator.load();