Revision 61433
Added by Konstantina Galouni over 2 years ago
indicators.component.ts | ||
---|---|---|
45 | 45 |
export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { |
46 | 46 |
filesToUpload: Array<File>; |
47 | 47 |
errorMessage = ""; |
48 |
enableUpload: boolean = true; |
|
48 |
import_loading: boolean = false; |
|
49 |
export_loading: boolean = false; |
|
49 | 50 |
|
50 | 51 |
@Input() |
51 | 52 |
public properties: EnvProperties = null; |
... | ... | |
910 | 911 |
this.filterCharts(); |
911 | 912 |
this.filterNumbers(); |
912 | 913 |
this.editing = false; |
914 |
this.import_loading = false; |
|
913 | 915 |
UIkit.notification("Success! Indicated were imported", { |
914 | 916 |
status: 'success', |
915 | 917 |
timeout: 6000, |
... | ... | |
923 | 925 |
pos: 'bottom-right' |
924 | 926 |
}); |
925 | 927 |
this.editing = false; |
928 |
this.import_loading = false; |
|
926 | 929 |
})); |
927 | 930 |
|
928 | 931 |
|
... | ... | |
1233 | 1236 |
for(let chart of charts) { |
1234 | 1237 |
let exists = false; |
1235 | 1238 |
let indicatorPath; |
1239 |
|
|
1240 |
// validate indicators' schema from file |
|
1241 |
let invalid_file_message = ""; |
|
1242 |
if (!chart.type) { |
|
1243 |
invalid_file_message = "No indicator type is specified. Type should be chart or number."; |
|
1244 |
} else if(chart.type != "chart" || chart.type != "number") { |
|
1245 |
invalid_file_message = "Invalid indicator type. Type should be chart or number."; |
|
1246 |
} else if(chart.type == "number" && !chart.jsonPath) { |
|
1247 |
invalid_file_message = "No jsonPath is specified for number indicator." |
|
1248 |
} else if(!chart.url) { |
|
1249 |
invalid_file_message = "No indicator url is specified."; |
|
1250 |
} |
|
1251 |
|
|
1252 |
if(invalid_file_message) { |
|
1253 |
UIkit.notification("Error on indicators' schema. Type should be chart or number, url is needed and for number indicators, jsonPath is needed as well.", { |
|
1254 |
status: 'danger', |
|
1255 |
timeout: 6000, |
|
1256 |
pos: 'bottom-right' |
|
1257 |
}); |
|
1258 |
this.editing = false; |
|
1259 |
this.import_loading = false; |
|
1260 |
break; |
|
1261 |
} |
|
1262 |
|
|
1236 | 1263 |
if (chart.type == "chart") { |
1237 | 1264 |
indicatorPath = this.indicatorUtils.generateIndicatorByChartUrl(this.statisticsService.getChartSource(chart.url), chart.url, chart.type, this.stakeholder); |
1238 | 1265 |
for (let section of this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].charts) { |
... | ... | |
1283 | 1310 |
timeout: 6000, |
1284 | 1311 |
pos: 'bottom-right' |
1285 | 1312 |
}); |
1313 |
this.editing = false; |
|
1314 |
this.import_loading = false; |
|
1286 | 1315 |
}else if(indicators.length > 0){ |
1287 | 1316 |
console.log(indicators); |
1288 | 1317 |
this.saveIndicators(indicators) |
... | ... | |
1293 | 1322 |
timeout: 6000, |
1294 | 1323 |
pos: 'bottom-right' |
1295 | 1324 |
}); |
1325 |
this.editing = false; |
|
1326 |
this.import_loading = false; |
|
1296 | 1327 |
} |
1297 | 1328 |
} |
1298 | 1329 |
|
1299 | 1330 |
public export_indicators() { |
1300 | 1331 |
console.debug("Export indicators"); |
1301 | 1332 |
|
1333 |
this.editing = true; |
|
1334 |
this.export_loading = true; |
|
1335 |
|
|
1302 | 1336 |
let indicators = []; |
1303 | 1337 |
let index: number = 0; |
1304 | 1338 |
|
... | ... | |
1307 | 1341 |
indicator.indicatorPaths.forEach(indicatorPath => { |
1308 | 1342 |
console.debug("export number: ", this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath))); |
1309 | 1343 |
indicators[index] = { |
1310 |
"type": indicator.type, "name": indicator.name, "jsonPath":indicatorPath.jsonPath, |
|
1344 |
"type": indicator.type, "name": indicator.name, "jsonPath": indicatorPath.jsonPath,
|
|
1311 | 1345 |
"description": indicator.description, "additionalDescription": indicator.additionalDescription, |
1312 | 1346 |
"visibility": indicator.visibility, "width": indicator.width, "height": indicator.height, |
1313 |
"url": this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath))}; |
|
1347 |
"url": this.statisticsService.getNumberUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(this.stakeholder, indicatorPath)) |
|
1348 |
}; |
|
1314 | 1349 |
index++; |
1315 | 1350 |
}); |
1316 | 1351 |
}); |
... | ... | |
1319 | 1354 |
this.displayCharts.forEach(section => { |
1320 | 1355 |
section.indicators.forEach(indicator => { |
1321 | 1356 |
indicator.indicatorPaths.forEach(indicatorPath => { |
1322 |
console.debug("export chart: "+this.getUrlByStakeHolder(indicatorPath));
|
|
1357 |
console.debug("export chart: " + this.getUrlByStakeHolder(indicatorPath));
|
|
1323 | 1358 |
indicators[index] = { |
1324 | 1359 |
"type": indicator.type, "name": indicator.name, |
1325 | 1360 |
"description": indicator.description, "additionalDescription": indicator.additionalDescription, |
1326 | 1361 |
"visibility": indicator.visibility, "width": indicator.width, "height": indicator.height, |
1327 |
"url": this.getUrlByStakeHolder(indicatorPath)}; |
|
1362 |
"url": this.getUrlByStakeHolder(indicatorPath) |
|
1363 |
}; |
|
1328 | 1364 |
index++; |
1329 | 1365 |
}); |
1330 | 1366 |
}); |
... | ... | |
1339 | 1375 |
window.document.body.appendChild(a); |
1340 | 1376 |
a.setAttribute('style', 'display: none'); |
1341 | 1377 |
a.href = jsonFileUrl; |
1342 |
a.download = this.stakeholder.alias + "_"+topic.alias + "_" + category.alias + "_" + subCategory.alias + ".json";
|
|
1378 |
a.download = this.stakeholder.alias + "_" + topic.alias + "_" + category.alias + "_" + subCategory.alias + ".json";
|
|
1343 | 1379 |
a.click(); |
1344 | 1380 |
window.URL.revokeObjectURL(jsonFileUrl); |
1345 | 1381 |
a.remove(); // remove the element |
1382 |
|
|
1383 |
this.editing = false; |
|
1384 |
this.export_loading = false; |
|
1346 | 1385 |
} |
1347 | 1386 |
|
1348 | 1387 |
fileChangeEvent(fileInput: any) { |
1388 |
this.editing = true; |
|
1389 |
this.import_loading = true; |
|
1390 |
|
|
1349 | 1391 |
this.filesToUpload = <Array<File>>fileInput.target.files; |
1350 | 1392 |
this.upload(); |
1351 | 1393 |
} |
1352 | 1394 |
|
1353 | 1395 |
upload() { |
1354 |
this.enableUpload = false; |
|
1355 |
// this.errorMessage = ""; |
|
1356 | 1396 |
console.debug(this.filesToUpload); |
1357 | 1397 |
if (this.filesToUpload.length == 0) { |
1358 | 1398 |
console.error("There is no selected file to upload."); |
1359 |
// this.errorMessage = "There is no selected file to upload."; |
|
1399 |
UIkit.notification("There is no selected file to upload.", { |
|
1400 |
status: 'danger', |
|
1401 |
timeout: 6000, |
|
1402 |
pos: 'bottom-right' |
|
1403 |
}); |
|
1404 |
this.editing = false; |
|
1405 |
this.import_loading = false; |
|
1360 | 1406 |
return; |
1361 | 1407 |
} else { |
1362 | 1408 |
if (this.filesToUpload[0].name.indexOf(".json") == -1 || (this.filesToUpload[0].type != "application/json")) { |
1363 |
// this.errorMessage = "No valid file type. The required type is JSON"; |
|
1364 | 1409 |
console.error("No valid file type. The required type is JSON"); |
1410 |
UIkit.notification("No valid file type. The required type is JSON", { |
|
1411 |
status: 'danger', |
|
1412 |
timeout: 6000, |
|
1413 |
pos: 'bottom-right' |
|
1414 |
}); |
|
1415 |
this.editing = false; |
|
1416 |
this.import_loading = false; |
|
1365 | 1417 |
return; |
1366 | 1418 |
} |
1367 | 1419 |
} |
... | ... | |
1370 | 1422 |
this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], this.filesToUpload).then(async (result: string) => { |
1371 | 1423 |
|
1372 | 1424 |
let json_result = JSON.parse(result); |
1373 |
this.importIndicatorsAndSave(json_result); |
|
1374 |
this.endOfFetching(); |
|
1425 |
|
|
1426 |
// validate file |
|
1427 |
if(!json_result || json_result.length == 0) { |
|
1428 |
UIkit.notification("Importing file is empty", { |
|
1429 |
status: 'danger', |
|
1430 |
timeout: 6000, |
|
1431 |
pos: 'bottom-right' |
|
1432 |
}); |
|
1433 |
this.editing = false; |
|
1434 |
this.import_loading = false; |
|
1435 |
} else { |
|
1436 |
this.importIndicatorsAndSave(json_result); |
|
1437 |
} |
|
1375 | 1438 |
}, (error) => { |
1376 |
this.enableUpload = true; |
|
1377 |
console.error("An error occurred"); |
|
1439 |
console.error("Error importing files", error); |
|
1440 |
UIkit.notification("Error importing files", { |
|
1441 |
status: 'danger', |
|
1442 |
timeout: 6000, |
|
1443 |
pos: 'bottom-right' |
|
1444 |
}); |
|
1445 |
this.editing = false; |
|
1446 |
this.import_loading = false; |
|
1378 | 1447 |
}); |
1379 | 1448 |
} |
1380 | 1449 |
|
... | ... | |
1398 | 1467 |
xhr.send(formData); |
1399 | 1468 |
}); |
1400 | 1469 |
} |
1401 |
|
|
1402 |
endOfFetching() { |
|
1403 |
// this.showReport = true; |
|
1404 |
this.enableUpload = true; |
|
1405 |
} |
|
1406 |
|
|
1407 | 1470 |
} |
Also available in: Unified diff
[Trunk | Monitor Dashboard]:
1. indicators.component.ts:
a. Added fields "import_loading" and "export_loading" and set "editing", to show loading icon and disable edit options while export or import process is ongoing.
b. Validate schema of indicators' file when importing it (type (chart or number), url, and jsonPath (for number indicators) are requested).
2. indicators.component.html:
a. Instead of import or export icon (next to buttons), show loading icon when "import_loading" or "export_loading" is true.
b. Disable edit options for indicators when "import_loading" or "export_loading" is true and show tooltip.