MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 21 Wiki Activity

[Monitor Dashboard | Trunk]: Add note for https on edit-stakeholder. Change number indicator form logic 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60161 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-12-17 15:39:31 +00:00
parent 13503f37b4
commit 1f953e598c
8 changed files with 80 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/general/edit-stakeholder/edit-stakeholder.component.ts
View File

@ -10,6 +10,7 @@ import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeho
import {UtilitiesService} from "../../openaireLibrary/services/utilities.service";
import {Session, User} from "../../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
declare var UIkit;
@ -73,6 +74,15 @@ declare var UIkit;
</div>
</div>
</div>
<div class="uk-margin-remove-top uk-width-1-1">
<div class="uk-flex uk-flex-right" uk-grid>
<div class="uk-width-3-5@l uk-width-1-1 uk-text-small">
<span class="uk-text-bold">Note:</span> Prefer urls like "<span class="uk-text-bold">https://example.com/my-secure-image.png</span>" instead
of "http://example.com/my-image.png".
<span class="uk-text-bold">Browsers may not load non secure content.</span>
</div>
</div>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
<div dashboard-input class="uk-width-1-3@m" [formInput]="stakeholderFb.get('visibility')"
[placeholder]="'Select a status'"
@ -163,7 +173,7 @@ export class EditStakeholderComponent implements OnDestroy {
type: this.fb.control(this.stakeholder.type, Validators.required),
topics: this.fb.control(this.stakeholder.topics),
isUpload: this.fb.control(this.stakeholder.isUpload),
logoUrl: this.fb.control(this.stakeholder.logoUrl),
logoUrl: this.fb.control(this.stakeholder.logoUrl, StringUtils.urlValidator()),
});
this.initPhoto();
if (!isDefault) {

5
src/app/monitor/monitor.component.html
View File

@ -137,8 +137,9 @@
out of
{{countSelectedFilters()}}</div>
<div class="uk-text-bold ">{{indicator.name}}</div>
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span>
<h3 class="uk-margin-medium-top uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>

8
src/app/monitor/monitor.component.ts
View File

@ -435,6 +435,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
result = result[jsonPath];
}
});
if (typeof result === 'string' || typeof result === 'number') {
result = Number(result);
if (result === Number.NaN) {
result = 0;
}
} else {
result = 0;
}
this.numberResults.set(i + '-' + j, result);
});
}));

30
src/app/topic/indicators.component.html
View File

@ -76,8 +76,9 @@
<div class="uk-text-center uk-text-bold">
{{indicator.name ? indicator.name : 'No title available'}}
</div>
<h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold">
<span>{{numberResults.get(i + '-' + j) | number}}</span>
<h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
@ -270,12 +271,10 @@
</div>
</div>
<div formArrayName="jsonPath" class="uk-width-1-1">
<h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom"
[class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom">
<span>JSON Path</span>
</h6>
<div
*ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
<div class="uk-text-danger uk-text-small">
This JSON path is not valid or the result has not been calculated yet.
Please press calculate on box below to see the result.
@ -286,11 +285,13 @@
<div dashboard-input class="uk-width-1-1"
[extraLeft]="false"
[formInput]="jsonPath"
placeholder="Write a field name"
placeholder="Write a field"
[label]="'Level ' + +(j + 1)">
<div class="uk-flex uk-flex-middle">
<span *ngIf="getJsonPath(i).length !== 1"
class=" uk-margin-small-left uk-text-danger clickable"
[class.uk-hidden]="numberIndicatorFb.get('defaultId').value"
class="uk-margin-small-left uk-text-danger clickable"
[class.uk-disabled]="getJsonPath(i).disabled"
(click)="removeJsonPath(i, j)">
<icon name="close"></icon>
</span>
@ -310,15 +311,20 @@
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<div class="uk-flex uk-position-relative">
<span class="uk-padding number number-preview">
<span
*ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span>
<span class="uk-padding number number-preview uk-text-center">
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
{{numberIndicatorPaths.at(i).get('result').value | number}}
</span>
<span *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
--
</span>
</span>
<div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
class="uk-width-1-1 uk-height-1-1 refresh-indicator">
<div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-text-small"
(click)="validateJsonPath(i)">
[class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
(click)="validateJsonPath(i, true)">
<div>
<icon name="refresh"></icon>
</div>

46
src/app/topic/indicators.component.ts
View File

@ -30,6 +30,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
import {Router} from "@angular/router";
import {Session} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
declare var UIkit;
@ -172,6 +173,14 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
result = result[jsonPath];
}
});
if (typeof result === 'string' || typeof result === 'number') {
result = Number(result);
if (result === Number.NaN) {
result = 0;
}
} else {
result = 0;
}
this.numberResults.set(i + '-' + j, result);
});
}));
@ -431,7 +440,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public addJsonPath(index: number) {
if (index == 0 && this.getJsonPath(index).getRawValue()[index].indexOf(",") != -1) {
//if in the first path there are more than one paaths comma separated, split them and autogenerate the forms
//if in the first path there are more than one paths comma separated, split them and autogenerate the forms
let paths = this.getJsonPath(index).getRawValue()[index].split(",");
for (let i = 0; i < paths.length; i++) {
if (i != 0) {
@ -439,19 +448,18 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
}
}
this.getJsonPath(index).setValue(paths)
return;
}
} else {
this.getJsonPath(index).push(this.fb.control('', Validators.required));
}
}
public removeJsonPath(i: number, j: number) {
if(this.getJsonPath(i).enabled) {
this.getJsonPath(i).removeAt(j);
if (this.getJsonPath(i).length !== this.getCurrentJsonPath(i).length) {
this.getJsonPath(i).markAsDirty();
}
}
public validateJsonPath(index: number) {
public validateJsonPath(index: number, dirty: boolean = false) {
let indicatorPath: FormGroup = <FormGroup>this.numberIndicatorPaths.at(index);
if (this.indicator.defaultId === null) {
this.getJsonPath(index).disable();
@ -467,20 +475,33 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
setTimeout(() => {
if (this.indicator.defaultId === null) {
this.getJsonPath(index).enable();
if(dirty) {
this.getJsonPath(index).markAsDirty();
}
}
indicatorPath.get('result').setErrors(null);
console.debug(result);
if (typeof result === 'string' || typeof result === 'number') {
result = Number(result);
if (result !== Number.NaN) {
indicatorPath.get('result').setValue(result);
} else {
indicatorPath.get('result').setValue(null);
indicatorPath.get('result').setValue(0);
}
} else {
indicatorPath.get('result').setValue(null);
indicatorPath.get('result').setValue(0);
}
}, 500);
}, error => {
setTimeout(() => {
if (this.indicator.defaultId === null) {
this.getJsonPath(index).enable();
if (dirty) {
this.getJsonPath(index).markAsDirty();
}
}
indicatorPath.get('result').setErrors(null);
indicatorPath.get('result').setValue(0);
}, 500);
}));
}
@ -514,7 +535,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
jsonPath.push(this.fb.control('', Validators.required));
}
this.numberIndicatorPaths.push(this.fb.group({
url: this.fb.control(url, Validators.required),
url: this.fb.control(url, [Validators.required, StringUtils.urlValidator()]),
jsonPath: jsonPath,
result: this.fb.control(0, Validators.required),
// parameters: parameters,
@ -587,10 +608,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public addChartIndicatorPath(value: string = '', parameters: FormArray = new FormArray([]), disableUrl: boolean = false, type: string = null) {
this.chartIndicatorPaths.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,}')]),
url: this.fb.control(value, [Validators.required, StringUtils.urlValidator()]),
parameters: parameters,
type: this.fb.control(type)
}

6
src/app/topic/topic.component.html
View File

@ -57,7 +57,7 @@
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
</span>
<span class="uk-hidden-hover space" [class.uk-hidden]="!open"> Create new topic</span>
<span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="space" [class.uk-hidden]="!open"> Create new topic</span>
</span>
</li>
</ul>
@ -141,7 +141,7 @@
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
</span>
<span class="uk-hidden-hover space">Create new category</span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span>
</span>
</li>
</ul>
@ -194,7 +194,7 @@
<span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon>
</span>
<span class="uk-hidden-hover space">Create new subcategory</span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[selectedCategoryIndex].subCategories.length > 0" class="space">Create new subcategory</span>
</span>
</li>
</ul>

2
src/assets/dashboard-theme/input.css
View File

@ -10,7 +10,7 @@
}
.input-box {
background-color: #FAFAFA;
background-color: #FAFAFA !important;
border: 1px solid transparent;
padding: 16px;
border-radius: 4px;

4
src/assets/new.css
View File

@ -10,7 +10,6 @@
--primary-color-rgb: var(--theme-secondary-color-rgb);
--secondary-color-rgb: var(--theme-secondary-color-rgb);
}
/*Stakeholder Specific*/
.publicationsSearchForm {
background-image: none;
@ -145,9 +144,10 @@
max-width: 50px;
background: var(--secondary-color);
color: var(--contrast-color);
-webkit-clip-path: polygon(15% 5%, 100% 5%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
clip-path: polygon(20% 5%, 80% 5%, 100% 100%, 0% 100%);
display: none;
padding-left: 10px;
}
.dashboard .section {