Merge pull request #277 from informatik-mannheim/feature/guestAdressI…

…nput split adress iput field
informatik-mannheim · Nov 16, 2021 · 6875ed7 · 6875ed7
2 parents 1df87d8 + 88f8391
commit 6875ed7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/src/main/resources/static/checkInForm.js b/src/main/resources/static/checkInForm.js
@@ -33,11 +33,21 @@ window.addEventListener("pageshow", () => {
         } else {
             storage.removeItem('email');
         }
-
+        if(postFixRadioButtons[3].checked){
+            if(checkForEmptyGuestFields() != ""){
+                ev.preventDefault();
+                document.getElementById("invalid-email-error").getElementsByTagName("h4")[0].innerText = checkForEmptyFields();
+                document.getElementById("invalid-email-error").classList.remove("hidden");
+                return;
+            }
+        }
+        const firstname = document.getElementById("guest-first-name").value ;
+        const surname = document.getElementById("guest-surname").value;
+        const name = firstname +" "+ surname;
         document.getElementById("submit-form-email").value = combinedEmail;
-        document.getElementById("submit-form-name").value = document.getElementById("guest-name").value;
+        document.getElementById("submit-form-name").value = name;
         document.getElementById("submit-form-number").value = document.getElementById("guest-number").value;
-        document.getElementById("submit-form-address").value = document.getElementById("guest-address").value;
+        document.getElementById("submit-form-address").value = address;
     })
 
     document.getElementById("submit-form-checkout").addEventListener("submit", (ev) => {
@@ -85,7 +95,6 @@ window.addEventListener("pageshow", () => {
 
         switch (postfix) {
             case "student":
-                emailText.style.minWidth = "270px"
                 emailText.placeholder = "Matrikelnummer";
                 emailText.type = "number";
                 emailPostfix = "@stud.hs-mannheim.de";
@@ -95,7 +104,6 @@ window.addEventListener("pageshow", () => {
                 }
                 break;
             case "internal":
-                emailText.style.minWidth = "270px"
                 emailText.placeholder = "Nutzername";
                 emailText.type = "text";
                 emailPostfix = "@hs-mannheim.de";
@@ -105,7 +113,6 @@ window.addEventListener("pageshow", () => {
                 }
                 break;
             case "internal2":
-                emailText.style.minWidth = "270px"
                 emailText.placeholder = "Nutzername";
                 emailText.type = "text";
                 emailPostfix = "@lba.hs-mannheim.de";
@@ -116,8 +123,6 @@ window.addEventListener("pageshow", () => {
                 break;
             default:
             case "external":
-                emailText.style.minWidth = "410px"
-                emailText.placeholder = "Vollständige E-Mail";
                 emailText.type = "email";
                 emailPostfix = null;
                 for (let i = 0; i < guestFreeSection.length; i++) {
@@ -129,8 +134,11 @@ window.addEventListener("pageshow", () => {
 
         if (emailPostfix !== null) {
             emailLabel.textContent = emailPostfix;
+            emailLabel.style.paddingLeft = "5px";
+            emailLabel.style.width = "80%";
         } else {
             emailLabel.textContent = "";
+            emailLabel.style.width = "0%";
         }
     }
 
@@ -158,7 +166,27 @@ window.addEventListener("pageshow", () => {
             document.getElementById("submit-form").submit();
         }
     }
-
+    function checkForEmptyGuestFields(){
+        if(document.getElementById("guest-first-name").value == ""){
+            return "Unvollständiger Vorname.";
+        }
+        if(document.getElementById("guest-surname").value == ""){
+            return "Unvollständiger Nachname.";
+        }
+        if(document.getElementById("guest-number").value == ""){
+            return "Ungültige Telefonnummer.";
+        }
+        if(document.getElementById("guest-address-1").value == ""){
+            return "Unvollständige Straßeneingabe.";
+        }
+        if(document.getElementById("guest-address-2").value == ""){
+            return "Unvollständige Ortseingabe.";
+        }
+        if(document.getElementById("guest-address-3").value == ""){
+            return "Unvollständige Ländereingabe.";
+        }
+        return "";
+    }
     // https://stackoverflow.com/a/46181
     function validateEmail(email) {
         const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
@@ -133,6 +133,7 @@ input[type=number].email {
 
 .email {
     font-size: 1em;
+    width: 100%;
 }
 
 /* Hide the increment/decrement buttons on number inputs used for roomPin*/

diff --git a/src/main/resources/templates/rooms/checkIn.html b/src/main/resources/templates/rooms/checkIn.html
@@ -55,15 +55,26 @@ <h3 class="content-header form-header">Anmeldung als ...</h3>
 
                 <h3 class="content-header form-header">Mailadresse eingeben</h3>
                 <div class="form-row" style="margin-left: 24px;">
-                    <input style="min-width: 270px" id="email-text" name="email" type="number" class="email" placeholder="Matrikelnummer" value="" required />
+                    <input id="email-text" name="email" type="number" class="email" placeholder="E-Mail Adresse" value="" required/>
                     <label for="email-text" id="email-text-label">@stud.hs-mannheim.de</label>
                 </div>
-                <div class="guest-free-section form-row" style="max-width: 300px">
-                    <input class="email" id="guest-name" name="guest-name" style="flex-grow: 1" placeholder="Vorname Nachname" />
-                    <input class="email" id="guest-number" name="guest-number" style="margin-left: 12px; flex-grow: 1" placeholder="Telefonnummer" />
+                <div class="guest-free-section form-row">
+                    <input class="email" id="guest-first-name" name="guest-name" style="" placeholder="Vorname"/>
+                </div>
+                <div class="guest-free-section form-row">
+                    <input class="email" id="guest-surname" name="guest-name" style="" placeholder="Nachname"/>
+                </div>
+                <div class="guest-free-section form-row">
+                    <input class="email" id="guest-number" type="number" name="guest-number" placeholder="Telefonnummer"/>
                 </div>
                 <div class="guest-free-section form-row">
-                    <input class="email" id="guest-address" name="guest-address" style="min-width: 410px" placeholder="Adresse"/>
+                    <input class="email" id="guest-address-1" name="guest-address" placeholder="Straße & Hausnummer"/>
+                </div>
+                <div class="guest-free-section form-row">
+                    <input class="email" id="guest-address-2" name="guest-address" placeholder="PLZ & Ort"/>
+                </div>
+                <div class="guest-free-section form-row">
+                    <input class="email" id="guest-address-3" name="guest-address" placeholder="Land" value="Deutschland"/>
                 </div>
                 <div class="form-row checkin-only" style="margin-left: 22px;">
                     <input id="email-auto-sign-in" name="email-auto-sign-in" type="checkbox" />
@@ -86,9 +97,9 @@ <h4 style="margin-left: 24px;">Ungültige E-Mail!</h4>
                     <input id="submit-form-email" name="visitorEmail" type="hidden" value=""/>
                     <input type="hidden" name="privileged" th:value="${privileged}" />
                     <input type="hidden" name="rid" th:field="*{roomId}"/>
-                    <input id="submit-form-name" type="hidden" name="name"/>
-                    <input id="submit-form-address" type="hidden" name="address"/>
-                    <input id="submit-form-number" type="hidden" name="number"/>
+                    <input id="submit-form-name" type="hidden" name="name" value=""/>
+                    <input id="submit-form-address" type="hidden" name="address" value=""/>
+                    <input id="submit-form-number" type="hidden" name="number" value=""/>
                 </div>
             </form>
         </div>
@@ -113,7 +124,6 @@ <h3 class="content-header form-header">Raum zurücksetzen</h3>
 
     <hr style="color: #cccccc; margin-top: 32px;"/>
 -->
-
     <div class="checkin-only" style="margin-top: 32px;">
         <h3 class="content-header">Oder nur vorherigen Check-in beenden?</h3>
         <button style="margin-left: 24px;" id="checkout-button">Abmelden...</button>