diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs new file mode 100644 index 0000000..68cf5e7 --- /dev/null +++ b/app/components/place-details.gjs @@ -0,0 +1,186 @@ +import Component from '@glimmer/component'; +import { fn } from '@ember/helper'; +import { on } from '@ember/modifier'; +import capitalize from '../helpers/capitalize'; + +export default class PlaceDetails extends Component { + get place() { + return this.args.place || {}; + } + + get tags() { + return this.place.osmTags || {}; + } + + get name() { + return ( + this.place.title || + this.tags.name || + this.tags['name:en'] || + 'Unnamed Place' + ); + } + + get type() { + return ( + this.tags.amenity || + this.tags.shop || + this.tags.tourism || + this.tags.leisure || + this.tags.historic || + 'Point of Interest' + ); + } + + get address() { + const t = this.tags; + const parts = []; + + // Street + Number + if (t['addr:street']) { + let street = t['addr:street']; + if (t['addr:housenumber']) { + street += ` ${t['addr:housenumber']}`; + } + parts.push(street); + } + + // Postcode + City + if (t['addr:city']) { + let city = t['addr:city']; + if (t['addr:postcode']) { + city = `${t['addr:postcode']} ${city}`; + } + parts.push(city); + } + + if (parts.length === 0) return null; + return parts.join(', '); + } + + get phone() { + return this.tags.phone || this.tags['contact:phone']; + } + + get website() { + return this.place.url || this.tags.website || this.tags['contact:website']; + } + + get openingHours() { + return this.tags.opening_hours; + } + + get cuisine() { + if (!this.tags.cuisine) return null; + return this.tags.cuisine + .split(';') + .map(c => capitalize.compute([c])) + .map(c => c.replace('_', ' ')) + .join(', '); + } + + get wikipedia() { + return this.tags.wikipedia; + } + + get geoLink() { + const lat = this.place.lat; + const lon = this.place.lon; + if (!lat || !lon) return '#'; + const label = encodeURIComponent(this.name); + return `geo:${lat},${lon}?q=${lat},${lon}(${label})`; + } + + get visibleGeoLink() { + const lat = this.place.lat; + const lon = this.place.lon; + if (!lat || !lon) return ''; + return `${lat}, ${lon}`; + } + + get osmUrl() { + const id = this.place.osmId; + if (!id) return null; + const type = this.place.osmType || 'node'; + return `https://www.openstreetmap.org/${type}/${id}`; + } + + +} diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs index bc5e0f5..72a01c4 100644 --- a/app/components/places-sidebar.gjs +++ b/app/components/places-sidebar.gjs @@ -4,6 +4,7 @@ import { action } from '@ember/object'; import { on } from '@ember/modifier'; import { fn } from '@ember/helper'; import or from 'ember-truth-helpers/helpers/or'; +import PlaceDetails from './place-details'; export default class PlacesSidebar extends Component { @service storage; @@ -160,77 +161,10 @@ export default class PlacesSidebar extends Component {
{{#if @selectedPlace}} -
-

{{or - @selectedPlace.title - @selectedPlace.osmTags.name - @selectedPlace.osmTags.name:en - "Unnamed Place" - }}

-

- {{or - @selectedPlace.osmTags.amenity - @selectedPlace.osmTags.shop - @selectedPlace.osmTags.tourism - @selectedPlace.osmTags.leisure - @selectedPlace.osmTags.historic - }} - {{#if @selectedPlace.description}} - {{@selectedPlace.description}} - {{/if}} -

- - {{#if (or @selectedPlace.url @selectedPlace.osmTags.website)}} -

Website

- {{/if}} - - {{#if @selectedPlace.osmTags.opening_hours}} -

Open: - {{@selectedPlace.osmTags.opening_hours}}

- {{/if}} - -
- -
- -
- {{#if (or @selectedPlace.osmId @selectedPlace.id)}} -

- {{this.visibleGeoLink}}

-

OSM ID: - {{or - @selectedPlace.osmId - @selectedPlace.id - }}

- {{/if}} -
-
+ {{else}} {{#if @places}}