7b31eba8d7
Split the header into two or three parts, depending on the number of columns shown. The farm status indicator will be above the middle column (in 3 col mode) or at the right edge of the left column (in 2 col mode). Also I reverted the hiding of the farm status when SocketIO has disconnected, as that disconnect happens when navigation between tabs. That created a too 'blinky' interface, so now it just shows the last-known farm status.
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<span id="farmstatus" v-if="status"
|
|
>Farm status:
|
|
<span :class="'farm-status-' + status" :title="explanation">{{ status }}</span></span
|
|
>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps(['status']);
|
|
|
|
const expanations = {
|
|
active: 'Actively working on a job.',
|
|
idle: 'Workers are awake and ready for work.',
|
|
waiting: 'Work has been queued, but all workers are asleep.',
|
|
asleep: 'All workers are asleep, and no work has been queued.',
|
|
inoperative: 'Cannot work: there are no workers, or all are offline.',
|
|
starting: 'Farm is starting up.',
|
|
};
|
|
|
|
const explanation = computed(() => {
|
|
return expanations[props.status] || '';
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
span#farmstatus {
|
|
cursor: default;
|
|
}
|
|
span#farmstatus span {
|
|
cursor: help;
|
|
}
|
|
.farm-status-starting {
|
|
color: var(--color-farm-status-starting);
|
|
}
|
|
.farm-status-active {
|
|
color: var(--color-farm-status-active);
|
|
}
|
|
.farm-status-idle {
|
|
color: var(--color-farm-status-idle);
|
|
}
|
|
.farm-status-waiting {
|
|
color: var(--color-farm-status-waiting);
|
|
}
|
|
.farm-status-asleep {
|
|
color: var(--color-farm-status-asleep);
|
|
}
|
|
.farm-status-inoperative,
|
|
.farm-status-unknown {
|
|
color: var(--color-farm-status-inoperative);
|
|
font-weight: bold;
|
|
}
|
|
</style>
|