<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>UX Aspects Example</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.7.2/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script>window.uxdAssetsUrl = 'http://localhost:8084/WAMServer/DOCTEST1.6.2/assets';</script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('main.ts').catch(console.error.bind(console));
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://localhost:8084/WAMServer/DOCTEST1.6.2/assets/styles/ux-aspects.css" />
<link rel="stylesheet" href="http://localhost:8084/WAMServer/DOCTEST1.6.2/assets/styles/quantum-ux-aspects.css" />
<style type="text/css">
body {
padding: 15px;
background-color: #fff;
}
</style>
</head>
<body>
<parent-app></parent-app>
</body>
</html>
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/core': 'https://unpkg.com/@angular/core@6.0.9/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common@6.0.9/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler@6.0.9/bundles/compiler.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms@6.0.9/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router@6.0.9/bundles/router.umd.js',
'@angular/common/http': 'https://unpkg.com/@angular/common@6.0.9/bundles/common-http.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@6.0.9/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser@6.0.9/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@6.0.9/bundles/platform-browser-dynamic.umd.js',
'@angular/upgrade/static': 'https://unpkg.com/@angular/upgrade@6.0.9/bundles/upgrade-static.umd.js',
'@angular/animations': 'https://unpkg.com/@angular/animations@6.0.9/bundles/animations.umd.js',
'@angular/animations/browser': 'https://unpkg.com/@angular/animations@6.0.9/bundles/animations-browser.umd.js',
'rxjs': 'unpkg:rxjs@5.1.0',
// Angular CDK
'@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-a11y.umd.js',
'@angular/cdk/accordion': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-accordion.umd.js',
'@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-coercion.umd.js',
'@angular/cdk/collections': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-collections.umd.js',
'@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-keycodes.umd.js',
'@angular/cdk/layout': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-layout.umd.js',
'@angular/cdk/observers': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-observers.umd.js',
'@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-overlay.umd.js',
'@angular/cdk/platform': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-portal.umd.js',
'@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-scrolling.umd.js',
'@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-stepper.umd.js',
'@angular/cdk/table': 'https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-table.umd.js',
// Third party libraries
'tslib': 'https://unpkg.com/tslib@1.7.1',
'rxjs': 'https://unpkg.com/rxjs@6.2.2',
'rxjs-compat': 'https://unpkg.com/rxjs-compat@6.2.2',
'ngx-bootstrap': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'chance': 'https://unpkg.com/chance',
'chart.js': 'https://unpkg.com/chart.js/dist/Chart.min.js',
'ng2-charts': 'https://unpkg.com/ng2-charts/bundles/ng2-charts.umd.min.js',
'ng2-file-upload': 'https://unpkg.com/ng2-file-upload/bundles/ng2-file-upload.umd.js',
'angular-split': 'https://unpkg.com/angular-split/bundles/angular-split.umd.js',
'dragula': 'https://unpkg.com/dragula/dist/dragula.js',
'dragula/dist/dragula': 'https://unpkg.com/dragula/dist/dragula.js',
'ngx-mask': 'https://unpkg.com/ngx-mask/bundles/ngx-mask.umd.js',
'resize-observer-polyfill': 'https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js',
// ngx-bootstrap aliases
'ngx-bootstrap/accordion': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/alert': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/buttons': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/carousel': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/collapse': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/component-loader': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/datepicker': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/dropdown': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/modal': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/pagination': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/popover': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/positioning': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/progressbar': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/rating': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/sortable': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/tabs': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/timepicker': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/tooltip': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'ngx-bootstrap/typeahead': 'https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js',
'@ux-aspects/ux-aspects': window.uxdAssetsUrl + '/lib/index.js',
'@micro-focus/ux-aspects': uxdAssetsUrl + '/lib/ux-aspects-micro-focus.js'
},
packages: {
// Thirdparty barrels.
'rxjs': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/operators': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/internal-compatibility': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ColorServiceModule as GlobalColorServiceModule, colorSets, ColorService } from '@ux-aspects/ux-aspects';
import { CheckboxModule, ColumnSortingModule, SparkModule } from '@ux-aspects/ux-aspects';
import { A11yModule } from '@angular/cdk/a11y';
import {AppService} from './app.httpservice';
import {URLService,URLFactory} from './urlClass';
import { ProgressBarModule,SelectionModule } from '@ux-aspects/ux-aspects';
import {ParentComponent} from './parent.component';
import { PaginationModule } from 'ngx-bootstrap';
@NgModule({
imports: [
GlobalColorServiceModule,SelectionModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
CheckboxModule,
ColumnSortingModule,
SparkModule,
A11yModule,
PaginationModule.forRoot()
],
declarations: [
AppComponent,ParentComponent
],
providers : [
AppService,URLService,AppComponent
],
bootstrap: [ParentComponent]
})
export class AppModule {
constructor(colorService: ColorService) {
colorService.setColorSet(colorSets.microFocus);
}
}
platformBrowserDynamic().bootstrapModule(AppModule);
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { Component, OnDestroy } from '@angular/core';
import { ColumnSortingComponent, ColumnSortingOrder, ColumnSortingState } from '@ux-aspects/ux-aspects';
import 'chance';
import {FormBuilder,FormsModule, AbstractControl,FormControlName, ReactiveFormsModule,FormGroup,FormControl,Validators} from '@angular/forms';
import {Host} from './host.item.component';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
hostList : Observable<Host[]>;
loading: boolean;
mode: string = 'simple';
order: ColumnSortingOrder[] = [];
items:Host[] = [];
selection : Host[] = [];
selectAll: boolean = false;
myForm: FormGroup;
host: AbstractControl;
isCollapsed = true;
selectedHashmap = new Map<number,boolean>();
mymap = new Map();
checkitem : any;
myhost : Host[];
currentPage: number = 1;
totalItems: number = 250;
itemsPerPage: number = 5;
totalPages: number;
maxSize: number = 5;
previousButton = `<i class="hpe-icon hpe-previous" aria-label="previous page"></i>`;
nextButton = `<i class="hpe-icon hpe-next" aria-label="next page"></i>`;
constructor( private _announcer: LiveAnnouncer,fb : FormBuilder) {
this.loading = false;
this.myhost = [
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"},
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.46", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"},
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"},
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.182", id: 35, updateType: "NONE"}
];
setInterval(() => {
console.log("Refresh ==>");
this.items = this.myhost;
},3000);
}
deleteHost() {
console.log("Items Size ", this.items.length
console.log("Selection Size ", this.selection.length);
}
displaySelection(item : Host) {
console.log("Size " + this.selection.length);/*
this.selection.forEach(row => {
console.log("displaySelection Selected item ", row.hostname + " " + row.selected);
})*/
this.updateSelection(item);
}
getAppService() : AppService {
return this.appservice;
}
ngAfterViewInit()
{
}
getLoadingStatus() : boolean {
return this.loading;
}
private myobserver : any;
ngOnInit() {
}
ngOnDestroy() {
if(this.myobserver) {
this.myobserver.unsubscribe();
}
this._announcer.ngOnDestroy();
}
getHostList(): Observable<Host[]> {
this.loading= true;
//this.selection.clear();
//console.log("Before getHostList ", this.selection.selected.length);
return this.appservice.iGET("test").do(res => {
if (res.length == 0) {
this.loading = false;
console.log("No Host returned");
}
}).map(res => {
return res.map((item : Host)=> {
//console.log("Item ",item);
this.loading = false;
return new Host(item,this.selectedHashmap.get(item.id));
});
});
}
applyFilter(filterValue: string)
{
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
}
cancel() {
this.isCollapsed = !this.isCollapsed;
}
changeState(title: string, column: ColumnSortingComponent) {
this.order = column.changeState();
this.items = this.sort(this.items, this.order);
// announce the change to any screen reader
this._announcer.announce(this.getColumnAriaLabel(title, column));
}
sort(array: Host[], sorters: ColumnSortingOrder[]): Host[] {
return array.sort((itemOne: Host, itemTwo: Host) => {
// iterate through each sorter
for (const sorter of sorters) {
const value1 = itemOne[sorter.key];
const value2 = itemTwo[sorter.key];
if (value1 === value2) {
continue;
}
if (sorter.state === ColumnSortingState.Ascending) {
return value1 < value2 ? -1 : 1;
} else {
return value1 > value2 ? -1 : 1;
}
}
return itemOne.id < itemTwo.id ? -1 : 1;
});
}
selectAllChanged() {
if(this.items != null) {
this.items.forEach((row) => {
row.selected = this.selectAll;
this.mymap.set(row.id,row.selected);
this.updateSelection(row);
});
}
}
updateSelection(item : Host) {
this.selectedHashmap.set(item.id,item.selected);
//this.mymap.set("A","Apple");
//this.checkitem = "Srikanth";
//this.mymap.set(item.id,item.selected);
console.log("updateSelection ==> ",this.selectedHashmap.get(item.id));
}
getSparkLabel(value: number): string {
return `<span class="spark-label hidden-xxs">${value}%</span>`;
}
getColumnAriaLabel(title: string, column: ColumnSortingComponent): string {
switch (column.state) {
case ColumnSortingState.Ascending:
return column.order ?
`${title}: Ascending sort with priority ${column.order} applied,
activate to apply a Descending sort` :
`${title}: Ascending sort applied, activate to apply a Descending sort`;
case ColumnSortingState.Descending:
return column.order ?
`${title}: Descending sort with priority ${column.order} applied,
activate to apply no sorting` :
`${title}: Descending sort applied, activate to apply no sorting`;
default:
return `${title}: No sort applied, activate to apply an Ascending sort`;
}
}
}
<table class="table table-hover">
<thead>
<tr uxColumnSorting>
<th class="checkbox-column">
<!--<ux-checkbox (click)="select.selectAll()">-->
<ux-checkbox [(value)]="selectAll" (valueChange)="selectAllChanged()">
</ux-checkbox>
</th>
<th class="clickable column-sorting" tabindex="0" [attr.aria-label]="getColumnAriaLabel('ID', idColumn)" [attr.aria-sort]="idColumn.state" (click)="changeState('ID', idColumn)" (keydown.enter)="changeState('ID', idColumn)">
<div class="column-sorting-header">
<div>ID</div>
<ux-column-sorting #idColumn="ux-column-sorting" key="id">
</ux-column-sorting>
</div>
</th>
<th class="clickable column-sorting" tabindex="0" [attr.aria-label]="getColumnAriaLabel('Hostname', hostnameColumn)" [attr.aria-sort]="hostnameColumn.state" (click)="changeState('Hostname', hostnameColumn)" (keydown.enter)="changeState('Hostname', hostnameColumn)">
<div class="column-sorting-header">
<div>Hostname</div>
<ux-column-sorting #hostnameColumn="ux-column-sorting" key="hostname">
</ux-column-sorting>
</div>
</th>
<th class="clickable column-sorting" tabindex="0" [attr.aria-label]="getColumnAriaLabel('OSType', ostypeColumn)" [attr.aria-sort]="ostypeColumn.state" (click)="changeState('OSType', ostypeColumn)" (keydown.enter)="changeState('OSType', ostypeColumn)">
<div class="column-sorting-header">
<div>OS Type</div>
<ux-column-sorting #ostypeColumn="ux-column-sorting" key="ostype">
</ux-column-sorting>
</div>
</th>
<th class="clickable column-sorting" tabindex="0" [attr.aria-label]="getColumnAriaLabel('AMStatus', amstatusColumn)" [attr.aria-sort]="amstatusColumn.state" (click)="changeState('AMStatus', amstatusColumn)" (keydown.enter)="changeState('AMStatus', amstatusColumn)">
<div class="column-sorting-header">
<div>AM Status</div>
<ux-column-sorting #amstatusColumn="ux-column-sorting" key="amstatus">
</ux-column-sorting>
</div>
</th>
<th class="clickable column-sorting" tabindex="0" [attr.aria-label]="getColumnAriaLabel('WAMClientStatus', wamclientstatusColumn)" [attr.aria-sort]="wamclientstatusColumn.state" (click)="changeState('WAMClientStatus', wamclientstatusColumn)" (keydown.enter)="changeState('WAMClientStatus', wamclientstatusColumn)">
<div class="column-sorting-header">
<div>WAM Agent status</div>
<ux-column-sorting #wamclientstatusColumn="ux-column-sorting" key="wamclientstatus">
</ux-column-sorting>
</div>
</th>
</tr>
</thead>
<tbody #select="ux-selection" [(uxSelection)]="selection" [mode]="mode" [disabled]="false">
<tr *ngFor="let item of items" class="clickable" [uxSelectionItem]="item" [(selected)]="item.selected">
<td class="checkbox-column" style="padding: 13px 8px 12px 8px !important;">
<ux-checkbox class="m-b-nil" [clickable]="false" [value]="item.selected" (valueChange)="displaySelection(item)"></ux-checkbox>
</td>
<td>{{item.id}}</td>
<td>{{item.hostname}}</td>
<td>{{item.ostype}} {{item.osarch}}</td>
<td>{{item.amstatus}} {{item.amversion}} </td>
<td>{{item.wamclientstatus}} {{item.wamclientversion}} </td>
</tr>
</tbody>
</table>
<div class="pgn-container">
<pagination class="pagination-flat" [(ngModel)]="currentPage"
[totalItems]="items.length" [itemsPerPage]="itemsPerPage"
[maxSize]="maxSize" (numPages)="totalPages = $event"
[previousText]="previousButton" [nextText]="nextButton">
</pagination>
<label class="pgn-label">Page {{ currentPage }} of {{ totalPages }}</label>
</div>
.checkbox-column {
width: 48px;
text-align: center;
}
export class Host
{
id: number;
hostname : string;
ostype:string;
osarch:string;
aminstalled:boolean;
amstatus:String;
amversion:string;
wamclientversion:string;
wamclientstatus:string;
selected?: boolean;
constructor(data : any,selected : boolean) {
this.id = data.id? data.id : 0;
this.hostname = data.hostname ? data.hostname : null;
this.ostype = data.ostype ? data.ostype : null;
this.osarch = data.osarch ? data.osarch : null;
this.aminstalled = data.aminstalled ? data.aminstalled : false;
this.amstatus = data.amstatus ? "Running" : "Down";
this.amversion = data.amversion ? data.amversion : null;
this.wamclientversion = data.wamclientversion ? data.wamclientversion : null;
this.wamclientstatus = data.wamclientstatus ? "Running" : "Down";
this.selected = selected;
}
}
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { IntervalObservable } from "rxjs/observable/IntervalObservable";
import 'rxjs/add/operator/map';
//import {Host} from './host-item/host-item.component';
@Injectable()
export class AppService {
loading: boolean;
myhost : Host[];
constructor() {
this.loading = false;
this.myhost = [
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"},
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"},
{hostname: "1.2.3.4", id: 31, updateType: "NONE"},
{hostname: "1.1.1.1", id: 33, updateType: "NONE"},
{hostname: "1.2.34.45", id: 34, updateType: "NONE"},
{hostname: "10.204.58.181", id: 35, updateType: "NONE"}
];
}
// New HttpClient
iGET(url: string): Observable<any> {
console.log("HTTP iGETHttpClient ",url );
return Observable.interval(3000).flatMapTo(this.myhost));
}
}
export class URLService {
getaddHostURL():string {return "";}
getHostsURL() : string {return "";}
getJobsURL() : string {return "";}
getDBCheckURL() : string {return "";}
getSignUpURL() : string {return "";}
getSignInURL() : string {return "";}
getProcessUserURL(): string {return "";}
getChangePasswordURL() : string {return "";}
getRefreshTokenURL() : string {return "";}
getUsersURL() : string {return ""}
getResetPasswordURL() : string {return "";}
}
export class ProductionURL extends URLService {
public static readonly addHost_url : string ="./../webresources/resources/Host";
public static readonly getHosts_url: string = "./../webresources/resources/Hosts";
public static readonly getJobs_url: string = "./../webresources/resources/Jobs";
public static readonly getDBCheck_url: string = "./../webresources/resources/DBExists";
public static readonly getSignUpURL: string = "./../webresources/resources/Users/SignUp";
public static readonly getSignInURL: string = "./../webresources/resources/Users/SignIn";
public static readonly getProcessUserURL : string = "./../webresources/resources/Users/ProcessUser";
public static readonly getChangePasswordURL : string ="./../webresources/resources/Users/ChangePassword";
public static readonly getUsersURL : string = "./../webresources/resources/Users"
public static readonly getRefreshTokenURL : string = "./../webresources/resources/RefreshToken";
public static readonly getResetPasswordURL : string ="./../webresources/resources/Users/ResetPassword";
constructor(){
super();
}
getaddHostURL():string {return ProductionURL.addHost_url;}
getHostsURL() : string {return ProductionURL.getHosts_url;}
getJobsURL() : string {return ProductionURL.getJobs_url;}
getDBCheckURL() : string { return ProductionURL.getDBCheck_url;}
getSignUpURL() : string {return ProductionURL.getSignUpURL;}
getSignInURL() : string {return ProductionURL.getSignInURL;}
getProcessUserURL() :string {return ProductionURL.getProcessUserURL;}
getChangePasswordURL() : string {return ProductionURL.getChangePasswordURL;}
getUsersURL() : string {return ProductionURL.getUsersURL;}
getRefreshTokenURL() : string {return ProductionURL.getRefreshTokenURL};
getResetPasswordURL(): string {return ProductionURL.getResetPasswordURL;}
}
export class TestingURL extends URLService {
public static readonly getHosts_url: string = "http://localhost:8084/WAMServer/webresources/resources/Hosts";
public static readonly getJobs_url: string = "http://localhost:8084/WAMServer/webresources/resources/Jobs";
public static readonly addHost_url :string ="http://localhost:8084/WAMServer/webresources/resources/Host";
public static readonly getDBCheck_url: string = "http://localhost:8084/WAMServer/webresources/resources/DBExists";
public static readonly getSignUpURL: string = "http://localhost:8084/WAMServer/webresources/resources/Users/SignUp";
public static readonly getSignInURL: string = "http://localhost:8084/WAMServer/webresources/resources/Users/SignIn";
public static readonly getProcessUserURL: string = "http://localhost:8084/WAMServer/webresources/resources/Users/ProcessUser";
public static readonly getRefreshTokenURL: string = "http://localhost:8084/WAMServer/webresources/resources/RefreshToken";
public static readonly getChangePasswordURL : string ="http://localhost:8084/WAMServer/webresources/resources/Users/ChangePassword";
public static readonly getUsersURL: string = "http://localhost:8084/WAMServer/webresources/resources/Users";
public static readonly getResetPasswordURL : string ="http://localhost:8084/WAMServer/webresources/resources/Users/ResetPassword";
constructor(){
super();
}
getaddHostURL():string {return TestingURL.addHost_url;}
getHostsURL() : string {return TestingURL.getHosts_url;}
getJobsURL() : string {return TestingURL.getJobs_url;}
getDBCheckURL() : string { return TestingURL.getDBCheck_url;}
getSignUpURL() : string {return TestingURL.getSignUpURL;}
getSignInURL() : string {return TestingURL.getSignInURL;}
getProcessUserURL() : string {return TestingURL.getProcessUserURL;}
getRefreshTokenURL() : string {return TestingURL.getRefreshTokenURL};
getChangePasswordURL() : string {return TestingURL.getChangePasswordURL;}
getUsersURL() : string {return TestingURL.getUsersURL;}
getResetPasswordURL() : string {return TestingURL.getResetPasswordURL;}
}
var URLFactory = () => {
if (process.env.ENV === 'production') {
console.log("ProductionURL");
return new ProductionURL();
}
else {
console.log("TestingURL");
return new TestingURL();
}
}
export {URLFactory}
<div class="wrapper-content container-fluid">
<div class="ebox">
<div class="ux-toolbar">
<div class="ux-toolbar-left">
<button type="button" uxTooltip="Add Host" placement="top" class="btn btn-link btn-icon button-secondary" (click)="modal1.show()" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
<span class="hpe-icon hpe-new"></span>
</button>
<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Agent Upgrade" placement="top">
<span class="hpe-icon hpe-upgrade"></span>
</button>
<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Un-Install Agent" placement="top">
<span class="hpe-icon hpe-detach"></span>
</button>
<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Export/Import Host List" placement="top">
<span class="hpe-icon hpe-share"></span>
</button>
<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Remote Deployment" placement="top">
<span class="hpe-icon hpe-install"></span>
</button>
<!--<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Delete Host" (click)="deleteHostFlag = !deleteHostFlag" placement="top">-->
<button type="button" class="btn btn-link btn-icon button-secondary" uxTooltip="Delete Host" (click)="app.deleteHost()" placement="top">
<span class="hpe-icon hpe-trash"></span>
</button>
</div>
<div class="ux-toolbar-right">
</div>
</div>
<app></app>
</div>
</div>
import { Component, OnDestroy } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import {AppComponent} from './app.component';
@Component({
selector: 'parent-app',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor(private app : AppComponent ){}
}