Processing OutdoorActive weekly suggested walking routes and displaying a catalogue

OutdooActive is a mobile app and website that I use for walking and cycling. You can set up your own routes, record tracks, get access to great maps. But they also have shared routes that you can use. Some from magazines and other organisations, many published by individuals.

One of the things I get with my subscription is a weekly set of 3 suggested walking routes within easy distance of home. This is OK, but I now have over 90 of them and so they are hard to use.

I started using a function node to process the emails in my inbox. Using some helper node.js libraries:

This allowed me to scrape the route summaries from the email and store in a retained global variable.

But then I realised that I really wanted to be able to sort and filter the catalogue by distance from the house! The data for the starting position of each route is on the website but not in the email summary. So now, I take each new entry and grab the content of the linked web page, then analyse that to grab the description, starting position and difficulty rating.

Now I have an object that looks like this:

And, of course, I want to visualise that data - which is where UIBUILDER comes in. In this case, I am building a single-page app using UIBUILDER and its built-in front-end router library that contains all manner of useful information such as various dashboards, controls, to-do list, etc. And added to it is the catalogue of walks.

That table is currently manually created in the front-end. With the help of GitHub Copilot, coding gets a lot more interesting. In this case, I needed to calculate a simple, straight line distance from the house - Claude Sonnet gave me a function to do that with minimal work from me. You can see the distance in 2nd column of the table.

Now I have te basics, I will probably replace my quick manual table with a library that will add filtering, paging, etc. Unless, that is, I get my act together with my web components library and improve my table component :wink:

Still working on things so not sharing the flows here right now. Let me know if you use the OutdoorActive app and would like to do this for yourself.