File
Implements
Metadata
| selector |
tcsf-settings-spotfire |
| styleUrls |
./settings-spotfire.component.css |
| templateUrl |
./settings-spotfire.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
handleSave
|
Type : EventEmitter<void>
|
|
|
|
Public
handleEditLiveAppClick
|
Default value : () => {...}
|
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { SpotfireConfig } from '../../models/tc-spotfire-config';
@Component({
selector: 'tcsf-settings-spotfire',
templateUrl: './settings-spotfire.component.html',
styleUrls: ['./settings-spotfire.component.css']
})
export class SettingsSpotfireComponent implements OnInit {
@Input() spotfireConfig: SpotfireConfig;
@Output() handleSave: EventEmitter<void> = new EventEmitter();
constructor() { }
ngOnInit() {
}
/**
* Save Button
*/
runSave(){
this.handleSave.emit();
}
public handleEditLiveAppClick = (): void => {
window.open(this.spotfireConfig.spotfireServer + '/spotfire/wp/analysis?file=' + this.spotfireConfig.analysisPath);
}
}
<div fxLayout="column" fxFill>
<tc-tibco-cloud-widget-header style="height: 40px;" [icon]="'tcs-capabilities'"
[headerText]="'Spotfire Settings Configuration'"></tc-tibco-cloud-widget-header>
<div style="padding: 20px; overflow: hidden" fxLayout="column" fxFlex>
<div style="overflow: auto;">
<div *ngIf="spotfireConfig" fxLayout="column" fxFlex>
<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px" style="height: 20px">
<p>Choose the TIBCO Cloud Spotfire configuration to be used within this application:</p>
<mat-icon class="tcs-spotfire-link" [svgIcon]="'tcs-application-edit'" (click)="handleEditLiveAppClick()"
matTooltip="Open in Spotfire" matTooltipShowDelay="1000" matTooltipPosition="below"></mat-icon>
</div>
<mat-form-field>
<input matInput placeholder="Spotfire Server" [(ngModel)]="spotfireConfig.spotfireServer">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Analysis Path" [(ngModel)]="spotfireConfig.analysisPath">
</mat-form-field>
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field>
<input matInput placeholder="Table Name" [(ngModel)]="spotfireConfig.tableName">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Active Page for Home" [(ngModel)]="spotfireConfig.activePageForHome">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Active Page for Details" [(ngModel)]="spotfireConfig.activePageForDetails">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Marking Name" [(ngModel)]="spotfireConfig.markingName">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Max Markings" [(ngModel)]="spotfireConfig.maxMarkings">
</mat-form-field>
</div>
<mat-form-field>
<input matInput placeholder="Allowed Pages" [(ngModel)]="spotfireConfig.allowedPages">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Column Names" [(ngModel)]="spotfireConfig.columnNames">
</mat-form-field>
</div>
</div>
<div fxFlex class="tcs-filler-panel"></div>
<div fxLayout="column" fxLayoutAlign="end end" style="min-height: 50px">
<button mat-raised-button color="primary" (click)="runSave()">Save</button>
</div>
</div>
</div>
.tcs-spotfire-settings-pane {
overflow: hidden;
}
.tcs-spotfire-link {
margin-bottom: 10px;
}
.tcs-spotfire-link:hover {
fill: #0081cb;
cursor: pointer;
}
Legend
Html element with directive