root
/
gitdeploy
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

work

This commit is contained in:
Ryan Burnette 2020-09-24 17:57:29 -04:00
parent ec128a13ac
commit f576e17a2b
10 changed files with 216 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/src/css/style.scss
View File

@ -30,6 +30,7 @@ body,
} }
.navbar { .navbar {
margin-bottom: 2rem;
background-color: darken($white, 7.5); background-color: darken($white, 7.5);
font-size: (14/16) * 1rem; font-size: (14/16) * 1rem;
} }

4
html/src/index.html
View File

@ -12,6 +12,7 @@
</head> </head>
<body> <body>
<div class="app"> <div class="app">
<template v-if="ready">
<div class="main"> <div class="main">
<router-view name="header" :user="user"></router-view> <router-view name="header" :user="user"></router-view>
<router-view name="main" :user="user"></router-view> <router-view name="main" :user="user"></router-view>
@ -40,8 +41,9 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
<script src="/vendor.js"></script> <script src="/vendor.js"></script>
<script src="/main.js"></script> <script src="/app.js"></script>
</body> </body>
</html> </html>

69
html/src/js/app.js Normal file
View File

@ -0,0 +1,69 @@
'use strict';
require('../css/style.scss');
var Vue = require('vue');
var VueRouter = require('vue-router').default;
var axios = require('axios');
Vue.use(VueRouter);
var components = {
signin: require('./components/signin.js'),
navbar: require('./components/navbar.js'),
dashboard: require('./components/dashboard.js')
};
var routes = [
{
path: '/',
components: {
header: components.navbar,
main: components.dashboard
}
},
{
path: '/signin',
components: {
main: components.signin
}
}
];
var router = new VueRouter({ routes });
var app = new Vue({
data: {
user: {},
ready: false
},
methods: {},
watch: {
$route: function (to, from) {
var _this = this;
this.ready = false;
if (to.path.startsWith('/signin')) {
_this.ready = true;
} else {
var token = window.localStorage.getItem('token');
if (token) {
_this.ready = true;
} else {
_this.$router.push('/signin');
}
}
// console.log('route change', to, from);
}
},
computed: {
signedIn: function () {
return Object.keys(this.user).length > 0;
}
},
router,
created: function () {}
});
app.$mount('.app');

21
html/src/js/components/dashboard.js Normal file
View File

@ -0,0 +1,21 @@
'use strict';
var Vue = require('vue');
var axios = require('axios');
module.exports = Vue.component('dashboard', function (resolve, reject) {
return axios.get('/templates/dashboard.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {};
},
props: ['user'],
methods: {},
mounted: function () {
var _this = this;
_this.ready = true;
}
});
});
});

15
html/src/js/components/navbar.js Normal file
View File

@ -0,0 +1,15 @@
'use strict';
var Vue = require('vue');
var axios = require('axios');
module.exports = Vue.component('navbar', function (resolve, reject) {
return axios.get('/templates/navbar.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {};
}
});
});
});

39
html/src/js/components/signin.js Normal file
View File

@ -0,0 +1,39 @@
'use strict';
var Vue = require('vue');
var axios = require('axios');
module.exports = Vue.component('signin', function (resolve, reject) {
return axios.get('/templates/signin.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {
email: '',
busy: false,
state: ''
};
},
methods: {
signin: function (ev) {
ev.preventDefault();
ev.stopPropagation();
var _this = this;
_this.busy = true;
// TODO implement get token process here
window.localStorage.setItem('token', _this.email);
_this.$router.push('/');
}
},
mounted: function () {
var _this = this;
var token = window.localStorage.getItem('token');
if (token) {
// TODO if we have a good token, no need to be here
_this.$router.push('/');
}
_this.state = 'signingIn';
}
});
});
});

163
html/src/js/main.js
View File

@ -1,163 +0,0 @@
'use strict';
require('../css/style.scss');
var Vue = require('vue');
var VueRouter = require('vue-router').default;
var axios = require('axios');
Vue.use(VueRouter);
var components = {};
components.signin = Vue.component('signin', function (resolve, reject) {
return axios.get('/templates/signin.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {
email: '',
busy: false,
state: ''
};
},
methods: {
signin: function (ev) {
ev.preventDefault();
ev.stopPropagation();
var _this = this;
_this.busy = true;
//console.log(_this.email);
window.localStorage.setItem('token', _this.email);
}
},
beforeMount: function () {
console.log('beforeMount signin');
},
mounted: function () {
// var _this = this;
// var token = window.localStorage.getItem('token');
// if (token) {
// getMe().then(function (result) {
// if (result) {
// router.push('/');
// } else {
// _this.state = 'signingIn';
// }
// });
// } else {
// _this.state = 'signingIn';
// }
}
});
});
});
components.navbar = Vue.component('navbar', function (resolve, reject) {
return axios.get('/templates/navbar.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {
ready: false
};
},
mounted: function () {
var _this = this;
_this.$parent.getUser().then(function (user) {
if (user.email) {
_this.ready = true;
} else {
_this.$router.push('/signin');
}
});
}
});
});
});
components.dashboard = Vue.component('dashboard', function (resolve, reject) {
return axios.get('/templates/dashboard.html').then(function (resp) {
resolve({
template: resp.data,
data: function () {
return {};
},
props: ['user'],
computed: {
ready: function () {
return !!this.user.email;
}
},
methods: {}
});
});
});
var routes = [
{
path: '/',
components: {
header: components.navbar,
main: components.dashboard
}
},
{
path: '/signin',
components: {
main: components.signin
}
}
];
var router = new VueRouter({
routes
});
var app = new Vue({
data: {
user: {}
},
methods: {
getUser: function () {
var _this = this;
if (_this.user) {
return Promise.resolve(_this.user);
}
return getMe().then(function (result) {
_this.user = result.user;
return _this.user;
});
}
},
computed: {
signedIn: function () {
return Object.keys(this.user).length > 0;
}
},
router,
created: function () {}
});
app.$mount('.app');
function getMe() {
var token = window.localStorage.getItem('token');
if (!token) {
return Promise.resolve(false);
}
return axios
.get('/api/auth/me.json')
.then(function (resp) {
return {
token,
user: resp.data
};
})
.catch(function (err) {
if (err.resp.status === 401) {
return false;
}
throw err;
});
}

4
html/src/templates/dashboard.html
View File

@ -1,5 +1,4 @@
<div class="dashboard" v-if="ready"> <div class="dashboard">
<div class="section">
<div class="container is-fluid"> <div class="container is-fluid">
<div class="title"> <div class="title">
<h2 class="has-text-weight-bold">Dashboard</h2> <h2 class="has-text-weight-bold">Dashboard</h2>
@ -44,4 +43,3 @@
</div> </div>
</div> </div>
</div> </div>
</div>

8
html/src/templates/navbar.html
View File

@ -1,4 +1,4 @@
<nav class="navbar" v-if="ready"> <nav class="navbar">
<div class="container is-fluid"> <div class="container is-fluid">
<div class="navbar-brand"> <div class="navbar-brand">
<span class="navbar-item brand-text has-text-weight-bold"> <span class="navbar-item brand-text has-text-weight-bold">
@ -7,9 +7,9 @@
</div> </div>
<div id="navMenu" class="navbar-menu"> <div id="navMenu" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item" href="/">Dashboard</a> <router-link class="navbar-item" to="/">Dashboard</router-link>
<a class="navbar-item" href="/jobs">Jobs</a> <router-link class="navbar-item" to="/jobs">Jobs</router-link>
<a class="navbar-item" href="/promote">Promote</a> <router-link class="navbar-item" to="/promote">Promote</router-link>
</div> </div>
</div> </div>
</div> </div>

4
html/webpack.common.js
View File

@ -8,8 +8,8 @@ module.exports = {
context: path.resolve(__dirname, 'src'), context: path.resolve(__dirname, 'src'),
entry: { entry: {
vendor: ['vue'], vendor: ['vue'],
main: { app: {
import: './js/main.js', import: './js/app.js',
dependOn: 'vendor' dependOn: 'vendor'
} }
}, },