implement praktikum 4 aufgabe 1

src/Praktikum/Prak4/Bestellung.php

@@ -102,7 +102,7 @@ class Bestellung extends Page
         foreach ($data as $pizza) {
             echo <<< HTML
                 <label>
-                        <img class="pizzaImage" alt="Image of Pizza {$pizza->getName()}" src="{$pizza->getPicture()}" data-articleID="{$pizza->getArticleId()}" data-name="{$pizza->getName()}" data-price="{$pizza->getPrice()}" onclick="addItem(this)">
+                        <img class="pizzaImage" alt="Image of Pizza {$pizza->getName()}" src="{$pizza->getPicture()}" data-articleID="{$pizza->getArticleId()}" data-name="{$pizza->getName()}" data-price="{$pizza->getPrice()}" onclick="addItem(this);">
                         <br>
                         {$pizza->getName()}<br>
                         {$pizza->getPrice()}€
@@ -110,38 +110,25 @@ class Bestellung extends Page
                 <br>
             HTML;
         }
-        //$selectSize = count($data);
+
         echo <<< HTML
-                
+                <script>getElements();</script>
                 </section>
-                <script> getElements(); </script>
                 <hr>
                 <section id="warenkorbSection">
                     <h2>Warenkorb</h2>
                     <form accept-charset="UTF-8" action="#" method="post">
                         <label for="warenkorb"></label>
-                        <select id="warenkorb" multiple name="Pizza[]" disabled >
-        HTML;
-
-        /*
-        foreach ($data as $pizza) {
-            echo <<< HTML
-                              
-                              <option value="{$pizza->getArticleId()}">{$pizza->getName()}</option>
-
-            HTML;
-        }
-        */
-        echo <<< HTML
+                        <select id="warenkorb" multiple name="Pizza[]">
                         </select>
                     
                         <p id="sum"></p>
             
                         <label for="address"></label>
                         <input id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
-                        <input type="reset" value="Alles Löschen">
-                        <input type="reset" value="Auswahl Löschen">
-                        <input type="submit" name="save" value="Bestellen">
+                        <input type="button" value="Alles Löschen" onclick="removeAll();">
+                        <input type="button" value="Auswahl Löschen" onclick="removeItem();">
+                        <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
                     </form>
                 </section>
             </section>
@@ -170,7 +157,6 @@ class Bestellung extends Page
             $this->_database->query($orderingQuery);
             $orderingID = mysqli_insert_id($this->_database);
 
-
             if(!isset($_SESSION["orders"])) {
                 $_SESSION["orders"] = array();
             }
@@ -225,10 +211,3 @@ class Bestellung extends Page
 // This call is starting the creation of the page.
 // That is input is processed and output is created.
 Bestellung::main();
-
-// Zend standard does not like closing php-tag!
-// PHP doesn't require the closing tag (it is assumed when the file ends).
-// Not specifying the closing ? >  helps to prevent accidents
-// like additional whitespace which will cause session
-// initialization to fail ("headers already sent").
-//? >

src/Praktikum/Prak4/JS/BestellScript.js

-pizzaMap = new Map();
+pizzaPriceMap = new Map();
 function getElements() {
-    console.log("run getElements()");
     "use strict";
     let pizzaImages = document.getElementsByClassName("pizzaImage")
     for (let item of pizzaImages) {
-        pizzaMap.set(item.getAttribute("data-articleID"), 0);
-        console.log(item.getAttribute("data-articleID") + " " + item.dataset.name);
+        pizzaPriceMap.set(item.getAttribute("data-articleID"), item.getAttribute("data-price"));
     }
-    console.log(pizzaMap);
 }
 
-
-shoppingCart = new Map();
 function addItem(pizza) {
     "use strict";
     let articleID = pizza.getAttribute("data-articleID");
-    let amount = pizzaMap.get(articleID);
-    amount++;
-    pizzaMap.set(articleID, amount);
-
-    if (shoppingCart.has(articleID)) {
-        shoppingCart.set(articleID, amount);
-        let option = document.getElementById(articleID);
-        option.text = pizza.getAttribute("data-name") + " x " + amount;
-
-    } else {
-        shoppingCart.set(articleID, amount);
-        let newOption = document.createElement("option")
-        newOption.id = articleID;
-        newOption.text = pizza.getAttribute("data-name") + " x " + amount;
-        newOption.value = articleID;
-        document.getElementById("warenkorb").add(newOption);
-    }
-    console.log("ANZAHL: " + pizzaMap.get(articleID));
+    let name = pizza.getAttribute("data-name");
+    let select = document.getElementById("warenkorb");
+    let newOption = document.createElement("option");
+    newOption.text = name;
+    newOption.value = articleID;
+    select.add(newOption);
+    calculateSum();
+    checkInputs();
 }
 
-// Bei jedem addItem() wird das jeweilige Option verworfen und neu erstellt (um anzahl zu aktualisieren)
-
-
-
-
+function calculateSum() {
+    "use strict";
+    let select = document.getElementById("warenkorb");
+    let price = 0;
+    for (let item of select.options) {
+        price += parseFloat(pizzaPriceMap.get(item.value));
+    }
+    document.getElementById("sum").innerText = price.toFixed(2) + " €";
+}
 
+function removeItem() {
+    "use strict";
+    let select = document.getElementById("warenkorb");
+    select.remove(select.selectedIndex);
+    calculateSum();
+    checkInputs();
+}
 
+function removeAll() {
+    "use strict";
+    let select = document.getElementById("warenkorb");
+    select.options.length = 0;
+    calculateSum();
+    checkInputs();
+}
 
+function selectOrder() {
+    "use strict";
+    let select = document.getElementById("warenkorb");
+    for (let option of select.options) {
+        option.selected = true;
+    }
+}
 
+function checkInputs() {
+    "use strict";
+    const selectInput = document.getElementById('warenkorb');
+    const address = document.getElementById('address');
+    const button = document.getElementById('submitButton');
 
+    // Check conditions
+    const selectHasOptions = selectInput.options.length > 0;
+    const addressHasValue  = address.value.trim() !== '';
 
+    // Enable or disable the button
+    button.disabled = !(selectHasOptions && addressHasValue);
+}
 
+//--- LISTENERS
 
+window.onload = function init() {
+    document.getElementById('address').addEventListener('input', checkInputs);
+};
+document.addEventListener('DOMContentLoaded', checkInputs); // Check on page load
 
 
-/*
 
-const s = function addItem(pizza)  {
 
-    console.log("Bestellt " + pizza.dataset.name + " " + pizza.dataset.price );
 
-    let tempPizza = pizza.dataset;
-    orderMap.set(tempPizza, orderMap.get(tempPizza) + 1 );
 
-}
-*/