Add full-text search
Add a search box with a quick results popover, as well full results in the sidebar on pressing enter.
This commit is contained in:
@@ -5,6 +5,7 @@ import { action } from '@ember/object';
|
||||
import { on } from '@ember/modifier';
|
||||
import Icon from '#components/icon';
|
||||
import UserMenu from '#components/user-menu';
|
||||
import SearchBox from '#components/search-box';
|
||||
|
||||
export default class AppHeaderComponent extends Component {
|
||||
@service storage;
|
||||
@@ -31,6 +32,8 @@ export default class AppHeaderComponent extends Component {
|
||||
>
|
||||
<Icon @name="menu" @size={{24}} @color="#333" />
|
||||
</button>
|
||||
|
||||
<SearchBox />
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
|
||||
@@ -110,6 +110,10 @@ export default class MapComponent extends Component {
|
||||
}),
|
||||
});
|
||||
|
||||
// Initialize the UI service with the map center
|
||||
const initialCenter = toLonLat(view.getCenter());
|
||||
this.mapUi.updateCenter(initialCenter[1], initialCenter[0]);
|
||||
|
||||
apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
|
||||
|
||||
this.searchOverlayElement = document.createElement('div');
|
||||
@@ -645,12 +649,18 @@ export default class MapComponent extends Component {
|
||||
handleMapMove = async () => {
|
||||
if (!this.mapInstance) return;
|
||||
|
||||
const view = this.mapInstance.getView();
|
||||
const center = toLonLat(view.getCenter());
|
||||
this.mapUi.updateCenter(center[1], center[0]);
|
||||
|
||||
// If in creation mode, update the coordinates in the service AND the URL
|
||||
if (this.mapUi.isCreating) {
|
||||
// Calculate coordinates under the crosshair element
|
||||
// We need the pixel position of the crosshair relative to the map viewport
|
||||
// The crosshair is positioned via CSS, so we can use getBoundingClientRect
|
||||
const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
|
||||
const mapRect = this.mapInstance
|
||||
.getTargetElement()
|
||||
.getBoundingClientRect();
|
||||
const crosshairRect = this.crosshairElement.getBoundingClientRect();
|
||||
|
||||
const centerX =
|
||||
@@ -786,10 +796,9 @@ export default class MapComponent extends Component {
|
||||
const queryParams = {
|
||||
lat: lat.toFixed(6),
|
||||
lon: lon.toFixed(6),
|
||||
q: null, // Clear q to force spatial search
|
||||
selected: selectedFeatureName || null,
|
||||
};
|
||||
if (selectedFeatureName) {
|
||||
queryParams.q = selectedFeatureName;
|
||||
}
|
||||
|
||||
this.router.transitionTo('search', { queryParams });
|
||||
};
|
||||
|
||||
@@ -23,8 +23,10 @@ export default class PlacesSidebar extends Component {
|
||||
if (lat && lon) {
|
||||
this.router.transitionTo('place.new', { queryParams: { lat, lon } });
|
||||
} else {
|
||||
// Fallback (shouldn't happen in search context)
|
||||
this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } });
|
||||
// Fallback (shouldn't happen in search context)
|
||||
this.router.transitionTo('place.new', {
|
||||
queryParams: { lat: 0, lon: 0 },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +154,7 @@ export default class PlacesSidebar extends Component {
|
||||
{{on "click" this.clearSelection}}
|
||||
><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
|
||||
{{else}}
|
||||
<h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
|
||||
<h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
|
||||
{{/if}}
|
||||
<button type="button" class="close-btn" {{on "click" @onClose}}><Icon
|
||||
@name="x"
|
||||
@@ -184,14 +186,16 @@ export default class PlacesSidebar extends Component {
|
||||
place.osmTags.name:en
|
||||
"Unnamed Place"
|
||||
}}</div>
|
||||
<div class="place-type">{{humanizeOsmTag (or
|
||||
place.osmTags.amenity
|
||||
place.osmTags.shop
|
||||
place.osmTags.tourism
|
||||
place.osmTags.leisure
|
||||
place.osmTags.historic
|
||||
"Point of Interest"
|
||||
)}}</div>
|
||||
<div class="place-type">{{humanizeOsmTag
|
||||
(or
|
||||
place.osmTags.amenity
|
||||
place.osmTags.shop
|
||||
place.osmTags.tourism
|
||||
place.osmTags.leisure
|
||||
place.osmTags.historic
|
||||
"Point of Interest"
|
||||
)
|
||||
}}</div>
|
||||
</button>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
||||
178
app/components/search-box.gjs
Normal file
178
app/components/search-box.gjs
Normal file
@@ -0,0 +1,178 @@
|
||||
import Component from '@glimmer/component';
|
||||
import { service } from '@ember/service';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import { action } from '@ember/object';
|
||||
import { on } from '@ember/modifier';
|
||||
import { fn } from '@ember/helper';
|
||||
import { debounce } from '@ember/runloop';
|
||||
import Icon from '#components/icon';
|
||||
|
||||
export default class SearchBoxComponent extends Component {
|
||||
@service photon;
|
||||
@service router;
|
||||
@service mapUi;
|
||||
@service map; // Assuming we might need map context, but mostly we use router
|
||||
|
||||
@tracked query = '';
|
||||
@tracked results = [];
|
||||
@tracked isFocused = false;
|
||||
@tracked isLoading = false;
|
||||
|
||||
get showPopover() {
|
||||
return this.isFocused && this.results.length > 0;
|
||||
}
|
||||
|
||||
@action
|
||||
handleInput(event) {
|
||||
this.query = event.target.value;
|
||||
if (this.query.length < 2) {
|
||||
this.results = [];
|
||||
return;
|
||||
}
|
||||
|
||||
debounce(this, this.performSearch, 300);
|
||||
}
|
||||
|
||||
async performSearch() {
|
||||
if (this.query.length < 2) return;
|
||||
|
||||
this.isLoading = true;
|
||||
try {
|
||||
// Use map center if available for location bias
|
||||
let lat, lon;
|
||||
if (this.mapUi.currentCenter) {
|
||||
({ lat, lon } = this.mapUi.currentCenter);
|
||||
}
|
||||
const results = await this.photon.search(this.query, lat, lon);
|
||||
this.results = results;
|
||||
} catch (e) {
|
||||
console.error('Search failed', e);
|
||||
this.results = [];
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
handleFocus() {
|
||||
this.isFocused = true;
|
||||
if (this.query.length >= 2 && this.results.length === 0) {
|
||||
this.performSearch();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
handleBlur() {
|
||||
// Delay hiding so clicks on results can register
|
||||
setTimeout(() => {
|
||||
this.isFocused = false;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
@action
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
if (!this.query) return;
|
||||
|
||||
let queryParams = { q: this.query, selected: null };
|
||||
|
||||
if (this.mapUi.currentCenter) {
|
||||
const { lat, lon } = this.mapUi.currentCenter;
|
||||
queryParams.lat = parseFloat(lat).toFixed(4);
|
||||
queryParams.lon = parseFloat(lon).toFixed(4);
|
||||
}
|
||||
|
||||
this.router.transitionTo('search', { queryParams });
|
||||
this.isFocused = false;
|
||||
}
|
||||
|
||||
@action
|
||||
selectResult(place) {
|
||||
this.query = place.title;
|
||||
this.results = []; // Hide popover
|
||||
|
||||
// If it has an OSM ID, go to place details
|
||||
if (place.osmId) {
|
||||
// Format: osm:node:123
|
||||
// place.osmType is already normalized to 'node', 'way', or 'relation' by PhotonService
|
||||
const id = `osm:${place.osmType}:${place.osmId}`;
|
||||
this.router.transitionTo('place', id);
|
||||
} else {
|
||||
// Just a location (e.g. from Photon without OSM ID, though unlikely for Photon)
|
||||
// Or we can treat it as a search query
|
||||
this.router.transitionTo('search', {
|
||||
queryParams: {
|
||||
q: place.title,
|
||||
lat: place.lat,
|
||||
lon: place.lon,
|
||||
selected: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
clear() {
|
||||
this.query = '';
|
||||
this.results = [];
|
||||
this.router.transitionTo('index'); // Or stay on current page?
|
||||
// Usually clear just clears the input.
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<form class="search-form" {{on "submit" this.handleSubmit}}>
|
||||
<div class="search-icon">
|
||||
<Icon @name="search" @size={{18}} @color="#666" />
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
class="search-input"
|
||||
placeholder="Search places..."
|
||||
aria-label="Search places"
|
||||
value={{this.query}}
|
||||
{{on "input" this.handleInput}}
|
||||
{{on "focus" this.handleFocus}}
|
||||
{{on "blur" this.handleBlur}}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{{#if this.query}}
|
||||
<button
|
||||
type="button"
|
||||
class="search-clear-btn"
|
||||
{{on "click" this.clear}}
|
||||
aria-label="Clear"
|
||||
>
|
||||
<Icon @name="x" @size={{16}} @color="#999" />
|
||||
</button>
|
||||
{{/if}}
|
||||
</form>
|
||||
|
||||
{{#if this.showPopover}}
|
||||
<div class="search-results-popover">
|
||||
<ul class="search-results-list">
|
||||
{{#each this.results as |result|}}
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
class="search-result-item"
|
||||
{{on "click" (fn this.selectResult result)}}
|
||||
>
|
||||
<div class="result-icon">
|
||||
<Icon @name="map-pin" @size={{16}} @color="#666" />
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<span class="result-title">{{result.title}}</span>
|
||||
{{#if result.description}}
|
||||
<span class="result-desc">{{result.description}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@@ -62,7 +62,10 @@ export default class SettingsPane extends Component {
|
||||
{{#each this.settings.overpassApis as |api|}}
|
||||
<option
|
||||
value={{api.url}}
|
||||
selected={{if (eq api.url this.settings.overpassApi) "selected"}}
|
||||
selected={{if
|
||||
(eq api.url this.settings.overpassApi)
|
||||
"selected"
|
||||
}}
|
||||
>
|
||||
{{api.name}}
|
||||
</option>
|
||||
@@ -73,24 +76,45 @@ export default class SettingsPane extends Component {
|
||||
<section class="settings-section">
|
||||
<h3>About</h3>
|
||||
<p>
|
||||
<strong>Marco</strong> (as in <a
|
||||
href="https://en.wikipedia.org/wiki/Marco_Polo"
|
||||
target="_blank" rel="noopener">Marco Polo</a>) is an unhosted maps application
|
||||
that respects your privacy and choices.
|
||||
<strong>Marco</strong>
|
||||
(as in
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Marco_Polo"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Marco Polo</a>) is an unhosted maps application that respects your
|
||||
privacy and choices.
|
||||
</p>
|
||||
<p>
|
||||
Connect your own <a href="https://remotestorage.io/"
|
||||
target="_blank" rel="noopener">remote storage</a> to sync place bookmarks across
|
||||
apps and devices.
|
||||
Connect your own
|
||||
<a
|
||||
href="https://remotestorage.io/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>remote storage</a>
|
||||
to sync place bookmarks across apps and devices.
|
||||
</p>
|
||||
<ul class="link-list">
|
||||
<li>
|
||||
<a href="https://gitea.kosmos.org/raucao/marco" target="_blank" rel="noopener">
|
||||
<a
|
||||
href="https://gitea.kosmos.org/raucao/marco"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Source Code
|
||||
</a> (<a href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License" target="_blank" rel="noopener">AGPL</a>)
|
||||
</a>
|
||||
(<a
|
||||
href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>AGPL</a>)
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://openstreetmap.org/copyright" target="_blank" rel="noopener">
|
||||
<a
|
||||
href="https://openstreetmap.org/copyright"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Map Data © OpenStreetMap
|
||||
</a>
|
||||
</li>
|
||||
|
||||
10
app/controllers/search.js
Normal file
10
app/controllers/search.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import Controller from '@ember/controller';
|
||||
|
||||
export default class SearchController extends Controller {
|
||||
queryParams = ['lat', 'lon', 'q', 'selected'];
|
||||
|
||||
lat = null;
|
||||
lon = null;
|
||||
q = null;
|
||||
selected = null;
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { getDistance } from '../utils/geo';
|
||||
|
||||
export default class SearchRoute extends Route {
|
||||
@service osm;
|
||||
@service photon;
|
||||
@service mapUi;
|
||||
@service storage;
|
||||
@service router;
|
||||
@@ -13,50 +14,76 @@ export default class SearchRoute extends Route {
|
||||
lat: { refreshModel: true },
|
||||
lon: { refreshModel: true },
|
||||
q: { refreshModel: true },
|
||||
selected: { refreshModel: true },
|
||||
};
|
||||
|
||||
async model(params) {
|
||||
// If no coordinates, we can't search
|
||||
if (!params.lat || !params.lon) {
|
||||
return [];
|
||||
const lat = params.lat ? parseFloat(params.lat) : null;
|
||||
const lon = params.lon ? parseFloat(params.lon) : null;
|
||||
let pois = [];
|
||||
|
||||
// Case 1: Text Search (q parameter present)
|
||||
if (params.q) {
|
||||
// Search with Photon (using lat/lon for bias if available)
|
||||
pois = await this.photon.search(params.q, lat, lon);
|
||||
|
||||
// Search local bookmarks by name
|
||||
const queryLower = params.q.toLowerCase();
|
||||
const localMatches = this.storage.savedPlaces.filter((p) => {
|
||||
return (
|
||||
p.title?.toLowerCase().includes(queryLower) ||
|
||||
p.description?.toLowerCase().includes(queryLower)
|
||||
);
|
||||
});
|
||||
|
||||
// Merge local matches
|
||||
localMatches.forEach((local) => {
|
||||
const exists = pois.find(
|
||||
(poi) =>
|
||||
(local.osmId && poi.osmId === local.osmId) ||
|
||||
(poi.id && poi.id === local.id)
|
||||
);
|
||||
if (!exists) {
|
||||
pois.push(local);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Case 2: Nearby Search (lat/lon present, no q)
|
||||
else if (lat && lon) {
|
||||
const searchRadius = 50; // Default radius
|
||||
|
||||
const lat = parseFloat(params.lat);
|
||||
const lon = parseFloat(params.lon);
|
||||
const searchRadius = params.q ? 30 : 50;
|
||||
// Fetch POIs from Overpass
|
||||
pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
|
||||
|
||||
// Fetch POIs
|
||||
let pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
|
||||
// Get cached/saved places in search radius
|
||||
const localMatches = this.storage.savedPlaces.filter((p) => {
|
||||
const dist = getDistance(lat, lon, p.lat, p.lon);
|
||||
return dist <= searchRadius;
|
||||
});
|
||||
|
||||
// Get cached/saved places in search radius
|
||||
const localMatches = this.storage.savedPlaces.filter((p) => {
|
||||
const dist = getDistance(lat, lon, p.lat, p.lon);
|
||||
return dist <= searchRadius;
|
||||
});
|
||||
// Merge local matches
|
||||
localMatches.forEach((local) => {
|
||||
const exists = pois.find(
|
||||
(poi) =>
|
||||
(local.osmId && poi.osmId === local.osmId) ||
|
||||
(poi.id && poi.id === local.id)
|
||||
);
|
||||
|
||||
// Add local matches to the list if they aren't already there
|
||||
// We use osmId to deduplicate if possible
|
||||
localMatches.forEach((local) => {
|
||||
const exists = pois.find(
|
||||
(poi) =>
|
||||
(local.osmId && poi.osmId === local.osmId) ||
|
||||
(poi.id && poi.id === local.id)
|
||||
);
|
||||
if (!exists) {
|
||||
pois.push(local);
|
||||
}
|
||||
});
|
||||
|
||||
if (!exists) {
|
||||
pois.push(local);
|
||||
}
|
||||
});
|
||||
|
||||
// Sort by distance from click
|
||||
pois = pois
|
||||
.map((p) => {
|
||||
return {
|
||||
...p,
|
||||
_distance: getDistance(lat, lon, p.lat, p.lon),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a._distance - b._distance);
|
||||
// Sort by distance from click
|
||||
pois = pois
|
||||
.map((p) => {
|
||||
return {
|
||||
...p,
|
||||
_distance: getDistance(lat, lon, p.lat, p.lon),
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a._distance - b._distance);
|
||||
}
|
||||
|
||||
// Check if any of these are already bookmarked
|
||||
// We resolve them to the bookmark version if they exist
|
||||
@@ -69,18 +96,24 @@ export default class SearchRoute extends Route {
|
||||
}
|
||||
|
||||
afterModel(model, transition) {
|
||||
const { q } = transition.to.queryParams;
|
||||
const { q, selected } = transition.to.queryParams;
|
||||
|
||||
// Heuristic Match Logic (ported from MapComponent)
|
||||
if (q && model.length > 0) {
|
||||
// If 'selected' is provided (from map click), try to find that specific feature.
|
||||
// If 'q' is provided (from text search), try to find an exact match to auto-select.
|
||||
const targetName = selected || q;
|
||||
|
||||
if (targetName && model.length > 0) {
|
||||
let matchedPlace = null;
|
||||
|
||||
// 1. Exact Name Match
|
||||
matchedPlace = model.find(
|
||||
(p) => p.osmTags && (p.osmTags.name === q || p.osmTags['name:en'] === q)
|
||||
(p) =>
|
||||
p.osmTags &&
|
||||
(p.osmTags.name === targetName || p.osmTags['name:en'] === targetName)
|
||||
);
|
||||
|
||||
// 2. High Proximity Match (<= 10m)
|
||||
// 2. High Proximity Match (<= 10m) - Only if we don't have a name match
|
||||
// Note: MapComponent had logic for <=20m + type match.
|
||||
// We might want to pass the 'type' in queryParams if we want to be that precise.
|
||||
// For now, let's stick to name or very close proximity.
|
||||
|
||||
@@ -7,6 +7,7 @@ export default class MapUiService extends Service {
|
||||
@tracked isCreating = false;
|
||||
@tracked creationCoordinates = null;
|
||||
@tracked returnToSearch = false;
|
||||
@tracked currentCenter = null;
|
||||
|
||||
selectPlace(place) {
|
||||
this.selectedPlace = place;
|
||||
@@ -38,4 +39,8 @@ export default class MapUiService extends Service {
|
||||
updateCreationCoordinates(lat, lon) {
|
||||
this.creationCoordinates = { lat, lon };
|
||||
}
|
||||
|
||||
updateCenter(lat, lon) {
|
||||
this.currentCenter = { lat, lon };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,8 @@ export default class PhotonService extends Service {
|
||||
});
|
||||
|
||||
if (lat && lon) {
|
||||
params.append('lat', String(lat));
|
||||
params.append('lon', String(lon));
|
||||
params.append('lat', parseFloat(lat).toFixed(4));
|
||||
params.append('lon', parseFloat(lon).toFixed(4));
|
||||
}
|
||||
|
||||
const url = `${this.baseUrl}?${params.toString()}`;
|
||||
@@ -61,12 +61,18 @@ export default class PhotonService extends Service {
|
||||
const description = addressParts.join(', ');
|
||||
const title = props.name || description || 'Unknown Place';
|
||||
|
||||
const osmTypeMap = {
|
||||
N: 'node',
|
||||
W: 'way',
|
||||
R: 'relation',
|
||||
};
|
||||
|
||||
return {
|
||||
title,
|
||||
lat,
|
||||
lon,
|
||||
osmId: props.osm_id,
|
||||
osmType: props.osm_type, // 'N', 'W', 'R'
|
||||
osmType: osmTypeMap[props.osm_type] || props.osm_type, // 'node', 'way', 'relation'
|
||||
osmTags: props, // Keep all properties as tags for now
|
||||
description: props.name ? description : addressParts.slice(1).join(', '),
|
||||
source: 'photon',
|
||||
|
||||
@@ -74,6 +74,11 @@ body {
|
||||
pointer-events: auto; /* Re-enable clicks for buttons */
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-press {
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
@@ -750,3 +755,158 @@ button.create-place {
|
||||
padding-bottom: env(safe-area-inset-bottom, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Box Component */
|
||||
.search-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
margin-left: 1rem;
|
||||
z-index: 3002; /* Higher than menu button to be safe */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-box {
|
||||
max-width: 200px; /* Smaller on mobile */
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 24px; /* Pill shape */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
padding: 0 0.75rem;
|
||||
height: 40px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.search-form:focus-within {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
/* Remove native search cancel button in WebKit */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Remove 'x' from search input in Chrome/Safari */
|
||||
.search-input::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.search-clear-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.search-clear-btn:hover {
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Search Results Popover */
|
||||
.search-results-popover {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
z-index: 3002;
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center; /* Vertical center alignment */
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
background: white;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.search-result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-result-item:hover,
|
||||
.search-result-item:focus {
|
||||
background: #f5f5f5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.result-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden; /* For text truncation if needed */
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.result-desc {
|
||||
font-size: 0.8rem;
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
147
tests/acceptance/search-test.js
Normal file
147
tests/acceptance/search-test.js
Normal file
@@ -0,0 +1,147 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { visit, currentURL } from '@ember/test-helpers';
|
||||
import { setupApplicationTest } from 'marco/tests/helpers';
|
||||
import Service from '@ember/service';
|
||||
|
||||
module('Acceptance | search', function (hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
|
||||
test('visiting /search with q parameter performs text search', async function (assert) {
|
||||
// Mock Photon Service
|
||||
class MockPhotonService extends Service {
|
||||
async search(query) {
|
||||
if (query === 'Berlin') {
|
||||
return [
|
||||
{
|
||||
title: 'Berlin',
|
||||
lat: 52.52,
|
||||
lon: 13.405,
|
||||
osmId: '123',
|
||||
osmType: 'R',
|
||||
description: 'City in Germany',
|
||||
},
|
||||
{
|
||||
title: 'Berlin Alexanderplatz',
|
||||
lat: 52.521,
|
||||
lon: 13.41,
|
||||
osmId: '456',
|
||||
osmType: 'N',
|
||||
description: 'Square in Berlin',
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:photon', MockPhotonService);
|
||||
|
||||
// Mock Storage Service (empty)
|
||||
class MockStorageService extends Service {
|
||||
savedPlaces = [];
|
||||
findPlaceById() {
|
||||
return null;
|
||||
}
|
||||
rs = {
|
||||
on: () => {},
|
||||
};
|
||||
// Add placesInView since map component accesses it
|
||||
placesInView = [];
|
||||
loadPlacesInBounds() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
this.owner.register('service:storage', MockStorageService);
|
||||
|
||||
await visit('/search?q=Berlin');
|
||||
|
||||
assert.strictEqual(currentURL(), '/search?q=Berlin');
|
||||
assert.dom('.places-list li').exists({ count: 2 });
|
||||
assert.dom('.places-list li:first-child .place-name').hasText('Berlin');
|
||||
});
|
||||
|
||||
test('visiting /search with lat/lon performs nearby search', async function (assert) {
|
||||
// Mock Osm Service
|
||||
class MockOsmService extends Service {
|
||||
async getNearbyPois() {
|
||||
return [
|
||||
{
|
||||
title: 'Nearby Cafe',
|
||||
lat: 52.521,
|
||||
lon: 13.406,
|
||||
osmId: '789',
|
||||
osmType: 'N',
|
||||
_distance: 100, // Pre-calculated or ignored if mocked
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:osm', MockOsmService);
|
||||
|
||||
// Mock Storage Service (empty)
|
||||
class MockStorageService extends Service {
|
||||
savedPlaces = [];
|
||||
findPlaceById() {
|
||||
return null;
|
||||
}
|
||||
rs = {
|
||||
on: () => {},
|
||||
};
|
||||
// Add placesInView since map component accesses it
|
||||
placesInView = [];
|
||||
loadPlacesInBounds() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
this.owner.register('service:storage', MockStorageService);
|
||||
|
||||
await visit('/search?lat=52.52&lon=13.405');
|
||||
|
||||
assert.strictEqual(currentURL(), '/search?lat=52.52&lon=13.405');
|
||||
assert.dom('.places-list li').exists({ count: 1 });
|
||||
assert.dom('.places-list li .place-name').hasText('Nearby Cafe');
|
||||
});
|
||||
|
||||
test('local bookmarks are merged into search results', async function (assert) {
|
||||
// Mock Photon Service
|
||||
class MockPhotonService extends Service {
|
||||
async search() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:photon', MockPhotonService);
|
||||
|
||||
// Mock Storage Service with a bookmark
|
||||
class MockStorageService extends Service {
|
||||
savedPlaces = [
|
||||
{
|
||||
title: 'My Secret Base',
|
||||
lat: 50.0,
|
||||
lon: 10.0,
|
||||
osmId: '999',
|
||||
osmType: 'N',
|
||||
description: 'Top Secret',
|
||||
},
|
||||
];
|
||||
findPlaceById(id) {
|
||||
if (id === '999') return this.savedPlaces[0];
|
||||
return null;
|
||||
}
|
||||
rs = {
|
||||
on: () => {},
|
||||
};
|
||||
placesInView = [];
|
||||
loadPlacesInBounds() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
this.owner.register('service:storage', MockStorageService);
|
||||
|
||||
await visit('/search?q=Secret');
|
||||
|
||||
assert.strictEqual(currentURL(), '/search?q=Secret');
|
||||
assert.dom('.places-list li').exists({ count: 1 });
|
||||
assert.dom('.places-list li .place-name').hasText('My Secret Base');
|
||||
});
|
||||
});
|
||||
19
tests/integration/components/app-header-test.gjs
Normal file
19
tests/integration/components/app-header-test.gjs
Normal file
@@ -0,0 +1,19 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'marco/tests/helpers';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import AppHeader from 'marco/components/app-header';
|
||||
|
||||
module('Integration | Component | app-header', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders the search box', async function (assert) {
|
||||
this.noop = () => {};
|
||||
await render(
|
||||
<template><AppHeader @onToggleMenu={{this.noop}} /></template>
|
||||
);
|
||||
|
||||
assert.dom('header.app-header').exists();
|
||||
assert.dom('.search-box').exists('Search box is present in the header');
|
||||
assert.dom('.menu-btn').exists('Menu button is present');
|
||||
});
|
||||
});
|
||||
37
tests/integration/components/place-details-test.gjs
Normal file
37
tests/integration/components/place-details-test.gjs
Normal file
@@ -0,0 +1,37 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'marco/tests/helpers';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import PlaceDetails from 'marco/components/place-details';
|
||||
|
||||
module('Integration | Component | place-details', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it formats coordinates correctly', async function (assert) {
|
||||
const place = {
|
||||
title: 'Test Place',
|
||||
lat: 52.520006789,
|
||||
lon: 13.404954123,
|
||||
description: 'A place for testing.',
|
||||
};
|
||||
|
||||
await render(<template><PlaceDetails @place={{place}} /></template>);
|
||||
|
||||
assert.dom('.place-details').exists();
|
||||
assert.dom('.place-details h3').hasText('Test Place');
|
||||
|
||||
// Check for the formatted coordinates link text
|
||||
// "52.520007, 13.404954" (rounded)
|
||||
assert.dom('.meta-info a[href*="geo:"]').hasText('52.520007, 13.404954');
|
||||
});
|
||||
|
||||
test('it handles missing coordinates gracefully', async function (assert) {
|
||||
const place = {
|
||||
title: 'Place without Coords',
|
||||
};
|
||||
|
||||
await render(<template><PlaceDetails @place={{place}} /></template>);
|
||||
|
||||
assert.dom('.place-details h3').hasText('Place without Coords');
|
||||
assert.dom('.meta-info a[href*="geo:"]').doesNotExist();
|
||||
});
|
||||
});
|
||||
128
tests/integration/components/search-box-test.gjs
Normal file
128
tests/integration/components/search-box-test.gjs
Normal file
@@ -0,0 +1,128 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'marco/tests/helpers';
|
||||
import { render, fillIn, click, waitFor } from '@ember/test-helpers';
|
||||
import SearchBox from 'marco/components/search-box';
|
||||
import Service from '@ember/service';
|
||||
|
||||
module('Integration | Component | search-box', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders and handles search input', async function (assert) {
|
||||
// Mock Photon Service
|
||||
class MockPhotonService extends Service {
|
||||
async search(query) {
|
||||
if (query === 'test') {
|
||||
return [
|
||||
{
|
||||
title: 'Test Place',
|
||||
description: 'A test description',
|
||||
lat: 10,
|
||||
lon: 20,
|
||||
osmId: '123',
|
||||
osmType: 'node',
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:photon', MockPhotonService);
|
||||
|
||||
// Mock Router Service
|
||||
class MockRouterService extends Service {
|
||||
transitionTo(routeName, ...args) {
|
||||
assert.step(`transitionTo: ${routeName} ${JSON.stringify(args)}`);
|
||||
}
|
||||
}
|
||||
this.owner.register('service:router', MockRouterService);
|
||||
|
||||
await render(<template><SearchBox /></template>);
|
||||
|
||||
assert.dom('.search-input').exists();
|
||||
assert.dom('.search-results-popover').doesNotExist();
|
||||
|
||||
// Type 'test'
|
||||
await fillIn('.search-input', 'test');
|
||||
|
||||
// Wait for debounce and async search
|
||||
await waitFor('.search-results-popover', { timeout: 2000 });
|
||||
|
||||
assert.dom('.search-result-item').exists({ count: 1 });
|
||||
assert.dom('.result-title').hasText('Test Place');
|
||||
assert.dom('.result-desc').hasText('A test description');
|
||||
|
||||
// Click result
|
||||
await click('.search-result-item');
|
||||
|
||||
assert.verifySteps(['transitionTo: place ["osm:node:123"]']);
|
||||
assert
|
||||
.dom('.search-results-popover')
|
||||
.doesNotExist('Popover closes after selection');
|
||||
});
|
||||
|
||||
test('it handles submit for full search', async function (assert) {
|
||||
// Mock Photon Service
|
||||
class MockPhotonService extends Service {
|
||||
async search() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:photon', MockPhotonService);
|
||||
|
||||
// Mock MapUi Service
|
||||
class MockMapUiService extends Service {
|
||||
currentCenter = { lat: 52.52, lon: 13.405 };
|
||||
}
|
||||
this.owner.register('service:map-ui', MockMapUiService);
|
||||
|
||||
// Mock Router Service
|
||||
class MockRouterService extends Service {
|
||||
transitionTo(routeName, options) {
|
||||
assert.step(
|
||||
`transitionTo: ${routeName} ${JSON.stringify(options)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
this.owner.register('service:router', MockRouterService);
|
||||
|
||||
await render(<template><SearchBox /></template>);
|
||||
|
||||
await fillIn('.search-input', 'berlin');
|
||||
await click('.search-input'); // Focus
|
||||
// Trigger submit event on the form
|
||||
await this.element
|
||||
.querySelector('form')
|
||||
.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
|
||||
|
||||
assert.verifySteps([
|
||||
'transitionTo: search {"queryParams":{"q":"berlin","selected":null,"lat":"52.5200","lon":"13.4050"}}',
|
||||
]);
|
||||
});
|
||||
|
||||
test('it uses map center for biased search', async function (assert) {
|
||||
// Mock MapUi Service
|
||||
class MockMapUiService extends Service {
|
||||
currentCenter = { lat: 52.52, lon: 13.405 };
|
||||
}
|
||||
this.owner.register('service:map-ui', MockMapUiService);
|
||||
|
||||
// Mock Photon Service
|
||||
class MockPhotonService extends Service {
|
||||
async search(query, lat, lon) {
|
||||
assert.step(`search: ${query}, ${lat}, ${lon}`);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
this.owner.register('service:photon', MockPhotonService);
|
||||
|
||||
await render(<template><SearchBox /></template>);
|
||||
|
||||
await fillIn('.search-input', 'cafe');
|
||||
|
||||
// Wait for debounce (300ms) + execution
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
await delay(400);
|
||||
|
||||
assert.verifySteps(['search: cafe, 52.52, 13.405']);
|
||||
});
|
||||
});
|
||||
@@ -9,6 +9,34 @@ module('Unit | Service | photon', function (hooks) {
|
||||
assert.ok(service);
|
||||
});
|
||||
|
||||
test('search truncates coordinates to 4 decimal places', async function (assert) {
|
||||
let service = this.owner.lookup('service:photon');
|
||||
const originalFetch = window.fetch;
|
||||
|
||||
let capturedUrl;
|
||||
window.fetch = async (url) => {
|
||||
capturedUrl = url;
|
||||
return {
|
||||
ok: true,
|
||||
json: async () => ({ features: [] }),
|
||||
};
|
||||
};
|
||||
|
||||
try {
|
||||
await service.search('Test', 52.123456, 13.987654);
|
||||
assert.ok(
|
||||
capturedUrl.includes('lat=52.1235'),
|
||||
'lat is rounded to 4 decimals'
|
||||
);
|
||||
assert.ok(
|
||||
capturedUrl.includes('lon=13.9877'),
|
||||
'lon is rounded to 4 decimals'
|
||||
);
|
||||
} finally {
|
||||
window.fetch = originalFetch;
|
||||
}
|
||||
});
|
||||
|
||||
test('search handles successful response', async function (assert) {
|
||||
let service = this.owner.lookup('service:photon');
|
||||
|
||||
@@ -43,6 +71,7 @@ module('Unit | Service | photon', function (hooks) {
|
||||
assert.strictEqual(results[0].lat, 52.5);
|
||||
assert.strictEqual(results[0].lon, 13.4);
|
||||
assert.strictEqual(results[0].description, 'Test City, Test Country');
|
||||
assert.strictEqual(results[0].osmType, 'node', 'Normalizes N to node');
|
||||
} finally {
|
||||
window.fetch = originalFetch;
|
||||
}
|
||||
@@ -87,4 +116,22 @@ module('Unit | Service | photon', function (hooks) {
|
||||
assert.strictEqual(result.lat, 20);
|
||||
assert.strictEqual(result.lon, 10);
|
||||
});
|
||||
|
||||
test('normalizeFeature normalizes OSM types correctly', function (assert) {
|
||||
let service = this.owner.lookup('service:photon');
|
||||
|
||||
const checkType = (input, expected) => {
|
||||
const feature = {
|
||||
properties: { osm_type: input, name: 'Test' },
|
||||
geometry: { coordinates: [0, 0] },
|
||||
};
|
||||
const result = service.normalizeFeature(feature);
|
||||
assert.strictEqual(result.osmType, expected, `${input} -> ${expected}`);
|
||||
};
|
||||
|
||||
checkType('N', 'node');
|
||||
checkType('W', 'way');
|
||||
checkType('R', 'relation');
|
||||
checkType('unknown', 'unknown'); // Fallback
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user