From 77f43372c948419ce453c420f8673ecb58681c94 Mon Sep 17 00:00:00 2001 From: Fenris Wolf Date: Mon, 21 Oct 2024 23:18:08 +0200 Subject: [PATCH] [mod] overview:hide/show calendars --- source/data/localization/deu.loc.json | 3 + source/data/localization/eng.loc.json | 3 + source/pages/overview/logic.ts | 15 +++-- source/style/widget-sources.css | 37 ++++++++++- source/style/widget-weekview.css | 5 ++ source/widgets/sources/logic.ts | 65 ++++++++++++++++--- .../widgets/sources/templates/entry.html.tpl | 12 +++- source/widgets/weekview/logic.ts | 22 +++++++ 8 files changed, 145 insertions(+), 17 deletions(-) diff --git a/source/data/localization/deu.loc.json b/source/data/localization/deu.loc.json index f8bf079..ff10470 100644 --- a/source/data/localization/deu.loc.json +++ b/source/data/localization/deu.loc.json @@ -14,6 +14,9 @@ "common.weekday.saturday": "Sa", "common.weekday.sunday": "So", "common.open": "öffnen", + "common.edit": "bearbeiten", + "common.show": "zeigen", + "common.hide": "ausblenden", "access_level.none": "nichts", "access_level.view": "nur lesen", "access_level.edit": "lesen und bearbeiten", diff --git a/source/data/localization/eng.loc.json b/source/data/localization/eng.loc.json index a365bbd..8977a02 100644 --- a/source/data/localization/eng.loc.json +++ b/source/data/localization/eng.loc.json @@ -14,6 +14,9 @@ "common.weekday.saturday": "Sat", "common.weekday.sunday": "Sun", "common.open": "open", + "common.edit": "edit", + "common.show": "show", + "common.hide": "hide", "access_level.none": "none", "access_level.view": "read only", "access_level.edit": "read and write", diff --git a/source/pages/overview/logic.ts b/source/pages/overview/logic.ts index 202a884..4fb74d1 100644 --- a/source/pages/overview/logic.ts +++ b/source/pages/overview/logic.ts @@ -31,6 +31,8 @@ namespace _zeitbild.frontend_web.pages.overview } ); target_element.querySelector("#overview").classList.toggle("overview-compact", compact); + let widget_weekview : _zeitbild.frontend_web.widgets.weekview.class_widget_weekview; + let widget_listview : _zeitbild.frontend_web.widgets.listview.class_widget_listview; // hint { if (! await _zeitbild.frontend_web.backend.is_logged_in()) { @@ -53,7 +55,7 @@ namespace _zeitbild.frontend_web.pages.overview const widget_sources = new _zeitbild.frontend_web.widgets.sources.class_widget_sources( data, { - "action_select": (entry) => { + "action_open": (entry) => { switch (entry.access_level) { case _zeitbild.frontend_web.type.enum_access_level.none: { throw (new Error("this event should not be visible")); @@ -86,6 +88,9 @@ namespace _zeitbild.frontend_web.pages.overview } } }, + "action_toggle_visibility": (entry) => { + widget_weekview.toggle_visibility(entry.id); + }, } ); await widget_sources.load(target_element.querySelector("#overview-pane-left")); @@ -136,7 +141,7 @@ namespace _zeitbild.frontend_web.pages.overview }; // listview { - const widget = ( + widget_listview = ( new _zeitbild.frontend_web.widgets.listview.class_widget_listview( get_entries, { @@ -157,11 +162,11 @@ namespace _zeitbild.frontend_web.pages.overview } ) ); - await widget.load(target_element.querySelector("#overview-pane-right-listview")); + await widget_listview.load(target_element.querySelector("#overview-pane-right-listview")); } // weekview { - const widget = ( + widget_weekview = ( new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview( get_entries, { @@ -182,7 +187,7 @@ namespace _zeitbild.frontend_web.pages.overview } ) ); - await widget.load(target_element.querySelector("#overview-pane-right-weekview")); + await widget_weekview.load(target_element.querySelector("#overview-pane-right-weekview")); } } return Promise.resolve(undefined); diff --git a/source/style/widget-sources.css b/source/style/widget-sources.css index a7f63e1..bfcb618 100644 --- a/source/style/widget-sources.css +++ b/source/style/widget-sources.css @@ -10,12 +10,43 @@ { margin: 8px; padding: 4px; +} + +.sources-entry-head +{ cursor: pointer; } -/* -.sources-entry:not(.sources-entry-active) +.sources-entry-body +{ + display: block; + transition: max-height ease 0.5s; +} + +.sources-entry-body > ul +{ + list-style-type: none; + padding: 0; + margin-left: 8px; + margin-bottom: 8px; +} + +.sources-entry-body > ul > li +{ + /* + display: block; + */ + margin-top: 8px; + cursor: pointer; +} + +.sources-entry:not(.sources-entry-open) > .sources-entry-head {} +.sources-entry:not(.sources-entry-open) > .sources-entry-body {max-height: 0; overflow: hidden;} + +.sources-entry.sources-entry-open > .sources-entry-head {} +.sources-entry.sources-entry-open > .sources-entry-body {max-height: 240px; overflow: auto;} + +.sources-entry-hidden { filter: saturate(0); } - */ diff --git a/source/style/widget-weekview.css b/source/style/widget-weekview.css index 9f38e48..5955bac 100644 --- a/source/style/widget-weekview.css +++ b/source/style/widget-weekview.css @@ -45,6 +45,11 @@ outline: 2px solid hsl(0, 0%, 100%); } +.weekview-cell-hidden +{ + display: none; +} + .weekview-day { font-size: 0.75em; diff --git a/source/widgets/sources/logic.ts b/source/widgets/sources/logic.ts index 4e75512..bd81bb2 100644 --- a/source/widgets/sources/logic.ts +++ b/source/widgets/sources/logic.ts @@ -27,7 +27,12 @@ namespace _zeitbild.frontend_web.widgets.sources /** */ - private action_select : ((entry : type_entry) => void); + private action_open : ((entry : type_entry) => void); + + + /** + */ + private action_toggle_visibility : ((entry : type_entry) => void); /** @@ -35,13 +40,15 @@ namespace _zeitbild.frontend_web.widgets.sources public constructor( entries : Array, options : { - action_select ?: ((entry : type_entry) => void); + action_open ?: ((entry : type_entry) => void); + action_toggle_visibility ?: ((entry : type_entry) => void); } = {} ) { options = Object.assign( { - "action_select": (calendar_id) => {}, + "action_open": (calendar_id) => {}, + "action_toggle_visibility": (calendar_id) => {}, }, options ); @@ -55,7 +62,8 @@ namespace _zeitbild.frontend_web.widgets.sources this.data[key] = entry; } ); - this.action_select = options.action_select; + this.action_open = options.action_open; + this.action_toggle_visibility = options.action_toggle_visibility; } @@ -82,9 +90,17 @@ namespace _zeitbild.frontend_web.widgets.sources "entry", { "name": entry.name, + "label_toggle": lib_plankton.string.coin( + "{{show}}/{{hide}}", + { + "show": lib_plankton.translate.get("common.show"), + "hide": lib_plankton.translate.get("common.hide"), + } + ), + "label_edit": lib_plankton.translate.get("common.edit"), // "access_level": entry.access_level, // TODO // TODO centralize - "color": lib_plankton.color.output_hex( + "color_head": lib_plankton.color.output_hex( lib_plankton.color.give_generic( (entry.id - 1), { @@ -93,6 +109,15 @@ namespace _zeitbild.frontend_web.widgets.sources } ), ), + "color_body": lib_plankton.color.output_hex( + lib_plankton.color.give_generic( + (entry.id - 1), + { + "saturation": 0.375, + "value": 0.25, + } + ), + ), "rel": key, } ); @@ -104,14 +129,38 @@ namespace _zeitbild.frontend_web.widgets.sources ), } ); - target_element.querySelectorAll(".sources-entry").forEach( + target_element.querySelectorAll(".sources-entry-head").forEach( (element) => { element.addEventListener( "click", (event) => { - const key : string = element.getAttribute("rel"); + element.parentElement.classList.toggle("sources-entry-open"); + } + ); + } + ); + target_element.querySelectorAll(".sources-entry-toggle").forEach( + (element) => { + element.addEventListener( + "click", + () => { + const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel"); const entry : type_entry = this.data[key]; - this.action_select(entry); + element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-hidden"); + element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-open", false); + this.action_toggle_visibility(entry); + } + ); + } + ); + target_element.querySelectorAll(".sources-entry-edit").forEach( + (element) => { + element.addEventListener( + "click", + (event) => { + const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel"); + const entry : type_entry = this.data[key]; + this.action_open(entry); } ); } diff --git a/source/widgets/sources/templates/entry.html.tpl b/source/widgets/sources/templates/entry.html.tpl index 92b794c..2ec8c57 100644 --- a/source/widgets/sources/templates/entry.html.tpl +++ b/source/widgets/sources/templates/entry.html.tpl @@ -1 +1,11 @@ -
  • {{name}}
    • +
  • +
    + {{name}} +
    +
    +
      +
    • {{label_toggle}}
      • +
    • {{label_edit}}
      • +
    +
    +
    • diff --git a/source/widgets/weekview/logic.ts b/source/widgets/weekview/logic.ts index 06c8e1f..f309f48 100644 --- a/source/widgets/weekview/logic.ts +++ b/source/widgets/weekview/logic.ts @@ -861,6 +861,28 @@ namespace _zeitbild.frontend_web.widgets.weekview } + /** + */ + public toggle_visibility( + calendar_id: _zeitbild.frontend_web.type.calendar_id + ) : void + { + this.container.querySelectorAll(".weekview-event_entry").forEach( + (element) => { + const rel : string = element.getAttribute("rel"); + const parts : Array = rel.split("/"); + const calendar_id_ : _zeitbild.frontend_web.type.calendar_id = parseInt(parts[0]); + if (! (calendar_id === calendar_id_)) { + // do nothing + } + else { + element.classList.toggle("weekview-cell-hidden"); + } + } + ); + } + + /** * [implementation] */