feat(frontend): add ethernet support

Author: JuergenLeber

docs/stores.md

@@ -64,6 +64,7 @@ It exposes the following properties you can subscribe to:
 | `$telemetry.download_ota.status`   | `String`  | Status of OTA                               |
 | `$telemetry.download_ota.progress` | `Number`  | Progress of OTA                             |
 | `$telemetry.download_ota.error`    | `String`  | Error Message of OTA                        |
+| `$telemetry.ethernet.connected`    | `Boolean` | Connection status of the ethernet interface |
 
 ## Analytics
 

interface/src/lib/stores/telemetry.ts

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import type { RSSI } from '../types/models';
 import type { Battery } from '../types/models';
 import type { DownloadOTA } from '../types/models';
+import type { Ethernet } from '../types/models';
 
 let telemetry_data = {
 	rssi: {
@@ -17,6 +18,9 @@ let telemetry_data = {
 		status: 'none',
 		progress: 0,
 		error: ''
+	},
+	ethernet: {
+		connected: false
 	}
 };
 
@@ -49,6 +53,12 @@ function createTelemetry() {
 				...telemetry_data,
 				download_ota: { status: data.status, progress: data.progress, error: data.error }
 			}));
+		},
+		setEthernet: (data: Ethernet) => {
+			update((telemetry_data) => ({
+				...telemetry_data,
+				ethernet: { connected: data.connected }
+			}));
 		}
 	};
 }

interface/src/lib/types/models.ts

@@ -148,3 +148,29 @@ export type MQTTSettings = {
 	clean_session: boolean;
 	message_interval_ms: number;
 };
+
+
+export type Ethernet = {
+	connected: boolean;
+};
+
+export type EthernetStatus = {
+	connected: boolean;
+	local_ip: string;
+	mac_address: string;
+	subnet_mask: string;
+	gateway_ip?: string;
+	dns_ip_1?: string;
+	dns_ip_2?: string;
+	link_speed?: number;
+};
+
+export type EthernetSettings = {
+	hostname: string;
+	static_ip_config: boolean;
+	local_ip?: string;
+	subnet_mask?: string;
+	gateway_ip?: string;
+	dns_ip_1?: string;
+	dns_ip_2?: string;
+};

interface/src/routes/+layout.svelte

@@ -20,6 +20,7 @@
 	import type { RSSI } from '$lib/types/models';
 	import type { Battery } from '$lib/types/models';
 	import type { DownloadOTA } from '$lib/types/models';
+	import type { Ethernet } from '$lib/types/models';
 
 	interface Props {
 		data: LayoutData;
@@ -60,6 +61,7 @@
 		if (page.data.features.analytics) socket.on('analytics', handleAnalytics);
 		if (page.data.features.battery) socket.on('battery', handleBattery);
 		if (page.data.features.download_firmware) socket.on('otastatus', handleOAT);
+		if (page.data.features.ethernet) socket.on('ethernet', handleEthernet);
 	};
 
 	const removeEventListeners = () => {
@@ -70,6 +72,7 @@
 		socket.off('notification', handleNotification);
 		socket.off('battery', handleBattery);
 		socket.off('otastatus', handleOAT);
+		socket.off('ethernet', handleEthernet);
 	};
 
 	async function validateUser(userdata: userProfile) {
@@ -130,6 +133,10 @@
 
 	const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
 
+	const handleEthernet = (data: Ethernet) => {
+		telemetry.setEthernet(data);
+	};
+
 	let menuOpen = $state(false);
 </script>
 

interface/src/routes/ethernet/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import Ethernet from './Ethernet.svelte';
+
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
+</script>
+
+<div
+	class="mx-0 my-1 flex flex-col space-y-4
+     sm:mx-8 sm:my-8"
+>
+	<Ethernet />
+</div>

interface/src/routes/ethernet/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {
+		title: 'Ethernet'
+	};
+}) satisfies PageLoad;