From 76315167e8f81322c3ea42e1e75b28ba98e687f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Tue, 7 Apr 2020 13:30:43 +0200
Subject: [PATCH] Add toast messages
---
package-lock.json | 5 ++
package.json | 1 +
src/app/analysis.service.ts | 54 +++++++++++++++++++
.../explorer-page/explorer-page.component.ts | 1 +
src/index.html | 1 +
5 files changed, 62 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index df6e4b4a..28e8d628 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2693,6 +2693,11 @@
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.8.1.tgz",
"integrity": "sha512-Afi2zv4DKmNSYfmx55V+Mtnt8+WfR8Rs65kWArmzEuWP7vNr7dSAEDI+ORZlgOR1gueNZwpKaPdUi4ZiTNwgPA=="
},
+ "bulma-toast": {
+ "version": "1.5.4",
+ "resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-1.5.4.tgz",
+ "integrity": "sha512-yLGeupj1WOCgOS6Gtik2eyJ2aA55nFwDyTeLSoTDdRRdWsWbBcMsna3j7ZATiQTZ4o5BI05X4z/qCKc9qMysUA=="
+ },
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 8197d632..fd54ac8d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ng-select/ng-select": "^3.7.3",
"bulma": "^0.8.1",
+ "bulma-toast": "^1.5.4",
"html2canvas": "^1.0.0-rc.5",
"python": "0.0.4",
"python-shell": "^1.0.8",
diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts
index f782af95..a302c42a 100644
--- a/src/app/analysis.service.ts
+++ b/src/app/analysis.service.ts
@@ -3,6 +3,7 @@ import {QueryItem, Task} from './interfaces';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {environment} from '../environments/environment';
+import {toast} from 'bulma-toast';
@Injectable({
providedIn: 'root'
@@ -14,20 +15,28 @@ export class AnalysisService {
private selectSubject = new Subject<{ item: QueryItem, selected: boolean }>();
public tokens: string[] = [];
+ public finishedTokens: string[] = [];
public tasks: Task[] = [];
private intervalId: any;
constructor(private http: HttpClient) {
const tokens = localStorage.getItem('tokens');
+ const finishedTokens = localStorage.getItem('finishedTokens');
+
+
if (tokens) {
this.tokens = JSON.parse(tokens);
}
+ if (finishedTokens) {
+ this.finishedTokens = JSON.parse(finishedTokens);
+ }
this.startWatching();
}
removeTask(token) {
this.tokens = this.tokens.filter((item) => item !== token);
+ this.finishedTokens = this.finishedTokens.filter((item) => item !== token);
this.tasks = this.tasks.filter((item) => item.token !== (token));
localStorage.setItem('tokens', JSON.stringify(this.tokens));
}
@@ -93,14 +102,59 @@ export class AnalysisService {
this.startWatching();
}
+ showToast(task: Task, status: 'DONE' | 'FAILED') {
+ let toastMessage;
+ let toastType;
+ const startDate = new Date(task.info.startedAt);
+ const finishedDate = new Date(task.info.finishedAt);
+ if (status === 'DONE') {
+ toastMessage = `Computation finished succesfully.
+ \n- Algorithm: ${task.info.algorithm}
+ \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}
+ \n- Finished At: ${finishedDate.getHours()}:${finishedDate.getMinutes()}`;
+ toastType = 'is-success';
+ } else if (status === 'FAILED') {
+ toastMessage = `Computation failed.
+ \n- Algorithm: ${task.info.algorithm}
+ \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}`;
+ toastType = 'is-danger';
+ }
+
+ toast({
+ message: toastMessage,
+ duration: 5000,
+ dismissible: true,
+ pauseOnHover: true,
+ type: toastType,
+ position: 'top-center',
+ animate: { in: 'fadeIn', out: 'fadeOut' }
+ });
+ }
+
startWatching() {
const watch = async () => {
if (this.tokens.length > 0) {
this.tasks = await this.getTasks();
+ this.tasks.forEach((task) => {
+ if (this.finishedTokens.find((finishedToken) => finishedToken === task.token)) {
+ } else {
+ if (task.info.done) {
+ this.finishedTokens.push(task.token);
+ this.showToast(task, 'DONE');
+ localStorage.setItem('finishedTokens', JSON.stringify(this.finishedTokens));
+ } else if (task.info.failed) {
+ this.finishedTokens.push(task.token);
+ this.showToast(task, 'FAILED');
+ localStorage.setItem('finishedTokens', JSON.stringify(this.finishedTokens));
+ } else {
+ }
+ }
+ });
}
};
watch();
this.intervalId = setInterval(watch, 5000);
}
+
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index d27ba75f..7dd8002b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -12,6 +12,7 @@ import {AnalysisService} from '../../analysis.service';
import html2canvas from 'html2canvas';
import {environment} from '../../../environments/environment';
+
declare var vis: any;
@Component({
diff --git a/src/index.html b/src/index.html
index 1c8b9b65..3a8acea8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<app-root></app-root>
--
GitLab