From c378a140b073d0c672ea4e5ae6678a83111d8431 Mon Sep 17 00:00:00 2001
From: Francesco Corti <fcorti@gmail.com>
Date: Mon, 29 Jan 2018 23:03:52 +0100
Subject: [PATCH] Included the enhancement
 https://github.com/fcorti/pentaho-dashboard-project/issues/2

---
 src/app/app.component.html                    | 23 +++++++++++++++
 src/app/pentaho-dashboard/package.json        |  2 +-
 .../pentaho-dashboard.component.ts            |  5 +++-
 .../app/shared/pentaho-dashboard.service.ts   | 29 +++++++++++++++----
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5a36b8b..3280fba 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -44,6 +44,28 @@ <h1>
   </pentaho-dashboard>
 </div>
 
+<h1>
+  Test n.2 bis - An external HTML element controlling a dashboard, only when the button is pressed.
+</h1>
+Update the filter below and press the button to update the dashboard.
+<div>
+  <select id="externalHtmlElement2Id">
+    <option value="Motorcycles">Motorcycles</option>
+    <option value="Classic Cars">Classic Cars</option>
+    <option value="Planes">Planes</option>
+    <option value="Ships">Ships</option>
+    <option value="Trains">Trains</option>
+  </select>
+  <button id="externalHtmlButtonId" type="button">Click Me!</button>
+  <pentaho-dashboard
+    id = "dashboard9"
+    pentahoPath = "/public/sample2.wcdf"
+    [params] = "['param2']"
+    [masterHtmlElementIds] = "['externalHtmlElement2Id']"
+    masterHtmlButtonId = "externalHtmlButtonId">
+  </pentaho-dashboard>
+</div>
+
 <h1>
   Test n.3 - A dashboard controlling the second dashboard.
 </h1>
@@ -61,3 +83,4 @@ <h1>
     [masterDashboardParams] = "['param1']">
   </pentaho-dashboard>
 </div>
+-->
diff --git a/src/app/pentaho-dashboard/package.json b/src/app/pentaho-dashboard/package.json
index ab1fb3e..6b91e3d 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.4",
+  "version": "1.0.5",
   "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 9ea0537..c3e89d0 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
@@ -27,6 +27,9 @@ export class PentahoDashboardComponent implements AfterViewInit {
   @Input('masterHtmlElementIds')
   private masterHtmlElementIds : string[] = [];
 
+  @Input('masterHtmlButtonId')
+  private masterHtmlButtonId : string = null;
+
   @Input('setDefaults')
   private setDefaults : boolean = true;
 
@@ -43,7 +46,7 @@ export class PentahoDashboardComponent implements AfterViewInit {
         this.pentahoDashboardService.renderDashboardDependingOnDashboard(this.pentahoPath, this.id, this.params, this.masterDashboardId, this.masterDashboardParams);
       }
       else if (this.masterHtmlElementIds != []) {
-        this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementIds, this.setDefaults);
+        this.pentahoDashboardService.renderDashboardDependingOnHtmlElement(this.pentahoPath, this.id, this.params, this.masterHtmlElementIds, this.masterHtmlButtonId, this.setDefaults);
       }
       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 f6b8b28..4bb1ade 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
@@ -133,13 +133,14 @@ export class PentahoDashboardService {
     htmlId:string,
     params: string[],
     masterHtmlElementIds: string[],
+    masterHtmlButtonId: string,
     setDefaults: boolean) {
 
     var dashboardScriptElement = this.createDashboardScriptElement();
 
     var jsCode = "";
     jsCode += this.getJsCodeRequireStart([path]);
-    jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementIds, setDefaults);
+    jsCode += this.getJsCodeForDashboardDependingOnHtmlElement(htmlId, params, masterHtmlElementIds, masterHtmlButtonId, setDefaults);
     jsCode += this.getJsCodeRequireEnd();
 
     dashboardScriptElement.innerHTML = jsCode;
@@ -197,6 +198,7 @@ export class PentahoDashboardService {
     htmlId:string,
     params: string[],
     masterHtmlElementIds: string[],
+    masterHtmlButtonId: string,
     setDefaults: boolean):string {
 
     var jsCode = ", function(Dashboard) { ";
@@ -204,12 +206,27 @@ export class PentahoDashboardService {
     jsCode += "var currentDashboard = new Dashboard(\"" + htmlId + "\"); ";
     jsCode += "currentDashboard.render(); ";
 
-    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); }); ";
-      if (setDefaults) {
-        jsCode += "currentDashboard.setParameter(\"" + params[i] + "\", htmlElement"+ i +".value); ";
+    if (masterHtmlButtonId == null) {
+
+      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); }); ";
+        if (setDefaults) {
+          jsCode += "currentDashboard.setParameter(\"" + params[i] + "\", htmlElement"+ i +".value); ";
+        }
+      }
+
+    }
+    else {
+
+      jsCode += "var buttonObj = document.getElementById(\"" + masterHtmlButtonId + "\"); ";
+
+      jsCode += "buttonObj.addEventListener(\"click\", function() { ";
+      for (let i in masterHtmlElementIds) {
+        jsCode += "currentDashboard.fireChange(\"" + params[i] + "\", document.getElementById(\"" + masterHtmlElementIds[i] + "\").value); ";
       }
+      jsCode += " }); ";
+
     }
 
     jsCode += "} ";