[add] widget:listview

source/style/widgets.css

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

source/widgets/listview/logic.ts

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

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

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

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

@@ -0,0 +1,5 @@
+<div class="listview">
+	<ul class="listview-entries">
+{{entries}}
+	</ul>
+</div>

source/widgets/sources/logic.ts

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

tools/makefile

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