Newer
Older
<div id="app" v-if="model">
<TopMenu v-bind:user="model.user" />
<div class="container">
<Main v-if="page === 'main'" />
<GenericSearchResults v-if="page === 'search'" />
<UserSearchResult v-if="page === 'userSearch'" />
</div>
<div id="loading" v-if="loading">
<div id="spinner-wrapper">
<b-spinner variant="primary" style="width: 3rem; height: 3rem;" label="Loading"></b-spinner>
Sonia Zorba
committed
</div>
import TopMenu from './components/TopMenu.vue';
import Main from './components/Main.vue';
import GenericSearchResults from './components/GenericSearchResults.vue';
import UserSearchResult from './components/UserSearchResult.vue';
import {
mapState
} from 'vuex';
Sonia Zorba
committed
import client from 'api-client';
export default {
name: 'app',
components: {
TopMenu,
computed: mapState({
Sonia Zorba
committed
model: state => state.model,
input: state => state.input,
loading: state => state.loading,
page: state => state.page
var self = this;
document.addEventListener('apiError', function(event) {
self.$bvToast.toast(event.message.body, {
title: event.message.title,
variant: 'danger',
solid: true
});
Sonia Zorba
committed
});
document.addEventListener('loading', function(event) {
Sonia Zorba
committed
self.$store.commit('setLoading', event.value);
});
// retrieve the initial model
client.fetchHomePageModel(this.input)
.then(model => {
this.$store.commit('updateHomePageModel', model);
});
setInterval(client.keepAlive, 60000);
Sonia Zorba
committed
<style scoped>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
Sonia Zorba
committed
#loading {
Sonia Zorba
committed
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 1000;
}
#spinner-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}