Web: start of notification bar
Use Pinia store for notifications. WIP, only the last one is shown in the footer.
This commit is contained in:
parent
7b38aa4faf
commit
2bc6b2bdba
@ -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 {
|
||||
|
@ -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}`);
|
||||
})
|
||||
},
|
||||
}
|
||||
|
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<job-actions-bar />
|
||||
<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>
|
||||
.job-list {
|
||||
<style>
|
||||
.job-list-container {
|
||||
font-family: 'Noto Mono', monospace;
|
||||
font-size: smaller;
|
||||
height: calc(100% - var(--action-bar-height));
|
||||
}
|
||||
</style>
|
||||
|
31
web/app/src/stores/notifications.js
Normal file
31
web/app/src/stores/notifications.js
Normal file
@ -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);
|
||||
},
|
||||
},
|
||||
})
|
Loading…
Reference in New Issue
Block a user