Added WiFi signal status and settings

src/routes/Control.svelte

@@ -83,8 +83,8 @@
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={6} for="customText">{$_('section.control.text')}</Label>
-					<Col md="6">
+					<Label md={4} for="customText">{$_('section.control.text')}</Label>
+					<Col md="8">
 						<Input
 							type="text"
 							id="customText"
@@ -100,8 +100,8 @@
 			<h3>LEDs</h3>
 			<Form>
 				<Row>
-					<Label md={6} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
-					<Col md="6">
+					<Label md={4} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
+					<Col md="8">
 						<Row class="justify-content-between">
 							{#if ledStatus}
 								{#each ledStatus as led, i}
@@ -116,6 +116,8 @@
 									</Col>
 								{/each}
 							{/if}
+						</Row>
+						<Row class="justify-content-between">
 							<Col>
 								<Input
 									bind:checked={keepLedsSameColor}

src/routes/Settings.svelte

@@ -20,6 +20,20 @@
 
 	export let settings;
 
+	const wifiTxPowerMap = new Map<string, number>([
+		['Default', 80],
+		['19.5dBm', 78], // 19.5dBm
+		['19dBm', 76], // 19dBm
+		['18.5dBm', 74], // 18.5dBm
+		['17dBm', 68], // 17dBm
+		['15dBm', 60], // 15dBm
+		['13dBm', 52], // 13dBm
+		['11dBm', 44], // 11dBm
+		['8.5dBm', 34], // 8.5dBm
+		['7dBm', 28], // 7dBm
+		['5dBm', 20] // 5dBm
+	]);
+
 	const onSave = async (e: Event) => {
 		e.preventDefault();
 		let formSettings = $settings;
@@ -170,6 +184,26 @@
 						></Input>
 					</Col>
 				</Row>
+				<Row>
+					<Label md={6} for="wifiTxPower" size="sm"
+						>{$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}</Label
+					>
+					<Col md="6">
+						<Input
+							type="select"
+							bind:value={$settings.txPower}
+							name="select"
+							id="fgColor"
+							bsSize="sm"
+							class="form-select-sm"
+						>
+							{#each wifiTxPowerMap as [key, value]}
+								<option {value}>{key}</option>
+							{/each}
+						</Input>
+						<FormText>{$_('section.settings.wifiTxPowerText')}</FormText>
+					</Col>
+				</Row>
 				<Row>
 					<Col md="6">
 						<Input

src/routes/Status.svelte

@@ -13,6 +13,7 @@
 		Col,
 		Input,
 		Progress,
+		Tooltip,
 		Row
 	} from 'sveltestrap';
 	import Rendered from './Rendered.svelte';
@@ -44,10 +45,22 @@
 	};
 
 	let memoryFreePercent: number = 50;
+	let rssiPercent: number = 50;
+	let wifiStrengthColor: string = 'info';
 	let lightMode: boolean = false;
 
 	status.subscribe((value: object) => {
 		memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
+
+		rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
+
+		if (value.rssi > -55) {
+			wifiStrengthColor = 'success';
+		} else if (value.rssi < -87) {
+			wifiStrengthColor = 'warning';
+		} else {
+			wifiStrengthColor = 'info';
+		}
 	});
 
 	settings.subscribe((value: object) => {
@@ -130,6 +143,18 @@
 				</div>
 			</div>
 			<hr />
+			<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
+				>{rssiPercent}%</Progress
+			>
+			<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
+
+			<div class="d-flex justify-content-between">
+				<div>{$_('section.status.wifiSignalStrength')}</div>
+				<div>
+					{$status.rssi} dBm
+				</div>
+			</div>
+			<hr />
 			{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
 			<br />
 			<p>