zeitbild/frontend-dali
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[mod] overview:hide/show calendars

Browse source
This commit is contained in:
Fenris Wolf 2024-10-21 23:18:08 +02:00
parent ad322f7550
commit 77f43372c9
8 changed files with 145 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
source/data/localization/deu.loc.json
View file

@ -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",

3
source/data/localization/eng.loc.json
View file

@ -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",

15
source/pages/overview/logic.ts
View file

@ -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<void>(undefined);

37
source/style/widget-sources.css
View file

@ -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);
}
*/

5
source/style/widget-weekview.css
View file

@ -45,6 +45,11 @@
outline: 2px solid hsl(0, 0%, 100%);
}
.weekview-cell-hidden
{
display: none;
}
.weekview-day
{
font-size: 0.75em;

65
source/widgets/sources/logic.ts
View file

@ -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<type_entry>,
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);
}
);
}

12
source/widgets/sources/templates/entry.html.tpl
View file

@ -1 +1,11 @@
<li class="sources-entry" style="background-color: {{color}}" rel="{{rel}}">{{name}}</li>
<li class="sources-entry" style="background-color: {{color_head}}" rel="{{rel}}">
<div class="sources-entry-head">
<span>{{name}}</span>
</div>
<div class="sources-entry-body" style="background-color: {{color_body}}">
<ul>
<li class="sources-entry-action sources-entry-toggle">{{label_toggle}}</li>
<li class="sources-entry-action sources-entry-edit">{{label_edit}}</li>
</ul>
</div>
</li>

22
source/widgets/weekview/logic.ts
View file

@ -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<string> = 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]
*/