GitHub Pages Deployment

I deployed the app to GitHub pages.

I encountered one issue: The images were not loading, because GitHub page URLs end with the name of the repository, so the root of the app is not at / but on /<Repository-Name>. The path of my images were preceded with a / which is incorrect when the root is not at /. Removing the / resolved the issue.

Plant Details & UI Tweaks

Plants can now be clicked on, showing a details menu on the right with details and a tip for growing the plant.

I had troubles with the CSS of the legend at the bottom right corner which is positioned absolutely: The library used to make the panels resizable sets position: relative during dragging, causing the legend to be in an incorrect position only during dragging. I fixed the issue with some clever div wrapping.

Bookmarking + Refactoring

Users can now bookmark the plants they want to see. Bookmarked plants save in localStorage.

Moreover, there is now an empty state when there are no plants to show due to filters.

I also did some refactoring and simplified the code here and there.

For my Angular learning goal: I learnt how to use effect(), which seems to do basically the same as the useEffect() hook in React.

Calendar Rebuild

I rewrote the calendar from an SVG graphic to a table, and added some basic filtering.

Since my goal with this project is to learn Angular this was a nice opportunity to try signal forms. I also created a service for plant-related utility functions.

Next I want to allow users to only show plants they are interested in.

Gantt Diagram

I want to use a Gantt Diagram to show when to sow and when to harvest plants. I decided to make this chart with a generated SVG graphic but that was a mistake: Calculating the position of each element (text, rectangle, line) is really fragile and styling the diagram further is painful.

I want to re-do the diagram with a html table, which can be styled a lot easier.