Skip to content

Refactor the map to vue

Alex requested to merge map-to-vue into master

What does this MR do?

The main map https://foodsharing.de/karte is rewritten in Vue. The behavior is mostly like before.

  • The list of marker types and the marker data itself are kept in a store and can be easily extended in the future. The store takes care of loading only those markers from the server that are needed. It buffers them instead of reloading them each time they are selected in the map's legend.
  • The bubbles are now integrated into the vue component as bootstrap modals (see screenshots).
  • If you open the map from the link on a store page, the store markers will be active and the store bubble opens. The same happens for foodsharepoints if you click on the link on a FSP's page.

TODO:

  • the basket bubble must look different when not logged in. See BasketView::fsBubble. Delete obsolete methods from BasketView and BasketXhr afterwards.
  • the basket map page still uses the old xhr bubble
  • delete obsolete basket xhr methods
  • revert changes from !3307 (merged), !3300 (merged) and !3079 (merged)

How confident are you it won't break things if deployed?

Seems to work. Needs to be tested on different devices to be sure.

Links to related issues

How to test

  1. Checkout branch locally
  2. Open the map at http://localhost:18080/karte and test it
  3. Login as foodsaver
  4. Test the map again

Screenshots (if applicable)

Screenshot_2024-03-22_at_11-09-50_Lebensmittel_teilen_statt_wegwerfen___foodsharing

Screenshot_2024-03-22_at_11-10-33_Lebensmittel_teilen_statt_wegwerfen___foodsharing

Checklist

  • added a test, or explain why one is not needed/possible...
  • no unrelated changes
  • asked someone for a code review
  • set a "for:" label to indicate who will be affected by this change
  • added to the next milestone (see https://gitlab.com/foodsharing-dev/foodsharing/-/milestones, unless it has a "for:Dev" label)
  • added an entry to CHANGELOG.md
  • added a short text in the release notes to /release-notes/YYYY-MM.md
  • Once your MR has been merged, you are responsible to create a testing issue in the Beta Testing forum: https://foodsharing.de/region?bid=734&sub=forum. Please change the MRs label to "state:Beta testing".
    • Consider writing a detailed description in German.
    • Describe in a few sentences, what should be tested from a user perspective.
    • Also mention different settings (e.g. different browsers, roles, ...) how this change can be tested.
    • Be aware, that also non technical people should understand.
Edited by Alex

Merge request reports