Fix stats reporting. Add Vite compatibility

svelte/src/admin_panel/PeerTable.svelte

@@ -1,11 +1,39 @@
 <script lang="ts">
-import { run } from 'svelte/legacy';
 import { flip } from "svelte/animate";
 import { formatDataVolume } from "util/Formatting";
 import SortButton from "layout/SortButton.svelte";
 
-let { peers = $bindable([]) } = $props();
-let update_peers = (peers) => {
+let {
+	peers = $bindable([])
+}: {
+	peers: {
+		id: string
+		ip: string
+		port: number
+		hostname: string
+		role: string
+		reachable: boolean
+		unreachable_count: number
+		latency: number
+		last_seen: string
+		free_space: number
+		min_free_space: number
+		load_1_min: number
+		load_5_min: number
+		load_15_min: number
+		avg_network_tx: number
+		avg_network_rx: number
+		port_speed: number
+		cache_threshold: number
+
+		// Our props
+		avg_network_total?: number
+		usage_percent?: number
+		network_ratio?: number
+	}[]
+} = $props();
+
+$effect(() => {
 	for (let peer of peers) {
 		peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx
 		peer.usage_percent = (peer.avg_network_tx / peer.port_speed) * 100
@@ -13,11 +41,11 @@ let update_peers = (peers) => {
 	}
 
 	sort("")
-}
+})
 
 let sort_field = $state("hostname")
 let asc = $state(true)
-let sort = (field) => {
+let sort = (field: string) => {
 	if (field !== "" && field === sort_field) {
 		asc = !asc
 	}
@@ -26,7 +54,7 @@ let sort = (field) => {
 	}
 	sort_field = field
 
-	console.log("sorting by", field, "asc", asc)
+	console.log("sorting by", field, "asc", $state.snapshot(asc))
 	peers.sort((a, b) => {
 		if (typeof (a[field]) === "number") {
 			// Sort ints from high to low
@@ -46,9 +74,6 @@ let sort = (field) => {
 	})
 	peers = peers
 }
-run(() => {
-	update_peers(peers)
-});
 </script>
 
 <div class="table_scroll">
@@ -84,7 +109,7 @@ run(() => {
 					<td>{(peer.latency/1000).toFixed(3)}</td>
 					<td>{formatDataVolume(peer.avg_network_tx, 3)}/s</td>
 					<td>{formatDataVolume(peer.avg_network_rx, 3)}/s</td>
-					<td>{peer.network_ratio.toFixed(2)}</td>
+					<td>{peer.network_ratio === undefined ? "" : peer.network_ratio.toFixed(2)}</td>
 					<td>{formatDataVolume(peer.avg_network_total, 3)}/s</td>
 					<td>{Math.round(peer.usage_percent)}%</td>
 					<td>{formatDataVolume(peer.cache_threshold, 3)}</td>