Add multi-currency support

src/routes/Rendered.svelte

@@ -9,6 +9,38 @@
 	};
 
 	export let className = 'btclock-wrapper';
+
+	// Define the currency symbols as constants
+	const CURRENCY_USD = '$';
+	const CURRENCY_EUR = '[';
+	const CURRENCY_GBP = ']';
+	const CURRENCY_JPY = '^';
+	const CURRENCY_AUD = '_';
+	//const CURRENCY_CHF = '_';
+	const CURRENCY_CAD = '`';
+
+	function getCurrencySymbol(input: string): string {
+		// Split the string into an array of characters to process each one
+		return input
+			.split('')
+			.map((char) => {
+				switch (char) {
+					case CURRENCY_EUR:
+						return '€'; // Euro symbol
+					case CURRENCY_GBP:
+						return '£'; // Pound symbol
+					case CURRENCY_JPY:
+						return '¥'; // Yen symbol
+					case CURRENCY_AUD:
+					case CURRENCY_CAD:
+					case CURRENCY_USD:
+						return '$'; // Dollar symbol
+					default:
+						return char; // Return the original character if no match
+				}
+			})
+			.join(''); // Join the array back into a string
+	}
 </script>
 
 <div class={className} id={className}>
@@ -44,7 +76,7 @@
 			{:else if char.length === 0 || char === ' '}
 				<div class="digit">&nbsp;&nbsp;</div>
 			{:else}
-				<div class="digit">{char}</div>
+				<div class="digit">{getCurrencySymbol(char)}</div>
 			{/if}
 		{/each}
 	</div>

src/routes/Settings.svelte

@@ -160,7 +160,6 @@
 
 	let showPassword = false;
 
-	// You can also add more props if needed
 	export let xs = 12;
 	export let sm = xs;
 	export let md = sm;
@@ -768,6 +767,30 @@
 						{/each}
 					{/if}
 				</Row>
+				{#if $settings.actCurrencies}
+					<Row>
+						<h3>{$_('section.settings.currencies')}</h3>
+						<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"
+											bsSize={$uiSettings.inputSize}
+											label={c}
+										/>
+										<label class="form-check-label" for="currency_{c}">{c}</label>
+									</div>
+								</Col>
+							{/each}
+						{/if}
+					</Row>
+				{/if}
 				<Row>
 					<Col class="d-flex justify-content-end">
 						<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>

src/routes/Status.svelte

@@ -83,6 +83,10 @@
 		fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
 	};
 
+	const setCurrency = (c: string) => () => {
+		fetch(`${PUBLIC_BASE_URL}/api/show/currency/${c}`).catch(() => {});
+	};
+
 	const toggleTimer = (currentStatus: boolean) => (e: Event) => {
 		e.preventDefault();
 		if (currentStatus) {
@@ -131,6 +135,19 @@
 						{/each}
 					</ButtonGroup>
 				</div>
+				{#if $settings.actCurrencies}
+					<div class="d-flex justify-content-center d-none d-sm-flex mt-2">
+						<ButtonGroup size="sm">
+							{#each $settings.actCurrencies as c}
+								<Button
+									color="outline-success"
+									active={$status.currency == c}
+									on:click={setCurrency(c)}>{c}</Button
+								>
+							{/each}
+						</ButtonGroup>
+					</div>
+				{/if}
 				<hr />
 				{#if $status.data}
 					<section class={lightMode ? 'lightMode' : 'darkMode'}>