raucao/marco
1
0
Fork 0
Code Issues 17 Pull Requests Actions Releases 5 Activity

Refactor settings, DRY up everything

Browse Source
This commit is contained in:
Râu Cao
2026-04-21 15:59:55 +04:00
parent a384e83dd0
commit c5316bf336
5 changed files with 122 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/app-menu/settings.gjs
View File

@@ -1,25 +1,41 @@
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { action } from '@ember/object';
import { service } from '@ember/service';
import Icon from '#components/icon';
import AppMenuSettingsMapUi from './settings/map-ui';
import AppMenuSettingsApis from './settings/apis';
import AppMenuSettingsNostr from './settings/nostr';
<template>
<div class="sidebar-header">
<button type="button" class="back-btn" {{on "click" @onBack}}>
<Icon @name="arrow-left" @size={{20}} @color="#333" />
</button>
<h2>Settings</h2>
<button type="button" class="close-btn" {{on "click" @onClose}}>
<Icon @name="x" @size={{20}} @color="#333" />
</button>
</div>
export default class AppMenuSettings extends Component {
@service settings;
<div class="sidebar-content">
<section class="settings-section">
<AppMenuSettingsMapUi />
<AppMenuSettingsApis />
<AppMenuSettingsNostr />
</section>
</div>
</template>
@action
updateSetting(key, event) {
let value = event.target.value;
if (value === 'true') value = true;
if (value === 'false') value = false;
this.settings.update(key, value);
}
<template>
<div class="sidebar-header">
<button type="button" class="back-btn" {{on "click" @onBack}}>
<Icon @name="arrow-left" @size={{20}} @color="#333" />
</button>
<h2>Settings</h2>
<button type="button" class="close-btn" {{on "click" @onClose}}>
<Icon @name="x" @size={{20}} @color="#333" />
</button>
</div>
<div class="sidebar-content">
<section class="settings-section">
<AppMenuSettingsMapUi @onChange={{this.updateSetting}} />
<AppMenuSettingsApis @onChange={{this.updateSetting}} />
<AppMenuSettingsNostr @onChange={{this.updateSetting}} />
</section>
</div>
</template>
}

16
app/components/app-menu/settings/apis.gjs
View File

@@ -1,23 +1,13 @@
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { service } from '@ember/service';
import { action } from '@ember/object';
import { fn } from '@ember/helper';
import Icon from '#components/icon';
import eq from 'ember-truth-helpers/helpers/eq';
export default class AppMenuSettingsApis extends Component {
@service settings;
@action
updateApi(event) {
this.settings.updateOverpassApi(event.target.value);
}
@action
updatePhotonApi(event) {
this.settings.updatePhotonApi(event.target.value);
}
<template>
{{! template-lint-disable no-nested-interactive }}
<details>
@@ -31,7 +21,7 @@ export default class AppMenuSettingsApis extends Component {
<select
id="overpass-api"
class="form-control"
{{on "change" this.updateApi}}
{{on "change" (fn @onChange "overpassApi")}}
>
{{#each this.settings.overpassApis as |api|}}
<option
@@ -51,7 +41,7 @@ export default class AppMenuSettingsApis extends Component {
<select
id="photon-api"
class="form-control"
{{on "change" this.updatePhotonApi}}
{{on "change" (fn @onChange "photonApi")}}
>
{{#each this.settings.photonApis as |api|}}
<option

16
app/components/app-menu/settings/map-ui.gjs
View File

@@ -1,22 +1,12 @@
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { service } from '@ember/service';
import { action } from '@ember/object';
import { fn } from '@ember/helper';
import Icon from '#components/icon';
export default class AppMenuSettingsMapUi extends Component {
@service settings;
@action
toggleKinetic(event) {
this.settings.updateMapKinetic(event.target.value === 'true');
}
@action
toggleQuickSearchButtons(event) {
this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
}
<template>
{{! template-lint-disable no-nested-interactive }}
<details>
@@ -30,7 +20,7 @@ export default class AppMenuSettingsMapUi extends Component {
<select
id="show-quick-search"
class="form-control"
{{on "change" this.toggleQuickSearchButtons}}
{{on "change" (fn @onChange "showQuickSearchButtons")}}
>
<option
value="true"
@@ -54,7 +44,7 @@ export default class AppMenuSettingsMapUi extends Component {
<select
id="map-kinetic"
class="form-control"
{{on "change" this.toggleKinetic}}
{{on "change" (fn @onChange "mapKinetic")}}
>
<option
value="true"

11
app/components/app-menu/settings/nostr.gjs
View File

@@ -1,19 +1,12 @@
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { service } from '@ember/service';
import { action } from '@ember/object';
import { fn } from '@ember/helper';
import Icon from '#components/icon';
export default class AppMenuSettingsNostr extends Component {
@service settings;
@action
togglePhotoFallbackUploads(event) {
this.settings.updateNostrPhotoFallbackUploads(
event.target.value === 'true'
);
}
<template>
{{! template-lint-disable no-nested-interactive }}
<details>
@@ -28,7 +21,7 @@ export default class AppMenuSettingsNostr extends Component {
<select
id="nostr-photo-fallback-uploads"
class="form-control"
{{on "change" this.togglePhotoFallbackUploads}}
{{on "change" (fn @onChange "nostrPhotoFallbackUploads")}}
>
<option
value="true"

134
app/services/settings.js
View File

@@ -1,12 +1,21 @@
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
const DEFAULT_SETTINGS = {
overpassApi: 'https://overpass-api.de/api/interpreter',
mapKinetic: true,
photonApi: 'https://photon.komoot.io/api/',
showQuickSearchButtons: true,
nostrPhotoFallbackUploads: false,
};
export default class SettingsService extends Service {
@tracked overpassApi = 'https://overpass-api.de/api/interpreter';
@tracked mapKinetic = true;
@tracked photonApi = 'https://photon.komoot.io/api/';
@tracked showQuickSearchButtons = true;
@tracked nostrPhotoFallbackUploads = false;
@tracked overpassApi = DEFAULT_SETTINGS.overpassApi;
@tracked mapKinetic = DEFAULT_SETTINGS.mapKinetic;
@tracked photonApi = DEFAULT_SETTINGS.photonApi;
@tracked showQuickSearchButtons = DEFAULT_SETTINGS.showQuickSearchButtons;
@tracked nostrPhotoFallbackUploads =
DEFAULT_SETTINGS.nostrPhotoFallbackUploads;
overpassApis = [
{
@@ -40,62 +49,79 @@ export default class SettingsService extends Service {
}
loadSettings() {
const savedApi = localStorage.getItem('marco:overpass-api');
if (savedApi) {
// Check if saved API is still in the allowed list
const isValid = this.overpassApis.some((api) => api.url === savedApi);
if (isValid) {
this.overpassApi = savedApi;
} else {
// If not valid, revert to default
this.overpassApi = 'https://overpass-api.de/api/interpreter';
localStorage.setItem('marco:overpass-api', this.overpassApi);
let settings = {};
const savedSettings = localStorage.getItem('marco:settings');
if (savedSettings) {
try {
settings = JSON.parse(savedSettings);
} catch (e) {
console.error('Failed to parse settings from localStorage', e);
}
} else {
// Migration from old individual keys
const savedApi = localStorage.getItem('marco:overpass-api');
if (savedApi) settings.overpassApi = savedApi;
const savedKinetic = localStorage.getItem('marco:map-kinetic');
if (savedKinetic !== null) settings.mapKinetic = savedKinetic === 'true';
const savedShowQuickSearch = localStorage.getItem(
'marco:show-quick-search'
);
if (savedShowQuickSearch !== null) {
settings.showQuickSearchButtons = savedShowQuickSearch === 'true';
}
const savedNostrPhotoFallbackUploads = localStorage.getItem(
'marco:nostr-photo-fallback-uploads'
);
if (savedNostrPhotoFallbackUploads !== null) {
settings.nostrPhotoFallbackUploads =
savedNostrPhotoFallbackUploads === 'true';
}
const savedPhotonApi = localStorage.getItem('marco:photon-api');
if (savedPhotonApi) settings.photonApi = savedPhotonApi;
}
const savedKinetic = localStorage.getItem('marco:map-kinetic');
if (savedKinetic !== null) {
this.mapKinetic = savedKinetic === 'true';
}
// Default is true (initialized in class field)
// Merge with defaults
const finalSettings = { ...DEFAULT_SETTINGS, ...settings };
const savedShowQuickSearch = localStorage.getItem(
'marco:show-quick-search'
// Validate overpass API
const isValid = this.overpassApis.some(
(api) => api.url === finalSettings.overpassApi
);
if (savedShowQuickSearch !== null) {
this.showQuickSearchButtons = savedShowQuickSearch === 'true';
if (!isValid) {
finalSettings.overpassApi = DEFAULT_SETTINGS.overpassApi;
}
const savedNostrPhotoFallbackUploads = localStorage.getItem(
'marco:nostr-photo-fallback-uploads'
);
if (savedNostrPhotoFallbackUploads !== null) {
this.nostrPhotoFallbackUploads =
savedNostrPhotoFallbackUploads === 'true';
// Apply to tracked properties
this.overpassApi = finalSettings.overpassApi;
this.mapKinetic = finalSettings.mapKinetic;
this.photonApi = finalSettings.photonApi;
this.showQuickSearchButtons = finalSettings.showQuickSearchButtons;
this.nostrPhotoFallbackUploads = finalSettings.nostrPhotoFallbackUploads;
// Save to ensure migrated settings are stored in the new format
this.saveSettings();
}
saveSettings() {
const settings = {
overpassApi: this.overpassApi,
mapKinetic: this.mapKinetic,
photonApi: this.photonApi,
showQuickSearchButtons: this.showQuickSearchButtons,
nostrPhotoFallbackUploads: this.nostrPhotoFallbackUploads,
};
localStorage.setItem('marco:settings', JSON.stringify(settings));
}
update(key, value) {
if (key in DEFAULT_SETTINGS) {
this[key] = value;
this.saveSettings();
}
}
updateOverpassApi(url) {
this.overpassApi = url;
localStorage.setItem('marco:overpass-api', url);
}
updateMapKinetic(enabled) {
this.mapKinetic = enabled;
localStorage.setItem('marco:map-kinetic', String(enabled));
}
updateShowQuickSearchButtons(enabled) {
this.showQuickSearchButtons = enabled;
localStorage.setItem('marco:show-quick-search', String(enabled));
}
updatePhotonApi(url) {
this.photonApi = url;
}
updateNostrPhotoFallbackUploads(enabled) {
this.nostrPhotoFallbackUploads = enabled;
localStorage.setItem('marco:nostr-photo-fallback-uploads', String(enabled));
}
}