jrmgx / trailodysseyopen Goto Github PK

Trail Odyssey is a website that allows you to plan hikes from A to Z. Including: creation of the path ; planning the hike ; preparing your bag ; live use during the hike ; and finally share with your friends.

Home Page: https://jerome.gangneux.net/2024/04/15/trail-odyssey/

License: Apache License 2.0

PHP 53.94% JavaScript 17.89% CSS 4.15% Twig 24.02%

trailodysseyopen's Introduction

Trail Odyssey

This introduction comes from my blog

What is Trail Odyssey?

It’s a website that allows you to plan hikes from A to Z.

And what do I mean by that:

The creation of the path itself, that is to say importing GPX or creating routes (even if needed by tracing point-to-point segments), managing your base maps.
Planning the hike, namely placing the stages, studying altitudes, looking for points of interest (water or viewpoint for example).
Preparing your bag, including weight management.
Export of the final GPX to import it into external apps if necessary.
Live use during the hike, with offline display of the current stage, GPS for position, elevation, progress in real time.
And finally share photos of the itinerary with a public version for your friends.

Technical choices

Trail Odyssey is developed for mobile first.

It is also a “web app” which includes these features in particular:

Offline map.
Installable on mobile.

More technical details in the form of keywords: PHP, Symfony, Javascript, Turbo, LeafletJS, BoostrapCSS, PWA, Mobile First.

Technical Concepts

Stage and Routing relation

-----------
| Stage A |
-----------
  !__ Routing AB __
                  !
            -----------
            | Stage B |
            -----------

Stage have two dates:

arriving at (the date and time where you plan to arrive at this destination)
leaving at (the date and time where you plan to leave from this destination)

Stage have 0, 1 or 2 routing(s):

routing in
routing out

Routing have two stages:

start stage
finish stage

So in this schema:

Stage A has one routing out: Routing AB
Routing AB has two stages; start stage: Stage A and finish stage: Stage B
Stage B has one routing in: Routing AB

Other concepts

Mappable is anything that can be shown on the map

TODO

Explain: the use of turbo frames templates
Explain: Load JS on DOMContentLoaded and re-used when Turbo frame is re-rendered via {{ stimulus_js_load_start('diaryController', first_load is defined and first_load) }}

Installation

Prerequisite

Adds 127.0.0.1 trailodyssey.test into your /etc/hosts file
Install castor

First time install

castor infra:build There nothing to build for now but still
castor infra:up
castor infra:install
castor dev:load-fixture For dev

Head up to https://trailodyssey.test and you should have a running instance!

Day to day commands

castor up to start the project
castor down to stop the project

See castor for other commands

Some screens

Public: Display of photos with the position on the map, mobile first (but a desktop version exists)

Public: Public sharing home page with mileage and bag summary

Planning: Display of the different stages, elevation differences, desired dates and times. Desktop version (available in mobile)

Path: display of paths coming either from multiple GPXs, or from routes traced by hand or via the tool integrated into Trail Odyssey. Desktop version (available in mobile)

Live: Display of the current stage with real-time GPS position, elevation and progress in percentage

Main page with all hikes

Equipment page, with the list of equipment. From this page, you can add elements (with their weight) to find them in bag management later

"Diary" part which allows you to add geotagged photos and texts, for the public version

Bag management: Adding items, managing multiple bags, bags within bags and total weight. The checkboxes allow you to prepare your bag and not forget anything.

Resources

Licence

Code, and assets are under Apache License 2.0

Contributing

Trail Odyssey aims to be an Open Source, community-driven project. Join us by contributing code or documentation.

trailodysseyopen's People

Contributors

Stargazers

Watchers

trailodysseyopen's Issues

Add activity pub and/or RSS on diary publish

The idea is that people could follow certain trips and get updates in real time if the user allows it

it could also be emails

see https://pubkit.net/

When putting tiles offline move the progress bar to the top not bottom

For now the progress bar is at the bottom, it would be nicer if it was at the top

Make the switch to map action/icon sticky in mobile

On mobile to switch from sidebar to map there is an icon 🌍 it could be sticky now that our sidebar tabs are sticky

Sidebar could be hidden with a toggle on desktop

It would be nice to be able to toggle/hide/show the sidebar in desktop mode

Click on stage number in live does not show the details of the stage

In live mode we have the numbers representing the stages, and we can not click on it to see the popin with the details (we can in others views)

Plan / Interest tab should be sticky

Drop the local from the URL

Do not forget to handle duplicate/canonical URLs

GPS did not work on older iOS

on a specific device the geolocation did not work

When showing a public trip, add anchor to each step so it can be shared to that one in particular

When using search on plan, show the result on the map

For now only a text list will show, but it is not handy we don't know where the point will be

Offline does not really work

When saving the bookmarklet to iOS home screen and trying to load the page in plane mode, safari will ask to connect to internet.
It has worked before when the bookmarklet did not point to the trip but to the whole site

Add geolocation "on demand" on plan

Right now only the live screen has geolocation, it would be nice to have an action to ask for geolocation in plan

Colours are not enough to find which is which segment in path mode

In edit path mode we can see all the segment in different colours, but it is not enough to spot which is which

A reflexion should be made for other possibilities, more colours would not be a good solution IMHO

Add a CI for test / cs and preprod deploy

Rework z index ordering on map elements

Some important elements can be hidden by less important ones

the GPS position point (the blue dot) should always be on top of anything
the stage marker should be on top of the diary marker
the diary marker should be on top of the interest marker

Actions on sidebar should be sticky on bottom

For now the actions in sidebar are at the bottom of it and if to many items are shown you must scroll down. It would be nice that those actions be sticky instead

When a tile returns an error show an error tile

Sometimes the request to get a tile can fail, either because of an error (401, 403, 50x) or because the zoom level is too much (404)

We should display a special tile like the "offline" one to show that error back (a tile for each code would be nice)

Add an action to mark a trip as finished

On the diary screen we have an option to mark progress, we should add some other action to mark the trip as finished (progress to max)

Add a loader when uploading photos on diary

When adding photos on the diary page, after clicking submit nothing happen as if it does not work, but it does it only needs a loader

Display interest maker in live mode

Something is buggy with timezones

When switching stage in live the elevation is not updated

In public when showing a text only diary entry make it bigger

For now, it is too small and we can do something more adapted with big responsive text filling the whole space

Allow to have registration open/closed with a flag

When clicking on a stage on the map, highlight it on the sidebar

Actions on page should be sticky on bottom

For now the actions in page are at the bottom of it and if to many items are shown you must scroll down. It would be nice that those actions be sticky instead

Full documentation for end user

The idea it to have a part of the website where the user can access the documentation of each feature (to be done)

Convert yml translation file to xliff

With the sum of kilometres for a trip show elevation sum too

In a few places (public, and plan) on the website we can read the sum of kilometres for the trip, it would be nice to add the positive and negative sum info too.

Make a listing of public trip for users

This implies:

the user must have a nickname (unique)
the trip could have a customizable slug (unique) with a sensible good default

When we duplicate a trip, duplicate related tiles too

Add "double tap" to zoom on each maps

For now "double tap" to zoom is only activated on live, it should be present on each screen that show a map

Maybe not on public?

Move the compass info from button to GPS point

For now the compass info is shown on a button on the map, it would be better to have the info on the GPS point itself

It would be perfect if no action would be needed to have it started too (not sure if it is possible due to OS restriction)

Performance optimization with JavaScript

It seems that showing elevation is slow (live view and plan view)

Performance problem on loading tiles

When panning the map, zooming etc. at some point sooner than later, the tile would stop loading, the whole thing will be stuck for something like 10/20 seconds and then everything get back to normal.

On the server side there is no performance problem, nginx seems to be configured ok to handle many requests.

It almost looks like it is a browser issue. The problem seems to be worst on Firefox than Chrome.

Investigation is welcome