<!DOCTYPE html>
<html lang="en">
<head>
	<title>01-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/11-01_ActivitiesView-Visualization-Table_features.pdf" 
            target="_blank">11-01 Activities view - Visualization - Table features</a>
      </h3>

		<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>
	</div>
	<div id="VSWidget"></div>
	<script>
		Miscellaneous.ready(() => {
			const { BarDragModes, HorizontalAlignment, RowDesigns, TextWrapMode } = 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,

				start: timeAreaStart,
				end: timeAreaEnd,

				defaultActivityAllowedBarDragModes: BarDragModes.None,
				defaultActivityBarSelectable: false,
				defaultActivityRowSelectable: false,
				multipleSelectionEnabled: false,
				defaultActivityExpandedRowDesign: RowDesigns.Bars,
				defaultActivityCollapsedRowDesign: RowDesigns.Bars | 
				                                   RowDesigns.BarsInHiddenDescendantRows | 
															  RowDesigns.BarsStacked,

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

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

			const activities = createActivities();
			const tableRowDefs = createTableRowDefinitions();
			const symbols = createSymbols();
			vsWidget.addSymbols(symbols);
			vsWidget.addTableRowDefinitions(tableRowDefs);
			vsWidget.addActivities(activities);
			vsWidget.render();

			function createActivities() {
				const activities = [
					{
						ID: "Act1",
						my_Color1: "lightblue",
						my_Color2: "lightsteelblue",
						Symbol: "Symbol1",
						RowSymbolIDs: ["Symbol1", "Symbol2"],
						my_Name: "Activity 1",
						BarText: "A1",
						Start: new Date(2028, 0, 5),
						End: new Date(2028, 0, 8),
						Text: "Line 1\nLine 2\nLine 3",
					},
					{
						ID: "Act2",
						my_Color1: "lightblue",
						my_Color2: "lightsteelblue",
						Symbol: "Symbol2",
						my_Name: "Activity 2",
						BarText: "A2",
						Start: new Date(2028, 0, 6),
						End: new Date(2028, 0, 13),
					},
					{
						ID: "Act3",
						my_Color3: "lightgreen",
						my_Name: "Activity 3",
						Symbol: "Symbol3",
						RowSymbolIDs: ["Symbol3"],
						BarText: "A3",
						Start: new Date(2028, 0, 15),
						End: new Date(2028, 0, 18),
					},
					{
						ID: "Act4",
						my_Color1: "orange",
						my_Color2: "lightcoral",
						Symbol: "Symbol4",
						RowSymbolIDs: ["Symbol4"],
						my_Name: "Activity 4",
						BarText: "A4",
						Start: new Date(2028, 0, 20),
						End: new Date(2028, 0, 23),
					},
					{
						ID: "Act5",
						my_Color1: "lightsalmon",
						Symbol: "Symbol5",
						RowSymbolIDs: ["Symbol5"],
						my_Name: "Activity 5",
						BarText: "A5",
						Start: new Date(2028, 0, 25),
						End: new Date(2028, 0, 28),
					},
					{
						ID: "Act6",
						Symbol: "Symbol6",
						RowSymbolIDs: ["Symbol6"],
					},
					{
						ID: "Act7",
						my_Color1: "lightblue",
						my_Color2: "lightsteelblue",
						Symbol: "Symbol1",
						my_Name: "Activity 7",
						BarText: "A6",
						Start: new Date(2028, 0, 5),
						End: new Date(2028, 0, 8),
					},
					{
						ID: "Act8",
						my_Color3: "red",
						Symbol: "Symbol2",
						my_Name: "Activity 8",
						BarText: "A7",
						Start: new Date(2028, 0, 6),
						End: new Date(2028, 0, 13),
						ParentID: "Act7",
					},
					{
						ID: "Act9",
						my_Name: "Activity 9",
						BarText: "A8",
						Start: new Date(2028, 0, 15),
						End: new Date(2028, 0, 18),
						ParentID: "Act8",
					},
					{
						ID: "Act10",
						my_Color3: "lightseagreen",
						my_Name: "Activity 10",
						BarText: "A9",
						Start: new Date(2028, 0, 20),
						End: new Date(2028, 0, 23),
						ParentID: "Act9",
					},
					{
						ID: "Act11",
						my_Name: "Activity 11",
						BarText: "A10",
						Start: new Date(2028, 0, 25),
						End: new Date(2028, 0, 28),
						ParentID: "Act10",
					},
				];

				return activities;
			}

			function createTableRowDefinitions() {
				const tableRowDefinitions = [
					{
						ID: "tableRowDef1",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
						],
					},
					{
						ID: "tableRowDef2",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightblue",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
								BackgroundColor: "lightyellow",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
								BackgroundColor: "lightgreen",
							},
						],
					},
					{
						ID: "tableRowDef3",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color1",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color2",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color3",
							},
						],
					},
					{
						ID: "tableRowDef4",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color1",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color2",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 0,
								BackgroundColor: "lightYellow",
								BackgroundColorSource: "my_Color3",
							},
							{
								TitleText: "my_Color1",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Color1}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_Color1",
							},
							{
								TitleText: "my_Color2",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Color2}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_Color2",
							},
							{
								TitleText: "my_Color3",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Color3}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 110,
								BackgroundColor: "white",
								TextColorSource: "my_Color3",
							},
						],
					},
					{
						ID: "tableRowDef5",
						BackgroundColor: "lightYellow",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								MinimumWidth: 100,
								MaximumWidth: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								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: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								SymbolIDSource: "Symbol",
								SymbolHeight: 22,
								SymbolWidth: 22,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
						],
					},
					{
						ID: "tableRowDef7",
						BackgroundColor: "lightYellow",
						SymbolColumnBackgroundColor: "lightYellow",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
							},
						],
					},
					{
						ID: "tableRowDef8",
						CellDefinitions: [
							{
								TitleText: "Activity Name",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{my_Name}}",
								Width: 170,
								BackgroundColor: "lightblue",
							},
							{
								TitleText: "Start",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{Start:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightyellow",
							},
							{
								TitleText: "End",
								HorizontalTitleAlignment: HorizontalAlignment.Center,
								TextFormat: "{{End:date:dateFmt}}",
								HorizontalAlignment: HorizontalAlignment.Center,
								Width: 100,
								BackgroundColor: "lightgreen",
							},
						],
					},
				];

				return tableRowDefinitions;
			}

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

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

				const tableRowDefID = radio.value;

				vsWidget.option({
					tableRowDefinitionIDForTitleInActivitiesView: tableRowDefID,
					defaultActivityTableRowDefinitionID: tableRowDefID,
				});

				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")
					activities[0].BarHeight = 60;
				else
					delete activities[0].BarHeight;

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

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