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

added recordermodel.vue and other stuff related to backend address

Browse Source
This commit is contained in:
Tobias Kurze
2020-08-13 09:02:01 +02:00
parent bdd0b9cfd0
commit aefb7a84ca
9 changed files with 173 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -87,12 +87,12 @@
</b-collapse>
</b-navbar>
<span v-if="tokenValidity">({{$t('Session will timeout in: ')}}{{tokenValidity}})</span>
<span v-else>{{$t('Session has expired!')}} <a v-if="refreshTokenValidity" href="~"
<span v-if="tokenValidity">({{$t('Session_timeout_in')}}:{{tokenValidity}})</span>
<span v-else>{{$t('Session_expired')}}: <a v-if="refreshTokenValidity" href="~"
@click.prevent="refreshToken()">{{$t('Click here to refresh session')}}</a></span>
<span v-if="refreshTokenValidity">&nbsp;|&nbsp;({{refreshTokenValidity}})
<input type="checkbox" id="auto_renew_cb" v-model="autoRenewSession">
<label for="auto_renew_cb">{{$t('auto renew session')}}</label>
<label for="auto_renew_cb">{{$t('auto_renew_session')}}</label>
</span>
<span v-else>{{$t('Can\'t renew session – please login again!')}}</span>
</div>

4
src/components/Login.vue
View File

@@ -45,7 +45,7 @@
<div class="field">
<label class="label is-large" for="password">Password:</label>
<div class="control">
<input type="password" class="input is-large" id="password" v-model="password">
<input type="password" name="current-password" class="input is-large" id="password" v-model="password" autocomplete="on">
</div>
</div>
@@ -78,8 +78,10 @@
>
<b-form-input
id="text-password"
name="current-password"
v-model="regPassword"
type="password"
autocomplete="on"
required
aria-describedby="password-help-block"></b-form-input>
<b-form-text id="password-help-block">

134
src/components/RecorderModel.vue Normal file
View File

@@ -0,0 +1,134 @@
<!-- components/RecorderModel.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h3>
<div class="text-center">
<font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousRecorderModel()"/>
<input type="number" style="font-size: small; max-width: 48px; text-align: center;"
v-model="new_recorder_model_id" @blur="manually_set_recorder_model_id()"
@input="manually_set_recorder_model_id()">
<font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextRecorderModel()"/>
</div>
</h3>
<div class="clearfix">
<!--Route params: {{$route.params.recorder_id}}-->
<b-img left style="margin-right: 20px;" src="https://picsum.photos/164/164/?image=58"
alt="Left image"></b-img>
<h2 class="title">
&nbsp;{{recorderModel.name}}
</h2>
</div>
<strong>{{$t('created_at')}}:&nbsp</strong>{{recorderModel.created_at}}<br/>
<strong>{{$t('last_time_modified')}}:&nbsp</strong>{{recorderModel.last_time_modified}}<br/>
</div>
</div>
</section>
</div>
</template>
<script>
import {EventBus} from '@/utils';
import getRepository from '@/api/RepositoryFactory';
const controlRepository = getRepository('control');
export default {
props: ['recorder_model_id'],
data() {
return {
current_recorder_model_id: this.recorder_model_id == null ? 1 : parseInt(this.recorder_model_id),
current_recorder_model_index: null,
new_recorder_model_id: this.current_recorder_model_id,
};
},
methods: {
manually_set_recorder_model_id() {
if (this.new_recorder_model_id == null || this.new_recorder_model_id === '') {
this.new_recorder_model_id = this.current_recorder_model_id;
return;
}
if (this.recorderModelIds.includes(parseInt(this.new_recorder_model_id))) {
this.current_recorder_model_id = parseInt(this.new_recorder_model_id);
}
this.new_recorder_model_id = this.current_recorder_model_id;
},
calculate_current_recorder_model_index() {
this.current_recorder_model_index = this.recorderModelIds.findIndex((id) => {
return id === this.current_recorder_model_id
});
},
previousRecorderModel() {
if (null == this.current_recorder_model_index) {
this.calculate_current_recorder_model_index();
}
if (this.current_recorder_model_index === 0) this.current_recorder_model_index = this.recorderModelIds.length - 1;
else this.current_recorder_model_index = this.current_recorder_model_index - 1;
this.current_recorder_model_id = this.recorderModelIds[this.current_recorder_model_index];
this.new_recorder_model_id = this.current_recorder_model_id;
},
nextRecorderModel() {
if (null == this.current_recorder_model_index) {
this.calculate_current_recorder_model_index();
}
if (this.current_recorder_model_index === this.recorderModelIds.length - 1) this.current_recorder_model_index = 0;
else this.current_recorder_index = this.current_recorder_model_index + 1;
this.current_recorder_model_id = this.recorderModelIds[this.current_recorder_model_index];
this.new_recorder_model_id = this.current_recorder_model_id;
},
},
mounted() {
this.$store.dispatch('loadRecorderModels');
},
beforeDestroy() {
EventBus.$off('failedLoadingRecorderModels');
},
computed: {
recorderModelIds() {
let ids = [];
this.recorderModels.forEach((elem) => {
ids.push(parseInt(elem.id));
});
return ids;
},
recorderModel() {
const recorderModel = this.$store.state.recorderModels.filter((item) => {
return parseInt(item.id) === this.current_recorder_model_id;
});
if (recorderModel.length < 1) {
this.$router.replace({name: 'notFound'});
return {};
}
return recorderModel.shift();
},
recorderModels() {
return this.$store.state.recorderModels;
},
access_token() {
return this.$store.state.access_token;
},
},
};
</script>
<style lang="scss">
.error-msg {
color: red;
font-weight: bold;
}
.lang-btn {
padding: 15px;
border: 2px solid green;
font-size: 18px;
margin: 15px;
}
</style>

5
src/components/Recorders.vue
View File

@@ -592,8 +592,11 @@
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
v-for="(recorderModel) in recorderModels"
:header="recorderModel.name"
v-bind:key="recorderModel.id">
<template v-slot:header>
<router-link :to="{name: 'recorder_model', params: {recorder_model_id: recorderModel.id}}">
<h4>{{recorderModel.name}}</h4></router-link>
</template>
<b-card-text>
<p class="card-text">
<strong>{{ $t('notes') }}:</strong>&nbsp;

7
src/components/Test.vue
View File

@@ -4,6 +4,8 @@
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
{{api}}
{{api1}}
<b-alert
:show="dismissCountDown"
dismissible
@@ -41,6 +43,7 @@
<script>
import {EventBus} from '@/utils';
import { API_V1_URL, API_URL } from '@/main.ts'
export default {
data() {
@@ -48,6 +51,8 @@
email: '',
dismissSecs: 5,
dismissCountDown: 0,
api: API_URL,
api1: API_V1_URL,
};
},
@@ -95,7 +100,7 @@
},
access_token() {
return this.$store.state.access_token;
},
}
},
};
</script>

12
src/main.ts
View File

@@ -120,15 +120,23 @@ localize('de', de);
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);
let baseDomain = "";
let wsURL = "";
if(process.env.NODE_ENV == "development"){
baseDomain = "http://localhost:5443";
wsURL = "ws://localhost:5443";
}
//const API_URL = 'http://localhost:5443/api';
//const baseDomain = "http://localhost:5443";
const baseDomain = "";
export const API_URL = `${baseDomain}/api`;
export const API_V1_URL = `${baseDomain}/api/v1`;
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
const socket = io('ws://localhost:5443', {
const socket = io(wsURL, {
autoConnect: false,
reconnectionAttempts: 3,
query: {jwt: store.state.access_token},

6
src/plugins/i18n.ts
View File

@@ -89,6 +89,9 @@ const messages = {
model_name: 'Modellname',
created_at: 'Erstellt um',
last_time_modified: 'Letzter Änderungszeitpunkt',
Session_timeout_in: 'Session läuft ab in',
Session_expired: 'Session ist abgelaufen',
auto_renew_session: 'Session automatisch erneuern',
},
en: {
welcomeMsg: 'Welcome to Your Vue.js + TypeScript App',
@@ -163,6 +166,9 @@ const messages = {
requires_password: 'requires password',
ssh_port: 'SSH Port',
telnet_port: 'Telnet Port',
Session_timeout_in: 'Session will timeout in',
Session_expired: 'Session has expired',
auto_renew_session: 'auto renew session',
},
es: {
welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',

6
src/router.ts
View File

@@ -16,6 +16,7 @@ import Permission from '@/components/Admin/Permission.vue';
import Rooms from '@/components/Rooms.vue';
import Recorders from '@/components/Recorders.vue';
import Recorder from '@/components/Recorder.vue';
import RecorderModel from '@/components/RecorderModel.vue';
import Commands from '@/components/Commands.vue';
import store from '@/store';
@@ -96,6 +97,11 @@ export const router = new Router({
name: 'recorder',
props: true,
component: Recorder,
}, {
path: '/recorder_model/:recorder_model_id?',
name: 'recorder_model',
props: true,
component: RecorderModel,
}, {
path: '/test',
name: 'test',

1
src/views/Home.vue
View File

@@ -51,6 +51,7 @@
}
mounted() {
console.log(process.env.NODE_ENV);
if (this.authenticated) {
if (this.profile == null || Object.keys(this.profile).length === 0) {
this.$parent.$data.isLoading = true;