fix: LNBits Price source switch

package.json

@@ -63,7 +63,8 @@
 		"nostr-tools": "^2.7.1",
 		"patch-package": "^8.0.0",
 		"svelte-bootstrap-icons": "^3.1.1",
-		"svelte-i18n": "^4.0.0"
+		"svelte-i18n": "^4.0.0",
+		"svelte-multiselect": "^11.0.0-rc.1"
 	},
 	"resolutions": {
 		"es5-ext": ">=0.10.64",

src/lib/components/SettingsInput.svelte

@@ -25,10 +25,10 @@
 	export let invalid: boolean | undefined = undefined;
 	export let minlength: string | undefined = undefined;
 	export let onChange: (() => void) | undefined = undefined;
-	export let onInput: ((e: Event) => void) | undefined = undefined;
+	export let onInput: (() => void) | undefined = undefined;
 
-	const onInputHandler = (e: Event) => {
-		onInput?.(e);
+	const onInputHandler = () => {
+		onInput?.();
 	};
 </script>
 

src/lib/components/settings/DataSourceSettings.svelte

@@ -138,5 +138,31 @@
 				size={$uiSettings.inputSize}
 			/>
 		{/if}
+		<Row>
+			<SettingsSwitch
+				id="lnbitsEnabled"
+				bind:checked={$settings.lnbitsEnabled}
+				label="{$_('section.settings.lnbitsEnabled')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+		</Row>
+		{#if $settings.lnbitsEnabled}
+			<SettingsInput
+				id="lnbitsInstance"
+				label={$_('section.settings.lnbitsInstance')}
+				bind:value={$settings.lnbitsInstance}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<InputGroupText>
+					<Input
+						type="checkbox"
+						bind:checked={$settings.lnbitsHttps}
+						bsSize={$uiSettings.inputSize}
+					/>
+					HTTPS
+				</InputGroupText>
+			</SettingsInput>
+		{/if}
 	</ToggleHeader>
 </Row>

src/lib/components/settings/DisplaySettings.svelte

@@ -33,8 +33,6 @@
 			: font.charAt(0).toUpperCase() + font.slice(1),
 		font
 	]);
-
-	let timePerScreen = $settings.timePerScreen;
 </script>
 
 <Row>
@@ -63,8 +61,7 @@
 		<SettingsInput
 			id="timePerScreen"
 			label={$_('section.settings.timePerScreen')}
-			bind:value={timePerScreen}
-			onInput={(e) => ($settings.timePerScreen = Number(e.target.value))}
+			bind:value={$settings.timePerScreen}
 			type="number"
 			min={1}
 			step={1}
@@ -72,6 +69,7 @@
 			suffix={$_('time.minutes')}
 			size={$uiSettings.inputSize}
 		/>
+
 		<SettingsInput
 			id="fullRefreshMin"
 			label={$_('section.settings.fullRefreshEvery')}

src/lib/components/settings/ExtraFeaturesSettings.svelte

@@ -285,20 +285,6 @@
 								/>
 							{/if}
 						</Row>
-						<Row>
-							<SettingsSwitch
-								id="screenRestoreZap"
-								bind:checked={$settings.scrnRestoreZap}
-								label={$_('section.settings.screenRestoreZap', {
-									default: 'Restore previous screen state after zap (Uses {setting} setting)',
-									values: {
-										setting: $_('section.settings.timePerScreen')
-									}
-								})}
-								size={$uiSettings.inputSize}
-								col={{ md: '12', xl: '12', xxl: '12' }}
-							/>
-						</Row>
 						<SettingsInput
 							id="nostrZapPubkey"
 							label={$_('section.settings.nostrZapPubkey')}

src/lib/components/settings/ScreenSpecificSettings.svelte

@@ -5,9 +5,49 @@
 	import ToggleHeader from '../ToggleHeader.svelte';
 	import { uiSettings } from '$lib/uiSettings';
 	import { DataSourceType } from '$lib/types/dataSource';
-
+	import { onMount } from 'svelte';
+	import MultiSelect from 'svelte-multiselect';
 	export let settings;
 	export let isOpen = false;
+
+	let availableCurrencies: string[] = [];
+	let prevLnbitsEnabled: boolean;
+
+	function updateCurrencies(enabled: boolean) {
+		if (enabled) {
+			fetch(`https://${$settings.lnbitsInstance}/api/v1/currencies`)
+				.then((res) => res.json())
+				.then((data) => {
+					availableCurrencies = data;
+				});
+		} else {
+			// Remove any currencies from actCurrencies that aren't in availableCurrencies
+			$settings.actCurrencies = $settings.actCurrencies.filter((curr: string) =>
+				$settings.availableCurrencies.includes(curr)
+			);
+			activeCurrencies = $settings.actCurrencies;
+			availableCurrencies = $settings.availableCurrencies;
+		}
+	}
+
+	let activeCurrencies: { label: string; value: string }[] = [];
+
+	onMount(() => {
+		prevLnbitsEnabled = $settings.lnbitsEnabled;
+		updateCurrencies($settings.lnbitsEnabled);
+	});
+
+	$: {
+		if (prevLnbitsEnabled !== $settings.lnbitsEnabled) {
+			prevLnbitsEnabled = $settings.lnbitsEnabled;
+			updateCurrencies($settings.lnbitsEnabled);
+		}
+		if (!activeCurrencies.length) {
+			activeCurrencies = $settings.actCurrencies;
+		} else {
+			$settings.actCurrencies = activeCurrencies;
+		}
+	}
 </script>
 
 <Row>
@@ -75,16 +115,6 @@
 				size={$uiSettings.inputSize}
 				col={{ md: '6', xl: '12', xxl: '6' }}
 			/>
-
-			{#if !$settings.actCurrencies}
-				<SettingsSwitch
-					id="fetchEurPrice"
-					bind:checked={$settings.fetchEurPrice}
-					label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-					size={$uiSettings.inputSize}
-					col={{ md: '6', xl: '12', xxl: '6' }}
-				/>
-			{/if}
 		</Row>
 		<Row>
 			<h5>{$_('section.settings.screens')}</h5>
@@ -104,22 +134,14 @@
 			<Row>
 				<h5>{$_('section.settings.currencies')}</h5>
 				<small>{$_('restartRequired')}</small>
-				{#if $settings.availableCurrencies}
-					{#each $settings.availableCurrencies as c}
-						<Col md="6" xl="12" xxl="6">
-							<div class="form-check form-control-{$uiSettings.inputSize}">
-								<input
-									id="currency_{c}"
-									bind:group={$settings.actCurrencies}
-									value={c}
-									type="checkbox"
-									class="form-check-input"
+				<Col>
+					<MultiSelect
+						options={availableCurrencies}
+						bind:value={activeCurrencies}
+						placeholder={$_('section.settings.currencies')}
+						--sms-options-bg="var(--bs-body-bg, #212529)"
 					/>
-								<label class="form-check-label" for="currency_{c}">{c}</label>
-							</div>
 				</Col>
-					{/each}
-				{/if}
 			</Row>
 		{/if}
 	</ToggleHeader>

src/lib/locales/de.json

@@ -73,8 +73,7 @@
 			"dndStartHour": "Startstunde",
 			"dndStartMinute": "Startminute",
 			"dndEndHour": "Endstunde",
-			"dndEndMinute": "Schlussminute",
-			"screenRestoreZap": "Vorherigen Bildschirmzustand nach Zap wieder herstellen (Verwendet {setting} Einstellung)"
+			"dndEndMinute": "Schlussminute"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",
@@ -89,8 +88,7 @@
 			"hostname": "Hostname",
 			"frontlight": "Displaybeleuchtung",
 			"turnOn": "Einschalten",
-			"flashFrontlight": "Blinken",
-			"fwCommitMismatch": "Die Firmware -Version unterscheidet sich von der WebUI -Version, dies kann zu Problemen führen."
+			"flashFrontlight": "Blinken"
 		},
 		"status": {
 			"title": "Status",

src/lib/locales/en.json

@@ -78,7 +78,7 @@
 			"dataSource": {
 				"label": "Data Source",
 				"btclock": "BTClock Data Source",
-				"thirdParty": "mempool.space/Kraken",
+				"thirdParty": "mempool.space/coincap.io",
 				"nostr": "Nostr publisher",
 				"custom": "Custom Endpoint"
 			},
@@ -91,7 +91,8 @@
 			"dndStartMinute": "Start minute",
 			"dndEndHour": "End hour",
 			"dndEndMinute": "End minute",
-			"screenRestoreZap": "Restore previous screen state after zap (Uses {setting} setting)"
+			"lnbitsEnabled": "LNBits multi-currency integration",
+			"lnbitsInstance": "LNbits instance hostname"
 		},
 		"control": {
 			"systemInfo": "System info",
@@ -108,8 +109,7 @@
 			"turnOn": "Turn on",
 			"flashFrontlight": "Flash",
 			"firmwareUpdate": "Firmware update",
-			"fwCommit": "Firmware commit",
-			"fwCommitMismatch": "The firmware version is different from the WebUI version, this might cause problems. "
+			"fwCommit": "Firmware commit"
 		},
 		"status": {
 			"title": "Status",

src/lib/locales/es.json

@@ -47,7 +47,7 @@
 			"section": {
 				"displaysAndLed": "Pantallas y LED",
 				"screenSettings": "Específico de la pantalla",
-				"dataSource": "Fuente de datos",
+				"dataSource": "fuente de datos",
 				"extraFeatures": "Funciones adicionales",
 				"system": "Sistema"
 			},
@@ -72,8 +72,7 @@
 			"dndStartHour": "Hora de inicio",
 			"dndStartMinute": "Minuto de inicio",
 			"dndEndHour": "Hora final",
-			"dndEndMinute": "Minuto final",
-			"screenRestoreZap": "Restaurar el estado de pantalla anterior después de Zap (Usa la configuración {setting})"
+			"dndEndMinute": "Minuto final"
 		},
 		"control": {
 			"turnOff": "Apagar",
@@ -88,8 +87,7 @@
 			"hostname": "Nombre del host",
 			"turnOn": "Encender",
 			"frontlight": "Luz de la pantalla",
-			"flashFrontlight": "Luz intermitente",
-			"fwCommitMismatch": "La versión de firmware es diferente de la versión WebUI, esto podría causar problemas."
+			"flashFrontlight": "Luz intermitente"
 		},
 		"status": {
 			"memoryFree": "Memoria RAM libre",

src/lib/locales/nl.json

@@ -64,8 +64,7 @@
 			"dndStartHour": "Begin uur",
 			"dndStartMinute": "Beginminuut",
 			"dndEndHour": "Eind uur",
-			"dndEndMinute": "Einde minuut",
-			"screenRestoreZap": "Herstel vorige schermstatus na zap (Gebruikt {setting} instelling)"
+			"dndEndMinute": "Einde minuut"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
@@ -79,8 +78,7 @@
 			"title": "Besturing",
 			"frontlight": "Displaylicht",
 			"turnOn": "Aanzetten",
-			"flashFrontlight": "Knipper",
-			"fwCommitMismatch": "De firmwareversie verschilt van de WebUI -versie, dit kan problemen veroorzaken."
+			"flashFrontlight": "Knipper"
 		},
 		"status": {
 			"title": "Status",

src/routes/+page.svelte

@@ -13,8 +13,9 @@
 	import { uiSettings } from '$lib/uiSettings';
 
 	let settings = writable({
-		isLoaded: false,
-		timePerScreen: 0
+		fgColor: '0',
+		bgColor: '0',
+		isLoaded: false
 	});
 
 	let status = writable({

src/routes/Control.svelte

@@ -13,8 +13,7 @@
 		Form,
 		Input,
 		Label,
-		Row,
-		Alert
+		Row
 	} from '@sveltestrap/sveltestrap';
 	import FirmwareUpdater from './FirmwareUpdater.svelte';
 	import { uiSettings } from '$lib/uiSettings';
@@ -227,11 +226,6 @@
 				<li>WebUI commit: <Placeholder value={$settings.fsRev} /></li>
 				<li>{$_('section.control.hostname')}: <Placeholder value={$settings.hostname} /></li>
 			</ul>
-			{#if $settings.gitRev != $settings.fsRev}
-				<Alert color="warning">
-					⚠️ <strong>{$_('warning')}</strong>: {$_('section.control.fwCommitMismatch')}
-				</Alert>
-			{/if}
 			<Row>
 				<Col class="d-flex justify-content-end">
 					<Button color="danger" id="restartBtn" on:click={restartClock}

src/routes/Status.svelte

@@ -306,9 +306,6 @@
 							</span>
 						{/if}
 					{/if}
-					{#if $settings.fetchEurPrice}
-						<small>{$_('section.status.fetchEuroNote')}</small>
-					{/if}
 				</p>
 			{/if}
 		</CardBody>

static/swagger.json

@@ -343,10 +343,6 @@
 			"Settings": {
 				"type": "object",
 				"properties": {
-					"fetchEurPrice": {
-						"type": "boolean",
-						"description": "Fetch EUR price instead of USD"
-					},
 					"fgColor": {
 						"type": "string",
 						"default": 16777215,

static/swagger.yml

@@ -232,9 +232,6 @@ components:
     Settings:
       type: object
       properties:
-        fetchEurPrice:
-          type: boolean
-          description: Fetch EUR price instead of USD
         fgColor:
           type: string
           default: 16777215

tests/playwright/test.ts

@@ -73,28 +73,6 @@ test('time values can not be zero or negative', async ({ page }) => {
 	}
 });
 
-test('info message when fetch eur price is enabled', async ({ page }) => {
-	delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
-
-	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();
-
-	const inputField = 'input#fetchEurPrice';
-	const switchElement = await page.locator(inputField);
-
-	expect(switchElement).toBeTruthy();
-	const isSwitchEnabled = await switchElement.isChecked();
-	expect(isSwitchEnabled).toBe(false);
-
-	await expect(page.getByText('the WS Price connection will show')).toBeHidden();
-
-	await switchElement.click();
-	const isSwitchNowEnabled = await switchElement.isChecked();
-	expect(isSwitchNowEnabled).toBe(true);
-
-	await expect(page.getByText('the WS Price connection will show')).toBeVisible();
-});
-
 test('npub values will be converted to hex pubkeys', async ({ page }) => {
 	await page.goto('/');
 	await page.getByRole('button', { name: 'Show all' }).click();

tests/shared.ts

@@ -84,7 +84,6 @@ export const settingsJson = {
 	mcapBigChar: true,
 	mdnsEnabled: true,
 	otaEnabled: true,
-	fetchEurPrice: false,
 	hostnamePrefix: 'btclock',
 	hostname: 'btclock-d60b14',
 	ip: '192.168.20.231',