Add "app" component, for basic layout and housekeeping

This commit is contained in:
Lance Edgar 2019-11-06 13:01:27 -06:00
parent 5ef0703d60
commit 554736e842
7 changed files with 123 additions and 6 deletions

View file

@ -7,7 +7,10 @@
"build": "vue-cli-service build --target lib --name byjove src/index.js"
},
"dependencies": {
"vue": "^2.6.10"
"vue": "^2.6.10",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"@vue/cli-service": "^3.0.5",

View file

@ -1,13 +1,31 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<byjove-app :appsettings="appsettings">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</byjove-app>
</div>
</template>
<script>
import {ByjoveApp} from './components'
import appsettings from './appsettings'
export default {
name: 'app',
components: {
ByjoveApp,
},
data() {
return {
appsettings: appsettings,
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;

View file

@ -0,0 +1,84 @@
<template>
<div class="main-container">
<slot>
<p>TODO: put your nav in the default slot!</p>
</slot>
<div class="page-content">
<router-view />
</div>
<footer class="footer">
<slot name="footer">
<router-link to="/about">{{ appsettings.appTitle }} {{ appsettings.version }}</router-link>
</slot>
</footer>
</div>
</template>
<script>
export default {
name: 'ByjoveApp',
props: {
appsettings: Object,
},
created: function() {
// when main app is first created, fetch user session data from
// backend; this will tell us who the user is (or if they're not yet
// logged in) which in turn is used to control which features are
// exposed. also this gives us the XSRF token cookie from the server.
// TODO: make this API URL configurable, somehow..?
this.$http.get('/api/session').then(response => {
// let all of app know who the user is(n't)
this.$store.commit('setUser', response.data.user)
// also keep track of user's permissions
this.$store.commit('setPermissions', response.data.permissions)
// if user is anonymous, and requested logout page, send to login instead
if (!response.data.user && this.$route.name == 'logout') {
this.$router.push('/login')
// if user is logged in, and requested login page, send to home instead
} else if (response.data.user && this.$route.name == 'login') {
this.$router.push('/')
}
})
},
mounted: function () {
// // cache the app version
// // this.$store.commit('setAppVersion', appsettings.version);
// this.$store.commit('setAppVersion', this.appsettings.version);
// add "testing" watermark unless running in production mode
// if (!appsettings.production) {
if (!this.appsettings.production) {
// document.body.style.backgroundImage = appsettings.watermark;
document.body.style.backgroundImage = this.appsettings.watermark;
}
}
}
</script>
<!-- TODO: grr, why does this not work?! -->
<!-- <style scoped> -->
<!-- /* #app { */ -->
<!-- /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */ -->
<!-- /* -webkit-font-smoothing: antialiased; */ -->
<!-- /* -moz-osx-font-smoothing: grayscale; */ -->
<!-- /* color: #2c3e50; */ -->
<!-- /* } */ -->
<!-- .main-container { -->
<!-- display: flex; -->
<!-- min-height: 100vh; -->
<!-- flex-direction: column; -->
<!-- } -->
<!-- .page-content { -->
<!-- flex: 1; -->
<!-- padding: 0.5rem 1rem 0.5rem 0.5rem; -->
<!-- } -->
<!-- .footer { -->
<!-- text-align: center; -->
<!-- } -->
<!-- </style> -->

View file

@ -0,0 +1,3 @@
import ByjoveApp from './ByjoveApp'
export default ByjoveApp

View file

@ -1,7 +1,9 @@
import ByjoveApp from './app'
import ByjoveLogo from './logo'
import ByjoveFeedback from './feedback'
export {
ByjoveApp,
ByjoveLogo,
ByjoveFeedback,
}

View file

@ -1,7 +1,10 @@
console.log("SHOULD BE IN TESTING MODE")
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import vueResource from 'vue-resource'
import {ByjoveStoreConfig} from './store'
Vue.config.productionTip = false
@ -10,6 +13,8 @@ Vue.use(Vuex)
let store = new Vuex.Store(ByjoveStoreConfig)
Vue.use(vueResource)
new Vue({
router,
store,

View file

@ -1,3 +1,5 @@
console.log("SHOULD BE IN TESTING MODE")
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'