Gulum/weddingapiPage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Übernachtungsangebot

Browse Source
This commit is contained in:
Julian
2022-02-12 21:00:56 +01:00
parent de5a039995
commit 01e9a263e6
4 changed files with 218 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ReadMe.md
View File

@@ -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!

41
css/style.css
View File

@@ -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 */

17
index.html
View File

@@ -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>

188
js/main.js
View File

@@ -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');
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 {
@@ -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();