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

[task-408] [mod] Quellen-Steuerelement umgestellt

Browse source
This commit is contained in:
fenris 2025-10-14 23:04:31 +02:00
parent 4612128134
commit c6d868b243
7 changed files with 233 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,7 @@
"widget.event_edit.actions.add": "anlegen",
"widget.event_edit.actions.change": "ändern",
"widget.event_edit.actions.remove": "löschen",
"widget.sources.create": "anlegen",
"page.login.title": "Anmelden",
"page.login.internal.name": "Name",
"page.login.internal.password": "Kennwort",

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

@ -55,6 +55,7 @@
"widget.event_edit.actions.add": "add",
"widget.event_edit.actions.change": "change",
"widget.event_edit.actions.remove": "delete",
"widget.sources.create": "create",
"page.login.title": "Login",
"page.login.internal.name": "name",
"page.login.internal.password": "password",

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

@ -57,13 +57,15 @@ namespace _dali.pages.overview
await widget_mode_switcher.load(target_element.querySelector("#overview-mode"));
}
let widget_sources : _dali.widgets.sources.class_widget_sources;
let widget_weekview : _dali.widgets.weekview.class_widget_weekview;
let widget_listview : _dali.widgets.listview.class_widget_listview;
/**
* @todo update sources
*/
const update = () => {
widget_weekview.update_entries();
const update = async () => {
await widget_weekview.update_entries();
await widget_sources.update();
};
// hint
{
@ -78,17 +80,8 @@ namespace _dali.pages.overview
}
// sources
{
const data : Array<
{
id : _dali.type.calendar_id;
name : string;
hue : float;
access_level : _dali.type.enum_access_level;
}
> = await _dali.backend.calendar_list(
);
const widget_sources = new _dali.widgets.sources.class_widget_sources(
data,
widget_sources = new _dali.widgets.sources.class_widget_sources(
_dali.backend.calendar_list,
{
"action_open": (entry) => {
let read_only : boolean;
@ -161,6 +154,9 @@ namespace _dali.pages.overview
widget_weekview.toggle_visibility(entry.id);
widget_listview.toggle_visibility(entry.id);
},
"action_create": () => {
console.warn("not implemented: calendar_add widget");
},
}
);
await widget_sources.load(target_element.querySelector("#overview-pane-left"));

6
source/style/main.css
View file

@ -89,12 +89,14 @@ nav a:hover
a
{
text-decoration: none;
color: hsl(var(--hue), 50%, 50%);
color: hsl(var(--hue), 0%, 87.5%);
}
a:hover
{
color: hsl(var(--hue), 50%, 75%);
color: hsl(var(--hue), 0%, 100%);
border-bottom: 2px solid hsl(0, 0%, 100%);
transition: 1s ease color;
}
input,select,textarea

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

@ -1,9 +1,13 @@
.sources
{
font-size: 0.75em;
}
.sources-entries
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.75em;
}
.sources-entry

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

@ -17,79 +17,130 @@ namespace _dali.widgets.sources
{
/**
* [dependency]
*/
private keys : Array<string>;
/**
*/
private data : Record<string, type_entry>;
private get_entries : (() => Promise<Array<type_entry>>);
/**
* [hook]
*/
private action_open : ((entry : type_entry) => void);
/**
* [hook]
*/
private action_toggle_visibility : ((entry : type_entry) => void);
/**
* [hook]
*/
private action_create : (() => void);
/**
* [state]
*/
private container : (null | Element);
/**
*/
public constructor(
entries : Array<type_entry>,
options : {
get_entries : (() => Promise<Array<type_entry>>),
{
"action_open": action_open = ((calendar_id) => {}),
"action_toggle_visibility": action_toggle_visibility = ((calendar_id) => {}),
"action_create": action_create = (() => {}),
}
:
{
action_open ?: ((entry : type_entry) => void);
action_toggle_visibility ?: ((entry : type_entry) => void);
} = {}
action_create ?: (() => void);
}
=
{
}
)
{
options = Object.assign(
{
"action_open": (calendar_id) => {},
"action_toggle_visibility": (calendar_id) => {},
},
options
);
this.keys = [];
this.data = {};
entries.forEach(
(entry) => {
const key : string = entry.id.toFixed(0);
this.keys.push(key);
this.data[key] = entry;
}
);
this.action_open = options.action_open;
this.action_toggle_visibility = options.action_toggle_visibility;
// dependencies
this.get_entries = get_entries;
// hooks
this.action_open = action_open;
this.action_toggle_visibility = action_toggle_visibility;
this.action_create = action_create;
// state
this.container = null;
}
/**
* [implementation]
*/
public async load(
target_element : Element
) : Promise<void>
private static id_encode(
id : _dali.type.calendar_id
)
: string
{
target_element.innerHTML = await _dali.helpers.template_coin(
return id.toFixed(0);
}
/**
*/
private static id_decode(
representation : string
)
: _dali.type.calendar_id
{
return parseInt(representation);
}
/**
*/
public async update(
)
: Promise<void>
{
const data : lib_plankton.map.type_map<_dali.type.calendar_id, type_entry> = lib_plankton.map.hashmap.implementation_map(
lib_plankton.map.hashmap.make(
calendar_id => class_widget_sources.id_encode(calendar_id),
{
"pairs": (
(await this.get_entries())
.map(
entry => ({
"key": entry.id,
"value": entry,
})
)
),
}
)
);
// structure
{
this.container.innerHTML = await _dali.helpers.template_coin(
"widget-sources",
"main",
{
"label_create": lib_plankton.translate.get("widget.sources.create"),
"entries": (
(
await _dali.helpers.promise_row<string>(
this.keys
lib_plankton.map.dump(data)
.map(
(key) => () => {
const entry : type_entry = this.data[key];
(pair) => () => {
return _dali.helpers.template_coin(
"widget-sources",
"entry",
{
"name": entry.name,
"name": pair.value.name,
"label_toggle": lib_plankton.string.coin(
"{{show}}/{{hide}}",
{
@ -103,8 +154,14 @@ namespace _dali.widgets.sources
"color_head": lib_plankton.color.output_hex(
lib_plankton.color.make_hsv(
{
"hue": entry.hue,
"hue": pair.value.hue,
/**
* @todo const and outsource
*/
"saturation": 0.375,
/**
* @todo const and outsource
*/
"value": 0.375,
}
),
@ -112,13 +169,19 @@ namespace _dali.widgets.sources
"color_body": lib_plankton.color.output_hex(
lib_plankton.color.make_hsv(
{
"hue": entry.hue,
"hue": pair.value.hue,
/**
* @todo const and outsource
*/
"saturation": 0.375,
/**
* @todo const and outsource
*/
"value": 0.25,
}
),
),
"rel": key,
"rel": class_widget_sources.id_encode(pair.key),
}
);
}
@ -129,7 +192,17 @@ namespace _dali.widgets.sources
),
}
);
target_element.querySelectorAll(".sources-entry-head").forEach(
}
// listeners
{
this.container.querySelector(".sources-create").addEventListener(
"click",
(event) => {
event.preventDefault();
this.action_create();
}
);
this.container.querySelectorAll(".sources-entry-head").forEach(
(element) => {
element.addEventListener(
"click",
@ -139,13 +212,14 @@ namespace _dali.widgets.sources
);
}
);
target_element.querySelectorAll(".sources-entry-toggle").forEach(
this.container.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];
const key_encoded : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
const calendar_id : _dali.type.calendar_id = class_widget_sources.id_decode(key_encoded);
const entry : type_entry = data.get(calendar_id);
element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-hidden");
element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-open", false);
this.action_toggle_visibility(entry);
@ -153,19 +227,33 @@ namespace _dali.widgets.sources
);
}
);
target_element.querySelectorAll(".sources-entry-edit").forEach(
this.container.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];
const key_encoded : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
const calendar_id : _dali.type.calendar_id = class_widget_sources.id_decode(key_encoded);
const entry : type_entry = data.get(calendar_id);
this.action_open(entry);
}
);
}
);
return Promise.resolve<void>(undefined);
}
}
/**
* [implementation]
*/
public async load(
target_element : Element
)
: Promise<void>
{
this.container = target_element;
await this.update();
}
}

5
source/widgets/sources/templates/main.html.tpl
View file

@ -1,3 +1,6 @@
<ul class="sources">
<div class="sources">
<ul class="sources-entries">
{{entries}}
</ul>
<a class="sources-create" href="">{{label_create}}</a>
</div>