173 lines
4.1 KiB
TypeScript
173 lines
4.1 KiB
TypeScript
namespace _zeitbild.frontend_web.widgets.sources
|
|
{
|
|
|
|
/**
|
|
*/
|
|
type type_entry = {
|
|
id : _zeitbild.frontend_web.type.calendar_id;
|
|
name : string;
|
|
access_level : _zeitbild.frontend_web.type.enum_access_level;
|
|
};
|
|
|
|
|
|
/**
|
|
*/
|
|
export class class_widget_sources extends _zeitbild.class_widget
|
|
{
|
|
|
|
/**
|
|
*/
|
|
private keys : Array<string>;
|
|
|
|
|
|
/**
|
|
*/
|
|
private data : Record<string, type_entry>;
|
|
|
|
|
|
/**
|
|
*/
|
|
private action_open : ((entry : type_entry) => void);
|
|
|
|
|
|
/**
|
|
*/
|
|
private action_toggle_visibility : ((entry : type_entry) => void);
|
|
|
|
|
|
/**
|
|
*/
|
|
public constructor(
|
|
entries : Array<type_entry>,
|
|
options : {
|
|
action_open ?: ((entry : type_entry) => void);
|
|
action_toggle_visibility ?: ((entry : type_entry) => void);
|
|
} = {}
|
|
)
|
|
{
|
|
options = Object.assign(
|
|
{
|
|
"action_open": (calendar_id) => {},
|
|
"action_toggle_visibility": (calendar_id) => {},
|
|
},
|
|
options
|
|
);
|
|
super();
|
|
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;
|
|
}
|
|
|
|
|
|
/**
|
|
* [implementation]
|
|
*/
|
|
public async load(
|
|
target_element : Element
|
|
) : Promise<void>
|
|
{
|
|
target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin(
|
|
"widget-sources",
|
|
"main",
|
|
{
|
|
"entries": (
|
|
(
|
|
await _zeitbild.frontend_web.helpers.promise_row<string>(
|
|
this.keys
|
|
.map(
|
|
(key) => () => {
|
|
const entry : type_entry = this.data[key];
|
|
return _zeitbild.frontend_web.helpers.template_coin(
|
|
"widget-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_head": lib_plankton.color.output_hex(
|
|
lib_plankton.color.give_generic(
|
|
(entry.id - 1),
|
|
{
|
|
"saturation": 0.375,
|
|
"value": 0.375,
|
|
}
|
|
),
|
|
),
|
|
"color_body": lib_plankton.color.output_hex(
|
|
lib_plankton.color.give_generic(
|
|
(entry.id - 1),
|
|
{
|
|
"saturation": 0.375,
|
|
"value": 0.25,
|
|
}
|
|
),
|
|
),
|
|
"rel": key,
|
|
}
|
|
);
|
|
}
|
|
)
|
|
)
|
|
)
|
|
.join("")
|
|
),
|
|
}
|
|
);
|
|
target_element.querySelectorAll(".sources-entry-head").forEach(
|
|
(element) => {
|
|
element.addEventListener(
|
|
"click",
|
|
(event) => {
|
|
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];
|
|
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);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
return Promise.resolve<void>(undefined);
|
|
}
|
|
|
|
}
|
|
|
|
}
|