From 52ceaac7a5a03b2286b09b923d16d9bc610619a4 Mon Sep 17 00:00:00 2001 From: stomarfaa <8613-stomarfaa@users.noreply.code.fbi.h-da.de> Date: Fri, 19 Jan 2024 00:06:56 +0100 Subject: [PATCH] finish prak4 --- src/Praktikum/Prak4/JS/BestellScript.js | 29 ++-- .../Prak4/JS/DEPRECATED/OrderData.js | 59 +++++++ src/Praktikum/Prak4/JS/Kunde.js | 155 +++++++++++------- 3 files changed, 174 insertions(+), 69 deletions(-) create mode 100644 src/Praktikum/Prak4/JS/DEPRECATED/OrderData.js diff --git a/src/Praktikum/Prak4/JS/BestellScript.js b/src/Praktikum/Prak4/JS/BestellScript.js index b25c805..36a827e 100644 --- a/src/Praktikum/Prak4/JS/BestellScript.js +++ b/src/Praktikum/Prak4/JS/BestellScript.js @@ -1,9 +1,12 @@ -pizzaPriceMap = new Map(); +let pizzaPriceMap = new Map(); function getElements() { "use strict"; - let pizzaImages = document.getElementsByClassName("pizzaImage") + let pizzaImages = document.getElementsByClassName("pizzaImage"); for (let item of pizzaImages) { - pizzaPriceMap.set(item.getAttribute("data-articleID"), item.getAttribute("data-price")); + pizzaPriceMap.set( + item.getAttribute("data-articleID"), + item.getAttribute("data-price") + ); } } @@ -56,13 +59,13 @@ function selectOrder() { function checkInputs() { "use strict"; - const selectInput = document.getElementById('warenkorb'); - const address = document.getElementById('address'); - const button = document.getElementById('submitButton'); + 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() !== ''; + const addressHasValue = address.value.trim() !== ""; // Enable or disable the button button.disabled = !(selectHasOptions && addressHasValue); @@ -72,12 +75,10 @@ function checkInputs() { window.onload = function init() { "use strict"; - document.getElementById('address').addEventListener('input', checkInputs); + document.getElementById("address").addEventListener("input", checkInputs); }; -document.addEventListener('DOMContentLoaded', checkInputs); // Check on page load - - - - - +document.addEventListener( + "DOMContentLoaded", + checkInputs +); // Check on page load diff --git a/src/Praktikum/Prak4/JS/DEPRECATED/OrderData.js b/src/Praktikum/Prak4/JS/DEPRECATED/OrderData.js new file mode 100644 index 0000000..a8a8b68 --- /dev/null +++ b/src/Praktikum/Prak4/JS/DEPRECATED/OrderData.js @@ -0,0 +1,59 @@ +class OrderData { + + constructor(orderingID, address, pizzaObj) { + + this.orderingID = orderingID; + this.address = address; + this.pizzaObj = pizzaObj; + this.buildOrder(); + + } + + + buildOrder() { + + let orderMainNode = document.createElement("fieldset"); + orderMainNode.id = this.orderingID; + + let orderLegend = document.createElement("legend"); + orderLegend.id = this.orderingID + ".legend"; + + orderMainNode.append(orderLegend); + + this.buildPizza(orderMainNode) + } + + buildPizza(orderMainNode) { + let pizzaList = this.pizzaObj.pizzaList; + for (let pizza of pizzaList) { + let pizzaName = pizza.name; + let orderedArticleID = pizza.orderedArticleID; + let pizzaStatus = pizza.status; + let pizzaNode = document.createElement("fieldset"); + let pizzaLegend = document.createElement("legend"); + pizzaNode.id = "pizzaNode." + orderedArticleID; + pizzaLegend.innerText = "Pizza " + pizzaName; + pizzaNode.append(pizzaLegend); + this.buildInputs(pizzaNode, orderedArticleID, pizzaStatus); + orderMainNode.append(pizzaNode); + } + } + + buildInputs(pizzaNode, orderedArticleID, status) { + let statusArray = ["Bestellt", "Im Ofen", "Fertig", "Unterwegs", "Geliefert"]; + for (let value = 0; value < 5; value++) { + let inputLabel = document.createElement("label"); + pizzaNode.append(inputLabel); + inputLabel.innerText = statusArray[value]; + let inputRadio = document.createElement("input"); + inputLabel.append(inputRadio); + inputRadio.type = "radio"; + inputRadio.name = orderedArticleID; + inputRadio.value = value.toString(); + inputRadio.disabled = true; + if (value === status) { + inputRadio.checked = true; + } + } + } +} diff --git a/src/Praktikum/Prak4/JS/Kunde.js b/src/Praktikum/Prak4/JS/Kunde.js index 0d84dfb..4421843 100644 --- a/src/Praktikum/Prak4/JS/Kunde.js +++ b/src/Praktikum/Prak4/JS/Kunde.js @@ -1,104 +1,149 @@ -console.log("Loading Kunde.js ..."); - function loadData() { "use strict"; var url = "./Kundenstatus.php"; var request = new XMLHttpRequest(); - request.open('GET', url, true); + request.open("GET", url, true); request.onload = function () { - if (request.readyState === 4 && request.status >= 200 && request.status < 300) { + if (request.readyState === 4 && + request.status >= 200 && + request.status < 300) { if (request.responseText != null) { var responseData = JSON.parse(request.responseText); + console.log(responseData); process(responseData); + } else { + console.error ("Dokument ist leer"); } - console.error ("Dokument ist leer"); - } - else { - - console.error('Statuscode: ' + request.status); + } else { + console.error("Statuscode: " + request.status); } }; request.onerror = function () { "use strict"; - console.error('Netzwerkfehler') + console.error("Netzwerkfehler"); }; //request.onreadystatechange = processData; request.send(); } -//TODO: Make classes for Bestllung HTML Node and Pizza HTML Node -function process(data) { - "use strict"; - - let orderForm = document.getElementById("orderForm"); - let emptyBestellung = document.getElementById("bestellung"); - let emptyPizza = document.getElementById("pizza"); +const newScript = document.createElement("script"); +newScript.src = "./JS/OrderData.js"; +newScript.type = "module"; +document.getElementsByTagName("body")[0].prepend(newScript); - // Kopiere die Vorlage - let copyBestellung = emptyBestellung.cloneNode(true); - let copyPizza = emptyPizza.cloneNode(true); - copyBestellung = copyBestellung.cloneNode(true); - // Lösche die Vorlage - emptyBestellung.remove(); - emptyPizza.remove(); - for (let [orderingID, order] of Object.entries(data)) { - - let address = order["Address"]; +function process(data) { - orderForm.append(copyBestellung); - copyBestellung = copyBestellung.cloneNode(true); + "use strict"; - let newBestellung = orderForm.lastElementChild; - newBestellung.id = "bestellung." + orderingID; - newBestellung.firstElementChild.id = "bestellung.legend." + orderingID; - newBestellung.firstElementChild.innerText = "Bestellung " + orderingID; - newBestellung.lastElementChild.remove(); // lösche mitkopierte emptyPizza + const orderForm = document.getElementById("orderForm"); + if (orderForm != null) { - let orderList = order["OrderList"] - for (let [orderedArticleID, pizza] of Object.entries(orderList)) { + while (orderForm.lastElementChild) { + orderForm.removeChild(orderForm.lastElementChild); + } - let name = pizza["Name"]; - let price = pizza["Price"]; - let status = pizza["Status"]; - newBestellung.append(copyPizza); - copyPizza = copyPizza.cloneNode(true); + for (let [orderingID, order] of Object.entries(data)) { - let newPizza = newBestellung.lastElementChild; - newPizza.id = "pizza." + orderedArticleID; - newPizza.firstElementChild.id = "pizza.legend." + orderedArticleID; - newPizza.firstElementChild.innerText = "Pizza " + name; + let pizzaObj = { + pizzaList: [] + }; - let inputs = newPizza.getElementsByTagName("input"); - for (let input of inputs) { + //orderForm.append(testBuildOrder(orderingID)); - input.name = orderedArticleID; + let orderList = order["OrderList"] + for (let [orderedArticleID, pizza] of Object.entries(orderList)) { - // Places the checked-attribute for the individual pizza - if (input.type === "radio" && parseInt(input.value) === parseInt(status)) { + let name = pizza["Name"]; + let price = parseFloat(pizza["Price"]); + let status = parseInt(pizza["Status"]); - input.checked = true; - } + let newPizza = { + orderedArticleID: orderedArticleID, + name: name, + price: price, + status: status + }; + pizzaObj.pizzaList.push(newPizza); } - + buildOrder(orderForm, orderingID, pizzaObj); } + } } - window.onload = function () { + "use strict"; loadData(); +} + +window.setInterval (loadData, 2000); + + +function buildOrder(parentNode, id, pizzaObj) { + "use strict"; + let orderMainNode = document.createElement("fieldset"); + orderMainNode.id = id; + + let orderLegend = document.createElement("legend"); + orderLegend.id = id + ".legend"; + orderLegend.innerText = "Bestellung " + id; + + orderMainNode.append(orderLegend); + buildPizza(orderMainNode, pizzaObj); + + parentNode.append(orderMainNode); +} + +function buildPizza(orderMainNode, pizzaObj) { + "use strict"; + let pizzaList = pizzaObj.pizzaList; + for (let pizza of pizzaList) { + + let pizzaName = pizza.name; + let orderedArticleID = pizza.orderedArticleID; + let pizzaStatus = pizza.status; + + let pizzaNode = document.createElement("fieldset"); + let pizzaLegend = document.createElement("legend"); + pizzaNode.id = "pizzaNode." + orderedArticleID; + pizzaLegend.innerText = "Pizza " + pizzaName; + pizzaNode.append(pizzaLegend); + buildInputs(pizzaNode, orderedArticleID, pizzaStatus); + orderMainNode.append(pizzaNode); + } +} + +function buildInputs(pizzaNode, orderedArticleID, status) { + "use strict"; + let statusArray = [ + "Bestellt", "Im Ofen", "Fertig", + "Unterwegs", "Geliefert" + ]; + for (let value = 0; value < 5; value++) { + let inputLabel = document.createElement("label"); + pizzaNode.append(inputLabel); + inputLabel.innerText = statusArray[value]; + let inputRadio = document.createElement("input"); + inputLabel.append(inputRadio); + inputRadio.type = "radio"; + inputRadio.name = orderedArticleID; + inputRadio.value = value.toString(); + inputRadio.disabled = true; + if (value === status) { + inputRadio.checked = true; + } + } } -window.setInterval (loadData, 2000); \ No newline at end of file -- GitLab