stuff

rust/src_webpack/src/api.ts

@@ -157,7 +157,9 @@ export interface Moistures {
 export interface VersionInfo {
     git_hash: string,
     build_time: string,
-    partition: string
+    partition: string,
+    ota_state: string
+
 }
 
 export interface BatteryState {

rust/src_webpack/src/main.ts

@@ -31,6 +31,7 @@ import {
     FileList, SolarState, PumpTestResult
 } from "./api";
 import {SolarView} from "./solarview";
+import {toast} from "./toast";
 
 export class Controller {
     loadTankInfo(): Promise<void> {
@@ -200,15 +201,22 @@ export class Controller {
         }, false);
         ajax.addEventListener("load", () => {
             controller.progressview.removeProgress("ota_upload")
-            controller.reboot();
+            const status = ajax.status;
+            if (status >= 200 && status < 300) {
+                controller.reboot();
+            } else {
+                const statusText = ajax.statusText || "";
+                const body = ajax.responseText || "";
+                toast.error(`OTA update error (${status}${statusText ? ' ' + statusText : ''}): ${body}`);
+            }
         }, false);
         ajax.addEventListener("error", () => {
-            alert("Error ota")
             controller.progressview.removeProgress("ota_upload")
+            toast.error("OTA upload failed due to a network error.");
         }, false);
         ajax.addEventListener("abort", () => {
-            alert("abort ota")
             controller.progressview.removeProgress("ota_upload")
+            toast.error("OTA upload was aborted.");
         }, false);
         ajax.open("POST", PUBLIC_URL + "/ota");
         ajax.send(file);

rust/src_webpack/src/ota.html

@@ -31,6 +31,11 @@
   <span class="otakey">Partition:</span>
   <span class="otavalue" id="firmware_partition"></span>
 </div>
+<div class="flexcontainer">
+    <span class="otakey">Status:</span>
+    <span class="otavalue" id="firmware_state"></span>
+</div>
+
 <div class="flexcontainer">
     <form class="otaform" id="upload_form" method="post">
         <input class="otachooser" type="file" name="file1" id="firmware_file"><br>

rust/src_webpack/src/ota.ts

@@ -6,6 +6,7 @@ export class OTAView {
     readonly firmware_buildtime: HTMLDivElement;
     readonly firmware_githash: HTMLDivElement;
     readonly firmware_partition: HTMLDivElement;
+    readonly firmware_state: HTMLDivElement;
 
     constructor(controller: Controller) {
         (document.getElementById("firmwareview") as HTMLElement).innerHTML = require("./ota.html")
@@ -15,6 +16,7 @@ export class OTAView {
         this.firmware_buildtime = document.getElementById("firmware_buildtime") as HTMLDivElement;
         this.firmware_githash = document.getElementById("firmware_githash") as HTMLDivElement;
         this.firmware_partition = document.getElementById("firmware_partition") as HTMLDivElement;
+        this.firmware_state = document.getElementById("firmware_state") as HTMLDivElement;
 
         
         const file = document.getElementById("firmware_file") as HTMLInputElement;
@@ -37,5 +39,6 @@ export class OTAView {
         this.firmware_buildtime.innerText = versionInfo.build_time;
         this.firmware_githash.innerText = versionInfo.git_hash;
         this.firmware_partition.innerText = versionInfo.partition;
+        this.firmware_state.innerText = versionInfo.ota_state;
     }
 }

rust/src_webpack/src/submitView.ts

@@ -26,6 +26,15 @@ export class SubmitView {
         this.submit_status = document.getElementById("submit_status") as HTMLElement
         this.submitFormBtn.onclick = () => {
             controller.uploadConfig(this.json.textContent as string, (status: string) => {
+                if (status != "OK") {
+                    // Show error toast (click to dismiss only)
+                    const { toast } = require('./toast');
+                    toast.error(status);
+                } else {
+                    // Show info toast (auto hides after 5s, or click to dismiss sooner)
+                    const { toast } = require('./toast');
+                    toast.info('Config uploaded successfully');
+                }
                 this.submit_status.innerHTML = status;
             });
         }

rust/src_webpack/src/toast.ts

@@ -0,0 +1,93 @@
+class ToastService {
+  private container: HTMLElement;
+  private stylesInjected = false;
+
+  constructor() {
+    this.container = this.ensureContainer();
+    this.injectStyles();
+  }
+
+  info(message: string, timeoutMs: number = 5000) {
+    const el = this.createToast(message, 'info');
+    this.container.appendChild(el);
+    // Auto-dismiss after timeout
+    const timer = window.setTimeout(() => this.dismiss(el), timeoutMs);
+    // Dismiss on click immediately
+    el.addEventListener('click', () => {
+      window.clearTimeout(timer);
+      this.dismiss(el);
+    });
+  }
+
+  error(message: string) {
+    const el = this.createToast(message, 'error');
+    this.container.appendChild(el);
+    // Only dismiss on click
+    el.addEventListener('click', () => this.dismiss(el));
+  }
+
+  private dismiss(el: HTMLElement) {
+    if (!el.parentElement) return;
+    el.parentElement.removeChild(el);
+  }
+
+  private createToast(message: string, type: 'info' | 'error'): HTMLElement {
+    const div = document.createElement('div');
+    div.className = `toast ${type}`;
+    div.textContent = message;
+    div.setAttribute('role', 'status');
+    div.setAttribute('aria-live', 'polite');
+    return div;
+  }
+
+  private ensureContainer(): HTMLElement {
+    let container = document.getElementById('toast-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'toast-container';
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  private injectStyles() {
+    if (this.stylesInjected) return;
+    const style = document.createElement('style');
+    style.textContent = `
+#toast-container {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 9999;
+}
+.toast {
+  max-width: 320px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  cursor: pointer;
+  user-select: none;
+  font-family: sans-serif;
+  font-size: 14px;
+  line-height: 1.3;
+}
+.toast.info {
+  background-color: #d4edda; /* green-ish */
+  color: #155724;
+  border-left: 4px solid #28a745;
+}
+.toast.error {
+  background-color: #f8d7da; /* red-ish */
+  color: #721c24;
+  border-left: 4px solid #dc3545;
+}
+`;
+    document.head.appendChild(style);
+    this.stylesInjected = true;
+  }
+}
+
+export const toast = new ToastService();