[mod] widget:listview:bessere Darstellung und Bedienung

This commit is contained in:
Fenris Wolf 2024-10-20 17:26:35 +02:00
parent 34ec6125c5
commit 18fcdd881e
5 changed files with 77 additions and 44 deletions

View file

@ -13,6 +13,7 @@
"common.weekday.friday": "Fr", "common.weekday.friday": "Fr",
"common.weekday.saturday": "Sa", "common.weekday.saturday": "Sa",
"common.weekday.sunday": "So", "common.weekday.sunday": "So",
"common.open": "öffnen",
"access_level.none": "nichts", "access_level.none": "nichts",
"access_level.view": "nur lesen", "access_level.view": "nur lesen",
"access_level.edit": "lesen und bearbeiten", "access_level.edit": "lesen und bearbeiten",

View file

@ -13,6 +13,7 @@
"common.weekday.friday": "Fri", "common.weekday.friday": "Fri",
"common.weekday.saturday": "Sat", "common.weekday.saturday": "Sat",
"common.weekday.sunday": "Sun", "common.weekday.sunday": "Sun",
"common.open": "open",
"access_level.none": "none", "access_level.none": "none",
"access_level.view": "read only", "access_level.view": "read only",
"access_level.edit": "read and write", "access_level.edit": "read and write",

View file

@ -67,6 +67,10 @@
content: "] "; content: "] ";
} }
.listview-entry-field-empty {
display: none;
}
.listview-entry-field:not(:last-child) .listview-entry-field:not(:last-child)
{ {
margin-bottom: 16px; margin-bottom: 16px;

View file

@ -133,27 +133,49 @@ namespace _zeitbild.frontend_web.widgets.listview
"widget-listview", "widget-listview",
"entry", "entry",
{ {
"name": entry.event_object.name, "name_value": entry.event_object.name,
"calendar": entry.calendar_name, "calendar_value": entry.calendar_name,
"when": _zeitbild.frontend_web.helpers.timespan_format(entry.event_object.begin, entry.event_object.end), "when_value": _zeitbild.frontend_web.helpers.timespan_format(entry.event_object.begin, entry.event_object.end),
"label_location": lib_plankton.translate.get("event.location"), "location_label": lib_plankton.translate.get("event.location"),
"location": ( "location_extra_classes": (
(entry.event_object.location === null)
?
"listview-entry-field-empty"
:
""
),
"location_value": (
(entry.event_object.location === null) (entry.event_object.location === null)
? ?
"?" "?"
: :
entry.event_object.location entry.event_object.location
), ),
"label_link": lib_plankton.translate.get("event.link"), "link_label": lib_plankton.translate.get("event.link"),
"link": ( "link_extra_classes": (
(entry.event_object.link === null)
?
"listview-entry-field-empty"
:
""
),
"link_value": (
(entry.event_object.link === null) (entry.event_object.link === null)
? ?
"?" "?"
: :
entry.event_object.link entry.event_object.link
), ),
"label_description": lib_plankton.translate.get("event.description"), "link_action": lib_plankton.translate.get("common.open"),
"description": ( "description_label": lib_plankton.translate.get("event.description"),
"description_extra_classes": (
(entry.event_object.description === null)
?
"listview-entry-field-empty"
:
""
),
"description_value": (
(entry.event_object.description === null) (entry.event_object.description === null)
? ?
"?" "?"
@ -208,30 +230,35 @@ namespace _zeitbild.frontend_web.widgets.listview
(element) => { (element) => {
element.addEventListener( element.addEventListener(
"click", "click",
() => { (event) => {
const rel : string = element.getAttribute("rel"); if (! (event.target === element)) {
const parts : Array<string> = rel.split("/"); // do nothing
const calendar_id : _zeitbild.frontend_web.type.calendar_id = parseInt(parts[0]); }
const event_id : (null | _zeitbild.frontend_web.type.local_resource_event_id) = ( else {
parts[1] === "-" const rel : string = element.getAttribute("rel");
? const parts : Array<string> = rel.split("/");
null const calendar_id : _zeitbild.frontend_web.type.calendar_id = parseInt(parts[0]);
: const event_id : (null | _zeitbild.frontend_web.type.local_resource_event_id) = (
parseInt(parts[1]) parts[1] === "-"
); ?
const access_level : _zeitbild.frontend_web.type.enum_access_level = (() => { null
switch (parts[2]) { :
case "none": return _zeitbild.frontend_web.type.enum_access_level.none; parseInt(parts[1])
case "view": return _zeitbild.frontend_web.type.enum_access_level.view; );
case "edit": return _zeitbild.frontend_web.type.enum_access_level.edit; const access_level : _zeitbild.frontend_web.type.enum_access_level = (() => {
case "admin": return _zeitbild.frontend_web.type.enum_access_level.admin; switch (parts[2]) {
} case "none": return _zeitbild.frontend_web.type.enum_access_level.none;
}) (); case "view": return _zeitbild.frontend_web.type.enum_access_level.view;
this.action_select_event( case "edit": return _zeitbild.frontend_web.type.enum_access_level.edit;
calendar_id, case "admin": return _zeitbild.frontend_web.type.enum_access_level.admin;
access_level, }
event_id, }) ();
); this.action_select_event(
calendar_id,
access_level,
event_id,
);
}
} }
); );
} }

View file

@ -1,20 +1,20 @@
<li class="listview-entry" style="background-color: {{color}}" rel="{{rel}}"> <li class="listview-entry" style="background-color: {{color}}" rel="{{rel}}">
<span class="listview-entry-name">{{name}}</span> (<span class="listview-entry-calendar">{{calendar}}</span>) <span class="listview-entry-name">{{name_value}}</span> (<span class="listview-entry-calendar">{{calendar_value}}</span>)
<div class="listview-entry-field listview-entry-when"> <div class="listview-entry-field listview-entry-when">
<span class="listview-entry-value">{{when}}</span> <span class="listview-entry-value">{{when_value}}</span>
</div> </div>
<div class="listview-entry-field listview-entry-location"> <div class="listview-entry-field listview-entry-location {{location_extra_classes}}">
<span class="listview-entry-label">{{label_location}}</span> <span class="listview-entry-label">{{location_label}}</span>
<span class="listview-entry-value">{{location}}</span> <span class="listview-entry-value">{{location_value}}</span>
</div> </div>
<div class="listview-entry-field listview-entry-link"> <div class="listview-entry-field listview-entry-link {{link_extra_classes}}">
<span class="listview-entry-label">{{label_link}}</span> <span class="listview-entry-label">{{link_label}}</span>
<a class="listview-entry-value" href="{{link}}" target="_blank">{{link}}</a> <a class="listview-entry-value" href="{{link_value}}" target="_blank">{{link_action}}</a>
</div> </div>
<!-- <!--
<div class="listview-entry-field listview-entry-description"> <div class="listview-entry-field listview-entry-description {{description_extra_classes}}">
<span class="listview-entry-label">{{label_description}}</span> <span class="listview-entry-label">{{description_label}}</span>
<span class="listview-entry-value">{{description}}</span> <span class="listview-entry-value">{{description_value}}</span>
</div> </div>
<div class="listview-entry-raw">{{raw}}</div> <div class="listview-entry-raw">{{raw}}</div>
--> -->