From a8d05d1dbfeb7727791cab63371571ba1aaa0e46 Mon Sep 17 00:00:00 2001 From: Fenris Wolf Date: Tue, 1 Oct 2024 22:52:53 +0200 Subject: [PATCH] [add] widget:listview --- source/style/widgets.css | 22 ++ source/widgets/listview/logic.ts | 204 ++++++++++++++++++ .../widgets/listview/templates/entry.html.tpl | 4 + .../widgets/listview/templates/main.html.tpl | 5 + source/widgets/sources/logic.ts | 1 + tools/makefile | 9 + 6 files changed, 245 insertions(+) create mode 100644 source/widgets/listview/logic.ts create mode 100644 source/widgets/listview/templates/entry.html.tpl create mode 100644 source/widgets/listview/templates/main.html.tpl diff --git a/source/style/widgets.css b/source/style/widgets.css index 207474f..febb46f 100644 --- a/source/style/widgets.css +++ b/source/style/widgets.css @@ -24,3 +24,25 @@ width: 100%; border-collapse: collapse; } + +.listview-entries +{ + padding: 0; + margin: 0; + list-style-type: none; +} + +.listview-entry +{ + background: hsl(0,0%,25%); + padding: 12px; + border-radius: 4px; + margin: 12px; + cursor: pointer; +} + +.listview-entry-name +{ + font-weight: bold; + font-size: 1.25em; +} diff --git a/source/widgets/listview/logic.ts b/source/widgets/listview/logic.ts new file mode 100644 index 0000000..4d9d980 --- /dev/null +++ b/source/widgets/listview/logic.ts @@ -0,0 +1,204 @@ +namespace _zeitbild.frontend_web.widgets.listview +{ + + /** + */ + type type_entry = { + calendar_id : _zeitbild.frontend_web.type.calendar_id; + calendar_name : string; + access_level : _zeitbild.frontend_web.type.enum_access_level; + event_id : (null | _zeitbild.frontend_web.type.local_resource_event_id); + event_object : _zeitbild.frontend_web.type.event_object; + }; + + + /** + */ + type type_get_entries = ( + ( + from_pit : lib_plankton.pit.type_pit, + to_pit : lib_plankton.pit.type_pit, + calendar_ids : Array<_zeitbild.frontend_web.type.calendar_id> + ) + => + Promise> + ); + + + /** + */ + export class class_widget_listview extends _zeitbild.class_widget + { + + /** + */ + private get_entries : type_get_entries; + + + /** + */ + private action_select_event : ( + ( + calendar_id : _zeitbild.frontend_web.type.calendar_id, + access_level : _zeitbild.frontend_web.type.enum_access_level, + event_id : _zeitbild.frontend_web.type.local_resource_event_id + ) + => + void + ); + + + /** + */ + private action_add : ( + ( + ) + => + void + ); + + + /** + */ + public constructor( + get_entries : type_get_entries, + options : { + action_select_event ?: ( + ( + calendar_id : _zeitbild.frontend_web.type.calendar_id, + access_level : _zeitbild.frontend_web.type.enum_access_level, + event_id : _zeitbild.frontend_web.type.local_resource_event_id + ) + => + void + ); + action_add ?: ( + ( + ) + => + void + ); + } = {} + ) + { + options = Object.assign( + { + "action_select_event": (calendar_id, access_level, event_id) => {}, + "action_select_add": () => {}, + }, + options + ); + super(); + this.get_entries = get_entries; + this.action_select_event = options.action_select_event; + this.action_add = options.action_add; + } + + + /** + * [implementation] + */ + public async load( + target_element : Element + ) : Promise + { + const now_pit : lib_plankton.pit.type_pit = lib_plankton.pit.now(); + const from_pit : lib_plankton.pit.type_pit = now_pit; + const to_pit : lib_plankton.pit.type_pit = lib_plankton.pit.shift_week(now_pit, +2); + const entries : Array = await this.get_entries( + from_pit, + to_pit, + null + ); + entries.sort( + (x, y) => ( + lib_plankton.pit.from_datetime(x.event_object.begin) + - + lib_plankton.pit.from_datetime(y.event_object.begin) + ) + ); + + // view + { + target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin( + "widget-listview", + "main", + { + "entries": ( + ( + await _zeitbild.frontend_web.helpers.promise_row( + entries + .map( + (entry) => () => _zeitbild.frontend_web.helpers.template_coin( + "widget-listview", + "entry", + { + "name": entry.event_object.name, + "raw": JSON.stringify(entry), + "color": lib_plankton.color.output_hex( + lib_plankton.color.give_generic( + (entry.calendar_id - 1), + { + "saturation": 0.375, + "value": 0.375, + } + ), + ), + "rel": lib_plankton.string.coin( + "{{calendar_id}}/{{event_id}}", + { + "calendar_id": entry.calendar_id.toFixed(0), + "event_id": ( + (! (entry.event_id === null)) + ? + entry.event_id.toFixed(0) + : + "-" + ), + } + ), + }, + ) + ) + ) + ) + .join("") + ), + } + ); + } + + // control + { + target_element.querySelectorAll(".listview-entry").forEach( + (element) => { + element.addEventListener( + "click", + () => { + const rel : string = element.getAttribute("rel"); + const parts : Array = rel.split("/"); + const calendar_id : _zeitbild.frontend_web.type.calendar_id = parseInt(parts[0]); + const event_id : (null | _zeitbild.frontend_web.type.local_resource_event_id) = ( + parts[1] === "-" + ? + null + : + parseInt(parts[1]) + ); + this.action_select_event( + calendar_id, + event_id, + _zeitbild.frontend_web.type.enum_access_level.admin // TODO + ); + } + ); + } + ); + } + + return Promise.resolve(undefined); + } + + } + +} diff --git a/source/widgets/listview/templates/entry.html.tpl b/source/widgets/listview/templates/entry.html.tpl new file mode 100644 index 0000000..7f4663e --- /dev/null +++ b/source/widgets/listview/templates/entry.html.tpl @@ -0,0 +1,4 @@ +
  • + {{name}} +
    {{raw}}
    +
    • diff --git a/source/widgets/listview/templates/main.html.tpl b/source/widgets/listview/templates/main.html.tpl new file mode 100644 index 0000000..63da5df --- /dev/null +++ b/source/widgets/listview/templates/main.html.tpl @@ -0,0 +1,5 @@ +
    +
      +{{entries}} +
    +
    diff --git a/source/widgets/sources/logic.ts b/source/widgets/sources/logic.ts index 934cc5e..4e75512 100644 --- a/source/widgets/sources/logic.ts +++ b/source/widgets/sources/logic.ts @@ -83,6 +83,7 @@ namespace _zeitbild.frontend_web.widgets.sources { "name": entry.name, // "access_level": entry.access_level, // TODO + // TODO centralize "color": lib_plankton.color.output_hex( lib_plankton.color.give_generic( (entry.id - 1), diff --git a/tools/makefile b/tools/makefile index 2a89800..d0b9b93 100644 --- a/tools/makefile +++ b/tools/makefile @@ -33,6 +33,7 @@ ${dir_build}/index.html: \ .PHONY: templates templates: \ templates-widgets-sources \ + templates-widgets-listview \ templates-widgets-weekview \ templates-pages-calendar_add \ templates-pages-calendar_edit \ @@ -48,6 +49,13 @@ templates-widgets-sources: \ @ ${cmd_mkdir} ${dir_build}/templates/widget-sources @ ${cmd_cp} -r -u -v ${dir_source}/widgets/sources/templates/* ${dir_build}/templates/widget-sources/ +.PHONY: templates-widgets-listview +templates-widgets-listview: \ + $(wildcard ${dir_source}/widgets/listview/templates/*) + @ ${cmd_log} "templates:widgets:listview …" + @ ${cmd_mkdir} ${dir_build}/templates/widget-listview + @ ${cmd_cp} -r -u -v ${dir_source}/widgets/listview/templates/* ${dir_build}/templates/widget-listview/ + .PHONY: templates-widgets-weekview templates-widgets-weekview: \ $(wildcard ${dir_source}/widgets/weekview/templates/*) @@ -115,6 +123,7 @@ ${dir_temp}/logic-unlinked.js: \ ${dir_source}/logic/types.ts \ ${dir_source}/logic/backend.ts \ ${dir_source}/widgets/sources/logic.ts \ + ${dir_source}/widgets/listview/logic.ts \ ${dir_source}/widgets/weekview/logic.ts \ ${dir_source}/pages/login/logic.ts \ ${dir_source}/pages/logout/logic.ts \