+farbiger status

views/transform/almanach-edit.js

@@ -28,9 +28,55 @@ export class AlmanachEditPage extends HTMLElement {
 			this._initForm();
 			this._initPlaces();
 			this._initSaveHandling();
+			this._initStatusSelect();
 		}, 0);
 	}
 
+	_initStatusSelect() {
+		const statusSelect = this.querySelector(".status-select");
+		if (!statusSelect) {
+			return;
+		}
+		const statusIcon = this.querySelector(".status-icon");
+		statusSelect.addEventListener("change", (event) => {
+			const newStatus = event.target.value;
+			statusSelect.setAttribute("data-status", newStatus);
+			if (statusIcon) {
+				this._updateStatusIcon(statusIcon, newStatus);
+			}
+		});
+	}
+
+	_updateStatusIcon(iconElement, status) {
+		// Remove all status icon classes
+		iconElement.classList.remove(
+			"ri-checkbox-circle-line",
+			"ri-information-line",
+			"ri-search-line",
+			"ri-list-check",
+			"ri-forbid-2-line"
+		);
+		// Add the appropriate icon class
+		switch (status) {
+			case "Edited":
+				iconElement.classList.add("ri-checkbox-circle-line");
+				break;
+			case "Seen":
+				iconElement.classList.add("ri-information-line");
+				break;
+			case "Review":
+				iconElement.classList.add("ri-search-line");
+				break;
+			case "ToDo":
+				iconElement.classList.add("ri-list-check");
+				break;
+			case "Unknown":
+			default:
+				iconElement.classList.add("ri-forbid-2-line");
+				break;
+		}
+	}
+
 	disconnectedCallback() {
 		this._teardownSaveHandling();
 	}