add auto-fading error notifications to the UI

Any thrown errors get reported back to the UI and can be hoisted to the
notifications section. The `autofade` class can be applied to allow the
message to disappear on its own.

diff --git a/public/scifi.css b/public/scifi.css
index d2cf6888946263073388b155ba621cf178e4b401..450fddf644601f3d5457272ac2bc7a944416bb92 100644 (file)
--- a/public/scifi.css
+++ b/public/scifi.css
@@ -144,6 +144,24 @@ footer {
     padding-top: 1rem;
     margin-top: 2rem;
 }
+.autofade {
+  opacity: 1;
+  animation-name: autofade;
+  animation-duration: 5000ms;
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1
+}
+@keyframes autofade {
+  0% {
+    opacity: 1;
+  }
+  99% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 
 #nav, #nav ul {
     padding: 0;
@@ -374,6 +392,11 @@ form > div {
   max-width: 150px;
 }
 
+#notifications {
+  min-height: 42px;
+  margin-bottom: 5px;
+}
+
 #stats {
   margin-top: 1rem;
 }

diff --git a/src/lib/server.ts b/src/lib/server.ts
index e27981298d64701ae4a7fcff617c09fede624595..6615487bf31666301eba38268671f82e7af56e11 100644 (file)
--- a/src/lib/server.ts
+++ b/src/lib/server.ts
@@ -6,6 +6,7 @@ import bodyParser from 'body-parser';
 import { ExpressAdapter } from '@bull-board/express';
 import http from 'http';
 import { Server } from 'socket.io';
+import {HttpError} from '../errors';
 
 type AuthInfo = {
        authInfo: { 
@@ -83,9 +84,8 @@ export class HttpServer {
                        }
                        catch(e) {
                                console.log(e);
-                               //res.statusCode = (e as HttpError).statusCode || 500;
                                res.send(`
-                               <div class="alert danger">${e.message}</div>
+                               <div class="alert danger autofade">${e.message}</div>
                                `);
                        }
                        finally {