tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

moved to bootstrap-vue, there is a bug in vee-validate and bootstrap-vue >rc15

Browse Source
This commit is contained in:
Tobias
2019-04-23 16:13:18 +02:00
parent c374ae1796
commit 4a97efce6f
26 changed files with 4310 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/App.vue
View File

@@ -1,77 +1,124 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/login">Login</router-link> |
<router-link to="/profile">Profile</router-link> |
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" onclick="location.href='/admin'" class="btn btn-danger">Admin</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="{ name: 'admin.user' }">{{ $t('user') }}</router-link>
<router-link class="dropdown-item" :to="{ name: 'admin.group' }">{{ $t('group') }}</router-link>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
<div id="app">
<sync-loader :loading="isLoading"></sync-loader>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/login">Login</router-link>
|
<router-link to="/profile">Profile</router-link>
|
<router-link :to="{ name: 'rooms' }">{{ $t('rooms') }}</router-link>
|
<router-link :to="{ name: 'recorders' }">{{ $t('recorders') }}</router-link>
|
<router-link :to="{ name: 'commands' }">{{ $t('commands') }}</router-link>
|
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" onclick="location.href='/admin'" class="btn btn-danger">Admin</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="{ name: 'admin.user' }">{{ $t('user') }}</router-link>
<router-link class="dropdown-item" :to="{ name: 'admin.group' }">{{ $t('group') }}</router-link>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div> |
<span>({{tokenValidity}})</span> |
<span>({{refreshTokenValidity}})</span>
|
<span>({{tokenValidity}})</span> |
<span>({{refreshTokenValidity}})</span>
</div>
<router-view/>
</div>
<router-view/>
</div>
</template>
<script>
import {getRemainingJwtValiditySeconds} from "@/utils";
import {getRemainingJwtValiditySeconds} from '@/utils';
import SyncLoader from 'vue-spinner/src/SyncLoader.vue';
export default {
data () {
return {
tokenValidity: -1,
refreshTokenValidity: -1,
};
},
methods: {
},
mounted () {
this.$nextTick(() =>{
window.setInterval(() => {
// this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state);
}, 1000);
});
export default {
components: {
SyncLoader,
},
data() {
return {
isLoading: false,
tokenValidity: -1,
refreshTokenValidity: -1,
};
},
methods: {
// todo ...
},
mounted() {
this.$nextTick(() => {
window.setInterval(() => {
// this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state);
}, 1000);
});
},
}
},
};
</script>
<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
@import '../node_modules/bootstrap/scss/bootstrap.scss';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
#nav {
padding: 30px;
text-align: center;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
/* Absolute Center Spinner */
.v-spinner {
position: fixed;
z-index: 999;
// height: 2em;
// width: 2em;
overflow: visible;
margin: auto;
top: 50%;
left: 50%;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.v-spinner:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
}
}
</style>