Web: add simple worker action bar

UI/UX needs improvements, but there now are some buttons to manage Workers.
They request forced status changes, so nothing lazy yet. Still have to
consider how to include that in the UI. Could probably follow the
Flamenco 2 Manager design.

web/app/src/components/workers/WorkerActionsBar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="btn-bar workers">
+    <button class="btn wakeup" v-on:click="onButtonWakeup">Wake Up</button>
+    <button class="btn sleep" v-on:click="onButtonSleep">Sleep</button>
+    <button class="btn offline dangerous" v-on:click="onButtonOffline">Offline</button>
+  </div>
+</template>
+
+<script>
+import { useWorkers } from '@/stores/workers';
+import { useNotifs } from '@/stores/notifications';
+
+export default {
+  name: "WorkerActionsBar",
+  data: () => ({
+    workers: useWorkers(),
+    notifs: useNotifs(),
+  }),
+  computed: {
+  },
+  methods: {
+    onButtonWakeup() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAwake());
+    },
+    onButtonSleep() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusAsleep());
+    },
+    onButtonOffline() {
+      return this._handleWorkerActionPromise(
+        this.workers.reqStatusOffline());
+    },
+
+    _handleWorkerActionPromise(promise) {
+      return promise
+        .catch((error) => {
+          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
+          this.notifs.add(`Error: ${errorMsg}`);
+        })
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+</style>

web/app/src/components/workers/WorkersTable.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2 class="column-title">Workers</h2>
+    <worker-actions-bar />
     <status-filter-bar
       :availableStatuses="availableStatuses"
       :activeStatuses="shownStatuses"
@@ -16,8 +17,10 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { WorkerMgtApi } from '@/manager-api'
 import { indicator, workerStatus } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
+import { useWorkers } from '@/stores/workers';
 
 import StatusFilterBar from '@/components/StatusFilterBar.vue'
+import WorkerActionsBar from '@/components/workers/WorkerActionsBar.vue'
 
 export default {
   name: 'WorkersTable',
@@ -25,9 +28,12 @@ export default {
   emits: ["tableRowClicked"],
   components: {
     StatusFilterBar,
+    WorkerActionsBar,
   },
   data: () => {
     return {
+      workers: useWorkers(),
+
       shownStatuses: [],
       availableStatuses: [], // Will be filled after data is loaded from the backend.
     };

web/app/src/stores/workers.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 
-import { WorkerMgtApi } from '@/manager-api';
+import { WorkerMgtApi, WorkerStatusChangeRequest } from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 
 
@@ -43,5 +43,23 @@ export const useWorkers = defineStore('workers', {
         activeWorkerID: "",
       });
     },
+
+    reqStatusAwake() { return this.requestStatus("awake"); },
+    reqStatusAsleep() { return this.requestStatus("asleep"); },
+    reqStatusOffline() { return this.requestStatus("offline"); },
+
+    /**
+     * Transition the active worker to the new status.
+     * @param {string} newStatus
+     * @returns a Promise for the API request.
+     */
+     requestStatus(newStatus) {
+      if (!this.activeWorkerID) {
+        console.warn(`requestStatus(${newStatus}) impossible, no active worker ID`);
+        return;
+      }
+      const statuschange = new WorkerStatusChangeRequest(newStatus, false);
+      return api.requestWorkerStatusChange(this.activeWorkerID, statuschange);
+    },
   },
 })