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

778
views/assets/scripts.js
View File

File diff suppressed because one or more lines are too long

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

2
views/routes/almanach/edit/body.gohtml
View File

@@ -642,7 +642,7 @@ type AlmanachResult struct {
<!-- Right Column -->
<div class="w-[28rem] shrink-0 flex flex-col gap-3">
<div>
{{ template "_status_edit" (Arr $model.result.Entry "type" "type") }}
{{ template "_status_edit" (Arr $model.result.Entry "type" "type" "almanach") }}
</div>
<div>

17
views/routes/components/_status_edit.gohtml
View File

@@ -1,6 +1,11 @@
{{- $entity := index . 0 -}}
{{- $fieldName := index . 1 -}}
{{- $fieldId := index . 2 -}}
{{- $context := "" -}}
{{- if gt (len .) 3 -}}
{{- $context = index . 3 -}}
{{- end -}}
{{- $isAlmanach := eq $context "almanach" -}}
<div class="flex flex-col gap-4">
<!-- Status -->
@@ -8,13 +13,21 @@
<div class="inputlabelrow">
<label for="{{ $fieldId }}" class="inputlabel">Status</label>
</div>
<select name="{{ $fieldName }}" id="{{ $fieldId }}" autocomplete="off" class="inputselect font-bold">
<option value="Unknown" {{ if eq $entity.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
<div class="relative">
<select name="{{ $fieldName }}" id="{{ $fieldId }}" autocomplete="off" class="inputselect
font-bold status-select py-2 pl-8" data-status="{{ $entity.EditState }}">
<option value="Unknown" {{ if eq $entity.EditState "Unknown" }}selected{{ end }}>{{ if $isAlmanach }}Gesucht{{ else }}Unbekannt{{ end }}</option>
<option value="ToDo" {{ if eq $entity.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
<option value="Review" {{ if eq $entity.EditState "Review" }}selected{{ end }}>Überprüfen</option>
{{- if $isAlmanach -}}
<option value="Seen" {{ if eq $entity.EditState "Seen" }}selected{{ end }}>Autopsiert</option>
<option value="Edited" {{ if eq $entity.EditState "Edited" }}selected{{ end }}>Vollständig Erfasst</option>
{{- else -}}
<option value="Edited" {{ if eq $entity.EditState "Edited" }}selected{{ end }}>Erfasst</option>
{{- end -}}
</select>
<i class="status-icon absolute left-2 top-[calc(50%-1px)] -translate-y-1/2 pointer-events-none {{- if eq $entity.EditState "Edited" }} ri-checkbox-circle-line{{- else if eq $entity.EditState "Seen" }} ri-information-line{{- else if eq $entity.EditState "Review" }} ri-search-line{{- else if eq $entity.EditState "ToDo" }} ri-list-check{{- else }} ri-forbid-2-line{{- end }}"></i>
</div>
</div>
<!-- Bearbeitungsvermerk -->

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;
}