blob: 5767a84232041878fb9aabb004bc27657fcfda74 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import { dutchCurrencyFormat, dutchCurrencyFormatWithSign } from "./utils.js"
import { fetchAttractions } from "./functions.js"
/**
* Abstract class
*
*
* @class TemplatedNode
*/
class TemplatedNode {
constructor(json, template) {
// console.log(json);
for (const [key, value] of Object.entries(json)) {
this[key] = value;
}
this.template = template;
}
addToNode(node) {
throw new Error("Method 'addToNode' node be implemented.");
}
}
export class Order extends TemplatedNode {
addToNode(node, orderFunctionality) {
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
var clone = this.template.content.cloneNode(true);
// console.log(clone);
clone.querySelector(".parkname").textContent = this.name;
clone.querySelector(".numberofkids").textContent = "Kids: " + this.numberOfKids;
clone.querySelector(".numberofadults").textContent = "Adults: " + this.numberOfAdults;
var priceString = "Total: " + dutchCurrencyFormatWithSign(this.price.total);
if (this.price.discount) {
priceString = priceString + " discount: " + dutchCurrencyFormatWithSign(this.price.discount);
}
clone.querySelector(".price").textContent = priceString;
clone.querySelector("button").addEventListener("click", orderFunctionality.cancel);
node.appendChild(clone);
}
}
export class ParkArticle extends TemplatedNode {
addToNode(node, parkArticleFunctionality) {
const clone = this.cloneTemplateAndFillInHTML(parkArticleFunctionality);
node.appendChild(clone);
}
toHTML(parkArticleFunctionality) {
return this.cloneTemplateAndFillInHTML(parkArticleFunctionality);
}
cloneTemplateAndFillInHTML(parkArticleFunctionality) {
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
var clone = this.template.content.cloneNode(true);
this.clone = clone;
var cloneChildren = clone.querySelectorAll("div");
for (var i = 0; i < cloneChildren.length; i++) {
// console.log(cloneChildren[i].className);
var element = cloneChildren[i];
var className = element.className;
var text = element.textContent;
if (className === "parkname") {
element.textContent = this.name;
}
if (className === "parkdescription") {
element.textContent = this.description;
}
if (className === "adultprice") {
element.querySelector(".price").textContent = dutchCurrencyFormat(this.adultPrice);
}
if (className === "kidsprice") {
element.querySelector(".price").textContent = dutchCurrencyFormat(this.kidsPrice);
}
if (className === "discountrequirement") {
element.querySelector(".adults").textContent = this.minimumNumberOfAdults;
element.querySelector(".child").textContent = this.minimumNumberOfKids;
}
}
var button = clone.querySelector(".orderbutton");
parkArticleFunctionality.disableButton(this.name, button)(null);
var inputElements = clone.querySelectorAll("input");
for (let i = 0; i < inputElements.length; i++) {
inputElements[i].addEventListener("input", parkArticleFunctionality.displayTotal);
inputElements[i].addEventListener("input", parkArticleFunctionality.disableButton(this.name, button));
}
return clone;
}
}
|
