From 5197847e1e80331f5a2b7e0d6923ddde774ba711 Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Tue, 21 Nov 2023 21:22:29 +0100
Subject: [PATCH] Add toast feedback and linter

---
 .github/workflows/workflow.yml |  2 ++
 src/lib/locales/en.json        |  4 +++-
 src/lib/locales/es.json        |  4 +++-
 src/lib/locales/nl.json        |  4 +++-
 src/lib/style/app.scss         |  1 +
 src/routes/+page.svelte        | 28 ++++++++++++++++++++++++++--
 src/routes/Settings.svelte     | 17 ++++++++++++++++-
 7 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index 4521bec..bed535a 100644
--- a/.github/workflows/workflow.yml
+++ b/.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
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index 01d0fc5..ca82f1f 100644
--- a/src/lib/locales/en.json
+++ b/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",
diff --git a/src/lib/locales/es.json b/src/lib/locales/es.json
index cc58628..f2dd7af 100644
--- a/src/lib/locales/es.json
+++ b/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",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
index d957aa2..adace01 100644
--- a/src/lib/locales/nl.json
+++ b/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",
diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss
index a0364f1..7a40989 100644
--- a/src/lib/style/app.scss
+++ b/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';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e24e58b..8377a2a 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index 1ba05e1..2fb68d3 100644
--- a/src/routes/Settings.svelte
+++ b/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,7 +51,19 @@
 				'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>