<!DOCTYPE html>
<html lang="en">
<head>
	<title>02-05 NETRONIC VSW SE</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link href="../VSWidget/nwaf-apptools.min.css" rel="stylesheet"/>
   <link href="../VSWidget/nwaf-table.min.css" rel="stylesheet"/>
   <link href="../VSWidget/nwaf-gantt.min.css" rel="stylesheet"/>
   <link href="../VSWidget/nwaf-rab.min.css" rel="stylesheet"/>
   <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
   <script src="../VSWidget/nwaf-apptools.min.js"></script>
   <script src="../VSWidget/nwaf-table.min.js"></script>
   <script src="../VSWidget/nwaf-gantt.min.js"></script>
   <script src="../VSWidget/nwaf-rab.min.js"></script>
   <script src="../LicenseKey.js"></script>
   <script src="Miscellaneous.js"></script>
</head>
<body>
	<div id="toolbar">
		<h3>
			<a href="docs/21-01_ResourcesView-Visualization-Table_features.pdf" 
			   target="_blank">21-01 Resources view - Visualization - Table features</a>
		</h3>
		<form id="myForm">
			<label style="margin-left: 20px">Table Row Definitions:</label>
			<label>
				<input id="rowDef1" type="radio" name="rowDef" value="tableRowDef1" checked/>
				1
			</label>
			<label>
				<input id="rowDef2" type="radio" name="rowDef" value="tableRowDef2"/>
				2
			</label>
			<label>
				<input id="rowDef3" type="radio" name="rowDef" value="tableRowDef3"/>
				3
			</label>
			<label>
				<input id="rowDef4" type="radio" name="rowDef" value="tableRowDef4"/>
				4
			</label>
			<label>
				<input id="rowDef5" type="radio" name="rowDef" value="tableRowDef5"/>
				5
			</label>
			<label>
				<input id="rowDef6" type="radio" name="rowDef" value="tableRowDef6"/>
				6
			</label>
			<label>
				<input id="rowDef7" type="radio" name="rowDef" value="tableRowDef7"/>
				7
			</label>
			<label>
				<input id="rowDef8" type="radio" name="rowDef" value="tableRowDef8"/>
				8
			</label>
		</form>
	</div>
	<div id="VSWidget"></div>
	<script>
		Miscellaneous.ready(() => {
			const { BarDragModes, HorizontalAlignment, RowDesigns, TextWrapMode, ViewType } = netronic.nVSW;

			document.getElementById("rowDef1").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef2").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef3").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef4").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef5").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef6").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef7").addEventListener("click", changeTableRowDefinition);
			document.getElementById("rowDef8").addEventListener("click", changeTableRowDefinition);

			const timeAreaStart = new Date(2028, 0, 1);
			const timeAreaEnd = new Date(2028, 3, 1);

			let options = {
				licenseKey: window.VSW_LICENSE_KEY,

				viewType: ViewType.Resources,

				start: timeAreaStart,
				end: timeAreaEnd,

				defaultAllocationAllowedBarDragModes: BarDragModes.None,
				defaultAllocationBarSelectable: false,
				defaultResourceRowSelectable: false,
				multipleSelectionEnabled: false,
				defaultResourceExpandedRowDesign: RowDesigns.Bars,
				defaultResourceCollapsedRowDesign: RowDesigns.Bars | 
				                                   RowDesigns.BarsInHiddenDescendantRows | 
															  RowDesigns.BarsStacked,

				defaultResourceTableRowDefinitionID: "tableRowDef1",
				intlDateTimeFormatOptionsMap: {
					en: {
						year: "numeric",
						month: "2-digit",
						day: "2-digit"
					},
				},
				symbolColumnBackgroundColor: "lightYellow",
				separationLinesInColoredIndentation: true,
				fixedTableColumnWidth: 0,
			};

			const vsWidget = Miscellaneous.instantiateVSWidget(document.querySelector("#VSWidget"), options);

			const symbols = createSymbols();
			const tableRowDefinitions = createTableRowDefinitions();
			const resources = createResources();
			const allocations = createAllocations();
			vsWidget.addSymbols(symbols);
			vsWidget.addTableRowDefinitions(tableRowDefinitions);
			vsWidget.addResources(resources);
			vsWidget.addAllocations(allocations);
			vsWidget.render();

			function createSymbols() {
				return [
					{ ID: "Symbol1", URL: "svg/warning.svg" },
					{ ID: "Symbol2", URL: "svg/checkmark.svg" },
					{ ID: "Symbol3", URL: "svg/document.svg" },
					{ ID: "Symbol4", URL: "svg/closed.svg" },
					{ ID: "Symbol5", URL: "svg/opened.svg" },
					{ ID: "Symbol6", URL: "svg/oneway.svg" },
				];
			}

			function createTableRowDefinitions() {
				return [
					{
						ID: "tableRowDef1",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
						],
					},
					{
						ID: "tableRowDef2",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightblue",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
								BackgroundColor: "lightyellow",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
								BackgroundColor: "lightgreen",
							},
						],
					},
					{
						ID: "tableRowDef3",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C1",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C2",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C3",
							},
						],
					},
					{
						ID: "tableRowDef4",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C1",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C2",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_C3",
							},
							{
								TitleText: "C1",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_C1}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_C1",
							},
							{
								TitleText: "C2",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_C2}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_C2",
							},
							{
								TitleText: "C3",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_C3}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_C3",
							},
						],
					},
					{
						ID: "tableRowDef5",
						BackgroundColor: "lightYellow",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
							{
								TitleText: "Text",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Text}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								WrapMode: TextWrapMode.Line,
							},
						],
					},
					{
						ID: "tableRowDef6",
						BackgroundColor: "lightYellow",
						SymbolColumnBackgroundColor: "blue",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								SymbolIDSource: "Symbol",
								SymbolHeight: 22,
								SymbolWidth: 22,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
						],
					},
					{
						ID: "tableRowDef7",
						BackgroundColor: "lightYellow",
						SymbolColumnBackgroundColor: "lightYellow",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
						],
					},
					{
						ID: "tableRowDef8",
						CellDefinitions: [
							{
								TitleText: "Resource Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								BackgroundColor: "lightblue",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightyellow",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:en}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightgreen",
							},
						],
					},
				];
			}

			function createResources() {
				const resources = [];
				for (let i = 1; i <= 11; i++) {
					const resource = { ID: `Res${i}` };
					if (i !== 6) {
						resource.my_Name = `Resource ${i}`;
						resource.Start = new Date(2028, 0, 5 + (i - 1) * 2);
						resource.End = new Date(2028, 0, 8 + (i - 1) * 2);
					}
					if (i > 7)
						resource.ParentID = `Res${i - 1}`;

					if (i === 1) {
						resource.my_C1 = "lightblue";
						resource.my_C2 = "lightsteelblue";
						resource.Symbol = "Symbol1";
						resource.RowSymbolIDs = ["Symbol1", "Symbol2", "Symbol3"];
						resource.Text = "Line 1\nLine 2\nLine 3";
					} else if (i === 2) {
						resource.my_C1 = "lightblue";
						resource.my_C2 = "lightsteelblue";
						resource.Symbol = "Symbol2";
					} else if (i === 3) {
						resource.my_C3 = "lightgreen";
						resource.Symbol = "Symbol3";
						resource.RowSymbolIDs = ["Symbol3"];
					} else if (i === 4) {
						resource.my_C1 = "orange";
						resource.my_C2 = "lightcoral";
						resource.Symbol = "Symbol4";
						resource.RowSymbolIDs = ["Symbol4"];
					} else if (i === 5) {
						resource.my_C1 = "lightsalmon";
						resource.Symbol = "Symbol5";
						resource.RowSymbolIDs = ["Symbol5"];
					} else if (i === 6) {
						resource.my_C1 = "lightblue";
						resource.Symbol = "Symbol6";
						resource.RowSymbolIDs = ["Symbol6"];
					} else if (i === 7) {
						resource.Symbol = "Symbol1";
					} else if (i === 8) {
						resource.my_C3 = "red";
						resource.Symbol = "Symbol2";
					} else if (i === 10) {
						resource.my_C3 = "lightseagreen";
					}
					resources.push(resource);
				}
				return resources;
			}

			function createAllocations() {
				const allocations = [];
				const startDays = [5, 6, 15, 20, 25, 0, 5, 6, 15, 20, 25];
				const workingDays = [3, 3, 3, 3, 3, 0, 3, 7, 3, 3, 3];

				for (let i = 0; i < startDays.length; i++) {
					const allocation = {
						ID: `Alloc${i + 1}`,
						ResourceID: `Res${i + 1}`,
						BarText: `A${i + 1}`,
						my_WorkingDays: workingDays[i],
						Entries: [
							{
								Start: new Date(2028, 0, startDays[i]),
								End: new Date(2028, 0, startDays[i] + workingDays[i]),
							},
						],
					};
					allocations.push(allocation);
				}

				return allocations;
			}

			function changeTableRowDefinition(event) {
				const radio = event.target;

				const tableRowDef = radio.value;
				vsWidget.option({
					tableRowDefinitionIDForTitleInResourcesView: tableRowDef,
					defaultResourceTableRowDefinitionID: tableRowDef,
				});

				if (radio.value === "tableRowDef8")
					vsWidget.option({
						tableTitleBackgroundColor: "lightCoral",
						tableTitleTextColor: "black",
						tableTitleColumnSeparatorColor: "black",
						tableTitleHighlightingColor: "white",
					});
				else
					vsWidget.option({
						tableTitleBackgroundColor: "#646464",
						tableTitleTextColor: "white",
						tableTitleColumnSeparatorColor: "white",
						tableTitleHighlightingColor: "#f7c365",
					});

				if (radio.value === "tableRowDef5")
					allocations[0].BarHeight = 60;
				else
					delete allocations[0].RowHeight;

				if (radio.value === "tableRowDef7")
					vsWidget.option("symbolColumnVisible", true);
				else
					vsWidget.option("symbolColumnVisible", false);

				vsWidget.updateAllocations([allocations[0]]);
				vsWidget.option("tableViewWidth", 800);
				vsWidget.render();
			}
		});
	</script>
</body>
</html>
