From b6d27b9f15e0ef17867e9512c07535313075ebd8 Mon Sep 17 00:00:00 2001 From: Fenris Wolf Date: Wed, 2 Oct 2024 18:26:33 +0200 Subject: [PATCH] [mod] widget:listview [mod] page:overview --- source/logic/helpers.ts | 76 ++++++++++++++++++- source/pages/overview/logic.ts | 52 +++++++++---- source/style/pages.css | 14 +++- source/style/widgets.css | 20 +++++ source/widgets/listview/logic.ts | 18 +++++ .../widgets/listview/templates/entry.html.tpl | 15 +++- 6 files changed, 175 insertions(+), 20 deletions(-) diff --git a/source/logic/helpers.ts b/source/logic/helpers.ts index 024fe18..bf02a46 100644 --- a/source/logic/helpers.ts +++ b/source/logic/helpers.ts @@ -75,6 +75,80 @@ namespace _zeitbild.frontend_web.helpers } + /** + * @todo timezone + */ + export function datetime_format( + datetime : (null | lib_plankton.pit.type_datetime) + ) : string + { + if (datetime === null) { + return "-"; + } + else { + return lib_plankton.string.coin( + "{{date}}{{macro_time}}", + { + "date": lib_plankton.string.coin( + "{{year}}-{{month}}-{{day}}", + { + "year": datetime.date.year.toFixed(0).padStart(4, "0"), + "month": datetime.date.month.toFixed(0).padStart(2, "0"), + "day": datetime.date.day.toFixed(0).padStart(2, "0"), + } + ), + "macro_time": ( + (datetime.time === null) + ? + "" + : + lib_plankton.string.coin( + ",{{time}}", + { + "time": lib_plankton.string.coin( + "{{hour}}:{{minute}}", + { + "hour": datetime.time.hour.toFixed(0).padStart(2, "0"), + "minute": datetime.time.minute.toFixed(0).padStart(2, "0"), + "second": datetime.time.second.toFixed(0).padStart(2, "0"), + } + ), + } + ) + ), + } + ); + } + } + + + /** + */ + export function timespan_format( + from : lib_plankton.pit.type_datetime, + to : (null | lib_plankton.pit.type_datetime) + ) : string + { + return lib_plankton.string.coin( + "{{from}}{{macro_to}}", + { + "from": datetime_format(from), + "macro_to": ( + (to === null) + ? + "" + : + lib_plankton.string.coin( + " - {{to}}", + { + "to": datetime_format(to), + } + ) + ), + } + ); + } + /** */ export function input_access_level( @@ -156,5 +230,5 @@ namespace _zeitbild.frontend_web.helpers ) ); } - + } diff --git a/source/pages/overview/logic.ts b/source/pages/overview/logic.ts index e1f4863..d5ab647 100644 --- a/source/pages/overview/logic.ts +++ b/source/pages/overview/logic.ts @@ -7,7 +7,21 @@ namespace _zeitbild.frontend_web.pages.overview "overview", async (parameters, target_element) => { // params - const mode : ("list" | "week") = (parameters["mode"] ?? "week"); + const compact : boolean = ( + ( + parameters["compact"] + ?? + ( + (window.innerWidth >= 800) + ? + "no" + : + "yes" + ) + ) + === + "yes" + ); // exec target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin( @@ -16,6 +30,7 @@ namespace _zeitbild.frontend_web.pages.overview { } ); + target_element.querySelector("#overview").classList.toggle("compact", compact); // sources { const data : Array< @@ -64,7 +79,12 @@ namespace _zeitbild.frontend_web.pages.overview }, } ); - await widget_sources.load(target_element.querySelector("#overview-pane-left")); + if (compact) { + // do nothing + } + else { + await widget_sources.load(target_element.querySelector("#overview-pane-left")); + } } // view { @@ -110,9 +130,11 @@ namespace _zeitbild.frontend_web.pages.overview } } }; - switch (mode) { - case "list": { - const widget_listview = new _zeitbild.frontend_web.widgets.listview.class_widget_listview( + const widget = ( + compact + ? + ( + new _zeitbild.frontend_web.widgets.listview.class_widget_listview( get_entries, { "action_select_event": action_select_event, @@ -130,12 +152,11 @@ namespace _zeitbild.frontend_web.pages.overview ); }, } - ); - await widget_listview.load(target_element.querySelector("#overview-pane-right")); - break; - } - case "week": { - const widget_weekview = new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview( + ) + ) + : + ( + new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview( get_entries, { "action_select_event": action_select_event, @@ -153,11 +174,10 @@ namespace _zeitbild.frontend_web.pages.overview ); }, } - ); - await widget_weekview.load(target_element.querySelector("#overview-pane-right")); - break; - } - } + ) + ) + ); + await widget.load(target_element.querySelector("#overview-pane-right")); } return Promise.resolve(undefined); }, diff --git a/source/style/pages.css b/source/style/pages.css index 4de73ae..bfd3801 100644 --- a/source/style/pages.css +++ b/source/style/pages.css @@ -32,12 +32,22 @@ flex-wrap: wrap; } -#overview-pane-left +#overview:not(.compact) #overview-pane-left { flex-basis: 12.5%; } -#overview-pane-right +#overview:not(.compact) #overview-pane-right { flex-basis: 87.5%; } + +#overview.compact #overview-pane-left +{ + flex-basis: 0%; +} + +#overview.compact #overview-pane-right +{ + flex-basis: 100%; +} diff --git a/source/style/widgets.css b/source/style/widgets.css index febb46f..7158e93 100644 --- a/source/style/widgets.css +++ b/source/style/widgets.css @@ -46,3 +46,23 @@ font-weight: bold; font-size: 1.25em; } + +.listview-entry-label +{ + font-weight: bold; +} + +.listview-entry-label::before +{ + content: "["; +} + +.listview-entry-label::after +{ + content: "] "; +} + +.listview-entry-field:not(:last-child) +{ + margin-bottom: 16px; +} diff --git a/source/widgets/listview/logic.ts b/source/widgets/listview/logic.ts index 4d9d980..e635236 100644 --- a/source/widgets/listview/logic.ts +++ b/source/widgets/listview/logic.ts @@ -134,6 +134,24 @@ namespace _zeitbild.frontend_web.widgets.listview "entry", { "name": entry.event_object.name, + "calendar": entry.calendar_name, + "when": _zeitbild.frontend_web.helpers.timespan_format(entry.event_object.begin, entry.event_object.end), + "label_location": lib_plankton.translate.get("event.location"), + "location": ( + (entry.event_object.location === null) + ? + "?" + : + entry.event_object.location + ), + "label_description": lib_plankton.translate.get("event.description"), + "description": ( + (entry.event_object.description === null) + ? + "?" + : + entry.event_object.description + ), "raw": JSON.stringify(entry), "color": lib_plankton.color.output_hex( lib_plankton.color.give_generic( diff --git a/source/widgets/listview/templates/entry.html.tpl b/source/widgets/listview/templates/entry.html.tpl index 7f4663e..94dd629 100644 --- a/source/widgets/listview/templates/entry.html.tpl +++ b/source/widgets/listview/templates/entry.html.tpl @@ -1,4 +1,17 @@
  • - {{name}} + {{name}} ({{calendar}}) +
    + {{when}} +
    +
    + {{label_location}} + {{location}} +
    +