Commit c0093b2a authored by Kittisak Maneewong's avatar Kittisak Maneewong

split layout employer

parent ffd2d3e1
This source diff could not be displayed because it is too large. You can view the blob instead.
<template> <template>
<div> <v-app>
<Dialog></Dialog> <router-view></router-view>
<Toolbar></Toolbar> </v-app>
<v-content class="mt-5">
<v-container fluid>
<v-layout>
<v-flex xs10 offset-xs1>
<v-card flat height="600px">
<router-view></router-view>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<Footer></Footer>
</div>
</template> </template>
<script>
import Toolbar from './components/Toolbar.vue';
import Footer from './components/Footer.vue';
import Dialog from './components/Dialog.vue';
export default {
components: {
Toolbar,
Footer,
Dialog
}
}
</script>
window.Vue = require('vue'); window.Vue = require('vue');
import Vue from 'vue'; import Vue from 'vue';
import Vuetify from 'vuetify'; import Vuetify from 'vuetify';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import App from './App.vue'; import App from './App.vue';
import { routes } from './router'; import router from './route';
import stores from './store'; import store from './store';
Vue.use(Vuetify); // Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: 'history'
});
const store = new Vuex.Store(stores); Vue.use(Vuetify);
const app = new Vue({ const app = new Vue({
el: '#app', el: '#app',
......
<template>
<v-dialog
v-model="dialog"
width="500px"
>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
computed: {
dialog: {
get () {
return this.$store.getters.getOpenDialog
},
set (value) {
this.$store.commit('setOpenDialog', value)
}
}
}
}
</script>
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
<v-toolbar absolute flat color="white" app> <v-toolbar absolute flat color="white" app>
<v-toolbar-title>Cooperative Search</v-toolbar-title> <v-toolbar-title>Cooperative Search</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn dark color="success" class="elevation-0" @click="$router.push('/employer')">สำหรับผู้ประกอบการ</v-btn>
<v-divider inset vertical></v-divider> <v-divider inset vertical></v-divider>
<v-btn round small outline color="teal" @click.stop="$store.commit('setOpenDialog', true)"> <v-btn outline color="success">
เข้าสู่ระบบ / สมัครสมาชิก เข้าสู่ระบบ
</v-btn>
<v-btn outline color="success" class="ml-0">
สมัครสมาชิก
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
</template> </template>
...@@ -14,5 +18,3 @@ export default { ...@@ -14,5 +18,3 @@ export default {
} }
</script> </script>
<style lang="scss">
</style>
<template>
<div>
<Toolbar></Toolbar>
<v-content class="mt-5">
<v-container fluid>
<v-layout>
<v-flex xs10 offset-xs1>
<v-card flat height="600px">
<router-view></router-view>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
<Footer></Footer>
</div>
</template>
<script>
import Toolbar from '../components/Toolbar.vue';
import Footer from '../components/Footer.vue';
export default {
components: {
Toolbar,
Footer
}
}
</script>
<template>
<router-view></router-view>
</template>
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import AppLayout from './layouts/AppLayout.vue';
import EmployerLayout from './layouts/EmployerLayout.vue';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import LoginEmployer from './views/LoginEmployer.vue';
import PageNotFound from './views/PageNotFound.vue';
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/employer',
name: 'employerLayout',
component: EmployerLayout,
children: [
{
path: 'login',
name: 'loginEmployer',
component: LoginEmployer
},
{
path: '*',
name: '404Employer',
component: PageNotFound
}
]
},
{
path: '/',
name: 'appLayout',
component: AppLayout,
children: [
{
path: '',
name: 'Home',
component: Home
},
{
path: 'login',
name: 'login',
component: Login
},
{
path: '*',
name: 'pageNotFound',
component: PageNotFound
}
]
}
]
})
\ No newline at end of file
import Home from './views/Home.vue';
export const routes = [
{
path: '/',
name: 'Home',
component: Home
}
];
\ No newline at end of file
export default { import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: { state: {
message: 'Kittisak Maneewong', message: 'Kittisak Maneewong'
openDialog: false
}, },
mutations: { mutations: {
setOpenDialog(state, payload) {
state.openDialog = payload
}
}, },
actions: { actions: {
...@@ -14,9 +15,6 @@ export default { ...@@ -14,9 +15,6 @@ export default {
getters: { getters: {
welcome (state) { welcome (state) {
return state.message; return state.message;
},
getOpenDialog (state) {
return state.openDialog
} }
} }
}; });
<template>
<div>Login</div>
</template>
<template>
<div>Login Employer</div>
</template>
<template>
<div>Page Not Found</div>
</template>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</style> </style>
</head> </head>
<body> <body>
<v-app id="app"></v-app> <div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script> <script src="{{ asset('js/app.js') }}"></script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment