[MonitorDashboard | Trunk]: Keep chart Url for edit of indicator.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57883 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
f9f411970b
commit
d7a84cb3aa
|
|
@ -1,13 +1,5 @@
|
|||
import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {
|
||||
ActivatedRoute,
|
||||
NavigationEnd,
|
||||
NavigationError,
|
||||
NavigationStart,
|
||||
RouteConfigLoadEnd,
|
||||
Router
|
||||
} from '@angular/router';
|
||||
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
|
||||
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
|
||||
import {Session, User} from './openaireLibrary/login/utils/helper.class';
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@
|
|||
<div class="disable-sortable"
|
||||
[class.uk-width-1-3@m]="grid"
|
||||
[class.uk-width-1-1@m]="!grid">
|
||||
<div class="md-card clickable uk-sortable-nodrag" (click)="createIndicatorOpen()">
|
||||
<div class="md-card clickable uk-sortable-nodrag" (click)="editChartIndicatorOpen()">
|
||||
<div class="md-card-toolbar">
|
||||
<div class="md-card-toolbar-heading-text"
|
||||
[class.uk-flex-middle]="!grid"
|
||||
|
|
@ -252,14 +252,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<hr class="uk-margin-large-top uk-margin-large-bottom">
|
||||
<div *ngIf="urls" formArrayName="urls">
|
||||
<div dashboard-input class="uk-form-row" *ngFor="let chartUrl of urls.controls;"
|
||||
[formInput]="chartUrl"
|
||||
label="Chart Url"></div>
|
||||
</div>
|
||||
<div *ngIf="indicatorPaths" formArrayName="indicatorPaths">
|
||||
<div *ngFor="let indicatorPath of indicatorPaths.controls; let i=index"
|
||||
[formGroup]="indicatorPath">
|
||||
<div dashboard-input class="uk-form-row"
|
||||
[formInput]="indicatorPath.get('url')"
|
||||
label="Chart Url"></div>
|
||||
<div formArrayName="parameters">
|
||||
<div *ngIf="getParameter(i, 'title')" class="uk-form-row">
|
||||
<div dashboard-input
|
||||
|
|
@ -295,7 +293,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="indicator.indicatorPaths[i].safeResourceUrl"
|
||||
<div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
|
||||
class="uk-margin-medium-top uk-position-relative">
|
||||
<div *ngIf="hasDifference(i) && !indicatorPath.invalid"
|
||||
class="uk-width-1-1 uk-height-medium refresh-iframe">
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
*/
|
||||
public grid: boolean = true;
|
||||
private subscriptions: any[] = [];
|
||||
private urlSubscriptions: any[] = [];
|
||||
@ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
|
||||
@ViewChild('deleteIndicatorModal') deleteIndicatorModal: AlertModal;
|
||||
|
||||
|
|
@ -159,7 +160,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}
|
||||
|
||||
onPrivacyChange(value) {
|
||||
console.log(this.numbers);
|
||||
this.displayCharts = this.filterPrivacy(this.charts, value);
|
||||
this.displayNumbers = this.filterPrivacy(this.numbers, value);
|
||||
}
|
||||
|
|
@ -243,10 +243,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex];
|
||||
}
|
||||
|
||||
public get urls(): FormArray {
|
||||
return this.indicatorFb.get('urls') as FormArray;
|
||||
}
|
||||
|
||||
public get indicatorPaths(): FormArray {
|
||||
return this.indicatorFb.get('indicatorPaths') as FormArray;
|
||||
}
|
||||
|
|
@ -259,67 +255,45 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
return this.getParameters(index).controls.filter(control => control.value.key === key)[0] as FormControl;
|
||||
}
|
||||
|
||||
private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
||||
private getSecureUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
||||
return this.sanitizer.bypassSecurityTrustResourceUrl(
|
||||
this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath)));
|
||||
}
|
||||
|
||||
public addUrl() {
|
||||
this.urls.push(this.fb.control('', [Validators.required,
|
||||
private getUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
||||
return this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath));
|
||||
}
|
||||
|
||||
public addIndicatorPath(value: string = '', parameters: FormArray = new FormArray([])) {
|
||||
this.indicatorPaths.push(this.fb.group({
|
||||
url: this.fb.control(value, [Validators.required,
|
||||
Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
|
||||
'[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
|
||||
'[a-zA-Z0-9]+\.[^\s]{2,}')])
|
||||
'[a-zA-Z0-9]+\.[^\s]{2,}')]),
|
||||
parameters: parameters
|
||||
}
|
||||
));
|
||||
let index = this.indicatorPaths.length - 1;
|
||||
this.urlSubscriptions.push(this.indicatorPaths.at(index).valueChanges.subscribe(value => {
|
||||
if (this.indicatorPaths.at(index).valid) {
|
||||
let indicatorPath: IndicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(value.url), value.url);
|
||||
let parameters = this.getParametersAsFormArray(indicatorPath);
|
||||
(this.indicatorPaths.at(index) as FormGroup).setControl('parameters', parameters);
|
||||
if (!this.indicator.indicatorPaths[index]) {
|
||||
this.indicator.indicatorPaths[index] = indicatorPath;
|
||||
this.indicator.indicatorPaths[index].safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
|
||||
} else {
|
||||
indicatorPath.safeResourceUrl = this.indicator.indicatorPaths[index].safeResourceUrl;
|
||||
this.indicator.indicatorPaths[index] = indicatorPath;
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public createIndicatorOpen() {
|
||||
this.indicator = null;
|
||||
this.indicatorFb = this.fb.group({
|
||||
id: this.fb.control(null),
|
||||
name: this.fb.control('', Validators.required),
|
||||
description: this.fb.control(''),
|
||||
isPublic: this.fb.control(false),
|
||||
isActive: this.fb.control(false),
|
||||
urls: this.fb.array([]),
|
||||
width: this.fb.control('small', Validators.required),
|
||||
});
|
||||
this.addUrl();
|
||||
this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';
|
||||
this.editIndicatorModal.cancelButtonText = 'Cancel';
|
||||
this.editIndicatorModal.okButtonText = 'Next';
|
||||
this.editIndicatorModal.okButtonLeft = false;
|
||||
this.editIndicatorModal.alertMessage = false;
|
||||
this.editIndicatorModal.stayOpen = true;
|
||||
this.editIndicatorModal.open();
|
||||
}
|
||||
|
||||
public createChartIndicator() {
|
||||
this.indicator = new Indicator(
|
||||
this.indicatorFb.value.name,
|
||||
this.indicatorFb.value.description,
|
||||
'chart',
|
||||
this.indicatorFb.value.width,
|
||||
this.indicatorFb.value.isActive,
|
||||
this.indicatorFb.value.isPublic,
|
||||
[]
|
||||
);
|
||||
this.indicatorFb.value.urls.forEach(url => {
|
||||
this.indicator.indicatorPaths.push(
|
||||
this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(url), url));
|
||||
});
|
||||
this.editChartIndicatorOpen();
|
||||
}
|
||||
|
||||
public editChartIndicatorOpen(id = null) {
|
||||
this.index = (id)?this.charts.findIndex(value => value._id === id):-1;
|
||||
if (this.index !== -1) {
|
||||
this.indicator = HelperFunctions.copy(this.charts[this.index]);
|
||||
}
|
||||
let indicatorPaths = this.fb.array([]);
|
||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||
private getParametersAsFormArray(indicatorPath: IndicatorPath): FormArray {
|
||||
let parameters = this.fb.array([]);
|
||||
if (indicatorPath.parameters) {
|
||||
console.info(indicatorPath.parameters);
|
||||
Object.keys(indicatorPath.parameters).forEach(key => {
|
||||
if (this.indicatorUtils.ignoredParameters.indexOf(key) === -1) {
|
||||
if (this.indicatorUtils.parametersValidators.has(key)) {
|
||||
|
|
@ -336,36 +310,57 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}
|
||||
});
|
||||
}
|
||||
indicatorPaths.push(this.fb.group({
|
||||
parameters: parameters
|
||||
}));
|
||||
return parameters;
|
||||
}
|
||||
|
||||
public editChartIndicatorOpen(id = null) {
|
||||
this.urlSubscriptions.forEach(value => {
|
||||
if(value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
}
|
||||
});
|
||||
this.index = (id) ? this.charts.findIndex(value => value._id === id) : -1;
|
||||
if (this.index !== -1) {
|
||||
this.indicator = HelperFunctions.copy(this.charts[this.index]);
|
||||
this.indicatorFb = this.fb.group({
|
||||
id: this.fb.control(this.indicator._id),
|
||||
name: this.fb.control(this.indicator.name/*, Validators.required*/),
|
||||
description: this.fb.control(this.indicator.description),
|
||||
isPublic: this.fb.control(this.indicator.isPublic),
|
||||
isActive: this.fb.control(this.indicator.isActive),
|
||||
indicatorPaths: indicatorPaths,
|
||||
indicatorPaths: this.fb.array([]),
|
||||
width: this.fb.control(this.indicator.width),
|
||||
});
|
||||
if(this.index === -1) {
|
||||
this.editIndicatorModal.okButtonText = 'Save';
|
||||
this.editIndicatorModal.stayOpen = false;
|
||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||
this.addIndicatorPath(this.getUrlByStakeHolder(indicatorPath), this.getParametersAsFormArray(indicatorPath));
|
||||
indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath)
|
||||
});
|
||||
} else {
|
||||
this.indicator = new Indicator('', '', 'chart', 'small', false, false, []);
|
||||
this.indicatorFb = this.fb.group({
|
||||
id: this.fb.control(null),
|
||||
name: this.fb.control(''),
|
||||
description: this.fb.control(''),
|
||||
isPublic: this.fb.control(false),
|
||||
isActive: this.fb.control(false),
|
||||
indicatorPaths: this.fb.array([]),
|
||||
width: this.fb.control('small', Validators.required),
|
||||
});
|
||||
this.addIndicatorPath();
|
||||
}
|
||||
this.editIndicatorModal.cancelButtonText = 'Cancel';
|
||||
this.editIndicatorModal.okButtonText = 'Save Changes';
|
||||
this.editIndicatorModal.okButtonLeft = false;
|
||||
this.editIndicatorModal.alertMessage = false;
|
||||
this.editIndicatorModal.open();
|
||||
if (this.index === -1) {
|
||||
this.editIndicatorModal.alertTitle = 'Create a new chart Indicator';
|
||||
this.editIndicatorModal.okButtonText = 'Save';
|
||||
} else {
|
||||
this.editIndicatorModal.okButtonText = 'Save Changes';
|
||||
}
|
||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
|
||||
});
|
||||
this.editIndicatorModal.open();
|
||||
}
|
||||
|
||||
saveIndicator() {
|
||||
if(this.indicator) {
|
||||
if (this.indicator.type === 'chart') {
|
||||
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
|
||||
}
|
||||
|
|
@ -387,9 +382,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}, error => {
|
||||
this.indicatorFb = null;
|
||||
});
|
||||
} else {
|
||||
this.createChartIndicator();
|
||||
}
|
||||
}
|
||||
|
||||
reorderIndicators(type: string, indicatorIds: string[]) {
|
||||
|
|
@ -412,20 +404,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
}
|
||||
|
||||
hasDifference(index: number): boolean {
|
||||
let hasDifference = false;
|
||||
this.indicatorPaths.at(index).value.parameters.forEach((parameter) => {
|
||||
if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
|
||||
hasDifference = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
return hasDifference;
|
||||
return this.indicator.indicatorPaths[index].safeResourceUrl.toString() !==
|
||||
this.getSecureUrlByStakeHolder(this.indicator.indicatorPaths[index]).toString();
|
||||
}
|
||||
|
||||
refreshIndicator() {
|
||||
this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
|
||||
this.indicator.indicatorPaths.forEach(indicatorPath => {
|
||||
indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
|
||||
indicatorPath.safeResourceUrl = this.getSecureUrlByStakeHolder(indicatorPath);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue