Add toast feedback and linter

.github/workflows/workflow.yml

@@ -63,6 +63,8 @@ jobs:
         run: yarn && yarn postinstall
       - name: Build WebUI
         run: yarn build
+      - name: Run linter
+        run: yarn lint
       - name: Get current block
         id: getBlockHeight
         run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT

src/lib/locales/en.json

@@ -22,7 +22,9 @@
 			"tzOffsetHelpText": "A restart is required to apply TZ offset.",
 			"screens": "Screens",
 			"wifiTxPowerText": "In most cases this does not need to be set.",
-			"wifiTxPower": "WiFi TX power"
+			"wifiTxPower": "WiFi TX power",
+			"settingsSaved": "Settings saved",
+			"errorSavingSettings": "Error saving settings"
 		},
 		"control": {
 			"systemInfo": "System info",

src/lib/locales/es.json

@@ -21,7 +21,9 @@
 			"hostnamePrefix": "Prefijo de nombre de host",
 			"mempoolnstance": "Instancia de Mempool",
 			"otaUpdates": "Actualización por aire",
-			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto."
+			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
+			"settingsSaved": "Configuración guardada",
+			"errorSavingSettings": "Error al guardar la configuración"
 		},
 		"control": {
 			"turnOff": "Apagar",

src/lib/locales/nl.json

@@ -22,7 +22,9 @@
 			"mempoolnstance": "Mempool instantie",
 			"otaUpdates": "OTA updates",
 			"wifiTxPower": "WiFi TX power",
-			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden."
+			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden.",
+			"settingsSaved": "Instellingen opgeslagen",
+			"errorSavingSettings": "Fout bij opslaan instellingen"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",

src/lib/style/app.scss

@@ -39,6 +39,7 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/card';
 @import '../node_modules/bootstrap/scss/progress';
 @import '../node_modules/bootstrap/scss/tooltip';
+@import '../node_modules/bootstrap/scss/toasts';
 
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { PUBLIC_BASE_URL } from '$env/static/public';
 
-	import { Container, Row } from 'sveltestrap';
+	import { Container, Row, Toast, ToastBody } from 'sveltestrap';
 
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
@@ -55,6 +55,16 @@
 			status.set(dataObj);
 		});
 	});
+
+	let toastIsOpen = false;
+	let toastColor = 'success';
+	let toastBody = '';
+
+	export const showToast = (event) => {
+		toastIsOpen = true;
+		toastColor = event.detail.color;
+		toastBody = event.detail.text;
+	};
 </script>
 
 <svelte:head>
@@ -65,6 +75,20 @@
 	<Row>
 		<Control bind:settings bind:status></Control>
 		<Status bind:settings bind:status></Status>
-		<Settings bind:settings></Settings>
+		<Settings bind:settings on:showToast={showToast}></Settings>
 	</Row>
 </Container>
+<div class="position-fixed bottom-0 end-0 p-2">
+	<div class="">
+		<Toast
+			isOpen={toastIsOpen}
+			class="me-1 bg-{toastColor}"
+			autohide
+			on:close={() => (toastIsOpen = false)}
+		>
+			<ToastBody>
+				{toastBody}
+			</ToastBody>
+		</Toast>
+	</div>
+</div>

src/routes/Settings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import { createEventDispatcher } from 'svelte';
 
 	import { _ } from 'svelte-i18n';
 	import {
@@ -34,6 +35,8 @@
 		['5dBm', 20] // 5dBm
 	]);
 
+	const dispatch = createEventDispatcher();
+
 	const onSave = async (e: Event) => {
 		e.preventDefault();
 		let formSettings = $settings;
@@ -48,6 +51,18 @@
 				'Content-Type': 'application/json'
 			},
 			body: JSON.stringify(formSettings)
+		})
+			.then(() => {
+				dispatch('showToast', {
+					color: 'success',
+					text: $_('section.settings.settingsSaved')
+				});
+			})
+			.catch(() => {
+				dispatch('showToast', {
+					color: 'danger',
+					text: $_('section.settings.errorSavingSettings')
+				});
 			});
 	};
 </script>