From 253c2f0441fb56993411e211abe2ae5678eb058c Mon Sep 17 00:00:00 2001
From: Francesco Corti <fcorti@gmail.com>
Date: Mon, 22 Jan 2018 23:25:19 +0100
Subject: [PATCH] Extension to manage multi paramters.

---
 src/app/app.component.html                           |  2 +-
 src/app/pentaho-dashboard/package.json               |  2 +-
 .../pentaho-dashboard/pentaho-dashboard.component.ts |  8 ++++----
 .../src/app/shared/pentaho-dashboard.service.ts      | 12 +++++++-----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0c10394..bb0005a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -39,7 +39,7 @@ <h1>
     id = "dashboard2"
     pentahoPath = "/public/sample2.wcdf"
     [params] = "['param2']"
-    masterHtmlElementId = "externalHtmlElementId">
+    [masterHtmlElementIds] = "['externalHtmlElementId']">
   </pentaho-dashboard>
 </div>
 
diff --git a/src/app/pentaho-dashboard/package.json b/src/app/pentaho-dashboard/package.json
index 95c91d9..365339b 100644
--- a/src/app/pentaho-dashboard/package.json
+++ b/src/app/pentaho-dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pentaho-dashboard",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Pentaho dashboards library for Angular.",
   "main": "index.js",
   "scripts": {
diff --git a/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts b/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
index fd987a4..a08e5df 100644
--- a/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
+++ b/src/app/pentaho-dashboard/src/app/pentaho-dashboard/pentaho-dashboard.component.ts
@@ -24,8 +24,8 @@ export class PentahoDashboardComponent implements AfterViewInit {
   @Input('masterDashboardParams')
   private masterDashboardParams : string[] = [];
 
-  @Input('masterHtmlElementId')
-  private masterHtmlElementId : string = null;
+  @Input('masterHtmlElementIds')
+  private masterHtmlElementIds : string[] = [];
 
   constructor(private pentahoDashboardService: PentahoDashboardService) {
   }
@@ -39,8 +39,8 @@ export class PentahoDashboardComponent implements AfterViewInit {
       if (this.masterDashboardId != null) {
         this.pentahoDashboardService.renderDashboardDependingOnDashboard(this.pentahoPath, this.id, this.params, this.masterDashboardId, this.masterDashboardParams);
       }
-      else if (this.masterHtmlElementId != null) {
-        this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementId);
+      else if (this.masterHtmlElementIds != []) {
+        this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementIds);
       }
       else {
         this.pentahoDashboardService.renderDashboard(this.pentahoPath, this.id);        
diff --git a/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts b/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
index 3656281..8756183 100644
--- a/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
+++ b/src/app/pentaho-dashboard/src/app/shared/pentaho-dashboard.service.ts
@@ -130,13 +130,13 @@ export class PentahoDashboardService {
     path: string,
     htmlId:string,
     params: string[],
-    masterHtmlElementId: string) {
+    masterHtmlElementIds: string[]) {
 
     var dashboardScriptElement = this.createDashboardScriptElement();
 
     var jsCode = "";
     jsCode += this.getJsCodeRequireStart(path);
-    jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementId);
+    jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementIds);
     jsCode += this.getJsCodeRequireEnd();
 
     dashboardScriptElement.innerHTML = jsCode;
@@ -183,13 +183,15 @@ export class PentahoDashboardService {
   private getJsCodeForDashboardDependingOnHtmlElement(
     htmlId:string,
     params: string[],
-    masterHtmlElementId:string):string {
+    masterHtmlElementIds: string[]):string {
 
     var jsCode = ", function(Dashboard) { ";
     jsCode += "var currentDashboard = new Dashboard(\"" + htmlId + "\"); ";
     jsCode += "currentDashboard.render(); ";
-    jsCode += "var htmlElement = document.getElementById(\"" + masterHtmlElementId + "\"); ";
-    jsCode += "htmlElement.addEventListener(\"change\", function() { currentDashboard.fireChange(\"" + params[0] + "\", this.value); }); ";
+    for (let i in masterHtmlElementIds) {
+      jsCode += "var htmlElement" + i + " = document.getElementById(\"" + masterHtmlElementIds[i] + "\"); ";
+      jsCode += "htmlElement" + i + ".addEventListener(\"change\", function() { currentDashboard.fireChange(\"" + params[i] + "\", this.value); }); ";
+    }
     jsCode += "} ";
 
     return jsCode;