Refactor settings menu, add Nostr settings
Adds a setting to control if photos should be uploaded only to the main/default server, or all known servers of a user. Only upload to the main server by default, to speed up adding photos.
This commit is contained in:
@@ -1,163 +1,25 @@
|
|||||||
import Component from '@glimmer/component';
|
|
||||||
import { on } from '@ember/modifier';
|
import { on } from '@ember/modifier';
|
||||||
import { service } from '@ember/service';
|
|
||||||
import { action } from '@ember/object';
|
|
||||||
import Icon from '#components/icon';
|
import Icon from '#components/icon';
|
||||||
import eq from 'ember-truth-helpers/helpers/eq';
|
import AppMenuSettingsMapUi from './settings/map-ui';
|
||||||
|
import AppMenuSettingsApis from './settings/apis';
|
||||||
|
import AppMenuSettingsNostr from './settings/nostr';
|
||||||
|
|
||||||
export default class AppMenuSettings extends Component {
|
<template>
|
||||||
@service settings;
|
<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>
|
||||||
|
|
||||||
@action
|
<div class="sidebar-content">
|
||||||
updateApi(event) {
|
<section class="settings-section">
|
||||||
this.settings.updateOverpassApi(event.target.value);
|
<AppMenuSettingsMapUi />
|
||||||
}
|
<AppMenuSettingsApis />
|
||||||
|
<AppMenuSettingsNostr />
|
||||||
@action
|
</section>
|
||||||
toggleKinetic(event) {
|
</div>
|
||||||
this.settings.updateMapKinetic(event.target.value === 'true');
|
</template>
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
toggleQuickSearchButtons(event) {
|
|
||||||
this.settings.updateShowQuickSearchButtons(event.target.value === 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
updatePhotonApi(event) {
|
|
||||||
this.settings.updatePhotonApi(event.target.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{! template-lint-disable no-nested-interactive }}
|
|
||||||
<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">
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<Icon @name="map" @size={{20}} />
|
|
||||||
<span>Map & UI</span>
|
|
||||||
</summary>
|
|
||||||
<div class="details-content">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="show-quick-search">Quick search buttons visible</label>
|
|
||||||
<select
|
|
||||||
id="show-quick-search"
|
|
||||||
class="form-control"
|
|
||||||
{{on "change" this.toggleQuickSearchButtons}}
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="true"
|
|
||||||
selected={{if
|
|
||||||
this.settings.showQuickSearchButtons
|
|
||||||
"selected"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Yes
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="false"
|
|
||||||
selected={{unless
|
|
||||||
this.settings.showQuickSearchButtons
|
|
||||||
"selected"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
|
|
||||||
<select
|
|
||||||
id="map-kinetic"
|
|
||||||
class="form-control"
|
|
||||||
{{on "change" this.toggleKinetic}}
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="true"
|
|
||||||
selected={{if this.settings.mapKinetic "selected"}}
|
|
||||||
>
|
|
||||||
On
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="false"
|
|
||||||
selected={{unless this.settings.mapKinetic "selected"}}
|
|
||||||
>
|
|
||||||
Off
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<Icon @name="server" @size={{20}} />
|
|
||||||
<span>API Providers</span>
|
|
||||||
</summary>
|
|
||||||
<div class="details-content">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="overpass-api">Overpass API Provider</label>
|
|
||||||
<select
|
|
||||||
id="overpass-api"
|
|
||||||
class="form-control"
|
|
||||||
{{on "change" this.updateApi}}
|
|
||||||
>
|
|
||||||
{{#each this.settings.overpassApis as |api|}}
|
|
||||||
<option
|
|
||||||
value={{api.url}}
|
|
||||||
selected={{if
|
|
||||||
(eq api.url this.settings.overpassApi)
|
|
||||||
"selected"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{{api.name}}
|
|
||||||
</option>
|
|
||||||
{{/each}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="photon-api">Photon API Provider</label>
|
|
||||||
<select
|
|
||||||
id="photon-api"
|
|
||||||
class="form-control"
|
|
||||||
{{on "change" this.updatePhotonApi}}
|
|
||||||
>
|
|
||||||
{{#each this.settings.photonApis as |api|}}
|
|
||||||
<option
|
|
||||||
value={{api.url}}
|
|
||||||
selected={{if
|
|
||||||
(eq api.url this.settings.photonApi)
|
|
||||||
"selected"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{{api.name}}
|
|
||||||
</option>
|
|
||||||
{{/each}}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<Icon @name="zap" @size={{20}} />
|
|
||||||
<span>Nostr</span>
|
|
||||||
</summary>
|
|
||||||
<div class="details-content">
|
|
||||||
{{! Nostr settings will go here }}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
|
|||||||
69
app/components/app-menu/settings/apis.gjs
Normal file
69
app/components/app-menu/settings/apis.gjs
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import Component from '@glimmer/component';
|
||||||
|
import { on } from '@ember/modifier';
|
||||||
|
import { service } from '@ember/service';
|
||||||
|
import { action } from '@ember/object';
|
||||||
|
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>
|
||||||
|
<summary>
|
||||||
|
<Icon @name="server" @size={{20}} />
|
||||||
|
<span>API Providers</span>
|
||||||
|
</summary>
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="overpass-api">Overpass API Provider</label>
|
||||||
|
<select
|
||||||
|
id="overpass-api"
|
||||||
|
class="form-control"
|
||||||
|
{{on "change" this.updateApi}}
|
||||||
|
>
|
||||||
|
{{#each this.settings.overpassApis as |api|}}
|
||||||
|
<option
|
||||||
|
value={{api.url}}
|
||||||
|
selected={{if
|
||||||
|
(eq api.url this.settings.overpassApi)
|
||||||
|
"selected"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{{api.name}}
|
||||||
|
</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="photon-api">Photon API Provider</label>
|
||||||
|
<select
|
||||||
|
id="photon-api"
|
||||||
|
class="form-control"
|
||||||
|
{{on "change" this.updatePhotonApi}}
|
||||||
|
>
|
||||||
|
{{#each this.settings.photonApis as |api|}}
|
||||||
|
<option
|
||||||
|
value={{api.url}}
|
||||||
|
selected={{if (eq api.url this.settings.photonApi) "selected"}}
|
||||||
|
>
|
||||||
|
{{api.name}}
|
||||||
|
</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</template>
|
||||||
|
}
|
||||||
76
app/components/app-menu/settings/map-ui.gjs
Normal file
76
app/components/app-menu/settings/map-ui.gjs
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import Component from '@glimmer/component';
|
||||||
|
import { on } from '@ember/modifier';
|
||||||
|
import { service } from '@ember/service';
|
||||||
|
import { action } from '@ember/object';
|
||||||
|
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>
|
||||||
|
<summary>
|
||||||
|
<Icon @name="map" @size={{20}} />
|
||||||
|
<span>Map & UI</span>
|
||||||
|
</summary>
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="show-quick-search">Quick search buttons visible</label>
|
||||||
|
<select
|
||||||
|
id="show-quick-search"
|
||||||
|
class="form-control"
|
||||||
|
{{on "change" this.toggleQuickSearchButtons}}
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="true"
|
||||||
|
selected={{if this.settings.showQuickSearchButtons "selected"}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="false"
|
||||||
|
selected={{unless
|
||||||
|
this.settings.showQuickSearchButtons
|
||||||
|
"selected"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
|
||||||
|
<select
|
||||||
|
id="map-kinetic"
|
||||||
|
class="form-control"
|
||||||
|
{{on "change" this.toggleKinetic}}
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="true"
|
||||||
|
selected={{if this.settings.mapKinetic "selected"}}
|
||||||
|
>
|
||||||
|
On
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="false"
|
||||||
|
selected={{unless this.settings.mapKinetic "selected"}}
|
||||||
|
>
|
||||||
|
Off
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</template>
|
||||||
|
}
|
||||||
53
app/components/app-menu/settings/nostr.gjs
Normal file
53
app/components/app-menu/settings/nostr.gjs
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import Component from '@glimmer/component';
|
||||||
|
import { on } from '@ember/modifier';
|
||||||
|
import { service } from '@ember/service';
|
||||||
|
import { action } from '@ember/object';
|
||||||
|
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>
|
||||||
|
<summary>
|
||||||
|
<Icon @name="zap" @size={{20}} />
|
||||||
|
<span>Nostr</span>
|
||||||
|
</summary>
|
||||||
|
<div class="details-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="nostr-photo-fallback-uploads">Upload photos to fallback
|
||||||
|
servers</label>
|
||||||
|
<select
|
||||||
|
id="nostr-photo-fallback-uploads"
|
||||||
|
class="form-control"
|
||||||
|
{{on "change" this.togglePhotoFallbackUploads}}
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="true"
|
||||||
|
selected={{if this.settings.nostrPhotoFallbackUploads "selected"}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="false"
|
||||||
|
selected={{unless
|
||||||
|
this.settings.nostrPhotoFallbackUploads
|
||||||
|
"selected"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</template>
|
||||||
|
}
|
||||||
@@ -21,10 +21,17 @@ function getBlossomUrl(serverUrl, path) {
|
|||||||
export default class BlossomService extends Service {
|
export default class BlossomService extends Service {
|
||||||
@service nostrAuth;
|
@service nostrAuth;
|
||||||
@service nostrData;
|
@service nostrData;
|
||||||
|
@service settings;
|
||||||
|
|
||||||
get servers() {
|
get servers() {
|
||||||
const servers = this.nostrData.blossomServers;
|
const servers = this.nostrData.blossomServers;
|
||||||
return servers.length ? servers : [DEFAULT_BLOSSOM_SERVER];
|
const allServers = servers.length ? servers : [DEFAULT_BLOSSOM_SERVER];
|
||||||
|
|
||||||
|
if (!this.settings.nostrPhotoFallbackUploads) {
|
||||||
|
return [allServers[0]];
|
||||||
|
}
|
||||||
|
|
||||||
|
return allServers;
|
||||||
}
|
}
|
||||||
|
|
||||||
async _getAuthHeader(action, hash, serverUrl) {
|
async _getAuthHeader(action, hash, serverUrl) {
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export default class SettingsService extends Service {
|
|||||||
@tracked mapKinetic = true;
|
@tracked mapKinetic = true;
|
||||||
@tracked photonApi = 'https://photon.komoot.io/api/';
|
@tracked photonApi = 'https://photon.komoot.io/api/';
|
||||||
@tracked showQuickSearchButtons = true;
|
@tracked showQuickSearchButtons = true;
|
||||||
|
@tracked nostrPhotoFallbackUploads = false;
|
||||||
|
|
||||||
overpassApis = [
|
overpassApis = [
|
||||||
{
|
{
|
||||||
@@ -64,6 +65,14 @@ export default class SettingsService extends Service {
|
|||||||
if (savedShowQuickSearch !== null) {
|
if (savedShowQuickSearch !== null) {
|
||||||
this.showQuickSearchButtons = savedShowQuickSearch === 'true';
|
this.showQuickSearchButtons = savedShowQuickSearch === 'true';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const savedNostrPhotoFallbackUploads = localStorage.getItem(
|
||||||
|
'marco:nostr-photo-fallback-uploads'
|
||||||
|
);
|
||||||
|
if (savedNostrPhotoFallbackUploads !== null) {
|
||||||
|
this.nostrPhotoFallbackUploads =
|
||||||
|
savedNostrPhotoFallbackUploads === 'true';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updateOverpassApi(url) {
|
updateOverpassApi(url) {
|
||||||
@@ -84,4 +93,9 @@ export default class SettingsService extends Service {
|
|||||||
updatePhotonApi(url) {
|
updatePhotonApi(url) {
|
||||||
this.photonApi = url;
|
this.photonApi = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateNostrPhotoFallbackUploads(enabled) {
|
||||||
|
this.nostrPhotoFallbackUploads = enabled;
|
||||||
|
localStorage.setItem('marco:nostr-photo-fallback-uploads', String(enabled));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user