slight changes to Profile.vue to display role, groups, etc.

This commit is contained in:
2019-10-23 16:34:35 +02:00
parent 36c8e40622
commit 1d12e56093
7 changed files with 94 additions and 15 deletions

View File

@@ -1,12 +1,23 @@
<template>
<div id="app">
<sync-loader :loading="isLoading"></sync-loader>
<b-alert v-model="showAlert" variant="danger" dismissible>
<b-alert
:show="dismissCountDown"
dismissible
variant="danger"
@dismissed="dismissCountDown=0"
@dismiss-count-down="countDownChanged"
>
{{alertMessage}}
<b-progress
variant="error"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
></b-progress>
</b-alert>
<div id="nav">
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand to="/">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
LRC - <strong>L</strong>ecture <strong>R</strong>ecord <strong>C</strong>ontrol
@@ -17,11 +28,13 @@
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/about">About</b-nav-item>
<b-nav-item to="/login" >Login</b-nav-item>
<b-nav-item v-if="authenticated" to="/logout">Logout</b-nav-item>
<b-nav-item v-else="authenticated" to="/login">Login</b-nav-item>
<b-nav-item :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
<b-nav-item :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
<b-nav-item :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
<b-nav-item :to="{name: 'test'}">{{ $t('Test') }}</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
@@ -32,21 +45,22 @@
</b-nav-form>
<b-nav-item-dropdown split split-to="admin" variant="outline-danger" :text="$t('admin')">
<b-dropdown-item to="user">{{ $t('user') }}</b-dropdown-item>
<b-dropdown-item to="group">{{ $t('group') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item v-for="(lang, i) in langs"
v-bind:key="lang"
@click="$i18n.locale=lang">{{ lang }}</b-dropdown-item>
@click="$i18n.locale=lang">{{ lang }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item to="/profile">Profile</b-dropdown-item>
<b-dropdown-item :to="{name: 'profile'}">Profile</b-dropdown-item>
<b-dropdown-item to="/logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
@@ -77,14 +91,19 @@
showAlert: true,
alertMessage: 'NO MESSAGE PROVIDED',
langs: ['de', 'en', 'es'],
dismissSecs: 5,
dismissCountDown: 0,
};
},
methods: {
showErrorMessage(msg) {
this.isLoading = false;
this.showAlert = true;
this.dismissCountDown = this.dismissSecs;
this.alertMessage = msg;
},
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
},
mounted() {
EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -107,6 +126,14 @@
},
computed: {
authenticated() {
return this.$store.getters.isAuthenticated;
},
profile() {
return this.$store.state.profile;
},
}
};
</script>
@@ -121,11 +148,12 @@
}
#nav {
padding: 30px;
padding: 0px;
text-align: center;
a {
font-weight: bold;
color: #2c3e50;
color: #7ea8d6;
&.router-link-exact-active {
color: #42b983;
@@ -156,6 +184,6 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
background-color: rgba(0, 0, 0, 0.2);
}
</style>