source/data/localization/deu.loc.json

@@ -55,6 +55,7 @@
 		"widget.event_edit.actions.add": "anlegen",
 		"widget.event_edit.actions.change": "ändern",
 		"widget.event_edit.actions.remove": "löschen",
+		"widget.sources.create": "anlegen",
 		"page.login.title": "Anmelden",
 		"page.login.internal.name": "Name",
 		"page.login.internal.password": "Kennwort",

source/data/localization/eng.loc.json

@@ -55,6 +55,7 @@
 		"widget.event_edit.actions.add": "add",
 		"widget.event_edit.actions.change": "change",
 		"widget.event_edit.actions.remove": "delete",
+		"widget.sources.create": "create",
 		"page.login.title": "Login",
 		"page.login.internal.name": "name",
 		"page.login.internal.password": "password",

source/pages/overview/logic.ts

@@ -57,13 +57,15 @@ namespace _dali.pages.overview
 				await widget_mode_switcher.load(target_element.querySelector("#overview-mode"));
 			}
 			
+			let widget_sources : _dali.widgets.sources.class_widget_sources;
 			let widget_weekview : _dali.widgets.weekview.class_widget_weekview;
 			let widget_listview : _dali.widgets.listview.class_widget_listview;
 			/**
 			 * @todo update sources
 			 */
-			const update = () => {
-				widget_weekview.update_entries();
+			const update = async () => {
+				await widget_weekview.update_entries();
+				await widget_sources.update();
 			};
 			// hint
 			{
@@ -78,17 +80,8 @@ namespace _dali.pages.overview
 			}
 			// sources
 			{
-				const data : Array<
-					{
-						id : _dali.type.calendar_id;
-						name : string;
-						hue : float;
-						access_level : _dali.type.enum_access_level;
-					}
-				> = await _dali.backend.calendar_list(
-				);
-				const widget_sources = new _dali.widgets.sources.class_widget_sources(
-					data,
+				widget_sources = new _dali.widgets.sources.class_widget_sources(
+					_dali.backend.calendar_list,
 					{
 						"action_open": (entry) => {
 							let read_only : boolean;
@@ -161,6 +154,9 @@ namespace _dali.pages.overview
 							widget_weekview.toggle_visibility(entry.id);
 							widget_listview.toggle_visibility(entry.id);
 						},
+						"action_create": () => {
+							console.warn("not implemented: calendar_add widget");
+						},
 					}
 				);
 				await widget_sources.load(target_element.querySelector("#overview-pane-left"));

source/style/main.css

@@ -89,12 +89,14 @@ nav a:hover
 a
 {
 	text-decoration: none;
-	color: hsl(var(--hue), 50%, 50%);
+	color: hsl(var(--hue), 0%, 87.5%);
 }
 
 a:hover
 {
-	color: hsl(var(--hue), 50%, 75%);
+	color: hsl(var(--hue), 0%, 100%);
+	border-bottom: 2px solid hsl(0, 0%, 100%);
+	transition: 1s ease color;
 }
 
 input,select,textarea

source/style/widget-sources.css

@@ -1,9 +1,13 @@
 .sources
+{
+	font-size: 0.75em;
+}
+
+.sources-entries
 {
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
-	font-size: 0.75em;
 }
 
 .sources-entry

source/widgets/sources/logic.ts

@@ -17,79 +17,130 @@ namespace _dali.widgets.sources
 	{
 		
 		/**
+		 * [dependency]
 		 */
-		private keys : Array<string>;
-		
-		
-		/**
-		 */
-		private data : Record<string, type_entry>;
+		private get_entries : (() => Promise<Array<type_entry>>);
 		
 		
 		/**
+		 * [hook]
 		 */
 		private action_open : ((entry : type_entry) => void);
 		
 		
 		/**
+		 * [hook]
 		 */
 		private action_toggle_visibility : ((entry : type_entry) => void);
 		
 		
+		/**
+		 * [hook]
+		 */
+		private action_create : (() => void);
+		
+		
+		/**
+		 * [state]
+		 */
+		private container : (null | Element);
+		
+		
 		/**
 		 */
 		public constructor(
-			entries : Array<type_entry>,
-			options : {
+			get_entries : (() => Promise<Array<type_entry>>),
+			{
+				"action_open": action_open = ((calendar_id) => {}),
+				"action_toggle_visibility": action_toggle_visibility = ((calendar_id) => {}),
+				"action_create": action_create = (() => {}),
+			}
+			:
+			{
 				action_open ?: ((entry : type_entry) => void);
 				action_toggle_visibility ?: ((entry : type_entry) => void);
-			} = {}
+				action_create ?: (() => void);
+			}
+			=
+			{
+			}
 		)
 		{
-			options = Object.assign(
-				{
-					"action_open": (calendar_id) => {},
-					"action_toggle_visibility": (calendar_id) => {},
-				},
-				options
-			);
-			this.keys = [];
-			this.data = {};
-			entries.forEach(
-				(entry) => {
-					const key : string = entry.id.toFixed(0);
-					this.keys.push(key);
-					this.data[key] = entry;
-				}
-			);
-			this.action_open = options.action_open;
-			this.action_toggle_visibility = options.action_toggle_visibility;
+			// dependencies
+			this.get_entries = get_entries;
+			
+			// hooks
+			this.action_open = action_open;
+			this.action_toggle_visibility = action_toggle_visibility;
+			this.action_create = action_create;
+			
+			// state
+			this.container = null;
 		}
 		
 		
 		/**
-		 * [implementation]
 		 */
-		public async load(
-			target_element : Element
-		) : Promise<void>
+		private static id_encode(
+			id : _dali.type.calendar_id
+		)
+		: string
 		{
-			target_element.innerHTML = await _dali.helpers.template_coin(
+			return id.toFixed(0);
+		}
+		
+		
+		/**
+		 */
+		private static id_decode(
+			representation : string
+		)
+		: _dali.type.calendar_id
+		{
+			return parseInt(representation);
+		}
+		
+		
+		/**
+		 */
+		public async update(
+		)
+		: Promise<void>
+		{
+			const data : lib_plankton.map.type_map<_dali.type.calendar_id, type_entry> = lib_plankton.map.hashmap.implementation_map(
+				lib_plankton.map.hashmap.make(
+					calendar_id => class_widget_sources.id_encode(calendar_id),
+					{
+						"pairs": (
+							(await this.get_entries())
+							.map(
+								entry => ({
+									"key": entry.id,
+									"value": entry,
+								})
+							)
+						),
+					}
+				)
+			);
+			// structure
+			{
+				this.container.innerHTML = await _dali.helpers.template_coin(
 					"widget-sources",
 					"main",
 					{
+						"label_create": lib_plankton.translate.get("widget.sources.create"),
 						"entries": (
 							(
 								await _dali.helpers.promise_row<string>(
-								this.keys
+									lib_plankton.map.dump(data)
 									.map(
-									(key) => () => {
-										const entry : type_entry = this.data[key];
+										(pair) => () => {
 											return _dali.helpers.template_coin(
 												"widget-sources",
 												"entry",
 												{
-												"name": entry.name,
+													"name": pair.value.name,
 													"label_toggle": lib_plankton.string.coin(
 														"{{show}}/{{hide}}",
 														{
@@ -103,8 +154,14 @@ namespace _dali.widgets.sources
 													"color_head": lib_plankton.color.output_hex(
 														lib_plankton.color.make_hsv(
 															{
-															"hue": entry.hue,
+																"hue": pair.value.hue,
+																/**
+																 * @todo const and outsource
+																 */
 																"saturation": 0.375,
+																/**
+																 * @todo const and outsource
+																 */
 																"value": 0.375,
 															}
 														),
@@ -112,13 +169,19 @@ namespace _dali.widgets.sources
 													"color_body": lib_plankton.color.output_hex(
 														lib_plankton.color.make_hsv(
 															{
-															"hue": entry.hue,
+																"hue": pair.value.hue,
+																/**
+																 * @todo const and outsource
+																 */
 																"saturation": 0.375,
+																/**
+																 * @todo const and outsource
+																 */
 																"value": 0.25,
 															}
 														),
 													),
-												"rel": key,
+													"rel": class_widget_sources.id_encode(pair.key),
 												}
 											);
 										}
@@ -129,7 +192,17 @@ namespace _dali.widgets.sources
 						),
 					}
 				);
-			target_element.querySelectorAll(".sources-entry-head").forEach(
+			}
+			// listeners
+			{
+				this.container.querySelector(".sources-create").addEventListener(
+					"click",
+					(event) => {
+						event.preventDefault();
+						this.action_create();
+					}
+				);
+				this.container.querySelectorAll(".sources-entry-head").forEach(
 					(element) => {
 						element.addEventListener(
 							"click",
@@ -139,13 +212,14 @@ namespace _dali.widgets.sources
 						);
 					}
 				);
-			target_element.querySelectorAll(".sources-entry-toggle").forEach(
+				this.container.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];
+								const key_encoded : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
+								const calendar_id : _dali.type.calendar_id = class_widget_sources.id_decode(key_encoded);
+								const entry : type_entry = data.get(calendar_id);
 								element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-hidden");
 								element.parentElement.parentElement.parentElement.classList.toggle("sources-entry-open", false);
 								this.action_toggle_visibility(entry);
@@ -153,19 +227,33 @@ namespace _dali.widgets.sources
 						);
 					}
 				);
-			target_element.querySelectorAll(".sources-entry-edit").forEach(
+				this.container.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];
+								const key_encoded : string = element.parentElement.parentElement.parentElement.getAttribute("rel");
+								const calendar_id : _dali.type.calendar_id = class_widget_sources.id_decode(key_encoded);
+								const entry : type_entry = data.get(calendar_id);
 								this.action_open(entry);
 							}
 						);
 					}
 				);
-			return Promise.resolve<void>(undefined);
+			}
+		}
+		
+		
+		/**
+		 * [implementation]
+		 */
+		public async load(
+			target_element : Element
+		)
+		: Promise<void>
+		{
+			this.container = target_element;
+			await this.update();
 		}
 			
 	}

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

@@ -1,3 +1,6 @@
-<ul class="sources">
+<div class="sources">
+	<ul class="sources-entries">
 		{{entries}}
 	</ul>
+	<a class="sources-create" href="">{{label_create}}</a>
+</div>