kdmukai/webui
1
0
Fork 0
forked from btclock/webui
Code Pull requests Activity

Split up settings sections, use new datasource selector

Browse source
This commit is contained in:
Djuri 2024-12-28 17:56:48 +01:00
parent 2ce53eb499
commit 4057e18755
13 changed files with 869 additions and 720 deletions
Download patch file Download diff file Expand all files Collapse all files

142
src/lib/components/settings/DataSourceSettings.svelte Normal file
View file

@ -0,0 +1,142 @@
<script lang="ts">
import { SettingsInput, SettingsSwitch } from '$lib/components';
import { _ } from 'svelte-i18n';
import { Row, Col, FormGroup, Input, InputGroupText } from '@sveltestrap/sveltestrap';
import ToggleHeader from '../ToggleHeader.svelte';
import { uiSettings } from '$lib/uiSettings';
import { isValidHexPubKey, getPubKey, isValidNpub } from '$lib';
import { createEventDispatcher } from 'svelte';
import { DataSourceType } from '$lib/types/dataSource';
const dispatch = createEventDispatcher();
export let settings;
export let isOpen = false;
const checkValidNostrPubkey = (key: string) => {
$settings[key] = $settings[key].trim();
if (isValidNpub($settings[key])) {
dispatch('showToast', {
color: 'info',
text: $_('section.settings.convertingValidNpub')
});
}
let ret = getPubKey($settings[key]);
if (ret) $settings[key] = ret;
};
</script>
<Row>
<ToggleHeader header={$_('section.settings.section.dataSource')} bind:isOpen defaultOpen={false}>
<Row>
<Col>
<h5>Data Source</h5>
<FormGroup>
<Row>
<Col xs="12" xl="6" class="mb-2">
<Input
type="radio"
id="btclock_source"
name="dataSource"
bind:group={$settings.dataSource}
value={DataSourceType.BTCLOCK_SOURCE}
label={$_('section.settings.dataSource.btclock')}
/>
</Col>
<Col xs="12" xl="6" class="mb-2">
<Input
type="radio"
id="third_party_source"
name="dataSource"
bind:group={$settings.dataSource}
value={DataSourceType.THIRD_PARTY_SOURCE}
label={$_('section.settings.dataSource.thirdParty')}
/>
</Col>
{#if $settings.nostrRelay}
<Col xs="12" xl="6" class="mb-2">
<Input
type="radio"
id="nostr_source"
name="dataSource"
bind:group={$settings.dataSource}
value={DataSourceType.NOSTR_SOURCE}
label={$_('section.settings.dataSource.nostr')}
/>
</Col>
{/if}
<Col xs="12" xl="6" class="mb-2">
<Input
type="radio"
id="custom_source"
name="dataSource"
bind:group={$settings.dataSource}
value={DataSourceType.CUSTOM_SOURCE}
label={$_('section.settings.dataSource.custom')}
/>
</Col>
</Row>
</FormGroup>
</Col>
</Row>
{#if $settings.dataSource === DataSourceType.THIRD_PARTY_SOURCE}
<SettingsInput
id="mempoolInstance"
label={$_('section.settings.mempoolnstance')}
bind:value={$settings.mempoolInstance}
required={true}
size={$uiSettings.inputSize}
>
<InputGroupText>
<Input
type="checkbox"
bind:checked={$settings.mempoolSecure}
bsSize={$uiSettings.inputSize}
/>
HTTPS
</InputGroupText>
</SettingsInput>
{/if}
{#if $settings.dataSource === DataSourceType.NOSTR_SOURCE}
<SettingsInput
id="nostrRelay"
label={$_('section.settings.nostrRelay')}
bind:value={$settings.nostrRelay}
required={true}
size={$uiSettings.inputSize}
/>
<SettingsInput
id="nostrPubKey"
label={$_('section.settings.nostrPubKey')}
bind:value={$settings.nostrPubKey}
required={true}
minlength="64"
invalid={!isValidHexPubKey($settings.nostrPubKey)}
helpText={!isValidHexPubKey($settings.nostrPubKey)
? $_('section.settings.invalidNostrPubkey')
: undefined}
size={$uiSettings.inputSize}
onChange={() => checkValidNostrPubkey('nostrPubKey')}
onInput={() => checkValidNostrPubkey('nostrPubKey')}
/>
{/if}
{#if $settings.dataSource === DataSourceType.CUSTOM_SOURCE}
<SettingsInput
id="ceEndpoint"
label={$_('section.settings.ceEndpoint')}
bind:value={$settings.ceEndpoint}
required={true}
size={$uiSettings.inputSize}
/>
<SettingsSwitch
id="ceDisableSSL"
bind:checked={$settings.ceDisableSSL}
label={$_('section.settings.ceDisableSSL')}
size={$uiSettings.inputSize}
/>
{/if}
</ToggleHeader>
</Row>