Add multi-currency support

src/lib/locales/de.json

@@ -41,7 +41,8 @@
 			"flDisable": "Displaybeleuchtung deaktivieren",
 			"httpAuthUser": "WebUI-Benutzername",
 			"httpAuthPass": "WebUI-Passwort",
-			"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe."
+			"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
+			"currencies": "Währungen"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",

src/lib/locales/en.json

@@ -51,7 +51,8 @@
 			"httpAuthEnabled": "Require authentication for WebUI",
 			"httpAuthUser": "WebUI Username",
 			"httpAuthPass": "WebUI Password",
-			"httpAuthText": "Only password-protects WebUI, not API-calls."
+			"httpAuthText": "Only password-protects WebUI, not API-calls.",
+			"currencies": "Currencies"
 		},
 		"control": {
 			"systemInfo": "System info",

src/lib/locales/es.json

@@ -40,7 +40,8 @@
 			"flDisable": "Desactivar luz de la pantalla",
 			"httpAuthUser": "Nombre de usuario WebUI",
 			"httpAuthPass": "Contraseña WebUI",
-			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API."
+			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
+			"currencies": "Monedas"
 		},
 		"control": {
 			"turnOff": "Apagar",

src/lib/locales/nl.json

@@ -41,7 +41,8 @@
 			"flDisable": "Schakel Displaylicht uit",
 			"httpAuthUser": "WebUI-gebruikersnaam",
 			"httpAuthPass": "WebUI-wachtwoord",
-			"httpAuthText": "Beveiligd enkel WebUI, niet de API."
+			"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
+			"currencies": "Valuta's"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",

src/lib/style/app.scss

@@ -4,7 +4,9 @@
 
 //@import "@fontsource/antonio/latin-400.css";
 @import '@fontsource/ubuntu/latin-400.css';
-@import '@fontsource/oswald/latin-400.css';
+//@import '@fontsource/oswald/latin-400.css';
+@import '@fontsource/antonio/latin-400.css';
+
 @import './satsymbol';
 
 $color-mode-type: media-query;
@@ -62,7 +64,7 @@ nav {
 		background: #000;
 		display: flex;
 		font-size: calc(3vw + 3vh);
-		font-family: 'Oswald', sans-serif;
+		font-family: 'Antonio', sans-serif;
 		font-weight: 400;
 		padding: 10px;
 		gap: 10px;
@@ -76,7 +78,7 @@ nav {
 			align-items: center;
 			justify-content: center;
 			text-align: center;
-			padding: 10px;
+			padding: 10px 10px 15px 10px;
 			width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */
 			aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */
 
@@ -90,6 +92,10 @@ nav {
 			}
 		}
 
+		.digit.sats {
+			padding-top: 35px;
+		}
+
 		.mediumText {
 			font-size: calc(1.25vw + 1.25vh);
 		}

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'}>