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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import { ParkArticle } from "./templateImplementations.js";
import {
fetchAttractions,
displayNumberOfItemsInShoppingBasketWithBadge,
dutchCurrencyFormat,
dutchCurrencyFormatWithSign,
findParent,
killChildren,
getUserGeoLocation,
distanceToUser,
bubbleSort,
} from "./utils.js";
// ik struggle een beetje met de database connecten met de api...
//
// loop ineens tegen de volgende error aan:
const userLocation = await getUserGeoLocation();
function displayArticles(articles) {
console.log("displaying attraction articles");
for (var i = 0; i < articles.length; i++) {
var parkArticle = new ParkArticle(articles[i], document.querySelector("#parkarticle"));
parkArticle.addToNode(document.querySelector("#center-articles"));
}
}
function setStickyNavBar() {
console.log("making the navbar sticky");
// Get the header
var header = document.getElementById("sticky-header");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function makeHeaderStickyWhenScrolling() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
// Sticky navigation bar stuff
//
// When the user scrolls the page, execute myFunction
window.onscroll = function() {makeHeaderStickyWhenScrolling()};
}
function sortAttractionsBasedOn(sorter) {
return async function whenButtonIsClicked(event) {
console.log("sorting attractions")
const main = findParent(parent => {return parent.tagName === "MAIN"})(event.target);
const articlesParent = main.querySelector("#center-articles");
const clickedButton = findParent(parent => {return parent.tagName === "BUTTON"})(event.target);
const sortMenu = findParent(parent => {return parent.id === "sortmenu"})(clickedButton);
const allSortButtons = sortMenu.querySelectorAll("button");
console.log(allSortButtons)
for (let i = 0; i < allSortButtons.length; i++) {
if (!(allSortButtons[i].id === clickedButton.id)) allSortButtons[i].querySelector(".front").textContent = "sort";
}
const frontOfButton = clickedButton.querySelector(".front");
const buttonText = frontOfButton.textContent.trim();
console.log(buttonText.trim())
var compare;
if (buttonText === "ascending") {
compare = (previousElementKey, elementKey) => {return previousElementKey < elementKey}
frontOfButton.textContent = "descending";
} else if (buttonText === "descending") {
compare = (previousElementKey, elementKey) => {return previousElementKey > elementKey}
frontOfButton.textContent = "ascending";
} else {
compare = (previousElementKey, elementKey) => {return previousElementKey > elementKey}
frontOfButton.textContent = "ascending";
}
killChildren(child => {return child.tagName === "ARTICLE"})(articlesParent);
fetchAttractions()
.then(sorter(compare))
.then(displayArticles)
}
}
function priceSorter(compare) {
const sortKey = attraction => {
const adultPrice = attraction.adultPrice;
const kidsPrice = attraction.kidsPrice;
return ((adultPrice + kidsPrice) / 2);
};
return function sorted(attractions) {
console.log("sorting on mean price: ")
console.log(attractions)
return bubbleSort(attractions,
sortKey,
compare
)
}
}
function locationSorter(compare) {
const sortKey = attraction => {
return distanceToUser(userLocation)(attraction.location.lat, attraction.location.lon);
};
return function sorted(attractions) {
console.log("sorting on distance to user: ")
console.log(attractions)
return bubbleSort(attractions,
sortKey,
compare
)
}
}
displayNumberOfItemsInShoppingBasketWithBadge();
setStickyNavBar();
const sortmenu = document.querySelector("#sortmenu");
const priceSortButton = sortmenu.querySelector("#sortprice");
const locationSortButton = sortmenu.querySelector("#sortlocation");
console.log(priceSortButton)
priceSortButton.addEventListener("click", sortAttractionsBasedOn(priceSorter));
locationSortButton.addEventListener("click", sortAttractionsBasedOn(locationSorter));
console.log(sortmenu)
fetchAttractions()
.then(displayArticles);
|
