frontend-dali/source/widgets/sources/logic.ts

namespace _dali.widgets.sources
{
	
	/**
	 */
	type type_entry = {
		id : _dali.type.calendar_id;
		name : string;
		hue : float;
		access_level : _dali.type.enum_access_level;
	};
	
	
	/**
	 */
	export class class_widget_sources implements lib_plankton.zoo_widget.interface_widget
	{
		
		/**
		 * [dependency]
		 */
		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(
			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);
			}
			=
			{
			}
		)
		{
			// 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;
		}
		
		
		/**
		 */
		private static id_encode(
			id : _dali.type.calendar_id
		)
		: string
		{
			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>(
									lib_plankton.map.dump(data)
									.map(
										(pair) => () => {
											return _dali.helpers.template_coin(
												"widget-sources",
												"entry",
												{
													"name": pair.value.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_head": lib_plankton.color.output_hex(
														lib_plankton.color.make_hsv(
															{
																"hue": pair.value.hue,
																/**
																 * @todo const and outsource
																 */
																"saturation": 0.375,
																/**
																 * @todo const and outsource
																 */
																"value": 0.375,
															}
														),
													),
													"color_body": lib_plankton.color.output_hex(
														lib_plankton.color.make_hsv(
															{
																"hue": pair.value.hue,
																/**
																 * @todo const and outsource
																 */
																"saturation": 0.375,
																/**
																 * @todo const and outsource
																 */
																"value": 0.25,
															}
														),
													),
													"rel": class_widget_sources.id_encode(pair.key),
												}
											);
										}
									)
								)
							)
							.join("")
						),
					}
				);
			}
			// 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",
							(event) => {
								element.parentElement.classList.toggle("sources-entry-open");
							}
						);
					}
				);
				this.container.querySelectorAll(".sources-entry-toggle").forEach(
					(element) => {
						element.addEventListener(
							"click",
							() => {
								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);
							}
						);
					}
				);
				this.container.querySelectorAll(".sources-entry-edit").forEach(
					(element) => {
						element.addEventListener(
							"click",
							(event) => {
								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);
							}
						);
					}
				);
			}
		}
		
		
		/**
		 * [implementation]
		 */
		public async load(
			target_element : Element
		)
		: Promise<void>
		{
			this.container = target_element;
			await this.update();
		}
			
	}
	
}