[mod] overview:hide/show calendars

source/data/localization/deu.loc.json

@@ -14,6 +14,9 @@
 		"common.weekday.saturday": "Sa",
 		"common.weekday.sunday": "So",
 		"common.open": "öffnen",
+		"common.edit": "bearbeiten",
+		"common.show": "zeigen",
+		"common.hide": "ausblenden",
 		"access_level.none": "nichts",
 		"access_level.view": "nur lesen",
 		"access_level.edit": "lesen und bearbeiten",

source/data/localization/eng.loc.json

@@ -14,6 +14,9 @@
 		"common.weekday.saturday": "Sat",
 		"common.weekday.sunday": "Sun",
 		"common.open": "open",
+		"common.edit": "edit",
+		"common.show": "show",
+		"common.hide": "hide",
 		"access_level.none": "none",
 		"access_level.view": "read only",
 		"access_level.edit": "read and write",

source/pages/overview/logic.ts

@@ -31,6 +31,8 @@ namespace _zeitbild.frontend_web.pages.overview
 				}
 			);
 			target_element.querySelector("#overview").classList.toggle("overview-compact", compact);
+			let widget_weekview : _zeitbild.frontend_web.widgets.weekview.class_widget_weekview;
+			let widget_listview : _zeitbild.frontend_web.widgets.listview.class_widget_listview;
 			// hint
 			{
 				if (! await _zeitbild.frontend_web.backend.is_logged_in()) {
@@ -53,7 +55,7 @@ namespace _zeitbild.frontend_web.pages.overview
 				const widget_sources = new _zeitbild.frontend_web.widgets.sources.class_widget_sources(
 					data,
 					{
-						"action_select": (entry) => {
+						"action_open": (entry) => {
 							switch (entry.access_level) {
 								case _zeitbild.frontend_web.type.enum_access_level.none: {
 									throw (new Error("this event should not be visible"));
@@ -86,6 +88,9 @@ namespace _zeitbild.frontend_web.pages.overview
 								}			
 							}
 						},
+						"action_toggle_visibility": (entry) => {
+							widget_weekview.toggle_visibility(entry.id);
+						},
 					}
 				);
 				await widget_sources.load(target_element.querySelector("#overview-pane-left"));
@@ -136,7 +141,7 @@ namespace _zeitbild.frontend_web.pages.overview
 				};
 				// listview
 				{
-					const widget = (
+					widget_listview = (
 						new _zeitbild.frontend_web.widgets.listview.class_widget_listview(
 							get_entries,
 							{
@@ -157,11 +162,11 @@ namespace _zeitbild.frontend_web.pages.overview
 							}
 						)
 					);
-					await widget.load(target_element.querySelector("#overview-pane-right-listview"));
+					await widget_listview.load(target_element.querySelector("#overview-pane-right-listview"));
 				}
 				// weekview
 				{
-					const widget = (
+					widget_weekview = (
 						new _zeitbild.frontend_web.widgets.weekview.class_widget_weekview(
 							get_entries,
 							{
@@ -182,7 +187,7 @@ namespace _zeitbild.frontend_web.pages.overview
 							}
 						)
 					);
-					await widget.load(target_element.querySelector("#overview-pane-right-weekview"));
+					await widget_weekview.load(target_element.querySelector("#overview-pane-right-weekview"));
 				}
 			}
 			return Promise.resolve<void>(undefined);

source/style/widget-sources.css

@@ -10,12 +10,43 @@
 {
 	margin: 8px;
 	padding: 4px;
+}
+
+.sources-entry-head
+{
 	cursor: pointer;
 }
 
-/*
+.sources-entry-body
-.sources-entry:not(.sources-entry-active)
+{
+	display: block;
+	transition: max-height ease 0.5s;
+}
+
+.sources-entry-body > ul
+{
+	list-style-type: none;
+	padding: 0;
+	margin-left: 8px;
+	margin-bottom: 8px;
+}
+
+.sources-entry-body > ul > li
+{
+	/*
+	display: block;
+	 */
+	margin-top: 8px;
+	cursor: pointer;
+}
+
+.sources-entry:not(.sources-entry-open) > .sources-entry-head {}
+.sources-entry:not(.sources-entry-open) > .sources-entry-body {max-height: 0; overflow: hidden;}
+
+.sources-entry.sources-entry-open > .sources-entry-head {}
+.sources-entry.sources-entry-open > .sources-entry-body {max-height: 240px; overflow: auto;}
+
+.sources-entry-hidden
 {
 	filter: saturate(0);
 }
- */

source/style/widget-weekview.css

@@ -45,6 +45,11 @@
 	outline: 2px solid hsl(0, 0%, 100%);
 }
 
+.weekview-cell-hidden
+{
+	display: none;
+}
+
 .weekview-day
 {
 	font-size: 0.75em;

source/widgets/sources/logic.ts

@@ -27,7 +27,12 @@ namespace _zeitbild.frontend_web.widgets.sources
 		
 		/**
 		 */
-		private action_select : ((entry : type_entry) => void);
+		private action_open : ((entry : type_entry) => void);
+		
+		
+		/**
+		 */
+		private action_toggle_visibility : ((entry : type_entry) => void);
 		
 		
 		/**
@@ -35,13 +40,15 @@ namespace _zeitbild.frontend_web.widgets.sources
 		public constructor(
 			entries : Array<type_entry>,
 			options : {
-				action_select ?: ((entry : type_entry) => void);
+				action_open ?: ((entry : type_entry) => void);
+				action_toggle_visibility ?: ((entry : type_entry) => void);
 			} = {}
 		)
 		{
 			options = Object.assign(
 				{
-					"action_select": (calendar_id) => {},
+					"action_open": (calendar_id) => {},
+					"action_toggle_visibility": (calendar_id) => {},
 				},
 				options
 			);
@@ -55,7 +62,8 @@ namespace _zeitbild.frontend_web.widgets.sources
 					this.data[key] = entry;
 				}
 			);
-			this.action_select = options.action_select;
+			this.action_open = options.action_open;
+			this.action_toggle_visibility = options.action_toggle_visibility;
 		}
 		
 		
@@ -82,9 +90,17 @@ namespace _zeitbild.frontend_web.widgets.sources
 											"entry",
 											{
 												"name": entry.name,
+												"label_toggle": lib_plankton.string.coin(
+													"{{show}}/{{hide}}",
+													{
+														"show": lib_plankton.translate.get("common.show"),
+														"hide": lib_plankton.translate.get("common.hide"),
+													}
+												),
+												"label_edit": lib_plankton.translate.get("common.edit"),
 												// "access_level": entry.access_level, // TODO
 												// TODO centralize
-												"color": lib_plankton.color.output_hex(
+												"color_head": lib_plankton.color.output_hex(
 													lib_plankton.color.give_generic(
 														(entry.id - 1),
 														{
@@ -93,6 +109,15 @@ namespace _zeitbild.frontend_web.widgets.sources
 														}
 													),
 												),
+												"color_body": lib_plankton.color.output_hex(
+													lib_plankton.color.give_generic(
+														(entry.id - 1),
+														{
+															"saturation": 0.375,
+															"value": 0.25,
+														}
+													),
+												),
 												"rel": key,
 											}
 										);
@@ -104,14 +129,38 @@ namespace _zeitbild.frontend_web.widgets.sources
 					),
 				}
 			);
-			target_element.querySelectorAll(".sources-entry").forEach(
+			target_element.querySelectorAll(".sources-entry-head").forEach(
 				(element) => {
 					element.addEventListener(
 						"click",
 						(event) => {
-							const key : string = element.getAttribute("rel");
+							element.parentElement.classList.toggle("sources-entry-open");
+						}
+					);
+				}
+			);
+			target_element.querySelectorAll(".sources-entry-toggle").forEach(
+				(element) => {
+					element.addEventListener(
+						"click",
+						() => {
+							const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
 							const entry : type_entry = this.data[key];
-							this.action_select(entry);
+							element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-hidden");
+							element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-open", false);
+							this.action_toggle_visibility(entry);
+						}
+					);
+				}
+			);
+			target_element.querySelectorAll(".sources-entry-edit").forEach(
+				(element) => {
+					element.addEventListener(
+						"click",
+						(event) => {
+							const key : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
+							const entry : type_entry = this.data[key];
+							this.action_open(entry);
 						}
 					);
 				}

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

@@ -1 +1,11 @@
-			<li class="sources-entry" style="background-color: {{color}}" rel="{{rel}}">{{name}}</li>
+			<li class="sources-entry" style="background-color: {{color_head}}" rel="{{rel}}">
+				<div class="sources-entry-head">
+					<span>{{name}}</span>
+				</div>
+				<div class="sources-entry-body" style="background-color: {{color_body}}">
+					<ul>
+						<li class="sources-entry-action sources-entry-toggle">{{label_toggle}}</li>
+						<li class="sources-entry-action sources-entry-edit">{{label_edit}}</li>
+					</ul>
+				</div>
+			</li>

source/widgets/weekview/logic.ts

@@ -861,6 +861,28 @@ namespace _zeitbild.frontend_web.widgets.weekview
 		}
 		
 		
+		/**
+		 */
+		public toggle_visibility(
+			calendar_id: _zeitbild.frontend_web.type.calendar_id
+		) : void
+		{
+			this.container.querySelectorAll(".weekview-event_entry").forEach(
+				(element) => {
+					const rel : string = element.getAttribute("rel");
+					const parts : Array<string> = rel.split("/");
+					const calendar_id_ : _zeitbild.frontend_web.type.calendar_id = parseInt(parts[0]);
+					if (! (calendar_id === calendar_id_)) {
+						// do nothing
+					}
+					else {
+						element.classList.toggle("weekview-cell-hidden");
+					}
+				}
+			);
+		}
+		
+		
 		/**
 		 * [implementation]
 		 */