added recordermodel.vue and other stuff related to backend address

src/App.vue

@@ -87,12 +87,12 @@
                 </b-collapse>
             </b-navbar>
 
-            <span v-if="tokenValidity">({{$t('Session will timeout in: ')}}{{tokenValidity}})</span>
+            <span v-if="tokenValidity">({{$t('Session_timeout_in')}}:{{tokenValidity}})</span>
-            <span v-else>{{$t('Session has expired!')}} <a v-if="refreshTokenValidity" href="~"
+            <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>

src/components/Login.vue

@@ -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">

src/components/RecorderModel.vue

@@ -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>

src/components/Recorders.vue

@@ -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;

src/components/Test.vue

@@ -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>

src/main.ts

@@ -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},

src/plugins/i18n.ts

@@ -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',

src/router.ts

@@ -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',

src/views/Home.vue

@@ -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;