Web: start of notification bar

Use Pinia store for notifications. WIP, only the last one is shown in
the footer.

web/app/src/App.vue

@@ -14,6 +14,7 @@
     <task-details :apiClient="apiClient" />
   </div>
   <footer>Footer
+    <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
     <update-listener ref="updateListener" :websocketURL="websocketURL" @jobUpdate="onSioJobUpdate"
       @message="onChatMessage" @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
   </footer>
@@ -23,6 +24,7 @@
 import * as urls from '@/urls'
 import * as API from '@/manager-api';
 import { useJobs } from '@/stores/jobs';
+import { useNotifs } from '@/stores/notifications';
 
 import ApiSpinner from '@/components/ApiSpinner.vue'
 import JobsTable from '@/components/JobsTable.vue'
@@ -44,6 +46,7 @@ export default {
     messages: [],
 
     jobs: useJobs(),
+    notifs: useNotifs(),
 
     flamencoName: DEFAULT_FLAMENCO_NAME,
     flamencoVersion: DEFAULT_FLAMENCO_VERSION,
@@ -145,6 +148,8 @@ export default {
   --header-height: 25px;
   --footer-height: 25px;
   --grid-gap: 4px;
+
+  --action-bar-height: 3em;
 }
 
 html,
@@ -221,6 +226,12 @@ footer {
   grid-area: footer;
   background-color: #333333;
   color: #EEE;
+  padding-top: 0.2rem;
+  padding-left: 0.2rem;
+}
+
+section.action-bar {
+  height: var(--action-bar-height);
 }
 
 section.action-bar button.action {

web/app/src/components/JobActionsBar.vue

@@ -6,12 +6,14 @@
 
 <script>
 import { useJobs } from '@/stores/jobs';
+import { useNotifs } from '@/stores/notifications';
 
 export default {
   name: "JobActionsBar",
   events: ["actionDone", "apiError"],
   data: () => ({
     jobs: useJobs(),
+    notifs: useNotifs(),
   }),
   computed: {
   },
@@ -20,10 +22,11 @@ export default {
       const numJobs = this.jobs.numSelected;
       this.jobs.deleteJobs()
         .then(() => {
-          this.$emit("actionDone", `${numJobs} jobs marked for deletion`)
+          this.notifs.add(`${numJobs} jobs marked for deletion`);
         })
         .catch((error) => {
-          this.$emit("apiError", error);
+          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
+          this.notifs.add(`Error: ${errorMsg}`);
         })
     },
   }

web/app/src/components/JobsTable.vue

@@ -1,6 +1,8 @@
 <template>
   <job-actions-bar />
-  <div class="job-list" id="flamenco_job_list"></div>
+  <div class="job-list-container">
+    <div class="job-list" id="flamenco_job_list"></div>
+  </div>
 </template>
 
 <script lang="js">
@@ -121,9 +123,10 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
-.job-list {
+.job-list-container {
   font-family: 'Noto Mono', monospace;
   font-size: smaller;
+  height: calc(100% - var(--action-bar-height));
 }
 </style>

web/app/src/stores/notifications.js

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+
+/**
+ * Store notifications to users of the web frontend.
+ */
+export const useNotifs = defineStore('notifications', {
+  state: () => ({
+    /** @type {{ msg: string, time: Date }[]} */
+    history: [],
+    /** @type { msg: string, time: Date } */
+    last: null,
+  }),
+  actions: {
+    /**
+     * Add a simple notification.
+     * @param {string} message
+     */
+    add(message) {
+      const notif = {msg: message, time: new Date()};
+      this.history.push(notif);
+      this.last = notif;
+      this._prune();
+    },
+
+    /* Ensure there is only 1000 items in the history. */
+    _prune() {
+      if (this.history.length <= 1000) return;
+      this.history.splice(0, 1000 - this.history.length);
+    },
+  },
+})