6284734521
Issue likely began after 7b31eba8d7614e82cfcc4583e1dd3c2f40f87944 as it was an issue with header not being properly positioned. Just needed to add `header-L` and `header-R` to `grid-template-areas` and adjust the rest accordingly, and fix a class name typo. Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104413 Reviewed-by: Sybren A. Stüvel <sybren@blender.org>
127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<template>
|
|
<div class="col col-workers-list">
|
|
<workers-table
|
|
ref="workersTable"
|
|
:activeWorkerID="workerID"
|
|
@tableRowClicked="onTableWorkerClicked" />
|
|
</div>
|
|
<div class="col col-workers-details">
|
|
<worker-details :workerData="workers.activeWorker" />
|
|
</div>
|
|
<footer class="app-footer">
|
|
<notification-bar />
|
|
<update-listener
|
|
ref="updateListener"
|
|
mainSubscription="allWorkers"
|
|
extraSubscription="allWorkerTags"
|
|
@workerUpdate="onSIOWorkerUpdate"
|
|
@workerTagUpdate="onSIOWorkerTagsUpdate"
|
|
@sioReconnected="onSIOReconnected"
|
|
@sioDisconnected="onSIODisconnected" />
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.col-workers-list {
|
|
grid-area: col-1;
|
|
}
|
|
|
|
.col-workers-details {
|
|
grid-area: col-2;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { WorkerMgtApi } from '@/manager-api';
|
|
import { useNotifs } from '@/stores/notifications';
|
|
import { useWorkers } from '@/stores/workers';
|
|
import { getAPIClient } from '@/api-client';
|
|
|
|
import NotificationBar from '@/components/footer/NotificationBar.vue';
|
|
import UpdateListener from '@/components/UpdateListener.vue';
|
|
import WorkerDetails from '@/components/workers/WorkerDetails.vue';
|
|
import WorkersTable from '@/components/workers/WorkersTable.vue';
|
|
|
|
export default {
|
|
name: 'WorkersView',
|
|
props: ['workerID'], // provided by Vue Router.
|
|
components: {
|
|
NotificationBar,
|
|
UpdateListener,
|
|
WorkerDetails,
|
|
WorkersTable,
|
|
},
|
|
data: () => ({
|
|
workers: useWorkers(),
|
|
notifs: useNotifs(),
|
|
api: new WorkerMgtApi(getAPIClient()),
|
|
}),
|
|
mounted() {
|
|
window.workersView = this;
|
|
this._fetchWorker(this.workerID);
|
|
|
|
document.body.classList.add('is-two-columns');
|
|
},
|
|
unmounted() {
|
|
document.body.classList.remove('is-two-columns');
|
|
},
|
|
watch: {
|
|
workerID(newWorkerID, oldWorkerID) {
|
|
this._fetchWorker(newWorkerID);
|
|
},
|
|
},
|
|
methods: {
|
|
// SocketIO connection event handlers:
|
|
onSIOReconnected() {
|
|
this.$refs.workersTable.onReconnected();
|
|
this._fetchWorker(this.workerID);
|
|
},
|
|
onSIODisconnected(reason) {},
|
|
onSIOWorkerUpdate(workerUpdate) {
|
|
this.notifs.addWorkerUpdate(workerUpdate);
|
|
|
|
if (this.$refs.workersTable) {
|
|
this.$refs.workersTable.processWorkerUpdate(workerUpdate);
|
|
}
|
|
if (this.workerID != workerUpdate.id) return;
|
|
|
|
if (workerUpdate.deleted_at) {
|
|
this._routeToWorker('');
|
|
return;
|
|
}
|
|
|
|
this._fetchWorker(this.workerID);
|
|
},
|
|
onSIOWorkerTagsUpdate(workerTagsUpdate) {
|
|
this.workers.refreshTags().then(() => this._fetchWorker(this.workerID));
|
|
},
|
|
|
|
onTableWorkerClicked(rowData) {
|
|
if (rowData.id == this.workerID) return;
|
|
this._routeToWorker(rowData.id);
|
|
},
|
|
|
|
/**
|
|
* @param {string} workerID worker ID to navigate to, can be empty string for "no active worker".
|
|
*/
|
|
_routeToWorker(workerID) {
|
|
const route = { name: 'workers', params: { workerID: workerID } };
|
|
this.$router.push(route);
|
|
},
|
|
|
|
/**
|
|
* Fetch worker info and set the active worker once it's received.
|
|
* @param {string} workerID worker ID, can be empty string for "no worker".
|
|
*/
|
|
_fetchWorker(workerID) {
|
|
if (!workerID) {
|
|
this.workers.deselectAllWorkers();
|
|
return;
|
|
}
|
|
|
|
return this.api.fetchWorker(workerID).then((worker) => this.workers.setActiveWorker(worker));
|
|
},
|
|
},
|
|
};
|
|
</script>
|