Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 02:25:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

+farbiger status

Browse Source
This commit is contained in:
Simon Martens
2026-01-11 10:22:22 +01:00
parent 5ac7042c8d
commit a2ecd125ab
7 changed files with 573 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
views/transform/almanach-edit.js
View File

@@ -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();
}

46
views/transform/edit-page.js
View File

@@ -6,9 +6,55 @@ export class EditPage extends HTMLElement {
window.FormLoad(form);
}
this._setupDelete();
this._setupStatusSelect();
}, 0);
}
_setupStatusSelect() {
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;
}
}
_setupDelete() {
const form = this.querySelector("form");
if (!form) {

34
views/transform/form.css
View File

@@ -44,6 +44,40 @@
@apply mt-1 block w-full rounded-md focus:border-none focus:outline-none
disabled:opacity-50 py-1 px-3;
}
/* Status select color coding */
.status-select[data-status="Edited"] {
@apply bg-green-100 text-green-900;
}
.status-select[data-status="Seen"] {
@apply bg-blue-100 text-blue-900;
}
.status-select[data-status="Review"] {
@apply bg-orange-100 text-orange-900;
}
.status-select[data-status="ToDo"] {
@apply bg-red-100 text-red-900;
}
.status-select[data-status="Unknown"] {
@apply bg-gray-300 text-gray-900;
}
/* Status icon colors to match status */
.status-select[data-status="Edited"] + .status-icon {
@apply text-green-900;
}
.status-select[data-status="Seen"] + .status-icon {
@apply text-blue-900;
}
.status-select[data-status="Review"] + .status-icon {
@apply text-orange-900;
}
.status-select[data-status="ToDo"] + .status-icon {
@apply text-red-900;
}
.status-select[data-status="Unknown"] + .status-icon {
@apply text-gray-900;
}
.dbform .submitbutton {
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
}