added alert box functionality

scripts/interface.js

@@ -1,4 +1,11 @@
 class Element {
+	constructor({id, tag}) {
+		this.id = id;
+		if (tag !== undefined) {
+			this.handle = tag;
+		}
+	}
+
 	#hidden = false;
 	get hidden() {
 		return this.#hidden;
@@ -10,21 +17,23 @@ class Element {
 		if (this.label !== undefined) {
 			this.label.hidden = this.hidden;
 		}
+
+		if (this.hidden === true) this.clearAlerts();
 	}
+
 }
 
 class Form extends Element {
-	constructor({id, formTag}) {
-		super();
-		this.id = id;
+	constructor({id, tag}) {
+		super(id, tag);
 
-		if (formTag !== undefined) {
-			this.handle = formTag;
-		} else {
+		if (tag === undefined) {
 			this.handle = document.createElement("div");
 		}
 
 		this.elements = new Map();
+
+		this.clearAlerts = this.clearAlerts.bind(this);
 	}
 
 	#advanced = false;
@@ -43,6 +52,12 @@ class Form extends Element {
 			}
 		}
 	}
+
+	clearAlerts() {
+		for (const [id, element] of this.elements.entries()) {
+			element.clearAlerts();
+		}
+	}
 }
 
 function b64ToBuf (b64) {
@@ -74,19 +89,15 @@ class FormElement extends Element {
 		this.handle.disabled = !this.#enabled;
 	}
 
-	constructor({id, type, form, label="", dataType="plaintext", advanced=false, enabled=true}) {
-		super();
+	constructor({id, type, form, tag, label="", dataType="plaintext", advanced=false, enabled=true}) {
+		super(id);
 		this.id = id;
 
 		this.advanced = advanced;
-
-		if (label !== "") {
-			this.label = document.createElement("label");
-			this.label.innerHTML = label;
-		}
-
 		this.type = type;
 
+		this.clearAlerts = this.clearAlerts.bind(this);
+
 		switch (type) {
 			case "textbox":
 				this.handle = document.createElement("input");
@@ -100,6 +111,8 @@ class FormElement extends Element {
 				break;
 			case "button":
 				this.handle = document.createElement("button");
+				this.handle.innerHTML = label;
+				label = "";
 				dataType = "none"
 				break;
 			case "output":
@@ -110,6 +123,11 @@ class FormElement extends Element {
 				throw `Unknown input type: ${type}`;
 		}
 
+		if (label !== "") {
+			this.label = document.createElement("label");
+			this.label.innerHTML = label;
+		}
+
 		this.dataType = dataType;
 
 		this.enabled = enabled;
@@ -181,4 +199,51 @@ class FormElement extends Element {
 				this.handle.value = bufToB64(x);
 		}
 	}
+
+	alerts = [];
+	alertBox(type, message, title) {
+		// type is alert-error or alert-info
+		
+		if (this.handle === undefined) {
+			throw `can not add alert for '${this.id}': still undefined`;
+		}
+
+		if (this.hidden === true) {
+			throw `can not add alert for '${this.id}': hidden`;
+		}
+
+		if (title === undefined) {
+			switch (type) {
+				case "alert-info":
+					title = "Info: ";
+					break;
+				case "alert-error":
+					title = "Error: ";
+					break;
+				default:
+					title = "";
+					break;
+			}
+		}
+
+		let box = document.createElement("div");
+		box.classList.add(type);
+		box.classList.add("alert");
+		box.innerHTML = message;
+
+		if (title !== "") {
+			let titleTag = document.createElement("strong");
+			titleTag.innerHTML = title;
+			box.prepend(titleTag);
+		}
+
+		this.handle.after(box);
+		this.alerts.push(box);
+	}
+	clearAlerts() {
+		for (const box of this.alerts) {
+			box.remove();
+		}
+		this.alerts = [];
+	}
 }

style.css

@@ -55,6 +55,20 @@ textarea:disabled, input:disabled {
 	opacity: 40%;
 }
 
+.alert {
+	border-radius: 3px;
+	margin-top: 0.5em;
+	padding: 0.75em;
+	background: #ffffff44;
+	width: 75%;
+}
+.alert-error {
+	background: #ffaaaa44;
+}
+.alert-info {
+	background: #aaaaff44;
+}
+
 [hidden] {
 	animation: fadeOut 0.2s, disappear 0.3s;
 	opacity: 0;