Frontend display countries option

frontend/src/routes/(front)/remote-nodes/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { DataHandler } from '@vincjo/datatables/remote';
 	import { format, formatDistance } from 'date-fns';
-	import { loadData } from './api-handler';
+	import { loadData, loadCountries } from './api-handler';
 	import { onMount, onDestroy } from 'svelte';
 	import {
 		DtSrRowsPerPage,
@@ -27,6 +27,9 @@
 	let filterStatus = -1;
 	let checkboxCors = false;
 
+	/** @type {{total_nodes: number, cc: string, name: string}[]} */
+	let countries = [];
+
 	const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
 	let rows = handler.getRows();
 
@@ -109,6 +112,9 @@
 		clearInterval(intervalId); // Clear the interval when the component is destroyed
 	});
 	onMount(() => {
+		loadCountries().then((data) => {
+			countries = data;
+		});
 		handler.onChange((state) => loadData(state));
 		handler.invalidate();
 	});
@@ -233,8 +239,7 @@
 								}}
 							>
 								<option value="any">Any</option>
-								<!--
+								{#each countries as country}
-								{#each data.countries as country}
 									{#if country.cc === ''}
 										<option value="UNKNOWN">UNKNOWN ({country.total_nodes})</option>
 									{:else}
@@ -243,7 +248,6 @@
 										>
 									{/if}
 								{/each}
-                -->
 							</select>
 						</th>
 						<th colspan="2">

frontend/src/routes/(front)/remote-nodes/api-handler.js

@@ -8,6 +8,12 @@ export const loadData = async (state) => {
 	return json.data.items ?? [];
 };
 
+export const loadCountries = async () => {
+  const response = await fetch(apiUri('/api/v1/countries'));
+  const json = await response.json();
+  return json.data ?? [];
+};
+
 const getParams = ({ pageNumber, rowsPerPage, sort, filters }) => {
 	let params = `page=${pageNumber}&limit=${rowsPerPage}`;