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

source/logic/helpers.ts

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

source/pages/overview/logic.ts

@@ -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) {
+				const widget = (
-					case "list": {
+					compact
-						const widget_listview = new _zeitbild.frontend_web.widgets.listview.class_widget_listview(
+					?
+					(
+						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": {
+						new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview(
-						const 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);
 		},

source/style/pages.css

@@ -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%;
+}

source/style/widgets.css

@@ -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;
+}

source/widgets/listview/logic.ts

@@ -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(

source/widgets/listview/templates/entry.html.tpl

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