63ac728732
The selection mechanism of Tabulator was getting in the way of having nice
navigation, as it would deselect (i.e. nav to "/") before selecting the
next job (i.e. nav to "/jobs/{job-id}").
The active job is now determined by the URL and thus handled by Vue Router.
Clicking on a job simply navigates to its URL, which causes the reactive
system to load & display it.
It is still intended to get job selection for "mass actions", but that's
only possible after normal navigation is working well.
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<header>
|
|
<router-link :to="{ name: 'index' }" class="navbar-brand">{{ flamencoName }}</router-link>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<router-link :to="{ name: 'jobs' }">Jobs</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link :to="{ name: 'workers' }">Workers</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link :to="{ name: 'settings' }">Settings</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<api-spinner />
|
|
<span class="app-version">
|
|
version: {{ flamencoVersion }}
|
|
</span>
|
|
</header>
|
|
<router-view></router-view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as API from '@/manager-api';
|
|
import { apiClient } from '@/stores/api-query-count';
|
|
|
|
import ApiSpinner from '@/components/ApiSpinner.vue'
|
|
|
|
const DEFAULT_FLAMENCO_NAME = "Flamenco";
|
|
const DEFAULT_FLAMENCO_VERSION = "unknown";
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
ApiSpinner,
|
|
},
|
|
data: () => ({
|
|
flamencoName: DEFAULT_FLAMENCO_NAME,
|
|
flamencoVersion: DEFAULT_FLAMENCO_VERSION,
|
|
}),
|
|
mounted() {
|
|
window.app = this;
|
|
this.fetchManagerInfo();
|
|
},
|
|
methods: {
|
|
// TODO: also call this when SocketIO reconnects.
|
|
fetchManagerInfo() {
|
|
const metaAPI = new API.MetaApi(apiClient);
|
|
metaAPI.getVersion().then((version) => {
|
|
this.flamencoName = version.name;
|
|
this.flamencoVersion = version.version;
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "assets/base.css";
|
|
@import "assets/tabulator.css";
|
|
</style>
|