report

index.html

@@ -39,7 +39,7 @@
             <option value="B">Business</option>
         </select>
         <label for="pocet-cestujicich">Počet cestujích</label>
-        <input id="pocet-cestujicich" value="1" type="number" min="1" max="9" step="1">
+        <input name="pocetCestujici" id="pocet-cestujicich" value="1" type="number" min="1" max="9" step="1">
 
         <div class="letadlo">
             <div>B1</div>
@@ -53,15 +53,32 @@
         </div>
     </form>
 
-    <script>
-        let sedadla = document.querySelectorAll(".letadlo > div");
+    <div id="report">
+        <p>třída: <span id="zvolena-trida">E</span></p>
+        <p>cestujících: <span id="zvoleny-pocet">1</span></p>
+        <p>sedadla: <span id="zvolena-sedadla">není vybráno</span></p>
+    </div>
 
-        let volbaTridy = document.querySelector("#volba-tridy");
-        volbaTridy.addEventListener("change", function() {
+    <script>
+        function resetSedadel() {
             for (let index = 0; index < sedadla.length; index++) {
                 const element = sedadla[index];
                 element.classList.remove("sedadlo-vyber");
             }
+        }
+
+        let sedadla = document.querySelectorAll(".letadlo > div");
+
+        let volbaTridy = document.querySelector("#volba-tridy");
+        volbaTridy.addEventListener("change", function() {
+            resetSedadel();
+            let trida = document.querySelector("#zvolena-trida");
+            trida.innerText = this.value;
+        });
+
+        let pocetCestujicich = document.querySelector("#pocet-cestujicich");
+        pocetCestujicich.addEventListener("change", function() {
+            resetSedadel();
         });
 
         for (let index = 0; index < sedadla.length; index++) {
@@ -69,9 +86,30 @@
             seat.addEventListener("click", function() {
                 let formdata = new FormData(document.querySelector("form"));
                 if (this.innerText.indexOf(formdata.get("trida")) == 0) {
-                    this.classList.toggle("sedadlo-vyber");
+                    let pocet = document.querySelectorAll(".sedadlo-vyber").length;
+                    if (this.classList.contains("sedadlo-vyber")) {
+                        this.classList.remove("sedadlo-vyber");
+                    }
+                    else {
+                        if (pocet < formdata.get("pocetCestujici")) {
+                            this.classList.add("sedadlo-vyber");
+                        }
+                        else {
+                            alert("Počet sedadel zavisí na počtu cestujících.");
+                        }
+                    }
+                    
+                    let vypis = document.querySelector("#zvolena-sedadla");
+                    vypis.innerText = "";
+                    let sedadla = document.querySelectorAll(".sedadlo-vyber");
+                    for (let s = 0; s < sedadla.length; s++) {
+                        const element = sedadla[s];
+                        vypis.innerText += element.innerText;
+                        if (s + 1 < sedadla.length) {
+                            vypis.innerHTML += ",&nbsp;";
+                        }
+                    }
                 }
-                
             });
         }
     </script>