From d9b4fd90ff44c73f7b25318979e304ff264cb55c Mon Sep 17 00:00:00 2001 From: stomarfaa <8613-stomarfaa@users.noreply.code.fbi.h-da.de> Date: Tue, 16 Jan 2024 19:44:13 +0100 Subject: [PATCH] implement praktikum 4 aufgabe 1 --- src/Praktikum/Prak4/Bestellung.php | 35 ++-------- src/Praktikum/Prak4/JS/BestellScript.js | 93 +++++++++++++++---------- 2 files changed, 63 insertions(+), 65 deletions(-) diff --git a/src/Praktikum/Prak4/Bestellung.php b/src/Praktikum/Prak4/Bestellung.php index db5fe64..34d4745 100644 --- a/src/Praktikum/Prak4/Bestellung.php +++ b/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"). -//? > diff --git a/src/Praktikum/Prak4/JS/BestellScript.js b/src/Praktikum/Prak4/JS/BestellScript.js index 8f6136b..fb601bc 100644 --- a/src/Praktikum/Prak4/JS/BestellScript.js +++ b/src/Praktikum/Prak4/JS/BestellScript.js @@ -1,63 +1,82 @@ -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 ); -} -*/ -- GitLab