skouter/components/app.vue

<template>
<div class="panel">

<side-bar :role="user.status" :active="active">
</side-bar>

<div v-if="loading" class="page loading">
<spinner></spinner>
</div>

<home :user="user" v-else-if="active == 1" />
<new-estimate :user="user" :fees="fees" v-else-if="active == 2" />
<estimates :user="user" :fees="fees" v-else-if="active == 3" />
<settings :user="user" v-else-if="active == 4" />
<sign-out :user="user" v-else-if="active == 5" />

</div>
</template>

<script>
import SideBar from "./sidebar.vue"
import Spinner from "./spinner.vue"
import Home from "./home.vue"
import NewEstimate from "./new.vue"
import Estimates from "./estimates.vue"
import Settings from "./settings.vue"
import SignOut from "./sign-out.vue"

const user = {
 	firstName: "test",
	lastName: "user",
	id: 12,
	status: 1,
 }

// The default fees of a new loan. Percentage values take precedent over amounts
const fees = [
	{ name: 'Processing fee', type: 'Lender Fees', amount: 500, perc: 0 },
	{ name: 'Underwriting fee', type: 'Lender Fees', amount: 500, perc: 0 },
	{ name: 'Credit Report', type: 'Services Required by Lender',
	amount: 52.50 },
	{ name: 'Appraisal', type: 'Services Required by Lender', amount: 52.50 },
	{ name: 'Title Services', type: 'Title Company', amount: 1000 },
	{ name: 'Lender\'s Title Insurance', type: 'Title Company', amount: 1599 },
	{ name: 'Owner\'s Title Insurance', type: 'Title Company', amount: 451.00 },
	{ name: 'Recording Charges', type: 'Government', amount: 99.00 },
	{ name: 'State Tax', type: 'Government', amount: 2411.00 },
]

// Used to check the current section of the app generally without a regex match
// each time.
function active() {
	if (this.hash == '' || this.hash == '#') {
		return 1
	} else if (/^#new\/?/.exec(this.hash)) {
		return 2
	} else if (/^#estimates\/?/.exec(this.hash)) {
		return 3
	} else if (/^#settings\/?/.exec(this.hash)) {
		return 4
	} else if (/^#sign-out\/?/.exec(this.hash)) {
		return 5
	} else {
		return 0
	}
}

export default {
	components: {
		SideBar,
		Spinner,
		Home,
		NewEstimate,
		Estimates,
		Settings,
		SignOut
	},
	computed: { active },
	data() {
		return {
			loading: false, user: user, hash: window.location.hash,
			fees: fees
		}
	},
	created() {
		window.onhashchange = () => this.hash = window.location.hash
	}
}
</script>