[mod] page:events:rudimentäre Kontrollen

source/data/localization/deu.loc.json

@@ -42,6 +42,10 @@
 		"page.event_edit.title.regular": "Termin ändern",
 		"page.event_edit.title.read_only": "Termin-Details",
 		"page.event_edit.actions.change": "ändern",
-		"page.event_edit.actions.remove": "löschen"
+		"page.event_edit.actions.remove": "löschen",
+		"page.events.controls.year": "Jahr",
+		"page.events.controls.week": "Woche",
+		"page.events.controls.count": "Anzahl",
+		"page.events.controls.apply": "Laden"
 	}
 }

source/data/localization/eng.loc.json

@@ -42,6 +42,10 @@
 		"page.event_edit.title.regular": "Change event",
 		"page.event_edit.title.read_only": "Event details",
 		"page.event_edit.actions.change": "change",
-		"page.event_edit.actions.remove": "delete"
+		"page.event_edit.actions.remove": "delete",
+		"page.events.controls.year": "Year",
+		"page.events.controls.week": "Week",
+		"page.events.controls.count": "Count",
+		"page.events.controls.apply": "Load"
 	}
 }

source/pages/event_add/logic.ts

@@ -162,7 +162,7 @@ namespace _zeitbild.frontend_web.pages
 						{
 							"name": "description",
 							"input": new lib_plankton.zoo_input.class_input_soft<string>(
-								new lib_plankton.zoo_input.class_input_text(
+								new lib_plankton.zoo_input.class_input_textarea(
 								)
 							),
 							"label": lib_plankton.translate.get("event.description")

source/pages/event_edit/logic.ts

@@ -98,7 +98,7 @@ namespace _zeitbild.frontend_web.pages
 						{
 							"name": "description",
 							"input": new lib_plankton.zoo_input.class_input_soft<string>(
-								new lib_plankton.zoo_input.class_input_text(
+								new lib_plankton.zoo_input.class_input_textarea(
 								)
 							),
 							"label": lib_plankton.translate.get("event.description")

source/pages/events/logic.ts

@@ -6,24 +6,31 @@ namespace _zeitbild.frontend_web.pages
 	lib_plankton.zoo_page.register(
 		"events",
 		async (parameters, target_element) => {
-			target_element.innerHTML = "";
+			const load = async function (year, week, count) {
-			const content : string = await _zeitbild.frontend_web.view.calendar_view_table_html(
+				// controls
+				{
+					(target_element.querySelector("#events_control_year > input") as HTMLInputElement).value = year.toFixed(0);
+					(target_element.querySelector("#events_control_week > input") as HTMLInputElement).value = week.toFixed(0);
+					(target_element.querySelector("#events_control_count > input") as HTMLInputElement).value = count.toFixed(0);
+				}
+				// table
+				{
+					target_element.querySelector("#events_table").innerHTML = await _zeitbild.frontend_web.view.calendar_view_table_html(
 						{
 							"calendar_ids": null,
 							// TODO
 							"from": {
-						"year": 2024,
+								"year": year,
-						"week": 37
+								"week": week
 							},
 							// TODO
 							"to": {
-						"year": 2024,
+								"year": year,
-						"week": 43
+								"week": (week + count)
 							},
 							"timezone_shift": /*conf.timezone_shift*/0,
 						}
 					);
-			target_element.innerHTML = content;
 					target_element.querySelectorAll(".calendar-cell-regular").forEach(
 						(element) => {
 							element.addEventListener(
@@ -114,6 +121,40 @@ namespace _zeitbild.frontend_web.pages
 							);
 						}
 					);
+				}
+			};
+			
+			target_element.innerHTML = "";
+			target_element.innerHTML = await _zeitbild.frontend_web.helpers.template_coin(
+				"events",
+				{
+					"label_control_year": lib_plankton.translate.get("page.events.controls.year"),
+					"label_control_week": lib_plankton.translate.get("page.events.controls.week"),
+					"label_control_count": lib_plankton.translate.get("page.events.controls.count"),
+					"label_control_apply": lib_plankton.translate.get("page.events.controls.apply"),
+				}
+			);
+			// controls
+			{
+				target_element.querySelector("#events_control_apply").addEventListener(
+					"click",
+					(event) => {
+						event.preventDefault();
+						const year : int = parseInt((target_element.querySelector("#events_control_year > input") as HTMLInputElement).value);
+						const week : int = parseInt((target_element.querySelector("#events_control_week > input") as HTMLInputElement).value);
+						const count : int = parseInt((target_element.querySelector("#events_control_count > input") as HTMLInputElement).value);
+						load(year, week, count);
+					}
+				);
+			}
+			// table
+			{
+				const ywd_now : lib_plankton.pit.type_ywd = lib_plankton.pit.to_ywd(lib_plankton.pit.now());
+				let year : int = ywd_now.year;
+				let week : int = Math.max(0, (ywd_now.week - 1));
+				let count : int = 5;
+				load(year, week, count);
+			}
 			return Promise.resolve<void>(undefined);
 		},
 	);

source/style/main.css

@@ -159,3 +159,7 @@ a:hover {
 .plankton_input_group {
 	margin-left: 48px;
 }
+
+#events_controls {
+	margin-bottom: 8px;
+}

source/templates/events.html.tpl

@@ -0,0 +1,19 @@
+<div id="events">
+	<div id="events_controls">
+		<label id="events_control_year">
+			<span>{{label_control_year}}</span>
+			<input type="number"/>
+		</label>
+		<label id="events_control_week">
+			<span>{{label_control_week}}</span>
+			<input type="number"/>
+		</label>
+		<label id="events_control_count">
+			<span>{{label_control_count}}</span>
+			<input type="count"/>
+		</label>
+		<input type="submit" id="events_control_apply" value="{{label_control_apply}}"/>
+	</div>
+	<div id="events_table">
+	</div>
+</div>