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

[Trunk | Monitor Dashboard]: 

1. indicators.component.html: Added buttons for exporting and importing indicators of a specific subcategory.
2. indicators.component.ts: Added methods for exporting and importing indicators of a specific subcategory (import of indicators is not creating anything for now).


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@61419 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantina Galouni 2021-07-16 08:58:27 +00:00
parent 3f231e23a0
commit 18a31fdf7c
2 changed files with 146 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,14 @@
<div *ngIf="stakeholder && canEdit">
<div class="uk-text-right uk-width-expand">
<button class="uk-margin-bottom uk-margin-right uk-button uk-button-primary" (click)="export_indicators()">
<span class="uk-text-small">Export</span>
</button>
<div uk-form-custom class="js-upload">
<input id="exampleInputFile" type="file" class="uk-width-medium" (change)="fileChangeEvent($event)"/>
<button class="uk-button uk-button-primary uk-margin-bottom">Import (JSON file) </button>
</div>
</div>
<div *ngIf="numberSections">
<h6 class="uk-text-bold">Number Indicators</h6>
<ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index">

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

@ -43,6 +43,9 @@ declare var UIkit;
styleUrls: ['indicators.component.css']
})
export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
filesToUpload: Array<File>;
errorMessage = "";
enableUpload: boolean = true;
@Input()
public properties: EnvProperties = null;
@ -110,6 +113,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
private router: Router,
private cdr: ChangeDetectorRef,
private sanitizer: DomSanitizer) {
this.filesToUpload = [];
}
ngOnInit(): void {
@ -1187,4 +1191,135 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.showCheckForSchemaEnhancements = this.isAdministrator && url && !this.properties.useOldStatisticsSchema && this.indicatorUtils.checkForSchemaEnhancements(url);
}
public export_indicators() {
console.debug("Export indicators");
let indicators = [];
let index: number = 0;
this.displayNumbers.forEach(section => {
section.indicators.forEach(indicator => {
indicator.indicatorPaths.forEach(indicatorPath => {
console.debug("export number: ", this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)));
indicators[index] = {
"type": indicator.type, "name": indicator.name,
"description": indicator.description, "additionalDescription": indicator.additionalDescription,
"visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
"url": this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath))};
index++;
});
});
});
this.displayCharts.forEach(section => {
section.indicators.forEach(indicator => {
indicator.indicatorPaths.forEach(indicatorPath => {
console.debug("export chart: "+this.getUrlByStakeHolder(indicatorPath));
indicators[index] = {
"type": indicator.type, "name": indicator.name,
"description": indicator.description, "additionalDescription": indicator.additionalDescription,
"visibility": indicator.visibility, "width": indicator.width, "height": indicator.height,
"url": this.getUrlByStakeHolder(indicatorPath)};
index++;
});
});
});
let topic = this.stakeholder ? this.stakeholder.topics[this.topicIndex] : null;
let category = topic ? topic.categories[this.categoryIndex] : null;
let subCategory = category ? category.subCategories[this.subcategoryIndex] : null;
var jsonFileUrl = window.URL.createObjectURL(new Blob([JSON.stringify(indicators)], {type: 'application/json'}));
var a = window.document.createElement('a');
window.document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = jsonFileUrl;
a.download = this.stakeholder.alias + "_"+topic.alias + "_" + category.alias + "_" + subCategory.alias + ".json";
a.click();
window.URL.revokeObjectURL(jsonFileUrl);
a.remove(); // remove the element
}
fileChangeEvent(fileInput: any) {
this.filesToUpload = <Array<File>>fileInput.target.files;
this.upload();
}
upload() {
this.enableUpload = false;
// this.errorMessage = "";
console.debug(this.filesToUpload);
if (this.filesToUpload.length == 0) {
console.error("There is no selected file to upload.");
// this.errorMessage = "There is no selected file to upload.";
return;
} else {
if (this.filesToUpload[0].name.indexOf(".json") == -1 || (this.filesToUpload[0].type != "application/json")) {
// this.errorMessage = "No valid file type. The required type is JSON";
console.error("No valid file type. The required type is JSON");
return;
}
}
// this.loading.open();
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => {
// const rows = (result as any).split('\n'); // I have used space, you can use any thing.
let invalid_rows = 0;
// let chartSection = null;//this.createSection(-1, "chart");
// let numberSection = null;//this.createSection(-1, "number");
// await this.newSectionReady;
let json_result = JSON.parse(result);
for (let i = 0; i < (json_result.length); i++) {
if (json_result[i] && json_result[i] != null && json_result[i] != "") {
this.processIndicatorEntry(json_result[i]);
} else {
invalid_rows++;
}
}
this.endOfFetching();
}, (error) => {
this.enableUpload = true;
console.error("An error occurred");
});
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
return new Promise((resolve, reject) => {
const formData: any = new FormData();
const xhr = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.response);
} else {
reject(xhr.response);
}
}
};
xhr.open("POST", url, true);
xhr.send(formData);
});
}
endOfFetching() {
// this.showReport = true;
this.enableUpload = true;
}
processIndicatorEntry(indicator) {
if(indicator.type == "chart") {
console.debug("TODO Create chart for url: "+indicator.url);
//this.editChartIndicatorOpen(chartSection, null, false, indicator.url);
} else if(indicator.type == "number") {
console.debug("TODO Create number for url: "+indicator.url);
//this.editNumberIndicatorOpen(numberSection);
}
console.debug(indicator);
// this.saveIndicator(false);
}
}