diff --git a/ReadMe.md b/ReadMe.md index ff8b965..6eacaef 100644 --- a/ReadMe.md +++ b/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! diff --git a/css/style.css b/css/style.css index f4a1039..f2141e7 100644 --- a/css/style.css +++ b/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 */ diff --git a/index.html b/index.html index fe0ec84..0e0d92d 100644 --- a/index.html +++ b/index.html @@ -132,41 +132,44 @@
-
-
-
-
-
+
+ + +
@@ -174,11 +177,11 @@
-
+
- 1 Geschätzte Gäste
diff --git a/js/main.js b/js/main.js index c95ed98..370a314 100644 --- a/js/main.js +++ b/js/main.js @@ -187,6 +187,12 @@ event.preventDefault(); + if(totalFieldCount >=2) + { + return; + } + totalFieldCount++; + // Container
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'); - 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) { + let inputs = document.querySelectorAll('.js-form-input'); - 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(); - document.getElementById("js-submitbtn").disabled = 'true'; - document.getElementById("js-submitbtn").textContent = await translator.getTranslationByKey(document.documentElement.lang,"already_participating"); + const response = await fetch("https://localhost:5001/family", { + method: 'POST', // *GET, POST, PUT, DELETE, etc. + 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 - }).then(function () { - // swal( 'Ready?!', 'Your form is going to be submitted.' 'success'); - //document.querySelector('#myfrm').submit(); // manully submit - }).catch(function(timeout) { }); + timer: 2000 + }).then(function () { + // swal( 'Ready?!', 'Your form is going to be submitted.' 'success'); + //document.querySelector('#myfrm').submit(); // manully submit + }).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 { @@ -360,6 +493,8 @@ document.getElementById("js-submitbtn").addEventListener("click", async function if (this._options.detectLanguage) { this._options.defaultLanguage = this._detectLanguage(); } + + document.documentElement.lang = this._options.defaultLanguage; if ( this._options.defaultLanguage && @@ -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"); - - \ No newline at end of file + + var totalFieldCount = 0; + + //translator.load();