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

added more fields (read only atm) for recorders

Browse Source
This commit is contained in:
Tobias
2019-11-22 14:25:29 +01:00
parent 5792af21a5
commit c071591d82
5 changed files with 3563 additions and 3522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7002
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
src/App.vue
View File

@@ -87,6 +87,7 @@
return { return {
isLoading: false, isLoading: false,
tokenValidity: -1, tokenValidity: -1,
refreshFailed: false,
refreshTokenValidity: -1, refreshTokenValidity: -1,
showAlert: true, showAlert: true,
alertMessage: 'NO MESSAGE PROVIDED', alertMessage: 'NO MESSAGE PROVIDED',
@@ -112,15 +113,23 @@
EventBus.$on('failedLoadingRooms', (msg) => { EventBus.$on('failedLoadingRooms', (msg) => {
this.showErrorMessage(msg); this.showErrorMessage(msg);
}); });
EventBus.$on('failedRefreshingToken', (msg)=>{
this.refreshFailed = true;
});
this.$nextTick(() => { this.$nextTick(() => {
window.setInterval(() => { window.setInterval(() => {
// this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token)); // this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token); this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token); this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state); // this.$log.debug(this.$store.state);
if (this.tokenValidity < 50 && this.refreshTokenValidity > 30) { if (this.tokenValidity < 50 && this.refreshTokenValidity > 30 && !this.refreshFailed) {
this.$store.dispatch('refreshToken'); // renew access token this.$store.dispatch('refreshToken'); // renew access token
} }
if(this.refreshFailed){
this.$store.dispatch('resetToken'); // delete all token info if refresh fails
this.$router.push({ name: 'login'});
this.refreshFailed = false;
}
}, 1000); }, 1000);
}); });

11
src/components/Login.vue
View File

@@ -1,6 +1,7 @@
<!-- components/Login.vue --> <!-- components/Login.vue -->
<template> <template>
<div> <div>
<div v-if="!authenticated">
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
@@ -45,7 +46,11 @@
</div> </div>
</section> </section>
</div>
<div v-else>
<h1>{{ $t('You are already logged in!') }}</h1>
<p><a href="some_logout_url">{{$t('logout')}}</a></p>
</div>
</div> </div>
</template> </template>
@@ -108,6 +113,10 @@
users() { users() {
return this.$store.state.users; return this.$store.state.users;
}, },
authenticated() {
return this.$store.getters.isAuthenticated;
}
}, },
}; };
</script> </script>

50
src/components/Recorders.vue
View File

@@ -52,11 +52,19 @@
</b-input-group> </b-input-group>
</h5> </h5>
<hr/> <hr/>
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;
{{recorder.model_name}}&nbsp;
</p>
<p class="card-text"><strong>{{ $t('firmware_version') }}:</strong>&nbsp;
{{recorder.firmware_version}}&nbsp;
</p>
<p class="card-text"><strong>{{ $t('serial_number') }}:</strong>&nbsp;
{{recorder.serial_number}}&nbsp;
</p>
<p class="card-text"><strong>{{ $t('network_name') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('network_name') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}&nbsp; <span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'network_name')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'network_name')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -82,9 +90,8 @@
<p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}&nbsp; <span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ip')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'ip')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -110,9 +117,8 @@
<p class="card-text"><strong>{{ $t('ip v6') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('ip v6') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_ip6']">{{recorder.ip6}}&nbsp; <span v-if="!formEditField[recorder.id+'_ip6']">{{recorder.ip6}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ip6')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'ip6')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -138,9 +144,8 @@
<p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_ssh_port']">{{recorder.ssh_port}}&nbsp; <span v-if="!formEditField[recorder.id+'_ssh_port']">{{recorder.ssh_port}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'ssh_port')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'ssh_port')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -197,9 +202,8 @@
<hr/> <hr/>
<div v-if="recorder.room && !formEditField[recorder.id+'_room_id']"> <div v-if="recorder.room && !formEditField[recorder.id+'_room_id']">
<p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{recorder.room.name}}&nbsp; <p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{recorder.room.name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'room_id')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'room_id')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a></p> </a></p>
</div> </div>
@@ -269,18 +273,18 @@
<hr/> <hr/>
<div v-if="recorder.recorder_model"> <div v-if="recorder.recorder_model">
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;{{recorder.recorder_model.name}}&nbsp; <p class="card-text"><strong>{{ $t('Model Adadpter') }}:</strong>&nbsp;{{recorder.recorder_model.name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon icon="pencil-alt"/>
</a></p> </a></p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Model Adadpter') }}:</strong>&nbsp;{{
$t('no_model_defined')}}</p> $t('no_model_defined')}}</p>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-8"> <div class="col-sm-8">
<select class="form-control" v-model="form.recorder_model"> <select class="form-control" v-model="form.recorder_model">
<option value="">{{$t('No model selected')}}</option> <option value="">{{$t('No Model Adadpter selected')}}</option>
<option v-for="recorderModel in recorderModels" <option v-for="recorderModel in recorderModels"
v-bind:value="recorderModel.id"> v-bind:value="recorderModel.id">
{{ recorderModel.name }} {{ recorderModel.name }}
@@ -294,9 +298,8 @@
<strong>{{ $t('description') }}:</strong>&nbsp; <strong>{{ $t('description') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_description']">{{recorder.description}}&nbsp; <span v-if="!formEditField[recorder.id+'_description']">{{recorder.description}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initRecorderUpdate(recorder, 'description')">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'description')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -392,6 +395,20 @@
</p> </p>
</div> </div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('mac') }}</label>
<div class="col-sm-6">
<input name="mac"
v-validate="'mac'"
v-model="form.mac"
v-bind:class="{'is-danger': errors.has('mac'), 'is-invalid': errors.has('mac')}"
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('mac')">
</div>
<p class="col-sm-4" v-show="errors.has('mac')">
{{ errors.first('mac') }}
</p>
</div>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
@@ -534,9 +551,8 @@
<p class="card-text"> <p class="card-text">
<strong>{{ $t('notes') }}:</strong>&nbsp; <strong>{{ $t('notes') }}:</strong>&nbsp;
<span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp; <span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info" @click="initrecorderModelUpdate(recorderModel, 'notes')">
<font-awesome-icon <font-awesome-icon
@click="initrecorderModelUpdate(recorderModel, 'notes')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>

11
src/store.ts
View File

@@ -206,6 +206,13 @@ const actions = {
EventBus.$emit('failedRefreshingToken', error); EventBus.$emit('failedRefreshingToken', error);
}); });
}, },
resetToken(context: any) {
EventBus.$emit('resettingTokens');
Vue.$log.debug('Resetting tokens!');
context.commit('setTokens', {tokens: {access_token: '', refresh_token: ''}});
EventBus.$emit('tokensReset');
Vue.$log.debug('Tokens reset!');
},
storeTokens(context: any, tokens: any) { storeTokens(context: any, tokens: any) {
context.commit('setTokens', {tokens}); context.commit('setTokens', {tokens});
EventBus.$emit('storedTokens'); EventBus.$emit('storedTokens');
@@ -285,10 +292,10 @@ const mutations = {
}, },
setTokens(sState: any, payload: any) { setTokens(sState: any, payload: any) {
Vue.$log.debug('setTokens payload = ', payload); Vue.$log.debug('setTokens payload = ', payload);
if (payload.tokens.access_token) { if ('access_token' in payload.tokens) {
sState.access_token = payload.tokens.access_token; sState.access_token = payload.tokens.access_token;
} }
if (payload.tokens.refresh_token) { if ('refresh_token' in payload.tokens) {
sState.refresh_token = payload.tokens.refresh_token; sState.refresh_token = payload.tokens.refresh_token;
} }
Vue.$log.debug('access_token: ' + sState.access_token); Vue.$log.debug('access_token: ' + sState.access_token);