Included the enhancement #2

fcorti · Jan 29, 2018 · c378a14 · c378a14
1 parent 3a7f423
commit c378a14
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,19 +198,35 @@ export class PentahoDashboardService {
     htmlId:string,
     params: string[],
     masterHtmlElementIds: string[],
+    masterHtmlButtonId: string,
     setDefaults: boolean):string {
 
     var jsCode = ", function(Dashboard) { ";
 
     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 += "} ";