Add Web Updater functionality, improved layout for small displays

src/lib/locales/de.json

@@ -60,6 +60,12 @@
 			"uptime": "Betriebszeit",
 			"wifiSignalStrength": "WiFi-Signalstärke",
 			"wsDataConnection": "BTClock-Datenquelle verbindung"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Datei erfolgreich hochgeladen, Gerät neu gestartet. WebUI in {countdown} Sekunden neu geladen",
+			"fileUploadFailed": "Das Hochladen der Datei ist fehlgeschlagen. \nStellen Sie sicher, dass Sie die richtige Datei ausgewählt haben, und versuchen Sie es erneut.",
+			"uploading": "Hochladen",
+			"firmwareUpdateText": "Wenn Sie die Firmware-Upload-Funktion verwenden, stellen Sie sicher, dass Sie die richtigen Dateien verwenden. \nDas Hochladen der falschen Dateien kann dazu führen, dass das Gerät nicht mehr funktioniert. \nWenn es schief geht, können Sie die Firmware wiederherstellen, indem Sie das vollständige Image hochladen, nachdem Sie das Gerät in den BOOT-Modus versetzt haben."
 		}
 	},
 	"colors": {
@@ -88,5 +94,6 @@
 	},
 	"rssiBar": {
 		"tooltip": "Werte > -67 dBm gelten als gut. > -30 dBm ist erstaunlich"
-	}
+	},
+	"warning": "Achtung"
 }

src/lib/locales/en.json

@@ -48,7 +48,9 @@
 			"hostname": "Hostname",
 			"frontlight": "Frontlight",
 			"turnOn": "Turn on",
-			"flashFrontlight": "Flash"
+			"flashFrontlight": "Flash",
+			"firmwareUpdate": "Firmware update",
+			"fwCommit": "Firmware commit"
 		},
 		"status": {
 			"title": "Status",
@@ -60,6 +62,12 @@
 			"uptime": "Uptime",
 			"wifiSignalStrength": "WiFi Signal strength",
 			"wsDataConnection": "BTClock data-source connection"
+		},
+		"firmwareUpdater": {
+			"fileUploadFailed": "File upload failed. Make sure you have selected the correct file and try again.",
+			"fileUploadSuccess": "File uploaded successfully, restarting device and reloading WebUI in {countdown} seconds",
+			"uploading": "Uploading",
+			"firmwareUpdateText": "When you use the firmware upload functionality, make sure you use the correct files. Uploading the wrong files can result in a non-working device. If it goes wrong, you can restore firmware by uploading the full image after setting the device in BOOT-mode."
 		}
 	},
 	"colors": {
@@ -88,5 +96,6 @@
 	},
 	"rssiBar": {
 		"tooltip": "Values > -67 dBm are considered good. > -30 dBm is amazing"
-	}
+	},
+	"warning": "Warning"
 }

src/lib/locales/es.json

@@ -59,6 +59,12 @@
 			"title": "Estado",
 			"wifiSignalStrength": "Fuerza de la señal WiFi",
 			"wsDataConnection": "Conexión de fuente de datos BTClock"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Archivo cargado exitosamente, reiniciando el dispositivo. Recargando WebUI en {countdown} segundos",
+			"fileUploadFailed": "Error al cargar el archivo. \nAsegúrese de haber seleccionado el archivo correcto e inténtelo nuevamente.",
+			"uploading": "Subiendo",
+			"firmwareUpdateText": "Cuando utilice la función de carga de firmware, asegúrese de utilizar los archivos correctos. \nCargar archivos incorrectos puede provocar que el dispositivo no funcione. \nSi sale mal, puede restaurar el firmware cargando la imagen completa después de configurar el dispositivo en modo BOOT."
 		}
 	},
 	"button": {
@@ -87,5 +93,6 @@
 	},
 	"rssiBar": {
 		"tooltip": "Se consideran buenos valores > -67 dBm. > -30 dBm es increíble"
-	}
+	},
+	"warning": "Aviso"
 }

src/lib/locales/nl.json

@@ -59,6 +59,12 @@
 			"uptime": "Uptime",
 			"wifiSignalStrength": "WiFi signaalsterkte",
 			"wsDataConnection": "BTClock-gegevensbron verbinding"
+		},
+		"firmwareUpdater": {
+			"fileUploadSuccess": "Bestand geüpload, apparaat herstart. WebUI opnieuw geladen over {countdown} seconden",
+			"fileUploadFailed": "Bestandsupload mislukt. \nZorg ervoor dat het juiste bestand is geselecteerd en probeer het opnieuw.",
+			"uploading": "Uploaden",
+			"firmwareUpdateText": "Zorg bij het gebruiken van de firmware upload dat de juiste bestanden gebruikt worden. \nHet uploaden van de verkeerde bestanden kan resulteren in een niet-werkend apparaat. \nAls het misgaat, kunt u de firmware herstellen door de volledige afbeelding te uploaden nadat u het apparaat in de BOOT-modus hebt gezet."
 		}
 	},
 	"colors": {
@@ -87,5 +93,6 @@
 	},
 	"rssiBar": {
 		"tooltip": "Waarden > -67 dBm zijn goed. > -30 dBm is verbazingwekkend"
-	}
+	},
+	"warning": "Waarschuwing"
 }

src/lib/screen.ts

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+// Create a writable store to track screen size
+export const screenSize = writable<number>(window.innerWidth);
+
+// Function to update the screen size
+export const updateScreenSize = () => {
+	screenSize.set(window.innerWidth);
+};

src/lib/style/app.scss

@@ -36,33 +36,34 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/progress';
 @import '../node_modules/bootstrap/scss/tooltip';
 @import '../node_modules/bootstrap/scss/toasts';
+@import '../node_modules/bootstrap/scss/alert';
 
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';
 
-@include media-breakpoint-down(xl) {
-	html {
-		font-size: 85%;
-	}
+// @include media-breakpoint-down(xl) {
+// 	html {
+// 		// font-size: 85%;
+// 	}
 
-	button.btn,
-	input[type='button'].btn,
-	input[type='submit'].btn,
-	input[type='reset'].btn {
-		@include button-size(
-			$btn-padding-y-sm,
-			$btn-padding-x-sm,
-			$font-size-sm,
-			$btn-border-radius-sm
-		);
-	}
-}
+// 	button.btn,
+// 	input[type='button'].btn,
+// 	input[type='submit'].btn,
+// 	input[type='reset'].btn {
+// 		@include button-size(
+// 			$btn-padding-y-sm,
+// 			$btn-padding-x-sm,
+// 			$font-size-sm,
+// 			$btn-border-radius-sm
+// 		);
+// 	}
+// }
 
-@include media-breakpoint-down(lg) {
-	html {
-		font-size: 75%;
-	}
-}
+// @include media-breakpoint-down(lg) {
+// 	html {
+// 		font-size: 75%;
+// 	}
+// }
 
 nav {
 	margin-bottom: 15px;
@@ -208,3 +209,8 @@ nav {
 	font-style: italic;
 	font-weight: 600;
 }
+
+.firmwareUploadStatusAlert,
+#firmwareUploadProgress {
+	@extend .my-2;
+}