[add] widget:listview
This commit is contained in:
Fenris Wolf
parent
bf4bba1132
commit
a8d05d1dbf
6 changed files with 245 additions and 0 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
204
source/widgets/listview/logic.ts
Normal file
204
source/widgets/listview/logic.ts
Normal file
|
|
@ -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<Array<type_entry>>
|
||||
);
|
||||
|
||||
|
||||
/**
|
||||
*/
|
||||
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<void>
|
||||
{
|
||||
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<type_entry> = 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<string>(
|
||||
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<string> = 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<void>(undefined);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
4
source/widgets/listview/templates/entry.html.tpl
Normal file
4
source/widgets/listview/templates/entry.html.tpl
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<li class="listview-entry" style="background-color: {{color}}" rel="{{rel}}">
|
||||
<span class="listview-entry-name">{{name}}</span>
|
||||
<div class="listview-entry-raw">{{raw}}</div>
|
||||
</li>
|
||||
5
source/widgets/listview/templates/main.html.tpl
Normal file
5
source/widgets/listview/templates/main.html.tpl
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="listview">
|
||||
<ul class="listview-entries">
|
||||
{{entries}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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 \
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue