Improved rendering

afoeder · Jun 11, 2024 · c651461 · c651461
1 parent b0f0898
commit c651461
Show file tree

Hide file tree

Showing 5 changed files with 926 additions and 228 deletions.
diff --git a/amex-dining-credit/fetch.js b/amex-dining-credit/fetch.js
@@ -3,9 +3,7 @@
 // handy command line infos: https://nodejs.org/en/learn/command-line/output-to-the-command-line-using-nodejs
 
 const fs = require('node:fs');
-
-console.log(process.env["PLACES_API_KEY"]);
-return;
+const util = require('node:util');
 
 function amexMerchantsToPlaces(amexApiMerchants) {
     return amexApiMerchants.flatMap(amexMerchant => {
@@ -22,13 +20,13 @@ function amexMerchantsToPlaces(amexApiMerchants) {
             "address": amexMerchant.address,
             "zip": amexMerchant.postcode,
             "city": amexMerchant.city.title,
-            "googlePlaceTextQuery": `${amexMerchant.name}, ${amexMerchant.address}, ${amexMerchant.postcode} ${amexMerchant.city.title}`,
+            //"googlePlaceTextQuery": `${amexMerchant.name}, ${amexMerchant.address}, ${amexMerchant.postcode} ${amexMerchant.city.title}`,
+            "assumedLocation": amexMerchant.googleMapsUrl.match(/@(?<lat>-?\d+(?:\.\d+)?),(?<lon>-?\d+(?:\.\d+)?)/)?.groups ?? null,
             "amexRaw": amexMerchant,
         }
     });
 }
 
-
 const placesPromises =
     ["GB"].map(async function(country) {
             const amexApiMerchants = await (

diff --git a/amex-dining-credit/index.html b/amex-dining-credit/index.html
@@ -15,8 +15,8 @@ <h1>AMEX Dining Credit restaurants</h1>
 
     <nav>
         <ul id="country-chooser" style="display: flex; gap: .5rem; list-style-type: none; padding: 0;">
-            <li><a href="#DE" data-center="{ lat: 51.163375, lng: 10.447683 }">DE</a></li>
-            <li><a href="#GB" data-center="{ lat: 54.00366, lng: -2.547855 }">GB</a></li>
+            <li><a href="#DE" data-lat="51.163375" data-lng="10.447683">DE</a></li>
+            <li><a href="#GB" data-lat="54.00366" data-lng="-2.547855">GB</a></li>
         </ul>
     </nav>
 </header>
@@ -33,6 +33,33 @@ <h1>AMEX Dining Credit restaurants</h1>
 </script>
 <script>
 !function() {
+
+    function amexMerchantsToPlaces(amexApiMerchants) {
+        return amexApiMerchants.flatMap(amexMerchant => {
+            if (amexMerchant.isMerchantGroup) {
+                // this happens when there is a "merchantGroup";
+                // like Gordon Ramsey etc. Those have a sub node in ".merchants"
+                // that again look like the merchants on the first level.
+                // We have to make a recursion here (yay), like:
+                console.log("Merchant group!", amexMerchant.name);
+                return amexMerchantsToPlaces(amexMerchant.merchants);
+            }
+            let assumedLocation =
+                amexMerchant.googleMapsUrl.match(/@(?<lat>-?\d+(?:\.\d+)?),(?<lon>-?\d+(?:\.\d+)?)/)?.groups ?? null;
+            if (assumedLocation?.lat) assumedLocation.lat = parseFloat(assumedLocation.lat);
+            if (assumedLocation?.lon) assumedLocation.lon = parseFloat(assumedLocation.lon);
+            return {
+                "name": amexMerchant.name,
+                "address": amexMerchant.address,
+                "zip": amexMerchant.postcode,
+                "city": amexMerchant.city.title,
+                //"googlePlaceTextQuery": `${amexMerchant.name}, ${amexMerchant.address}, ${amexMerchant.postcode} ${amexMerchant.city.title}`,
+                "assumedLocation": assumedLocation,
+                //"amexRaw": amexMerchant,
+            }
+        });
+    }
+
     let map;
 
     async function initMap() {
@@ -47,74 +74,32 @@ <h1>AMEX Dining Credit restaurants</h1>
 
     initMap();
 
-    async function amexApiItemToPlace(item, country) {
-        const {Place} = await google.maps.importLibrary("places");
-
-        const request = {
-            //@see https://developers.google.com/maps/documentation/javascript/place-search#example
-            textQuery: `${item.name}, ${item.address}, ${item.postcode} ${item.city.title}`,
-            fields: ["id", "name", "location"],
-            includedType: "restaurant",
-            maxResultCount: 1,
-            region: country,
-            useStrictTypeFiltering: false,
-        };
-        //const {places} = await Place.searchByText(request);
-        let place = null;
-        if (places.length === 1) {
-            place = {location: places[0].location, name: places[0].displayName}
-        } else {
-            console.warn(`Places result for ${request.textQuery} is !== 1, places found:`, places)
-        }
-
-        return {
-            "name": item.name,
-            "place": place,
-            "amexApiRaw": item
-        }
-    }
-
     async function fillMarkers(country = "DE") {
         const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 
         let merchantsJson;
         let cachedMerchantsData = localStorage.getItem("amex-dining-merchants-"+country);
         if (!cachedMerchantsData) {
             console.debug("No merchants info found in LocalStorage for "+country+", fetching from remote");
-            const amexApiMerchants =
-                await (
-                    await fetch(
-                        `https://dining-offers-prod.amex.r53.tuimedia.com/api/country/${country}/merchants`))
-                        .json();
-            let mapped = amexApiMerchants.map(async (item) => {
-                if (item.isMerchantGroup) {
-                    // @todo: this happens when there is a "merchantGroup";
-                    // we have to make a recursion here (yay), like:
-                    // self.append(item.merchants)
-                    console.log("Merchant group!", item.name, item.merchants);
-                    return item.merchants.map(async (item) => {
-                        return await amexApiItemToPlace(item, country)
-                    });
-                }
-                return await amexApiItemToPlace(item, country);
-            });
-            debugger;
-            merchantsJson = await Promise.all(mapped);
-            console.log(merchantsJson);
-            debugger;
+            const amexApiMerchants = await (
+                await fetch(
+                    `https://dining-offers-prod.amex.r53.tuimedia.com/api/country/${country}/merchants`))
+                .json();
+            merchantsJson = amexMerchantsToPlaces(amexApiMerchants);
             localStorage.setItem("amex-dining-merchants-"+country, JSON.stringify(merchantsJson));
         } else {
             merchantsJson = JSON.parse(cachedMerchantsData);
         }
         console.info("merchants for "+country+":", merchantsJson);
+
         merchantsJson.forEach(item => {
-            if (!item.place) {
+            if (!item.assumedLocation) {
                 return;
             }
             new AdvancedMarkerElement({
                 map,
-                position: item.place.location,
-                title: item.place.name,
+                position: { lat: item.assumedLocation.lat, lng: item.assumedLocation.lon },
+                title: item.name,
             });
         });
     }
@@ -125,10 +110,9 @@ <h1>AMEX Dining Credit restaurants</h1>
 
     const language = link.getAttribute("href").match(/(?<=#)[A-Z]{2}/).at(0);
     fillMarkers(language);
+    map.panTo({lat: parseFloat(link.dataset.lat), lng: parseFloat(link.dataset.lng)});
 });
 
-    //fillMarkers("DE");
-
 }();
 </script>