Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
6b37508f66
|
|||
|
8106009677
|
|||
|
07489c43a4
|
|||
|
a4e375cb51
|
|||
|
b680769eac
|
|||
|
4a609c8388
|
|||
|
cfcaaea3ec
|
|||
|
2f440d4971
|
|||
|
1c6cbe6b0f
|
|||
|
bdd5db157c
|
@@ -1,156 +1,74 @@
|
|||||||
# Project Status: Marco
|
# Project Status: Marco
|
||||||
|
|
||||||
**Last Updated:** Tue Feb 24 2026
|
**Last Updated:** Wed Mar 18 2026
|
||||||
|
|
||||||
## Project Context
|
## Project Context
|
||||||
|
|
||||||
We are building **Marco**, a decentralized maps application using **Ember.js** (Octane/Polaris edition with GJS/GLIMMER), **Vite**, and **OpenLayers**. The core feature is storing place bookmarks in **RemoteStorage.js**, using a custom module structure.
|
We are building **Marco**, a decentralized maps application using **Ember.js** (Octane/Polaris), **Vite**, and **OpenLayers**. The core feature is storing place bookmarks in **RemoteStorage.js**.
|
||||||
|
|
||||||
## What We Have Done
|
## What We Have Done
|
||||||
|
|
||||||
### 1. Map Integration
|
### 1. Map Integration
|
||||||
|
|
||||||
- Set up OpenLayers in `app/components/map.gjs` (class-based component).
|
- **Vector Tiles:** Using **OpenFreeMap Liberty** style with a hybrid click handler (Visual Tiles + Overpass API fallback).
|
||||||
- Switched tiles to **OpenFreeMap Liberty** style (supports vector POIs).
|
- **Smart Interaction:**
|
||||||
- Implemented a hybrid click handler:
|
- **Hit Tolerance:** 10px buffer for easier mobile tapping.
|
||||||
- Detects clicks on visual vector tiles.
|
- **Auto-Pan:** Selected pins automatically center in the visible area (respecting bottom sheets/sidebars).
|
||||||
- Falls back to fetching authoritative data from an **Overpass API** service.
|
- **Smart Zoom:** `zoomToBbox` fits complex geometries (ways/relations) with dynamic padding, only zooming out to fit.
|
||||||
- **Logic Upgrade:** Map intelligently detects if _any_ sidebar/pane is open and handles outside clicks to close them instead of initiating new searches.
|
- **Visuals:** Custom "Red Pin" overlay with drop animation. Selected OSM ways/relations show distinct blue outlines.
|
||||||
- **Optimization:** Added **10px hit tolerance** for easier tapping on mobile devices.
|
- **Geolocation:** Robust "Locate Me" with dynamic zoom and accuracy visualization.
|
||||||
- **Visuals:** Increased bookmark marker size (Radius 9px) and added a subtle drop shadow.
|
|
||||||
- **Feedback:** Implemented a "pulse" animation (via OpenLayers Overlay) at the click location to visualize the search radius (30m/50m).
|
|
||||||
- **Mobile UX:**
|
|
||||||
- **Touch:** Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
|
|
||||||
- **Scroll:** Disabled "pull-to-refresh" (`overscroll-behavior: none`) on the body to prevent accidental reloads while keeping the sidebar scrollable (`contain`).
|
|
||||||
- **Auto-Pan:** On mobile screens, if a selected pin is obscured by the bottom sheet, the map automatically pans to center the pin in the visible top half of the screen.
|
|
||||||
- **Controls:** Fixed positioning of "Locate" and "Rotate" buttons on mobile by correcting CSS `inset` syntax.
|
|
||||||
- **iOS Polish:**
|
|
||||||
- Prevented input auto-zoom by ensuring `.form-control` font size is `1rem` (16px).
|
|
||||||
- Added `-webkit-text-size-adjust: 100%` to prevent text inflation on rotation.
|
|
||||||
- Set base `body` font size to `16px`.
|
|
||||||
- **Geolocation ("Locate Me"):**
|
|
||||||
- Implemented a "Locate Me" button with robust tracking logic.
|
|
||||||
- **Dynamic Zoom:** Automatically zooms to a level where the accuracy circle covers ~10% of the map (fallback logic handles missing accuracy data).
|
|
||||||
- **Smart Pulse:** Displays a pulsing blue circle during the search phase.
|
|
||||||
- **Auto-Stop:** Pulse and tracking automatically stop when high accuracy (≤20m) is achieved or after a 10s timeout.
|
|
||||||
- **Persistence:** Saves and restores map center and zoom level using `localStorage` (key: `marco:map-view`).
|
|
||||||
- **Controls:** Enabled standard OpenLayers Rotate control (re-north) and custom Locate control.
|
|
||||||
- **Pin Animation:** Selected pins are highlighted with a custom **Red Pin** overlay that drops in with an animation. The center dot is styled as a solid dark red circle (`#b31412`).
|
|
||||||
- **Smart Zoom:** Implemented `zoomToBbox` to automatically fit complex geometries (ways/relations) within the visible viewport.
|
|
||||||
- **Dynamic Padding:** Calculates padding based on active UI elements (Sidebar on Desktop, Bottom Sheet on Mobile) to ensure the geometry is perfectly centered in the _visible_ map area.
|
|
||||||
- **Data Processing:** `OsmService` now calculates bounding boxes for ways and relations by aggregating member node coordinates.
|
|
||||||
- **Geometry Rendering:**
|
|
||||||
- **Outlines:** Implemented distinct blue outlines for selected OSM `ways` (Polygons) and `relations` (MultiLineStrings/Polygons) to clearly visualize boundaries.
|
|
||||||
- **Data Fetching:** Enhanced routing to fetch full geometry data on-demand if the initial search result (e.g., from Photon) lacks it, ensuring outlines are always available.
|
|
||||||
|
|
||||||
### 2. RemoteStorage Module (`@remotestorage/module-places`)
|
### 2. RemoteStorage Module (`@remotestorage/module-places`)
|
||||||
|
|
||||||
- Created a custom TypeScript module in `vendor/remotestorage-module-places/`.
|
- **Custom Module:** Handles `place` objects with Geohash-based partitioning (`<2-char>/<2-char>/<id>`).
|
||||||
- **Schema:** `place` object containing `id` (ULID), `title`, `lat`, `lon`, `geohash`, `osmId`, `url`, etc.
|
- **Optimization:** Supports efficient spatial querying via prefix loading.
|
||||||
- **Storage Path:** Nested `<2-char>/<2-char>/<id>` (based on geohash) for scalability.
|
- **Lists Support:** Manages collection-based organization (e.g., "To Visit", "Favorites").
|
||||||
- **API:**
|
|
||||||
- `getPlaces(prefixes?)`: efficient partial loading of specific sectors (or full recursive scan if no prefixes provided).
|
|
||||||
- Uses `getListing` for directory traversal and `getAll` for object retrieval.
|
|
||||||
- configured with `maxAge: false` to ensure data freshness.
|
|
||||||
- **Dependencies:** Uses `ulid` and `latlon-geohash` internally.
|
|
||||||
|
|
||||||
### 3. App Infrastructure & Build
|
### 3. App Infrastructure
|
||||||
|
|
||||||
- **Services:**
|
- **Services:**
|
||||||
- `storage.js`: Initializes RemoteStorage, claims access, enables caching, and sets up the widget. Consumes the new `getPlaces` API.
|
- `storage.js`: Manages RemoteStorage, caching, and the new **Lists** feature (`to-go`, `to-do`).
|
||||||
- **Optimization:** Implemented **Debounced Reload** (200ms) for bookmark updates to handle rapid change events efficiently.
|
- `osm.js`: Fetches/caches POIs from Overpass API (configurable endpoints).
|
||||||
- **Optimization:** Correctly handles deletion/updates by clearing stale data for reloaded geohash sectors.
|
- `settings.js`: Persists user preferences (e.g., API provider).
|
||||||
- `osm.js`: Fetches nearby POIs from Overpass API.
|
|
||||||
- **Configurable:** Now supports dynamic API endpoints via `SettingsService`.
|
|
||||||
- **Reliability:** Implemented `fetchWithRetry` to handle HTTP 504/502/503 timeouts and 429 rate limits, in addition to network errors.
|
|
||||||
- **Caching:** Implemented in-memory cache for repeated `getNearbyPois` requests (same lat/lon/radius) to enable instant "Back" navigation.
|
|
||||||
- `settings.js`: Manages user preferences (currently Overpass API provider) persisted to `localStorage`.
|
|
||||||
- **UI Components:**
|
- **UI Components:**
|
||||||
- `places-sidebar.gjs`: Displays a list of nearby POIs.
|
- **Responsive Layout:** Sidebar transforms into a Bottom Sheet on mobile.
|
||||||
- **Layout:** Responsive design that transforms into a **Bottom Sheet** (50% height) on mobile screens (`<=768px`) with rounded corners and upward shadow.
|
- **Place Details:** Rich info (Address, Socials, Opening Hours) with distinct "Actions" and "Meta" sections.
|
||||||
- `place-details.gjs`: Dedicated component for displaying rich place information.
|
- **App Menu:** Comprehensive settings and about section, implemented as a secondary sidebar.
|
||||||
- **Features:** Icons (via `feather-icons`), Address, Phone, Website, Opening Hours, Cuisine, Wikipedia.
|
- **CI/CD:** Gitea Actions for automated testing and release drafting.
|
||||||
- **Layout:** Polished UI with distinct sections for Actions and Meta info.
|
|
||||||
- `app-header.gjs`: Transparent header with "Menu" button (Settings) and User Avatar (Login).
|
|
||||||
- `settings-pane.gjs`: Sidebar component for app info ("About" section) and settings.
|
|
||||||
- **Features:** Dropdown to select Overpass API provider (bke.ro, overpass-api.de, private.coffee).
|
|
||||||
- **Mobile:** Renders as a 2/3 height bottom sheet on mobile.
|
|
||||||
- **Z-Index:** Configured to overlay the Places sidebar correctly (`z-index: 3200`).
|
|
||||||
- **Geo Utils:**
|
|
||||||
- `app/utils/geo.js`: Haversine distance calculations.
|
|
||||||
- `app/utils/geohash-coverage.js`: Logic to calculate required 4-char geohash prefixes for a given bounding box.
|
|
||||||
- **Format Utils:**
|
|
||||||
- `app/utils/format-text.js` & `humanize-osm-tag` helper: Standardized logic (Title Case, space replacement) for displaying OSM tags like `guest_house` -> "Guest House".
|
|
||||||
- **Tag refinement:** Improved logic for handling generic tags (e.g., `building=yes`). The UI now intelligently displays the key ("Building") instead of the value ("Yes") for better readability.
|
|
||||||
- **Localization:** Added basic `navigator.languages` support to `getLocalizedName` for preferring local names when available.
|
|
||||||
- **Build & DevOps:**
|
|
||||||
- **Icon Generation:** Added `build:icons` script using `magick` and `rsvg-convert` to automate PNG generation from SVG.
|
|
||||||
- **Dependencies:** Documented system requirements (ImageMagick, librsvg) in `README.md`.
|
|
||||||
- **Ember CLI:** Added as dev dependency to support generator commands.
|
|
||||||
- **License:** Added AGPLv3 license.
|
|
||||||
|
|
||||||
### 4. Routing & Architecture (Refactored)
|
### 4. Routing & Architecture
|
||||||
|
|
||||||
- **URL-Driven Architecture:** Moved from service-based state to proper route-based state management.
|
- **URL-Driven:** `/search` (list) and `/place/:id` (details) routes.
|
||||||
- `/search?lat=...&lon=...&q=...`: Displays search results list.
|
- **Smart Navigation:**
|
||||||
- `/place/:place_id`: Displays details for a specific place (OSM POI or Bookmark).
|
- Direct hits redirect to details.
|
||||||
- **Heuristic Navigation:** The `search` route implements "visual click matching" logic. If a search yields a direct match (exact name or very close proximity), it automatically redirects to the `/place/` route, skipping the list view.
|
- Search results automatically resolve to existing **Bookmarks**.
|
||||||
- **Back Button Support:** Browser history works correctly. Navigating "Back" from a place returns to the cached search results instantly without network requests.
|
- "Back" navigation returns to cached search results instantly.
|
||||||
- **Explicit URLs:** Routes support specific OSM entities via `/place/osm:node:<id>` and `/place/osm:way:<id>`, distinguishing them from local bookmarks (ULIDs).
|
|
||||||
- **Smart Linking:** The `showPlaces` action intercepts search results and automatically resolves them to existing **Bookmarks** if a match is found (via `storage.findPlaceById`). This ensures the app navigates to the persistent Bookmark URL (ULID) and correctly reflects the "Saved" status in the UI instead of treating it as a new generic OSM place.
|
|
||||||
- **Data Normalization:** Refactored `OsmService` to return normalized objects (`osmTags`, `osmType`) for all queries. This ensures consistent data structures between fresh Overpass results and saved bookmarks throughout the app.
|
|
||||||
|
|
||||||
### 5. Creation & Editing Workflow
|
### 5. Features
|
||||||
|
|
||||||
- **Create Place:**
|
- **Search:** Typo-tolerant **Photon API** integration with location bias and debounce.
|
||||||
- Implemented `/place/new` route for creating new private places.
|
- **Creation & Editing:**
|
||||||
- **UX:** Map displays a central crosshair for precise location selection.
|
- "Crosshair" mode for precise location picking.
|
||||||
- **Mobile Optimization:**
|
- Edit Title/Description for saved places.
|
||||||
- Disabled map inertia (`kinetic: false`) to ensure the map stops exactly where the finger releases.
|
- **Lists:** Users can add places to default lists ("To Go", "To Do") directly from the details view.
|
||||||
- `PlaceEditForm` conditionally disables autofocus on mobile screens (`<= 768px`) to prevent the onscreen keyboard from obscuring the map view immediately.
|
- **Socials:** Place details now include Email, Facebook, and Instagram links.
|
||||||
- Responsive crosshair sizing (48px desktop / 24px mobile).
|
- **Data Sync:** Auto-refreshes OSM data (coords/tags) for saved places on view, preserving custom titles.
|
||||||
- **Persistence:** Form data (Title, Description) and Map coordinates are securely saved to RemoteStorage via `storage.storePlace`.
|
|
||||||
|
|
||||||
### 6. Search Functionality
|
|
||||||
|
|
||||||
- **Provider:** Integrated **Photon API** (by Komoot) via `app/services/photon.js` for high-quality, typo-tolerant OpenStreetMap search.
|
|
||||||
- **UI:** `SearchBoxComponent` implements a responsive search bar with instant autocomplete.
|
|
||||||
- **Debounced Input:** 300ms delay to prevent excessive API calls.
|
|
||||||
- **Location Bias:** Automatically biases search results towards the current map center to show relevant local places first.
|
|
||||||
- **Direct Navigation:** Selecting a result with a valid OSM ID navigates directly to the specific place details (`/place/osm:type:id`).
|
|
||||||
- **Resilience:** Implemented retry logic (exponential backoff/fixed delay) for network errors and rate limits (429).
|
|
||||||
- **Data Normalization:** Search results are normalized to match the internal POI schema, ensuring consistent rendering across Search and Map views.
|
|
||||||
|
|
||||||
## Current State
|
## Current State
|
||||||
|
|
||||||
- **Repo:** The app runs via `pnpm start`.
|
- **Repo:** Runs via `pnpm start`.
|
||||||
- **Workflow:**
|
- **Workflow:**
|
||||||
1. User pans map -> `moveend` triggers `storage.loadPlacesInBounds`.
|
1. **Explore:** Pan/Zoom loads bookmarks from RemoteStorage.
|
||||||
2. User clicks map -> Route transition to `/search` -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
|
2. **Search:** Query via Photon -> List or Direct Result.
|
||||||
3. **Navigation:**
|
3. **View:** Details pane (Sidebar/Bottom Sheet) shows rich info + social links.
|
||||||
- If direct match: Redirect to `/place/:id`.
|
4. **Action:**
|
||||||
- If multiple results: Show `/search` list view.
|
- **Save:** Persist to RemoteStorage.
|
||||||
4. Sidebar displays details via `<PlaceDetails>` component (Bottom sheet on mobile).
|
- **Organize:** Add to "To Go" / "To Do" lists.
|
||||||
5. **Creation:** User clicks "Create Place" -> Enters creation mode (crosshair) -> Positions map -> Enters details -> Save.
|
- **Edit:** Custom Title/Description.
|
||||||
6. **Persistence:** RemoteStorage change event -> Debounced reload updates the map reactive-ly.
|
5. **Sync:** Background check updates OSM data if changed.
|
||||||
7. **Editing:** User can edit the Title and Description of saved bookmarks via an "Edit" button in the details view.
|
|
||||||
8. **Settings:** User can change the Overpass API provider via the new Settings menu.
|
|
||||||
|
|
||||||
## Files Currently in Focus
|
## Next Steps
|
||||||
|
|
||||||
- `app/services/osm.js`
|
1. **Testing:** Add automated tests for the new Lists logic and Geohash coverage.
|
||||||
- `app/components/map.gjs`
|
2. **Performance:** Monitor with large datasets.
|
||||||
- `app/routes/place.js`
|
3. **Refinement:** Polish list UI and interactions.
|
||||||
- `app/utils/osm.js`
|
|
||||||
|
|
||||||
## Next Steps & Pending Tasks
|
|
||||||
|
|
||||||
1. **Linting & Code Quality:** Fix remaining CSS errors and address unused variables/runloop usage.
|
|
||||||
2. **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.
|
|
||||||
3. **Performance:** Monitor performance with large datasets (thousands of bookmarks).
|
|
||||||
|
|
||||||
## Technical Constraints
|
|
||||||
|
|
||||||
- **Template Style:** Strict Mode GJS (`<template>`).
|
|
||||||
- **Package Manager:** `pnpm` for the main app, `npm` for the vendor module.
|
|
||||||
- **Visuals:** No Tailwind/Bootstrap; using custom CSS in `app/styles/app.css`.
|
|
||||||
|
|||||||
@@ -111,6 +111,22 @@ import Icon from '#components/icon';
|
|||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="https://pinhead.ink/" target="_blank" rel="noopener">
|
||||||
|
Pinhead Icons
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a
|
||||||
|
href="https://github.com/waysidemapping/pinhead?tab=readme-ov-file#where-the-icons-are-from"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>
|
||||||
|
Various
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -305,6 +305,7 @@ export default class PlaceDetails extends Component {
|
|||||||
type="button"
|
type="button"
|
||||||
class="btn btn-outline"
|
class="btn btn-outline"
|
||||||
title="Edit"
|
title="Edit"
|
||||||
|
disabled={{this.isEditing}}
|
||||||
{{on "click" this.startEditing}}
|
{{on "click" this.startEditing}}
|
||||||
>
|
>
|
||||||
<Icon @name="edit" @color="var(--link-color)" />
|
<Icon @name="edit" @color="var(--link-color)" />
|
||||||
@@ -316,9 +317,11 @@ export default class PlaceDetails extends Component {
|
|||||||
<div class="meta-info">
|
<div class="meta-info">
|
||||||
|
|
||||||
{{#if this.cuisine}}
|
{{#if this.cuisine}}
|
||||||
<p class="cuisine-info">
|
<p class="content-with-icon">
|
||||||
<strong>Cuisine:</strong>
|
<Icon @name="fork-and-knife" @title="Cuisine" @filled={{true}} />
|
||||||
{{this.cuisine}}
|
<span>
|
||||||
|
{{this.cuisine}}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
|||||||
@@ -101,6 +101,23 @@ export default class PlaceRoute extends Route {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setupController(controller, model) {
|
||||||
|
super.setupController(controller, model);
|
||||||
|
this.checkUpdates(model);
|
||||||
|
}
|
||||||
|
|
||||||
|
async checkUpdates(place) {
|
||||||
|
// Only check for updates if it's a saved place (has ID) and is an OSM object
|
||||||
|
if (place && place.id && place.osmId && place.osmType) {
|
||||||
|
const updatedPlace = await this.storage.refreshPlace(place);
|
||||||
|
if (updatedPlace) {
|
||||||
|
// If an update occurred, refresh the map UI selection without moving the camera
|
||||||
|
// This ensures the sidebar shows the new data
|
||||||
|
this.mapUi.selectPlace(updatedPlace, { preventZoom: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
serialize(model) {
|
serialize(model) {
|
||||||
// If the model is a saved bookmark, use its ID
|
// If the model is a saved bookmark, use its ID
|
||||||
if (model.id) {
|
if (model.id) {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import Service from '@ember/service';
|
import Service, { service } from '@ember/service';
|
||||||
import RemoteStorage from 'remotestoragejs';
|
import RemoteStorage from 'remotestoragejs';
|
||||||
import Places from '@remotestorage/module-places';
|
import Places from '@remotestorage/module-places';
|
||||||
import Widget from 'remotestorage-widget';
|
import Widget from 'remotestorage-widget';
|
||||||
@@ -7,8 +7,10 @@ import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
|
|||||||
import { action } from '@ember/object';
|
import { action } from '@ember/object';
|
||||||
import { debounceTask } from 'ember-lifeline';
|
import { debounceTask } from 'ember-lifeline';
|
||||||
import Geohash from 'latlon-geohash';
|
import Geohash from 'latlon-geohash';
|
||||||
|
import { getLocalizedName } from '../utils/osm';
|
||||||
|
|
||||||
export default class StorageService extends Service {
|
export default class StorageService extends Service {
|
||||||
|
@service osm;
|
||||||
rs;
|
rs;
|
||||||
widget;
|
widget;
|
||||||
@tracked placesInView = [];
|
@tracked placesInView = [];
|
||||||
@@ -366,6 +368,82 @@ export default class StorageService extends Service {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async refreshPlace(place) {
|
||||||
|
if (!place || !place.id || !place.osmId || !place.osmType) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.debug(`Checking for updates for ${place.title} (${place.osmId})`);
|
||||||
|
const freshData = await this.osm.fetchOsmObject(
|
||||||
|
place.osmId,
|
||||||
|
place.osmType
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!freshData) {
|
||||||
|
console.warn('Could not fetch fresh data for', place.osmId);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for changes
|
||||||
|
let hasChanges = false;
|
||||||
|
const changes = {};
|
||||||
|
|
||||||
|
// 1. Check Coordinates (allow tiny drift < ~1m)
|
||||||
|
const latDiff = Math.abs(place.lat - freshData.lat);
|
||||||
|
const lonDiff = Math.abs(place.lon - freshData.lon);
|
||||||
|
if (latDiff > 0.00001 || lonDiff > 0.00001) {
|
||||||
|
hasChanges = true;
|
||||||
|
changes.lat = freshData.lat;
|
||||||
|
changes.lon = freshData.lon;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Check Tags
|
||||||
|
const oldTags = place.osmTags || {};
|
||||||
|
const newTags = freshData.osmTags || {};
|
||||||
|
const allKeys = new Set([
|
||||||
|
...Object.keys(oldTags),
|
||||||
|
...Object.keys(newTags),
|
||||||
|
]);
|
||||||
|
|
||||||
|
for (const key of allKeys) {
|
||||||
|
if (oldTags[key] !== newTags[key]) {
|
||||||
|
hasChanges = true;
|
||||||
|
changes.osmTags = newTags;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasChanges) {
|
||||||
|
console.debug('No changes detected for', place.title);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.debug('Changes detected:', changes);
|
||||||
|
|
||||||
|
// 3. Prepare Update
|
||||||
|
const updatedPlace = {
|
||||||
|
...place,
|
||||||
|
...changes,
|
||||||
|
};
|
||||||
|
|
||||||
|
// If the current title matches the old localized name, update it to the
|
||||||
|
// new localized name. If the user renamed it (custom title), keep it.
|
||||||
|
const oldDefaultName = getLocalizedName(oldTags);
|
||||||
|
const newDefaultName = getLocalizedName(newTags);
|
||||||
|
|
||||||
|
if (place.title === oldDefaultName && oldDefaultName !== newDefaultName) {
|
||||||
|
updatedPlace.title = newDefaultName;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Save
|
||||||
|
return await this.updatePlace(updatedPlace);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to refresh place:', e);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
connect() {
|
connect() {
|
||||||
this.isWidgetOpen = true;
|
this.isWidgetOpen = true;
|
||||||
|
|||||||
@@ -603,6 +603,12 @@ abbr[title] {
|
|||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-outline {
|
.btn-outline {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ import user from 'feather-icons/dist/icons/user.svg?raw';
|
|||||||
import x from 'feather-icons/dist/icons/x.svg?raw';
|
import x from 'feather-icons/dist/icons/x.svg?raw';
|
||||||
import zap from 'feather-icons/dist/icons/zap.svg?raw';
|
import zap from 'feather-icons/dist/icons/zap.svg?raw';
|
||||||
import wikipedia from '../icons/wikipedia.svg?raw';
|
import wikipedia from '../icons/wikipedia.svg?raw';
|
||||||
|
import forkAndKnife from '@waysidemapping/pinhead/dist/icons/fork_and_knife.svg?raw';
|
||||||
|
|
||||||
const ICONS = {
|
const ICONS = {
|
||||||
'arrow-left': arrowLeft,
|
'arrow-left': arrowLeft,
|
||||||
@@ -43,6 +44,7 @@ const ICONS = {
|
|||||||
home,
|
home,
|
||||||
info,
|
info,
|
||||||
instagram,
|
instagram,
|
||||||
|
'fork-and-knife': forkAndKnife,
|
||||||
'log-in': logIn,
|
'log-in': logIn,
|
||||||
'log-out': logOut,
|
'log-out': logOut,
|
||||||
mail,
|
mail,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "marco",
|
"name": "marco",
|
||||||
"version": "1.15.4",
|
"version": "1.16.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "Unhosted maps app",
|
"description": "Unhosted maps app",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -102,6 +102,7 @@
|
|||||||
"edition": "octane"
|
"edition": "octane"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@waysidemapping/pinhead": "^15.17.0",
|
||||||
"ember-concurrency": "^5.2.0",
|
"ember-concurrency": "^5.2.0",
|
||||||
"ember-lifeline": "^7.0.0"
|
"ember-lifeline": "^7.0.0"
|
||||||
}
|
}
|
||||||
|
|||||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@@ -8,6 +8,9 @@ importers:
|
|||||||
|
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@waysidemapping/pinhead':
|
||||||
|
specifier: ^15.17.0
|
||||||
|
version: 15.17.0
|
||||||
ember-concurrency:
|
ember-concurrency:
|
||||||
specifier: ^5.2.0
|
specifier: ^5.2.0
|
||||||
version: 5.2.0(@babel/core@7.28.6)
|
version: 5.2.0(@babel/core@7.28.6)
|
||||||
@@ -1651,6 +1654,9 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
'@warp-drive/core': 5.8.1
|
'@warp-drive/core': 5.8.1
|
||||||
|
|
||||||
|
'@waysidemapping/pinhead@15.17.0':
|
||||||
|
resolution: {integrity: sha512-XcL/0Ll+gkRIpXlO+skwd6USynA+mX3DNwqrWDMhgRmLP4DNRPTeaecK64BBxk1bB/F9Xi/9kgN6JA5zbdgejQ==}
|
||||||
|
|
||||||
'@xmldom/xmldom@0.8.11':
|
'@xmldom/xmldom@0.8.11':
|
||||||
resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
|
resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
|
||||||
engines: {node: '>=10.0.0'}
|
engines: {node: '>=10.0.0'}
|
||||||
@@ -7239,6 +7245,8 @@ snapshots:
|
|||||||
- '@glint/template'
|
- '@glint/template'
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
|
'@waysidemapping/pinhead@15.17.0': {}
|
||||||
|
|
||||||
'@xmldom/xmldom@0.8.11': {}
|
'@xmldom/xmldom@0.8.11': {}
|
||||||
|
|
||||||
abbrev@1.1.1: {}
|
abbrev@1.1.1: {}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -39,7 +39,7 @@
|
|||||||
<meta name="msapplication-TileColor" content="#F6E9A6">
|
<meta name="msapplication-TileColor" content="#F6E9A6">
|
||||||
<meta name="msapplication-TileImage" content="/icons/icon-144.png">
|
<meta name="msapplication-TileImage" content="/icons/icon-144.png">
|
||||||
|
|
||||||
<script type="module" crossorigin src="/assets/main-Bzf0iwOa.js"></script>
|
<script type="module" crossorigin src="/assets/main-gEUnNw-L.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/main-BOfcjRke.css">
|
<link rel="stylesheet" crossorigin href="/assets/main-BOfcjRke.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -125,4 +125,60 @@ module('Unit | Route | place', function (hooks) {
|
|||||||
|
|
||||||
assert.notOk(fetchCalled, 'fetchOsmObject should NOT be called for nodes');
|
assert.notOk(fetchCalled, 'fetchOsmObject should NOT be called for nodes');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('setupController triggers checkUpdates', async function (assert) {
|
||||||
|
let route = this.owner.lookup('route:place');
|
||||||
|
|
||||||
|
// Stub Storage Service
|
||||||
|
let refreshPlaceCalled = false;
|
||||||
|
class StorageStub extends Service {
|
||||||
|
async refreshPlace(place) {
|
||||||
|
refreshPlaceCalled = true;
|
||||||
|
assert.strictEqual(place.id, '123', 'Passed correct place to storage');
|
||||||
|
return {
|
||||||
|
...place,
|
||||||
|
title: 'Updated Title',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stub MapUi Service
|
||||||
|
let selectPlaceCalled = false;
|
||||||
|
class MapUiStub extends Service {
|
||||||
|
selectPlace(place, options) {
|
||||||
|
selectPlaceCalled = true;
|
||||||
|
assert.strictEqual(
|
||||||
|
place.title,
|
||||||
|
'Updated Title',
|
||||||
|
'Selected updated place'
|
||||||
|
);
|
||||||
|
assert.ok(options.preventZoom, 'Prevented zoom on update');
|
||||||
|
}
|
||||||
|
stopSearch() {}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.owner.register('service:storage', StorageStub);
|
||||||
|
this.owner.register('service:map-ui', MapUiStub);
|
||||||
|
|
||||||
|
let model = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
title: 'Original Title',
|
||||||
|
};
|
||||||
|
|
||||||
|
let controller = {};
|
||||||
|
|
||||||
|
// Trigger setupController
|
||||||
|
route.setupController(controller, model);
|
||||||
|
|
||||||
|
// checkUpdates is async and not awaited in setupController, so we need to wait a tick
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 10));
|
||||||
|
|
||||||
|
assert.ok(refreshPlaceCalled, 'refreshPlace should be called');
|
||||||
|
assert.ok(
|
||||||
|
selectPlaceCalled,
|
||||||
|
'mapUi.selectPlace should be called with update'
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
202
tests/unit/services/storage-test.js
Normal file
202
tests/unit/services/storage-test.js
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
import { module, test } from 'qunit';
|
||||||
|
import { setupTest } from 'marco/tests/helpers';
|
||||||
|
import Service from '@ember/service';
|
||||||
|
|
||||||
|
module('Unit | Service | storage', function (hooks) {
|
||||||
|
setupTest(hooks);
|
||||||
|
|
||||||
|
test('refreshPlace skips invalid places', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
let result = await service.refreshPlace({});
|
||||||
|
assert.strictEqual(result, null);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('refreshPlace detects coordinate drift', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
|
||||||
|
// Stub OSM Service
|
||||||
|
class OsmStub extends Service {
|
||||||
|
async fetchOsmObject(id, type) {
|
||||||
|
return {
|
||||||
|
osmId: id,
|
||||||
|
osmType: type,
|
||||||
|
lat: 52.5201, // Changed significantly from 52.5200
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Foo' },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.owner.register('service:osm', OsmStub);
|
||||||
|
|
||||||
|
// Mock storage update
|
||||||
|
let updatePlaceCalled = false;
|
||||||
|
service.updatePlace = async (place) => {
|
||||||
|
updatePlaceCalled = true;
|
||||||
|
return place;
|
||||||
|
};
|
||||||
|
|
||||||
|
let place = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Foo' },
|
||||||
|
title: 'Foo',
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = await service.refreshPlace(place);
|
||||||
|
|
||||||
|
assert.ok(updatePlaceCalled, 'updatePlace should be called');
|
||||||
|
assert.strictEqual(result.lat, 52.5201, 'Latitude updated');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('refreshPlace ignores tiny coordinate drift', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
|
||||||
|
class OsmStub extends Service {
|
||||||
|
async fetchOsmObject(id, type) {
|
||||||
|
return {
|
||||||
|
osmId: id,
|
||||||
|
osmType: type,
|
||||||
|
lat: 52.5200005, // Tiny change (< 0.00001)
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Foo' },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.owner.register('service:osm', OsmStub);
|
||||||
|
|
||||||
|
let updatePlaceCalled = false;
|
||||||
|
service.updatePlace = async () => {
|
||||||
|
updatePlaceCalled = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
let place = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Foo' },
|
||||||
|
title: 'Foo',
|
||||||
|
};
|
||||||
|
|
||||||
|
await service.refreshPlace(place);
|
||||||
|
|
||||||
|
assert.notOk(updatePlaceCalled, 'updatePlace should NOT be called');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('refreshPlace detects tag changes', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
|
||||||
|
class OsmStub extends Service {
|
||||||
|
async fetchOsmObject(id, type) {
|
||||||
|
return {
|
||||||
|
osmId: id,
|
||||||
|
osmType: type,
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Bar' }, // Changed name
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.owner.register('service:osm', OsmStub);
|
||||||
|
|
||||||
|
let updatePlaceCalled = false;
|
||||||
|
service.updatePlace = async (place) => {
|
||||||
|
updatePlaceCalled = true;
|
||||||
|
return place;
|
||||||
|
};
|
||||||
|
|
||||||
|
let place = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Foo' },
|
||||||
|
title: 'Foo',
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = await service.refreshPlace(place);
|
||||||
|
|
||||||
|
assert.ok(updatePlaceCalled, 'updatePlace should be called');
|
||||||
|
assert.strictEqual(result.osmTags.name, 'Bar', 'Tags updated');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('refreshPlace updates title if it was default', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
|
||||||
|
class OsmStub extends Service {
|
||||||
|
async fetchOsmObject(id, type) {
|
||||||
|
return {
|
||||||
|
osmId: id,
|
||||||
|
osmType: type,
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'New Name' },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.owner.register('service:osm', OsmStub);
|
||||||
|
|
||||||
|
service.updatePlace = async (place) => place;
|
||||||
|
|
||||||
|
let place = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Old Name' },
|
||||||
|
title: 'Old Name', // Matches default
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = await service.refreshPlace(place);
|
||||||
|
|
||||||
|
assert.strictEqual(result.title, 'New Name', 'Title should update');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('refreshPlace preserves custom title', async function (assert) {
|
||||||
|
let service = this.owner.lookup('service:storage');
|
||||||
|
|
||||||
|
class OsmStub extends Service {
|
||||||
|
async fetchOsmObject(id, type) {
|
||||||
|
return {
|
||||||
|
osmId: id,
|
||||||
|
osmType: type,
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'New Name' },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.owner.register('service:osm', OsmStub);
|
||||||
|
|
||||||
|
service.updatePlace = async (place) => place;
|
||||||
|
|
||||||
|
let place = {
|
||||||
|
id: '123',
|
||||||
|
osmId: '456',
|
||||||
|
osmType: 'node',
|
||||||
|
lat: 52.52,
|
||||||
|
lon: 13.405,
|
||||||
|
osmTags: { name: 'Old Name' },
|
||||||
|
title: 'My Custom Place', // User renamed it
|
||||||
|
};
|
||||||
|
|
||||||
|
let result = await service.refreshPlace(place);
|
||||||
|
|
||||||
|
assert.strictEqual(
|
||||||
|
result.title,
|
||||||
|
'My Custom Place',
|
||||||
|
'Title should NOT update'
|
||||||
|
);
|
||||||
|
assert.strictEqual(
|
||||||
|
result.osmTags.name,
|
||||||
|
'New Name',
|
||||||
|
'Tags should still update'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user