Skip to content
Snippets Groups Projects
Commit d9b4fd90 authored by Omar Ibrahim Arfa's avatar Omar Ibrahim Arfa
Browse files

implement praktikum 4 aufgabe 1

parent 5434fab3
No related branches found
No related tags found
No related merge requests found
...@@ -102,7 +102,7 @@ class Bestellung extends Page ...@@ -102,7 +102,7 @@ class Bestellung extends Page
foreach ($data as $pizza) { foreach ($data as $pizza) {
echo <<< HTML echo <<< HTML
<label> <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> <br>
{$pizza->getName()}<br> {$pizza->getName()}<br>
{$pizza->getPrice()} {$pizza->getPrice()}
...@@ -110,38 +110,25 @@ class Bestellung extends Page ...@@ -110,38 +110,25 @@ class Bestellung extends Page
<br> <br>
HTML; HTML;
} }
//$selectSize = count($data);
echo <<< HTML echo <<< HTML
<script>getElements();</script>
</section> </section>
<script> getElements(); </script>
<hr> <hr>
<section id="warenkorbSection"> <section id="warenkorbSection">
<h2>Warenkorb</h2> <h2>Warenkorb</h2>
<form accept-charset="UTF-8" action="#" method="post"> <form accept-charset="UTF-8" action="#" method="post">
<label for="warenkorb"></label> <label for="warenkorb"></label>
<select id="warenkorb" multiple name="Pizza[]" disabled > <select id="warenkorb" multiple name="Pizza[]">
HTML;
/*
foreach ($data as $pizza) {
echo <<< HTML
<option value="{$pizza->getArticleId()}">{$pizza->getName()}</option>
HTML;
}
*/
echo <<< HTML
</select> </select>
<p id="sum"></p> <p id="sum"></p>
<label for="address"></label> <label for="address"></label>
<input id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br> <input id="address" name="Adresse" placeholder="Ihre Adresse" type="text" required><br>
<input type="reset" value="Alles Löschen"> <input type="button" value="Alles Löschen" onclick="removeAll();">
<input type="reset" value="Auswahl Löschen"> <input type="button" value="Auswahl Löschen" onclick="removeItem();">
<input type="submit" name="save" value="Bestellen"> <input id="submitButton" type="submit" name="save" value="Bestellen" onclick="selectOrder();">
</form> </form>
</section> </section>
</section> </section>
...@@ -170,7 +157,6 @@ class Bestellung extends Page ...@@ -170,7 +157,6 @@ class Bestellung extends Page
$this->_database->query($orderingQuery); $this->_database->query($orderingQuery);
$orderingID = mysqli_insert_id($this->_database); $orderingID = mysqli_insert_id($this->_database);
if(!isset($_SESSION["orders"])) { if(!isset($_SESSION["orders"])) {
$_SESSION["orders"] = array(); $_SESSION["orders"] = array();
} }
...@@ -225,10 +211,3 @@ class Bestellung extends Page ...@@ -225,10 +211,3 @@ class Bestellung extends Page
// This call is starting the creation of the page. // This call is starting the creation of the page.
// That is input is processed and output is created. // That is input is processed and output is created.
Bestellung::main(); 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").
//? >
pizzaMap = new Map(); pizzaPriceMap = new Map();
function getElements() { function getElements() {
console.log("run getElements()");
"use strict"; "use strict";
let pizzaImages = document.getElementsByClassName("pizzaImage") let pizzaImages = document.getElementsByClassName("pizzaImage")
for (let item of pizzaImages) { for (let item of pizzaImages) {
pizzaMap.set(item.getAttribute("data-articleID"), 0); pizzaPriceMap.set(item.getAttribute("data-articleID"), item.getAttribute("data-price"));
console.log(item.getAttribute("data-articleID") + " " + item.dataset.name);
} }
console.log(pizzaMap);
} }
shoppingCart = new Map();
function addItem(pizza) { function addItem(pizza) {
"use strict"; "use strict";
let articleID = pizza.getAttribute("data-articleID"); let articleID = pizza.getAttribute("data-articleID");
let amount = pizzaMap.get(articleID); let name = pizza.getAttribute("data-name");
amount++; let select = document.getElementById("warenkorb");
pizzaMap.set(articleID, amount); let newOption = document.createElement("option");
newOption.text = name;
if (shoppingCart.has(articleID)) { newOption.value = articleID;
shoppingCart.set(articleID, amount); select.add(newOption);
let option = document.getElementById(articleID); calculateSum();
option.text = pizza.getAttribute("data-name") + " x " + amount; checkInputs();
} 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));
} }
// 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 );
}
*/
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment