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

[mod] widget:listview [mod] page:overview

Browse source
This commit is contained in:
Fenris Wolf 2024-10-02 18:26:33 +02:00
parent 9f292aee88
commit b6d27b9f15
6 changed files with 175 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
source/logic/helpers.ts
View file

@ -75,6 +75,80 @@ namespace _zeitbild.frontend_web.helpers
}
/**
* @todo timezone
*/
export function datetime_format(
datetime : (null | lib_plankton.pit.type_datetime)
) : string
{
if (datetime === null) {
return "-";
}
else {
return lib_plankton.string.coin(
"{{date}}{{macro_time}}",
{
"date": lib_plankton.string.coin(
"{{year}}-{{month}}-{{day}}",
{
"year": datetime.date.year.toFixed(0).padStart(4, "0"),
"month": datetime.date.month.toFixed(0).padStart(2, "0"),
"day": datetime.date.day.toFixed(0).padStart(2, "0"),
}
),
"macro_time": (
(datetime.time === null)
?
""
:
lib_plankton.string.coin(
",{{time}}",
{
"time": lib_plankton.string.coin(
"{{hour}}:{{minute}}",
{
"hour": datetime.time.hour.toFixed(0).padStart(2, "0"),
"minute": datetime.time.minute.toFixed(0).padStart(2, "0"),
"second": datetime.time.second.toFixed(0).padStart(2, "0"),
}
),
}
)
),
}
);
}
}
/**
*/
export function timespan_format(
from : lib_plankton.pit.type_datetime,
to : (null | lib_plankton.pit.type_datetime)
) : string
{
return lib_plankton.string.coin(
"{{from}}{{macro_to}}",
{
"from": datetime_format(from),
"macro_to": (
(to === null)
?
""
:
lib_plankton.string.coin(
" - {{to}}",
{
"to": datetime_format(to),
}
)
),
}
);
}
/**
*/
export function input_access_level(
@ -156,5 +230,5 @@ namespace _zeitbild.frontend_web.helpers
)
);
}
}

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

@ -7,7 +7,21 @@ namespace _zeitbild.frontend_web.pages.overview
"overview",
async (parameters, target_element) => {
// params
const mode : ("list" | "week") = (parameters["mode"] ?? "week");
const compact : boolean = (
(
parameters["compact"]
??
(
(window.innerWidth >= 800)
?
"no"
:
"yes"
)
)
===
"yes"
);
// exec
target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin(
@ -16,6 +30,7 @@ namespace _zeitbild.frontend_web.pages.overview
{
}
);
target_element.querySelector("#overview").classList.toggle("compact", compact);
// sources
{
const data : Array<
@ -64,7 +79,12 @@ namespace _zeitbild.frontend_web.pages.overview
},
}
);
await widget_sources.load(target_element.querySelector("#overview-pane-left"));
if (compact) {
// do nothing
}
else {
await widget_sources.load(target_element.querySelector("#overview-pane-left"));
}
}
// view
{
@ -110,9 +130,11 @@ namespace _zeitbild.frontend_web.pages.overview
}
}
};
switch (mode) {
case "list": {
const widget_listview = new _zeitbild.frontend_web.widgets.listview.class_widget_listview(
const widget = (
compact
?
(
new _zeitbild.frontend_web.widgets.listview.class_widget_listview(
get_entries,
{
"action_select_event": action_select_event,
@ -130,12 +152,11 @@ namespace _zeitbild.frontend_web.pages.overview
);
},
}
);
await widget_listview.load(target_element.querySelector("#overview-pane-right"));
break;
}
case "week": {
const widget_weekview = new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview(
)
)
:
(
new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview(
get_entries,
{
"action_select_event": action_select_event,
@ -153,11 +174,10 @@ namespace _zeitbild.frontend_web.pages.overview
);
},
}
);
await widget_weekview.load(target_element.querySelector("#overview-pane-right"));
break;
}
}
)
)
);
await widget.load(target_element.querySelector("#overview-pane-right"));
}
return Promise.resolve<void>(undefined);
},

14
source/style/pages.css
View file

@ -32,12 +32,22 @@
flex-wrap: wrap;
}
#overview-pane-left
#overview:not(.compact) #overview-pane-left
{
flex-basis: 12.5%;
}
#overview-pane-right
#overview:not(.compact) #overview-pane-right
{
flex-basis: 87.5%;
}
#overview.compact #overview-pane-left
{
flex-basis: 0%;
}
#overview.compact #overview-pane-right
{
flex-basis: 100%;
}

20
source/style/widgets.css
View file

@ -46,3 +46,23 @@
font-weight: bold;
font-size: 1.25em;
}
.listview-entry-label
{
font-weight: bold;
}
.listview-entry-label::before
{
content: "[";
}
.listview-entry-label::after
{
content: "] ";
}
.listview-entry-field:not(:last-child)
{
margin-bottom: 16px;
}

18
source/widgets/listview/logic.ts
View file

@ -134,6 +134,24 @@ namespace _zeitbild.frontend_web.widgets.listview
"entry",
{
"name": entry.event_object.name,
"calendar": entry.calendar_name,
"when": _zeitbild.frontend_web.helpers.timespan_format(entry.event_object.begin, entry.event_object.end),
"label_location": lib_plankton.translate.get("event.location"),
"location": (
(entry.event_object.location === null)
?
"?"
:
entry.event_object.location
),
"label_description": lib_plankton.translate.get("event.description"),
"description": (
(entry.event_object.description === null)
?
"?"
:
entry.event_object.description
),
"raw": JSON.stringify(entry),
"color": lib_plankton.color.output_hex(
lib_plankton.color.give_generic(

15
source/widgets/listview/templates/entry.html.tpl
View file

@ -1,4 +1,17 @@
<li class="listview-entry" style="background-color: {{color}}" rel="{{rel}}">
<span class="listview-entry-name">{{name}}</span>
<span class="listview-entry-name">{{name}}</span> (<span class="listview-entry-calendar">{{calendar}}</span>)
<div class="listview-entry-field listview-entry-when">
<span class="listview-entry-value">{{when}}</span>
</div>
<div class="listview-entry-field listview-entry-location">
<span class="listview-entry-label">{{label_location}}</span>
<span class="listview-entry-value">{{location}}</span>
</div>
<!--
<div class="listview-entry-field listview-entry-description">
<span class="listview-entry-label">{{label_description}}</span>
<span class="listview-entry-value">{{description}}</span>
</div>
<div class="listview-entry-raw">{{raw}}</div>
-->
</li>