1 files changed, 88 insertions, 0 deletions
diff --git a/client/src/index.js b/client/src/index.js
index 5743b5e..b904e08 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -7,6 +7,9 @@ import {
     dutchCurrencyFormatWithSign,
     findParent,
     killChildren,
+    getUserGeoLocation,
+    distanceToUser,
+    bubbleSort,
 } from "./utils.js";
 
 
@@ -14,6 +17,8 @@ import {
 //
 // loop ineens tegen de volgende error aan:
 
+const userLocation = await getUserGeoLocation();
+
 function displayArticles(articles) {
     console.log("displaying attraction articles");
 
@@ -48,10 +53,93 @@ function setStickyNavBar() {
 
 }
 
+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)