From 52b4c77fc03c5e062988ae8f36ec8516426e2482 Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Mon, 16 Sep 2024 21:15:56 +0200
Subject: [PATCH] Add currency converter,  fix for display light toggler

---
 src/lib/style/app.scss          |  14 ++++
 src/routes/+layout.svelte       |  16 ++++-
 src/routes/Settings.svelte      |   2 +-
 src/routes/convert/+page.svelte | 124 ++++++++++++++++++++++++++++++++
 4 files changed, 153 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/convert/+page.svelte

diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss
index ef598ac..0f1ceb4 100644
--- a/src/lib/style/app.scss
+++ b/src/lib/style/app.scss
@@ -228,3 +228,17 @@ nav {
 #firmwareUploadProgress {
 	@extend .my-2;
 }
+
+.sats {
+	font-family: 'Satoshi Symbol';
+}
+
+.currencyCode {
+	width: 20%;
+	text-align: center;
+	display: inline-block;
+}
+
+input[type='number'] {
+	text-align: right;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ef187a5..a34ea20 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,8 @@
 		NavItem,
 		NavLink,
 		Navbar,
-		NavbarBrand
+		NavbarBrand,
+		NavbarToggler
 	} from '@sveltestrap/sveltestrap';
 
 	import { page } from '$app/stores';
@@ -51,15 +52,26 @@
 			}
 		}
 	});
+
+	let isOpen = false;
+
+	const toggle = () => {
+		isOpen = !isOpen;
+	};
 </script>
 
 <Navbar expand="md">
 	<NavbarBrand>&#8383;TClock</NavbarBrand>
-	<Collapse navbar expand="md">
+	<NavbarToggler on:click={toggle} />
+
+	<Collapse {isOpen} navbar expand="sm">
 		<Nav class="me-auto" navbar>
 			<NavItem>
 				<NavLink href="/" active={$page.url.pathname === '/'}>Home</NavLink>
 			</NavItem>
+			<NavItem>
+				<NavLink href="/convert" active={$page.url.pathname === '/convert'}>Convert</NavLink>
+			</NavItem>
 			<NavItem>
 				<NavLink href="/api" active={$page.url.pathname === '/api'}>API</NavLink>
 			</NavItem>
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index bd15fdd..4dc5864 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -357,7 +357,7 @@
 						</Col>
 					</Row>
 				{/if}
-				{#if $settings.hasLightLevel}
+				{#if !$settings.flDisable && $settings.hasLightLevel}
 					<Row>
 						<Label md={6} for="luxLightToggle" size={$uiSettings.inputSize}
 							>{$_('section.settings.luxLightToggle')} ({$settings.luxLightToggle})</Label
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
new file mode 100644
index 0000000..bce9e70
--- /dev/null
+++ b/src/routes/convert/+page.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { Col, Container, Input, InputGroup, InputGroupText, Row } from '@sveltestrap/sveltestrap';
+	import { onDestroy, onMount } from 'svelte';
+
+	let exchangeRates = {
+		USD: 57798,
+		GBP: 44236,
+		CHF: 49362,
+		AUD: 86552,
+		JPY: 8221088,
+		EUR: 52347,
+		CAD: 78508
+	};
+
+	let updateInterval: number;
+
+	let currencies = { ...exchangeRates };
+	let btcValue = 1;
+	let satsValue = 100000000;
+	let lastEditedField = 'BTC';
+	let inputValues = {
+		BTC: '1',
+		sats: '100000000',
+		...Object.fromEntries(
+			Object.keys(exchangeRates).map((cur) => [cur, exchangeRates[cur].toString()])
+		)
+	};
+
+	function updateValues(currency: string, value: string) {
+		lastEditedField = currency;
+		inputValues[currency] = value;
+
+		let numValue = value === '' ? 0 : parseFloat(value);
+
+		if (currency === 'BTC') {
+			btcValue = numValue;
+			satsValue = Math.round(numValue * 100000000);
+		} else if (currency === 'sats') {
+			satsValue = Math.round(numValue);
+			btcValue = satsValue / 100000000;
+		} else {
+			btcValue = numValue / exchangeRates[currency];
+			satsValue = Math.round(btcValue * 100000000);
+		}
+
+		// Update other currency values
+		for (let cur in currencies) {
+			if (cur !== currency) {
+				currencies[cur] = btcValue * exchangeRates[cur];
+				inputValues[cur] = formatValue(currencies[cur], cur);
+			}
+		}
+
+		inputValues.BTC = formatValue(btcValue, 'BTC');
+		inputValues.sats = formatValue(satsValue, 'sats');
+	}
+
+	function formatValue(value: number, currency: string): string {
+		if (currency === 'sats') {
+			return Math.round(value).toString();
+		} else if (currency === 'BTC') {
+			return value.toFixed(8).replace(/\.?0+$/, '');
+		} else {
+			return value.toFixed(2);
+		}
+	}
+
+	async function fetchExchangeRates() {
+		try {
+			const response = await fetch('http://localhost:8080/api/lastprice');
+			const data = await response.json();
+			exchangeRates = data;
+			currencies = { ...data };
+			updateValues(lastEditedField, inputValues[lastEditedField]);
+		} catch (error) {
+			console.error('Error fetching exchange rates:', error);
+		}
+	}
+
+	onMount(() => {
+		fetchExchangeRates();
+		updateInterval = setInterval(fetchExchangeRates, 10000);
+	});
+
+	onDestroy(() => {
+		clearInterval(updateInterval);
+	});
+</script>
+
+<Container fluid>
+	<Row class="justify-content-center">
+		<Col class="col-md-3 col-sm-12">
+			<InputGroup size="lg" class="mb-2">
+				<InputGroupText class="currencyCode">BTC</InputGroupText>
+				<Input
+					placeholder="Amount"
+					type="number"
+					value={inputValues.BTC}
+					on:input={(e) => updateValues('BTC', e.target.value)}
+				/>
+			</InputGroup>
+			<InputGroup size="lg" class="mb-2">
+				<InputGroupText class="sats currencyCode">s</InputGroupText>
+				<Input
+					placeholder="Amount"
+					type="number"
+					value={inputValues.sats}
+					on:input={(e) => updateValues('sats', e.target.value)}
+				/>
+			</InputGroup>
+			{#each Object.entries(exchangeRates) as [cur]}
+				<InputGroup size="lg" class="mb-2">
+					<InputGroupText class="currencyCode">{cur}</InputGroupText>
+					<Input
+						placeholder="Amount"
+						type="number"
+						value={inputValues[cur]}
+						on:input={(e) => updateValues(cur, e.target.value)}
+					/>
+				</InputGroup>
+			{/each}
+		</Col>
+	</Row>
+</Container>