From 3830330d9196a923b3c6e4c9229c8e6eb7f606d8 Mon Sep 17 00:00:00 2001 From: Justin Dretvic Date: Sun, 14 Jun 2020 17:45:49 +0200 Subject: [PATCH] Upload Aufgabe 07.2 --- .vs/GIS-SoSe-2020/v16/.suo | Bin 0 -> 13824 bytes .vs/VSWorkspaceState.json | 6 + .vs/slnx.sqlite | Bin 0 -> 90112 bytes Aufgaben/Aufgabe_07_2020-06-10/script.js.map | 1 - Aufgaben/Aufgabe_07_2020-06-10/shop.html | 6 +- .../{script.js => shop.js} | 76 ++++++---- Aufgaben/Aufgabe_07_2020-06-10/shop.js.map | 1 + .../{script.ts => shop.ts} | 76 ++++++---- .../Aufgabe_07_2020-06-10/shoppingCart.html | 44 ++++++ .../Aufgabe_07_2020-06-10/shoppingCart.js | 99 +++++++++++++ .../Aufgabe_07_2020-06-10/shoppingCart.js.map | 1 + .../Aufgabe_07_2020-06-10/shoppingCart.ts | 130 ++++++++++++++++++ 12 files changed, 382 insertions(+), 58 deletions(-) create mode 100644 .vs/GIS-SoSe-2020/v16/.suo create mode 100644 .vs/VSWorkspaceState.json create mode 100644 .vs/slnx.sqlite delete mode 100644 Aufgaben/Aufgabe_07_2020-06-10/script.js.map rename Aufgaben/Aufgabe_07_2020-06-10/{script.js => shop.js} (64%) create mode 100644 Aufgaben/Aufgabe_07_2020-06-10/shop.js.map rename Aufgaben/Aufgabe_07_2020-06-10/{script.ts => shop.ts} (67%) create mode 100644 Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html create mode 100644 Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js create mode 100644 Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js.map create mode 100644 Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts diff --git a/.vs/GIS-SoSe-2020/v16/.suo b/.vs/GIS-SoSe-2020/v16/.suo new file mode 100644 index 0000000000000000000000000000000000000000..faea06a2b8518781080eed5fb5f74a8d46fba89b GIT binary patch literal 13824 zcmeI2+jCPz9LKjHDqcYp<)X$~xhT{Yp$ZB@FI*fuI22l)$xEB2C6Kh8gkpK~U-899 z9emUW9A|uS9O1#?Rs9eA2c&+!d(I}C)8zCdjSR`;m-*%F*|WR9{q6p4d%1Ua`(Iz* z-u<_Uz$vrYJXqao9{2KlytLV7%!|A$@4@Qosy-=AvI}iA0+-ApzZ)iH#>@iGqPeB1 zObk2Cmhzl$S+~~r_eX~B_dG?ppI!(Ge+I=xbIn|U`W&e-v$Ae0eu154Q<=Vo-TziE z{RtlsUki@D=q{N&Jt&$iIKfyfp3X~&r{av^-HAx^%)@ja@dx#cZTVwc|HR^3qA)v4{8jzgPO`+ zpvub@NDlOTh3AuDTHm_x=#9X`)c=3xzbotiSFO|khV}0PGTGIC1_5vqDH|d?Al;R1 zcmi~~D_ves|94Pc<+{*bBQT7|TQt{A0dH62nbhww-4^!Ze-!u0r;GC-H~#+|pAUpZ zEz0>&Nv-Bg+ zd&#)SAWKhfm=SuV_$X`tE4?}q`hVvqgI44Jr6;b$DD8^VLfG<@jRI!L{gNIm(vKWe zbC!CAs;h0x0QAL+^e-v@W0ZCFFOL2dsB2_KZ6q{ZA?l_2L;giu;C-r_^!cBFv%H<@ zfX85*=iqpr+@hr%e5u{sA?S-2#Un}Sk5YCZZ0@3&A^IGLT5-)BPnr+HQuQCb&{td} z`q%NrKKhURTe_kxh<>m2?vMW{G-nv;d48JfDLdjB zv`{**KBStU|1r&K?I?)SAEpmk`f#0Se3226&c*fP0ORjs(4_pIg04^yr7wGsp$AK` zS{KyS|Gp;V|0MOC{i#JiurjmsV%FNHxc&?={_@p|jA9`lG0aydsP95@?W8U3!6A&twT_<_CNGnD*xl~TY#$8!M-i7Cxh6ZhUqKDx*W0- z<-fN4`#q^1hog+Yzh0~UTKi40UOo8>D9IBCE8#O}!V>mT-cO!LxjrC&4aeW|*Xo17 z=WHCkmlqB!Q9u4qvbbRN;4E~ft(UBx3DK7=QOufD{$zV)vjuVVC!t(~XT>NpqrTFc+Bt#T~K-Q8>~BeYN5IzkERyHI~Ygj3};BY?mbd z7f-T7iiISTTK{WbU^lo2+zY-6z6QPyrocDAUhqw@4}1&U2kr+CfCs_1!FRwz;9;;I zd>51t9|Vtp?}10bW8e_@J}B>f96SMj2uAtT`x)|w>wNReOSU=@BnOhmW+Qj}WYw~SqqU${lyB)Ms< zrB;-AT2%WJVeTN>*-!mr_Fwb|X)8_L1$v+rfa0Ar9Q@h=Tx85m#zfrw-T~Ycm`lx3 zv18_^guF^V+f!$xv68M5&rI9SNtBBfY{Jow;YPb@1Dr z;3-GUC_f}C@J9#m6PzJlXQs4w5m>i&^rcS9oORP$G~Y3^bQ3L-HWlG1$Es4&cfSLq zPka?^G^pKb?PiO!cC>vu_0Pk>92`}Atb6Yyo&rugW1iNoBM`p?(6hnSr`yL$K&oaD ztv|JYF=p3o=j>YQJbEO{aE@Cs6YO|sFLnZrI&9ZpT7zlM0#N;pfX+>X;VOJGOsLu3 z`twt9YmzWcw!<+u2hUq|WIfzA%b8Sgw=pJSAD>qk+}GTgZnKx0mF z8&12H+C{1ct-E*FEXJaV$@u)PcGsGRK6bCFPjE{{Yj};)AZu;?$3YWau4-=A{%^MZ za`4(0Ki=uPv**v--&TF>zC7|H;O}v|ba(%E?Vh;CrV}A*Jpv23{=G*h*xmad!TFcY zJR~1(T;iURCHFn<{>8(%|1oYZnJajV=sgU7&)D^~*0Y)OSKYsJ=Wn&zY&6f;%SP+A zqI^5kkDfob;r);D9c0ZzlKJf3|EPcdU%7wLHupd5{R5pfC!POl`&)hgsfqg^4c~uw elu~`3Kng0N^kn08j literal 0 HcmV?d00001 diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..6b61141 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000000000000000000000000000000000000..3cc2e275fc600101c075bddddb3b08cd0e44da76 GIT binary patch literal 90112 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 X009sH0T2KI5C8!X009s - + - + green grass @@ -32,7 +32,7 @@
- +
diff --git a/Aufgaben/Aufgabe_07_2020-06-10/script.js b/Aufgaben/Aufgabe_07_2020-06-10/shop.js similarity index 64% rename from Aufgaben/Aufgabe_07_2020-06-10/script.js rename to Aufgaben/Aufgabe_07_2020-06-10/shop.js index 0fc74a4..d0af35f 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/script.js +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.js @@ -1,68 +1,76 @@ "use strict"; // Datensammlung für Produkte -var Aufgabe06; -(function (Aufgabe06) { +var Aufgabe07; +(function (Aufgabe07) { let shoppingPrice = 0; - let shoppingCount = 0; + let shoppingCount = localStorage.length; + if (localStorage.length > 0) + shoppingCount--; + document.querySelector("#shoppingCartNumber").innerHTML = shoppingCount.toLocaleString(); + let jsonObj; communicate("http://127.0.0.1:5500/Aufgaben/Aufgabe_07_2020-06-10/myJSON.json"); async function communicate(_url) { let response = await fetch(_url); - let jsonObj = await response.json(); + jsonObj = await response.json(); console.log("Response", response); - printProducts(100, jsonObj); + printProducts(100); /*console.log(jsonObj); console.log(jsonObj[0].products[2].price); console.log(jsonObj[1].products[3].title);*/ document.querySelector("#special_a").addEventListener("click", drawSpecial); function drawSpecial() { - printProducts(0, jsonObj); + printProducts(0); } document.querySelector("#bunt_a").addEventListener("click", drawBunt); function drawBunt() { - printProducts(1, jsonObj); + printProducts(1); } document.querySelector("#grün_a").addEventListener("click", drawGrün); function drawGrün() { - printProducts(2, jsonObj); + printProducts(2); } document.querySelector("#all_a").addEventListener("click", drawAll); function drawAll() { - printProducts(100, jsonObj); + printProducts(100); } } - Aufgabe06.communicate = communicate; + Aufgabe07.communicate = communicate; + updateShoppingCount(); + function updateShoppingCount() { + shoppingCount = localStorage.length - 1; + } //printProducts(100); //console.log(jsonObj[1].products[3].title); //create Structure; - function printProducts(_catNumber, _jsonObj) { - clearProducts(_jsonObj); + function printProducts(_catNumber) { + clearProducts(); let catCheck = false; if (_catNumber != 100) catCheck = true; else _catNumber = 0; - for (let nummer = _catNumber; nummer < _jsonObj.length; nummer++) { + for (let nummer = _catNumber; nummer < jsonObj.length; nummer++) { let heading = document.createElement("h1"); - heading.setAttribute("id", _jsonObj[nummer].id); - heading.innerHTML = `${_jsonObj[nummer].title}`; + heading.setAttribute("id", jsonObj[nummer].id); + heading.innerHTML = `${jsonObj[nummer].title}`; document.querySelector("#übersicht").appendChild(heading); let container = document.createElement("div"); container.classList.add("container"); document.querySelector("#übersicht").appendChild(container); - for (let index = 0; index < _jsonObj[nummer].products.length; index++) { + for (let index = 0; index < jsonObj[nummer].products.length; index++) { let product = document.createElement("div"); product.classList.add("product"); product.innerHTML = ` -

${_jsonObj[nummer].products[index].title}

+

${jsonObj[nummer].products[index].title}

- ${_jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - + ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ +
- Product -

Size: ${_jsonObj[nummer].products[index].size}

+ Product +

Size: ${jsonObj[nummer].products[index].size}

-

${_jsonObj[nummer].products[index].description}

+

${jsonObj[nummer].products[index].description}

`; container.appendChild(product); @@ -72,29 +80,41 @@ var Aufgabe06; } addShoppingFunction(); } - function clearProducts(_jsonObj) { - console.log("Ich wurde geklickt"); - for (let nummer = 0; nummer < _jsonObj.length; nummer++) { + function clearProducts() { + for (let nummer = 0; nummer < jsonObj.length; nummer++) { let alles = document.querySelector("#übersicht"); alles.innerHTML = ""; } } function money(_event) { let target = _event.target; - let price = parseFloat(target.getAttribute("productPrice")); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price = jsonObj[parseInt(target.getAttribute("categoryNumber"))].products[parseInt(target.getAttribute("productIndex"))].price; console.log("Artikel-Preis: " + price + " ¥"); shoppingPrice += price; console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); shoppingCount++; document.querySelector("#shoppingCartNumber").innerHTML = shoppingCount.toLocaleString(); } + function addLocal(_event) { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } + else { + localStorage.shoppingCount = 1; + } + let target = _event.target; + let shoppingProduct = jsonObj[parseInt(target.getAttribute("categoryNumber"))].products[parseInt(target.getAttribute("productIndex"))]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct)); + } function addShoppingFunction() { const buttons = document.getElementsByClassName("addProduct"); for (const button of buttons) { button.addEventListener("click", money); + button.addEventListener("click", addLocal); } } -})(Aufgabe06 || (Aufgabe06 = {})); +})(Aufgabe07 || (Aufgabe07 = {})); // Folgender auskommentierter Code dient mir als Archiv für Gedankenansätze oder Verläufe. // Wenn dies nicht gerne gesehen ist, gebt mir kurz Bescheid und ich werde es entfernen /* @@ -137,4 +157,4 @@ let myJSON: string = JSON.stringify(categories); JSON.stringify(categories); console.log(myJSON); */ -//# sourceMappingURL=script.js.map \ No newline at end of file +//# sourceMappingURL=shop.js.map \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shop.js.map b/Aufgaben/Aufgabe_07_2020-06-10/shop.js.map new file mode 100644 index 0000000..a0ea595 --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.js.map @@ -0,0 +1 @@ +{"version":3,"file":"shop.js","sourceRoot":"","sources":["shop.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/script.ts b/Aufgaben/Aufgabe_07_2020-06-10/shop.ts similarity index 67% rename from Aufgaben/Aufgabe_07_2020-06-10/script.ts rename to Aufgaben/Aufgabe_07_2020-06-10/shop.ts index 08b2c50..44bccf2 100644 --- a/Aufgaben/Aufgabe_07_2020-06-10/script.ts +++ b/Aufgaben/Aufgabe_07_2020-06-10/shop.ts @@ -1,9 +1,15 @@ // Datensammlung für Produkte -namespace Aufgabe06 { +namespace Aufgabe07 { let shoppingPrice: number = 0; - let shoppingCount: number = 0; + let shoppingCount: number = localStorage.length; + if ( localStorage.length > 0) + shoppingCount --; + + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + + let jsonObj: Category[]; export interface Product { title: string; @@ -23,9 +29,9 @@ namespace Aufgabe06 { export async function communicate(_url: RequestInfo): Promise { let response: Response = await fetch(_url); - let jsonObj: Category[] = await response.json(); + jsonObj = await response.json(); console.log("Response", response); - printProducts(100, jsonObj); + printProducts(100); /*console.log(jsonObj); console.log(jsonObj[0].products[2].price); @@ -33,62 +39,68 @@ namespace Aufgabe06 { (document.querySelector("#special_a")).addEventListener("click", drawSpecial); function drawSpecial(): void { - printProducts(0, jsonObj); + printProducts(0); } (document.querySelector("#bunt_a")).addEventListener("click", drawBunt); function drawBunt(): void { - printProducts(1, jsonObj); + printProducts(1); } (document.querySelector("#grün_a")).addEventListener("click", drawGrün); function drawGrün(): void { - printProducts(2, jsonObj); + printProducts(2); } (document.querySelector("#all_a")).addEventListener("click", drawAll); function drawAll(): void { - printProducts(100, jsonObj); + printProducts(100); } } + updateShoppingCount(); + + function updateShoppingCount(): void { + shoppingCount = localStorage.length - 1; + } + //printProducts(100); //console.log(jsonObj[1].products[3].title); //create Structure; - function printProducts(_catNumber: number, _jsonObj: Category[]): void { + function printProducts(_catNumber: number): void { - clearProducts(_jsonObj); + clearProducts(); let catCheck: boolean = false; if (_catNumber != 100) catCheck = true; - else + else _catNumber = 0; - for (let nummer: number = _catNumber; nummer < _jsonObj.length; nummer++) { + for (let nummer: number = _catNumber; nummer < jsonObj.length; nummer++) { let heading: HTMLHeadingElement = document.createElement("h1"); - heading.setAttribute("id", _jsonObj[nummer].id); - heading.innerHTML = `${_jsonObj[nummer].title}`; + heading.setAttribute("id", jsonObj[nummer].id); + heading.innerHTML = `${jsonObj[nummer].title}`; (document.querySelector("#übersicht")).appendChild(heading); let container: HTMLDivElement = document.createElement("div"); container.classList.add("container"); (document.querySelector("#übersicht")).appendChild(container); - for (let index: number = 0; index < _jsonObj[nummer].products.length; index++) { + for (let index: number = 0; index < jsonObj[nummer].products.length; index++) { let product: HTMLDivElement = document.createElement("div"); product.classList.add("product"); product.innerHTML = ` -

${_jsonObj[nummer].products[index].title}

+

${jsonObj[nummer].products[index].title}

- ${_jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ - + ${jsonObj[nummer].products[index].price.toFixed(2).toLocaleString()} ¥ +
- Product -

Size: ${_jsonObj[nummer].products[index].size}

+ Product +

Size: ${jsonObj[nummer].products[index].size}

-

${_jsonObj[nummer].products[index].description}

+

${jsonObj[nummer].products[index].description}

`; container.appendChild(product); @@ -99,9 +111,8 @@ namespace Aufgabe06 { addShoppingFunction(); } - function clearProducts(_jsonObj: Category[]): void { - console.log("Ich wurde geklickt"); - for (let nummer: number = 0; nummer < _jsonObj.length; nummer++) { + function clearProducts(): void { + for (let nummer: number = 0; nummer < jsonObj.length; nummer++) { let alles: HTMLDivElement = (document.querySelector("#übersicht")); alles.innerHTML = ""; } @@ -109,7 +120,8 @@ namespace Aufgabe06 { function money(_event: Event): void { let target: HTMLElement = (_event.target); - let price: number = parseFloat(target.getAttribute("productPrice")!); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; console.log("Artikel-Preis: " + price + " ¥"); shoppingPrice += price; console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); @@ -117,10 +129,22 @@ namespace Aufgabe06 { (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); } + function addLocal(_event: Event): void { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } else { + localStorage.shoppingCount = 1; + } + let target: HTMLElement = (_event.target); + let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct) ); + } + function addShoppingFunction(): void { const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); for (const button of buttons) { button.addEventListener("click", money); + button.addEventListener("click", addLocal); } } } @@ -166,7 +190,7 @@ console.log(theName); */ -/* +/* let myJSON: string = JSON.stringify(categories); JSON.stringify(categories); console.log(myJSON); diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html new file mode 100644 index 0000000..3c8c2e8 --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + green grass + + + +
+
+ grass + GREEN GRASS + grass +
+ +
+ +
+ +
+ +
+ Current Price: + Hello +
+ + +
+

Disclaimer

+

This website is not used monetarily

+

Not even if things seem to be sold here!

+
+ + + \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js new file mode 100644 index 0000000..4486e3c --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js @@ -0,0 +1,99 @@ +"use strict"; +var Aufgabe07; +(function (Aufgabe07) { + let shoppingPrice = 0; + if (localStorage.length > 0) + printProducts(); + //showPrice(); + //printProducts(100); + //console.log(jsonObj[1].products[3].title); + //create Structure; + function printProducts() { + //clearProducts(); + shoppingPrice = 0; + let container = document.createElement("div"); + container.classList.add("container"); + document.querySelector("#übersicht").appendChild(container); + for (let iterator = 0; iterator < localStorage.length; iterator++) { + if (localStorage.key(iterator) == "shoppingCount") + continue; + let zeug = JSON.parse(localStorage.getItem(localStorage.key(iterator))); + let product = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${zeug.title}

+
+ ${zeug.price} ¥ + +
+ Product +

Size: ${zeug.size}

+
+

${zeug.description}

+
+ `; + container.appendChild(product); + /*let shoppingPrice: HTMLSpanElement = (document.querySelector("#showPrice")); + myPrice += zeug.price; + shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥"; + //alles.innerHTML = "";*/ + fixPrice(zeug.price); + } + document.querySelector("#removeAllItems").addEventListener("click", clearLocalStorage); + addRemoveFunction(); + } // zeug.price.toFixed(2).toLocaleString() + //addShoppingFunction(); + function clearLocalStorage() { + localStorage.clear(); + document.querySelector("#übersicht").innerHTML = ""; + } + function removeItem(_event) { + let target = _event.target; + //let price: number = parseFloat(target.getAttribute("productPrice")!); + //let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")))}`); + document.querySelector("#übersicht").innerHTML = ""; + printProducts(); + } + function addRemoveFunction() { + const buttons = document.getElementsByClassName("removeProduct"); + for (const button of buttons) { + button.addEventListener("click", removeItem); + } + } + function fixPrice(_price) { + shoppingPrice += _price; + let shoppingPriceEle = document.querySelector("#showPrice"); + shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥"; + } + /*function money(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + console.log("Artikel-Preis: " + price + " ¥"); + shoppingPrice += price; + console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); + shoppingCount++; + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + } + + function removeLocal(_event: Event): void { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } else { + localStorage.shoppingCount = 1; + } + let target: HTMLElement = (_event.target); + let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct)); + } + + function addShoppingFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); + for (const button of buttons) { + button.addEventListener("click", money); + button.addEventListener("click", removeLocal); + } + }*/ +})(Aufgabe07 || (Aufgabe07 = {})); +//# sourceMappingURL=shoppingCart.js.map \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js.map b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js.map new file mode 100644 index 0000000..cbd5682 --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.js.map @@ -0,0 +1 @@ +{"version":3,"file":"shoppingCart.js","sourceRoot":"","sources":["shoppingCart.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts new file mode 100644 index 0000000..d5b6ce9 --- /dev/null +++ b/Aufgaben/Aufgabe_07_2020-06-10/shoppingCart.ts @@ -0,0 +1,130 @@ + +namespace Aufgabe07 { + + let shoppingPrice: number = 0; + //let shoppingCount: number = 0; + + export interface Product { + title: string; + price: number; + size: string; + imgName: string; + description: string; + } + + export interface Category { + title: string; + id: string; + products: Product[]; + } + + if (localStorage.length > 0) + printProducts(); + //showPrice(); + + //printProducts(100); + //console.log(jsonObj[1].products[3].title); + + //create Structure; + + function printProducts(): void { + + //clearProducts(); + shoppingPrice = 0; + + let container: HTMLDivElement = document.createElement("div"); + container.classList.add("container"); + (document.querySelector("#übersicht")).appendChild(container); + + for (let iterator: number = 0; iterator < localStorage.length; iterator++) { + if (localStorage.key(iterator)! == "shoppingCount") + continue; + let zeug: Product = JSON.parse(localStorage.getItem(localStorage.key(iterator)!)!); + let product: HTMLDivElement = document.createElement("div"); + product.classList.add("product"); + product.innerHTML = ` +

${zeug.title}

+
+ ${zeug.price} ¥ + +
+ Product +

Size: ${zeug.size}

+
+

${zeug.description}

+
+ `; + container.appendChild(product); + + /*let shoppingPrice: HTMLSpanElement = (document.querySelector("#showPrice")); + myPrice += zeug.price; + shoppingPrice.innerHTML = myPrice.toLocaleString() + " ¥"; + //alles.innerHTML = "";*/ + fixPrice(zeug.price); + } + (document.querySelector("#removeAllItems")).addEventListener("click", clearLocalStorage); + addRemoveFunction(); + } // zeug.price.toFixed(2).toLocaleString() + //addShoppingFunction(); + + function clearLocalStorage(): void { + localStorage.clear(); + (document.querySelector("#übersicht")).innerHTML = ""; + } + + function removeItem(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + //let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + localStorage.removeItem(`${localStorage.key(parseInt(target.getAttribute("itemIndex")!)!)}`); + (document.querySelector("#übersicht")).innerHTML = ""; + printProducts(); + } + + function addRemoveFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("removeProduct"); + for (const button of buttons) { + button.addEventListener("click", removeItem); + } + } + + function fixPrice(_price: number): void { + shoppingPrice += _price; + let shoppingPriceEle: HTMLSpanElement = (document.querySelector("#showPrice")); + shoppingPriceEle.innerHTML = shoppingPrice.toLocaleString() + " ¥"; + } + + + + + + /*function money(_event: Event): void { + let target: HTMLElement = (_event.target); + //let price: number = parseFloat(target.getAttribute("productPrice")!); + let price: number = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)].price; + console.log("Artikel-Preis: " + price + " ¥"); + shoppingPrice += price; + console.log("Shopping-Cart-Preis: " + shoppingPrice + " ¥"); + shoppingCount++; + (document.querySelector("#shoppingCartNumber")).innerHTML = shoppingCount.toLocaleString(); + } + + function removeLocal(_event: Event): void { + if (localStorage.shoppingCount) { + localStorage.shoppingCount = Number(localStorage.shoppingCount) + 1; + } else { + localStorage.shoppingCount = 1; + } + let target: HTMLElement = (_event.target); + let shoppingProduct: Product = jsonObj[parseInt(target.getAttribute("categoryNumber")!)].products[parseInt(target.getAttribute("productIndex")!)]; + localStorage.setItem(`${shoppingProduct.title}`, JSON.stringify(shoppingProduct)); + } + + function addShoppingFunction(): void { + const buttons: HTMLCollectionOf = document.getElementsByClassName("addProduct"); + for (const button of buttons) { + button.addEventListener("click", money); + button.addEventListener("click", removeLocal); + } + }*/ +} \ No newline at end of file