diff --git a/app/components/icon.gjs b/app/components/icon.gjs index 6b5c90f..22175f0 100644 --- a/app/components/icon.gjs +++ b/app/components/icon.gjs @@ -1,65 +1,10 @@ import Component from '@glimmer/component'; import { htmlSafe } from '@ember/template'; - -import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw'; -import activity from 'feather-icons/dist/icons/activity.svg?raw'; -import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw'; -import clock from 'feather-icons/dist/icons/clock.svg?raw'; -import edit from 'feather-icons/dist/icons/edit.svg?raw'; -import facebook from 'feather-icons/dist/icons/facebook.svg?raw'; -import globe from 'feather-icons/dist/icons/globe.svg?raw'; -import home from 'feather-icons/dist/icons/home.svg?raw'; -import instagram from 'feather-icons/dist/icons/instagram.svg?raw'; -import logIn from 'feather-icons/dist/icons/log-in.svg?raw'; -import logOut from 'feather-icons/dist/icons/log-out.svg?raw'; -import mail from 'feather-icons/dist/icons/mail.svg?raw'; -import map from 'feather-icons/dist/icons/map.svg?raw'; -import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw'; -import menu from 'feather-icons/dist/icons/menu.svg?raw'; -import navigation from 'feather-icons/dist/icons/navigation.svg?raw'; -import phone from 'feather-icons/dist/icons/phone.svg?raw'; -import plus from 'feather-icons/dist/icons/plus.svg?raw'; -import server from 'feather-icons/dist/icons/server.svg?raw'; -import search from 'feather-icons/dist/icons/search.svg?raw'; -import settings from 'feather-icons/dist/icons/settings.svg?raw'; -import target from 'feather-icons/dist/icons/target.svg?raw'; -import user from 'feather-icons/dist/icons/user.svg?raw'; -import x from 'feather-icons/dist/icons/x.svg?raw'; -import zap from 'feather-icons/dist/icons/zap.svg?raw'; -import wikipedia from '../icons/wikipedia.svg?raw'; - -const ICONS = { - 'arrow-left': arrowLeft, - activity, - bookmark, - clock, - edit, - facebook, - globe, - home, - instagram, - 'log-in': logIn, - 'log-out': logOut, - mail, - map, - 'map-pin': mapPin, - menu, - navigation, - phone, - plus, - server, - search, - settings, - target, - user, - wikipedia, - x, - zap, -}; +import { getIcon } from '../utils/icons'; export default class IconComponent extends Component { get svg() { - return ICONS[this.args.name]; + return getIcon(this.args.name); } get size() { diff --git a/app/components/map.gjs b/app/components/map.gjs index 41bd482..e434fc6 100644 --- a/app/components/map.gjs +++ b/app/components/map.gjs @@ -60,9 +60,30 @@ export default class MapComponent extends Component { // Create a vector source and layer for bookmarks this.bookmarkSource = new VectorSource(); - const bookmarkLayer = new VectorLayer({ - source: this.bookmarkSource, - style: [ + + const bookmarkStyleFunction = (feature) => { + const originalPlace = feature.get('originalPlace'); + let color = + getComputedStyle(document.documentElement) + .getPropertyValue('--default-list-color') + .trim() || '#000000'; // Fallback to black if variable is missing to make error obvious + + if ( + originalPlace && + originalPlace._listIds && + originalPlace._listIds.length > 0 + ) { + // Find the first list color + // We need access to storage.lists. + // Since this is inside setupMap, 'this' refers to the component instance. + const firstListId = originalPlace._listIds[0]; + const list = this.storage.lists.find((l) => l.id === firstListId); + if (list && list.color) { + color = list.color; + } + } + + return [ new Style({ image: new Circle({ radius: 10, @@ -73,14 +94,19 @@ export default class MapComponent extends Component { new Style({ image: new Circle({ radius: 9, - fill: new Fill({ color: '#ffcc33' }), // Gold/Yellow + fill: new Fill({ color: color }), stroke: new Stroke({ color: '#fff', width: 2, }), }), }), - ], + ]; + }; + + const bookmarkLayer = new VectorLayer({ + source: this.bookmarkSource, + style: bookmarkStyleFunction, zIndex: 10, // Ensure it sits above the map tiles }); diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs index db23a2f..732b7b2 100644 --- a/app/components/place-details.gjs +++ b/app/components/place-details.gjs @@ -1,23 +1,39 @@ import Component from '@glimmer/component'; -import { fn } from '@ember/helper'; +import { service } from '@ember/service'; import { on } from '@ember/modifier'; import { htmlSafe } from '@ember/template'; import { humanizeOsmTag } from '../utils/format-text'; import { getLocalizedName, getPlaceType } from '../utils/osm'; +import { mapToStorageSchema } from '../utils/place-mapping'; import { getSocialInfo } from '../utils/social-links'; import Icon from '../components/icon'; import PlaceEditForm from './place-edit-form'; +import PlaceListsManager from './place-lists-manager'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class PlaceDetails extends Component { + @service storage; @tracked isEditing = false; + @tracked showLists = false; + + get isSaved() { + return this.storage.isPlaceSaved(this.place.id || this.place.osmId); + } get place() { return this.args.place || {}; } + get saveablePlace() { + if (this.place.createdAt) { + return this.place; + } + + return mapToStorageSchema(this.place); + } + get tags() { return this.place.osmTags || {}; } @@ -28,7 +44,7 @@ export default class PlaceDetails extends Component { @action startEditing() { - if (!this.place.createdAt) return; // Only allow editing saved places + if (!this.isSaved) return; // Only allow editing saved places this.isEditing = true; } @@ -37,6 +53,21 @@ export default class PlaceDetails extends Component { this.isEditing = false; } + @action + toggleLists(event) { + // Prevent this click from propagating to the document listener + // which handles the "click outside" logic. + if (event) { + event.stopPropagation(); + } + this.showLists = !this.showLists; + } + + @action + closeLists() { + this.showLists = false; + } + @action async saveChanges(changes) { if (this.args.onSave) { @@ -247,23 +278,29 @@ export default class PlaceDetails extends Component { {{/if}}
- +
+ - {{#if this.place.createdAt}} + {{#if this.showLists}} + + {{/if}} +
+ + {{#if this.isSaved}}