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

added recorder status component and other stuff

Browse Source
This commit is contained in:
Tobias Kurze
2019-10-31 16:11:53 +01:00
parent 5505e823c4
commit 5792af21a5
10 changed files with 4096 additions and 3877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@@ -31,10 +31,10 @@
<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-nav-item v-if="authenticated" :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
<b-nav-item :to="{name: 'test'}">Test</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->

120
src/components/HelloWorld.vue
View File

@@ -1,59 +1,81 @@
<template>
<div class="hello">
<h1>{{ $t('welcomeMsg') }}</h1>
<p>
{{ $t('guide') }}<br>
{{ $t('checkout') }}
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>{{ $t('plugins') }}</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
</ul>
<h3>{{ $t('links') }}</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>{{ $t('ecosystem') }}</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
<div>
<b-alert show dismissible>Default Alert</b-alert>
<!--<img alt="Vue logo" src="../assets/logo.png">-->
<div v-if="authenticated">
<h2>Yeah, you are logged in!</h2>
</div>
<div v-else class="hello">
<h1>{{ $t('welcomeMsg') }}</h1>
<h3>{{msg}}</h3>
<p>Go to <router-link :to="{name: 'login'}">login page</router-link> to login!</p>
<p>
{{ $t('guide') }}<br>
{{ $t('checkout') }}
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>{{ $t('plugins') }}</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha"
target="_blank" rel="noopener">unit-mocha</a></li>
</ul>
<h3>{{ $t('links') }}</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>{{ $t('ecosystem') }}</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
get authenticated() {
return this.$store.getters.isAuthenticated;
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

1
src/components/Profile.vue
View File

@@ -129,7 +129,6 @@
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);
}, 1000);

75
src/components/RecorderState.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
:header="recorder.name"
v-bind:key="recorder.id">
<b-card-text>
<h5 class="card-title">
<strong>{{ $t('name') }}:&nbsp;{{recorder.name}}</strong>&nbsp
<router-link :to="{ name: 'recorders'}"> ({{$t('recorders')}}&nbsp
<font-awesome-icon icon="external-link-alt"/>
)
</router-link>
</h5>
</b-card-text>
<div slot="footer">
<small class="text-muted">
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}<br/>
{{ $t('last_time_modified')}}: {{recorder.last_time_modified | moment("dddd, MMMM Do YYYY")}}<br/>
</p>
</small>
</div>
</b-card>
</template>
<script>
export default {
props: ['recorder'],
data() {
return {
connectedWebsocket: false
}
},
mounted() {
this.$socket.client.on('connect', function(msg) {
console.log("We are connected!");
console.log(msg);
this.$socket.client.emit('request_recorder_state_'+ this.recorder.id, msg);
this.$socket.client.on('request_recorder_state_' + this.recorder.id, function(msg) {
//TODO: refresh state!
console.log(msg);
});
});
this.$log.info("mounted called");
if (!this.$socket.connected) {
this.connectWebsocket();
this.connectedWebsocket = true;
};
},
beforeDestroy() {
this.$log.info("beforeDestroy called");
if (this.connectedWebsocket) {
this.disconnectWebsocket();
}
},
methods: {
connectWebsocket() {
this.$socket.client.connect();
},
disconnectWebsocket() {
if (this.$socket.connected) {
this.$socket.client.disconnect();
}
}
},
}
</script>
<style scoped>
</style>

80
src/components/SelectRecorder.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div v-if="authenticated">
<div v-if="profile.favorite_recorders.length <=0">
<p>You haven't configured favorite recorders yet – click below to do so!</p>
</div>
<div v-else>
<p>Yeah, you already configured a favorite recorder :)</p>
<ul>
<li v-for="recorder in profile.favorite_recorders">{{recorder.name}}</li>
</ul>
</div>
<b-form>
<b-input-group>
<select class="form-control" v-model="favorite_recorder_id">
<option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }}
</option>
</select>
<b-input-group-append>
<b-button variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</b-form>
</div>
<div v-else>
<p>You must sign in in order to select a recorder!</p>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component
export default class SelectRecorder extends Vue {
@Prop() private msg!: string;
@Prop() private favorite_recorder_id!: string;
get authenticated() {
return this.$store.getters.isAuthenticated;
}
get profile() {
return this.$store.state.profile;
}
get recorders() {
return this.$store.state.recorders;
}
private mounted() {
this.$store.dispatch('loadProfile');
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

10
src/main.ts
View File

@@ -34,7 +34,7 @@ import {
faAt,
faUser,
faEnvelope,
faUserTag,
faUserTag, faExternalLinkAlt,
} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
@@ -48,7 +48,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
const isProduction = process.env.NODE_ENV === 'production';
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
faUser, faEnvelope, faUserTag);
faUser, faEnvelope, faUserTag, faExternalLinkAlt);
Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -72,10 +72,8 @@ Vue.use(VueSweetalert2);
Vue.use(VeeValidate);
Vue.use(VueMoment);
const socket = io('ws://localhost:5000',);
console.log(socket.nsp);
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
const socket = io('ws://localhost:5443',{autoConnect: false, reconnectionAttempts: 3});
Vue.use(VueSocketIOExt, socket);

2
src/plugins/i18n.ts
View File

@@ -32,6 +32,8 @@ const messages = {
name: 'Name',
alternate_name: 'alternativer Name',
group: 'Gruppe',
groups: 'Gruppen',
permissions: 'Berechtigungen',
created: 'erstellt',
Comments: 'Kommentare',
Comment: 'Kommentar',

606
src/store.ts
View File

@@ -7,33 +7,33 @@ import RecordRepository from '@/api/recorderRepository';
// imports of AJAX functions will go here
import {
fetchSurveys,
fetchSurvey,
getProviders,
saveSurveyResponse,
postNewSurvey,
authenticate,
register,
oidc_login, fetchUsers, getFreshToken, fetchProfile, fetchUserGroups,
fetchSurveys,
fetchSurvey,
getProviders,
saveSurveyResponse,
postNewSurvey,
authenticate,
register,
oidc_login, fetchUsers, getFreshToken, fetchProfile, fetchUserGroups,
} from '@/api';
import {isValidJwt, EventBus} from '@/utils';
Vue.use(Vuex);
const state = {
// single source of data
surveys: [],
rooms: [],
recorders: [],
recorderModels: [],
recorderCommands: [],
loginProviders: [],
currentSurvey: {},
profile: {},
users: [],
userGroups: [],
access_token: '',
refresh_token: '',
// single source of data
surveys: [],
rooms: [],
recorders: [],
recorderModels: [],
recorderCommands: [],
loginProviders: [],
currentSurvey: {},
profile: {},
users: [],
userGroups: [],
access_token: '',
refresh_token: '',
};
@@ -41,293 +41,303 @@ const state = {
const actions = {
// asynchronous operations
loadRooms(context: any) {
return RoomRepository.getRooms()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRooms', {rooms: response.data});
EventBus.$emit('roomsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading rooms!', error);
EventBus.$emit('failedLoadingRooms', error);
});
},
loadRecorders(context: any) {
return RecordRepository.getRecorders()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorders', {recorders: response.data});
EventBus.$emit('recordersLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorders!', error);
EventBus.$emit('failedLoadingRecorders', error);
});
},
loadRecorderModels(context: any) {
return RecordRepository.getRecorderModels()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
Vue.$log.debug('Loaded recorder models');
context.commit('setRecorderModels', {recorderModels: response.data});
EventBus.$emit('recorderModelsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder models!', error);
EventBus.$emit('failedLoadingRecorderModels', error);
});
},
loadRecorderCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
});
},
loadVirtualCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
});
},
loadCommands(context: any) {
return context.dispatch('loadRecorderCommands').then(() => {
return context.dispatch('loadVirtualCommands');
// asynchronous operations
loadRooms(context: any) {
return RoomRepository.getRooms()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRooms', {rooms: response.data});
EventBus.$emit('roomsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading rooms!', error);
EventBus.$emit('failedLoadingRooms', error);
});
},
loadRecorders(context: any) {
return RecordRepository.getRecorders()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorders', {recorders: response.data});
EventBus.$emit('recordersLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorders!', error);
EventBus.$emit('failedLoadingRecorders', error);
});
},
loadRecorderModels(context: any) {
return RecordRepository.getRecorderModels()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
Vue.$log.debug('Loaded recorder models');
context.commit('setRecorderModels', {recorderModels: response.data});
EventBus.$emit('recorderModelsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder models!', error);
EventBus.$emit('failedLoadingRecorderModels', error);
});
},
loadRecorderCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
});
},
loadVirtualCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
});
},
loadCommands(context: any) {
return context.dispatch('loadRecorderCommands').then(() => {
return context.dispatch('loadVirtualCommands');
});
},
loadUsers(context: any) {
return fetchUsers(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setUsers', {users: response.data});
EventBus.$emit('usersLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading users!', error);
EventBus.$emit('failedLoadingUsers', error);
});
},
loadUserGroups(context: any) {
return fetchUserGroups(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setUserGroups', {groups: response.data});
EventBus.$emit('groupsLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading user groups!', error);
EventBus.$emit('failedLoadingUserGroups', error);
});
},
loadProfileAuthCheck(context: any) {
if (!getters.isAuthenticated) {
EventBus.$emit('accessTokenInvalid');
if (!getters.isRefreshTokenValid) {
Vue.$log.warn('Access and refresh token invalid! User must login again!');
EventBus.$emit('refreshTokenInvalid');
EventBus.$emit('accessAndRefreshTokenInvalid');
} else {
return context.dispatch('refreshToken').then(() => {
context.commit('loadProfile');
});
},
loadUsers(context: any) {
return fetchUsers(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setUsers', {users: response.data});
EventBus.$emit('usersLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading users!', error);
EventBus.$emit('failedLoadingUsers', error);
});
},
loadUserGroups(context: any) {
return fetchUserGroups(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setUserGroups', {groups: response.data});
EventBus.$emit('groupsLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading user groups!', error);
EventBus.$emit('failedLoadingUserGroups', error);
});
},
loadProfileAuthCheck(context: any) {
if (!getters.isAuthenticated) {
EventBus.$emit('accessTokenInvalid');
if (!getters.isRefreshTokenValid) {
Vue.$log.warn('Access and refresh token invalid! User must login again!');
EventBus.$emit('refreshTokenInvalid');
EventBus.$emit('accessAndRefreshTokenInvalid');
} else {
return context.dispatch('refreshToken').then(() => {
context.commit('loadProfile');
});
}
} else {
context.commit('loadProfile');
}
},
loadProfile(context: any) {
return fetchProfile(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setProfile', {profile: response.data});
EventBus.$emit('profileLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading profile!', error);
EventBus.$emit('failedLoadingProfile', error);
});
},
loadLoginProviders(context: any) {
return getProviders()
.then((response) => {
context.commit('setLoginProviderData', {providers: response.data});
EventBus.$emit('loginProvidersLoaded', response.data);
});
},
login(context: any, userData: any) {
context.commit('setUserData', {userData});
return authenticate(userData)
.then((response) => context.commit('setJwtToken', {tokens: response.data}))
.catch((error) => {
Vue.$log.warn('Error Authenticating: ', error);
EventBus.$emit('failedAuthentication', error);
});
},
oidc_login(context: any, redirectionUrl: any) {
// context.commit('setUserData', { userData });
return oidc_login(redirectionUrl)
.then((response) => context.commit('setJwtToken', {tokens: response.data}))
.catch((error) => {
Vue.$log.warn('Error Authenticating: ', error);
EventBus.$emit('failedAuthentication', error);
});
},
refreshToken(context: any) {
EventBus.$emit('refreshingToken');
Vue.$log.debug('Refreshing tokens!');
return getFreshToken(context.state.refresh_token)
.then((response) => {
context.commit('setTokens', {tokens: response.data});
Vue.$log.debug('Tokens refreshed!');
})
.catch((error) => {
Vue.$log.warn('Error Refreshing token: ', error);
EventBus.$emit('failedRefreshingToken', error);
});
},
storeTokens(context: any, tokens: any) {
context.commit('setTokens', {tokens});
EventBus.$emit('storedTokens');
},
register(context: any, userData: any) {
context.commit('setUserData', {userData});
return register(userData)
.then(context.dispatch('login', userData))
.catch((error) => {
Vue.$log.warn('Error Registering: ', error);
EventBus.$emit('failedRegistering: ', error);
});
},
submitNewSurvey(context: any, survey: any) {
return postNewSurvey(survey, context.state.access_token);
},
}
} else {
context.commit('loadProfile');
}
},
loadProfile(context: any) {
return fetchProfile(context.state.access_token)
.then((response) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setProfile', {profile: response.data});
EventBus.$emit('profileLoaded', response.data);
})
.catch((error) => {
Vue.$log.warn('Error loading profile!', error);
EventBus.$emit('failedLoadingProfile', error);
});
},
loadLoginProviders(context: any) {
return getProviders()
.then((response) => {
context.commit('setLoginProviderData', {providers: response.data});
EventBus.$emit('loginProvidersLoaded', response.data);
});
},
login(context: any, userData: any) {
context.commit('setUserData', {userData});
return authenticate(userData)
.then((response) => context.commit('setJwtToken', {tokens: response.data}))
.catch((error) => {
Vue.$log.warn('Error Authenticating: ', error);
EventBus.$emit('failedAuthentication', error);
});
},
oidc_login(context: any, redirectionUrl: any) {
// context.commit('setUserData', { userData });
return oidc_login(redirectionUrl)
.then((response) => context.commit('setJwtToken', {tokens: response.data}))
.catch((error) => {
Vue.$log.warn('Error Authenticating: ', error);
EventBus.$emit('failedAuthentication', error);
});
},
refreshToken(context: any) {
EventBus.$emit('refreshingToken');
Vue.$log.debug('Refreshing tokens!');
return getFreshToken(context.state.refresh_token)
.then((response) => {
context.commit('setTokens', {tokens: response.data});
Vue.$log.debug('Tokens refreshed!');
})
.catch((error) => {
Vue.$log.warn('Error Refreshing token: ', error);
EventBus.$emit('failedRefreshingToken', error);
});
},
storeTokens(context: any, tokens: any) {
context.commit('setTokens', {tokens});
EventBus.$emit('storedTokens');
},
register(context: any, userData: any) {
context.commit('setUserData', {userData});
return register(userData)
.then(context.dispatch('login', userData))
.catch((error) => {
Vue.$log.warn('Error Registering: ', error);
EventBus.$emit('failedRegistering: ', error);
});
},
submitNewSurvey(context: any, survey: any) {
return postNewSurvey(survey, context.state.access_token);
},
};
const mutations = {
// isolated data mutations
setSurveys(sState: any, payload: any) {
sState.surveys = payload.surveys;
},
setSurvey(sState: any, payload: any) {
const nQuestions = payload.survey.questions.length;
for (let i = 0; i < nQuestions; i++) {
payload.survey.questions[i].choice = null;
}
sState.currentSurvey = payload.survey;
},
setRooms(sState: any, payload: any) {
sState.rooms = payload.rooms;
},
setRecorders(sState: any, payload: any) {
sState.recorders = payload.recorders;
},
setRecorderModels(sState: any, payload: any) {
sState.recorderModels = payload.recorderModels;
},
setRecorderCommands(sState: any, payload: any) {
sState.recorderCommands = payload.recorderCommands;
},
setUsers(sState: any, payload: any) {
sState.users = payload.users;
},
setUserGroups(sState: any, payload: any) {
sState.userGroups = payload.groups;
},
setChoice(sState: any, payload: any) {
const {questionId, choice} = payload;
const nQuestions = sState.currentSurvey.questions.length;
for (let i = 0; i < nQuestions; i++) {
if (sState.currentSurvey.questions[i].id === questionId) {
sState.currentSurvey.questions[i].choice = choice;
break;
}
}
},
setLoginProviderData(sState: any, payload: any) {
Vue.$log.debug('got loginProviders = ', payload);
sState.loginProviders = payload.providers;
},
// probably old ...
setUserData(sState: any, payload: any) {
Vue.$log.debug('setUserData payload = ', payload);
sState.userData = payload.userData;
},
setProfile(sState: any, payload: any) {
Vue.$log.debug('setProfile payload = ', payload);
sState.profile = payload.profile;
},
setJwtToken(sState: any, payload: any) {
Vue.$log.debug('setJwtToken payload = ', payload);
localStorage.tokens = payload.tokens;
sState.access_token = payload.tokens.access_token;
sState.refresh_token = payload.tokens.refresh_token;
},
setTokens(sState: any, payload: any) {
Vue.$log.debug('setTokens payload = ', payload);
if (payload.tokens.access_token) {
sState.access_token = payload.tokens.access_token;
}
if (payload.tokens.refresh_token) {
sState.refresh_token = payload.tokens.refresh_token;
}
Vue.$log.debug('access_token: ' + sState.access_token);
Vue.$log.debug('refresh_token: ' + sState.refresh_token);
},
// isolated data mutations
setSurveys(sState: any, payload: any) {
sState.surveys = payload.surveys;
},
setSurvey(sState: any, payload: any) {
const nQuestions = payload.survey.questions.length;
for (let i = 0; i < nQuestions; i++) {
payload.survey.questions[i].choice = null;
}
sState.currentSurvey = payload.survey;
},
setRooms(sState: any, payload: any) {
sState.rooms = payload.rooms;
},
setRecorders(sState: any, payload: any) {
sState.recorders = payload.recorders;
},
setRecorderModels(sState: any, payload: any) {
sState.recorderModels = payload.recorderModels;
},
setRecorderCommands(sState: any, payload: any) {
sState.recorderCommands = payload.recorderCommands;
},
setUsers(sState: any, payload: any) {
sState.users = payload.users;
},
setUserGroups(sState: any, payload: any) {
sState.userGroups = payload.groups;
},
setChoice(sState: any, payload: any) {
const {questionId, choice} = payload;
const nQuestions = sState.currentSurvey.questions.length;
for (let i = 0; i < nQuestions; i++) {
if (sState.currentSurvey.questions[i].id === questionId) {
sState.currentSurvey.questions[i].choice = choice;
break;
}
}
},
setLoginProviderData(sState: any, payload: any) {
Vue.$log.debug('got loginProviders = ', payload);
sState.loginProviders = payload.providers;
},
// probably old ...
setUserData(sState: any, payload: any) {
Vue.$log.debug('setUserData payload = ', payload);
sState.userData = payload.userData;
},
setProfile(sState: any, payload: any) {
Vue.$log.debug('setProfile payload = ', payload);
sState.profile = payload.profile;
},
setJwtToken(sState: any, payload: any) {
Vue.$log.debug('setJwtToken payload = ', payload);
localStorage.tokens = payload.tokens;
sState.access_token = payload.tokens.access_token;
sState.refresh_token = payload.tokens.refresh_token;
},
setTokens(sState: any, payload: any) {
Vue.$log.debug('setTokens payload = ', payload);
if (payload.tokens.access_token) {
sState.access_token = payload.tokens.access_token;
}
if (payload.tokens.refresh_token) {
sState.refresh_token = payload.tokens.refresh_token;
}
Vue.$log.debug('access_token: ' + sState.access_token);
Vue.$log.debug('refresh_token: ' + sState.refresh_token);
},
};
const getters = {
// reusable data accessors
isAuthenticated(sState: any) {
const valid = isValidJwt(sState.access_token);
Vue.$log.debug('Access token is valid?: ', valid);
Vue.$log.debug(sState.access_token);
return valid;
},
isRefreshTokenValid(sState: any) {
const valid = isValidJwt(sState.refresh_token);
Vue.$log.debug('Refresh token is valid?: ', valid);
Vue.$log.debug('sState.refresh_token');
return valid;
},
getLoginProviders(sState: any) {
return sState.loginProviders;
},
hasAccessRight(sState: any) {
(requested_permission: string) => {
return sState.profile.effective_permissions.find((permission: any) => {
permission.name === requested_permission
});
};
},
// reusable data accessors
isAuthenticated(sState: any) {
const valid = isValidJwt(sState.access_token);
Vue.$log.debug('Access token is valid?: ', valid);
Vue.$log.debug(sState.access_token);
return valid;
},
isRefreshTokenValid(sState: any) {
const valid = isValidJwt(sState.refresh_token);
Vue.$log.debug('Refresh token is valid?: ', valid);
Vue.$log.debug('sState.refresh_token');
return valid;
},
getLoginProviders(sState: any) {
return sState.loginProviders;
},
getUserName(sState: any) {
if (sState.profile == null || Object.keys(sState.profile).length === 0) {
return '';
}
if (sState.profile.nickname) {
return sState.profile.nickname;
}
return sState.profile.first_name + ' ' + sState.profile.last_name;
},
// this is probably wrong!!
hasAccessRight(sState: any) {
(requested_permission: string) => {
return sState.profile.effective_permissions.find((permission: any) => {
permission.name === requested_permission;
});
};
},
};
const store = new Vuex.Store({
state,
actions,
mutations,
getters,
plugins: [createPersistedState()],
state,
actions,
mutations,
getters,
plugins: [createPersistedState()],
});
export default store;

69
src/views/Home.vue
View File

@@ -1,30 +1,63 @@
<template>
<div class="home">
<b-alert show>Default Alert</b-alert>
<div class="container">
<section class="section">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<HelloWorld v-if="!authenticated" msg="you are not authenticated!"/>
<div v-else>
<h1>Welcome <span v-if="profile.last_seen!=null">back</span> {{$store.getters.getUserName}}! <span
v-if="profile.last_seen!=null">(Last seen: {{profile.last_seen | moment("dddd, MMMM Do YYYY")}})</span>
</h1>
<SelectRecorder/>
<div v-if="profile.favorite_recorders.length >0">
<ul>
<li v-for="recorder in profile.favorite_recorders">{{recorder.name}}</li>
</ul>
<RecorderState v-for="recorder in profile.favorite_recorders" :recorder="recorder"/>
</div>
</div>
</section>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import i18n from '@/plugins/i18n';
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {
public data() {
return {
};
}
import {Component, Vue} from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import i18n from '@/plugins/i18n';
import SelectRecorder from '@/components/SelectRecorder.vue';
import RecorderState from '@/components/RecorderState.vue';
@Component({
components: {
RecorderState,
SelectRecorder,
HelloWorld,
},
})
export default class Home extends Vue {
public data() {
return {};
}
mounted() {
if (this.profile == null || Object.keys(this.profile).length === 0) {
this.$store.dispatch('loadProfile');
}
}
get authenticated() {
return this.$store.getters.isAuthenticated;
}
get profile() {
return this.$store.state.profile;
}
}
</script>
<style>