working websocket communication for recorder states and added recorder.vue

2019-12-11 08:32:08 +01:00
parent 6b7b9f8f09
commit 770942542f
6 changed files with 215 additions and 10 deletions
--- a/src/components/Recorder.vue
+++ b/src/components/Recorder.vue
@@ -0,0 +1,124 @@
+<!-- components/Profile.vue -->
+<template>
+    <div>
+        <section class="hero is-primary">
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    <div class="clearfix">
+                        ID: {{recorder_id}}
+                        <b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
+                               alt="Left image"></b-img>
+                        <h2 class="title" v-if="recorder.name">{{recorder.name}}</h2>
+                        <h2 class="title" v-else-if="recorder.name">
+                            {{recorder.name}}&nbsp;{{recorder.name}}</h2>
+                        <h2 class="title" v-else>{{recorder.name}}</h2>
+
+                        <p>
+                            <font-awesome-icon icon="envelope"/>&nbsp;{{recorder.name}}
+                            <a class="badge badge-pill badge-info">
+                            <font-awesome-icon icon="pencil-alt"/></a>
+                        </p>
+
+
+                    </div>
+
+                    <hr/>
+
+                    <p><strong>{{$t('first_name')}}:&nbsp</strong>{{recorder.name}}</p>
+                    <p><strong>{{$t('last_name')}}:&nbsp</strong>{{recorder.name}}</p>
+
+
+                </div>
+            </div>
+        </section>
+        {{recorder}}
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+    import {getRemainingJwtValiditySeconds} from '../utils';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const userRepository = getRepository('user');
+
+    export default {
+        props: ['recorder_id'],
+        data() {
+            return {
+                email: '',
+                errorMsg: '',
+                tokenValidity: -1,
+                refreshTokenValidity: -1,
+                formEditField: {},
+                languages: [
+                    {flag: 'us', language: 'en', title: 'English'},
+                    {flag: 'es', language: 'es', title: 'Español'},
+                    {flag: 'de', language: 'de', title: 'Deutsch'},
+                ],
+                form: {
+                    first_name: '',
+                    last_name: '',
+                    nickname: '',
+                    email: '',
+                },
+            };
+        },
+        methods: {
+            authenticate() {
+                this.$store.dispatch('login', {email: this.email, password: this.password})
+                    .then(() => this.$router.push('/'));
+            },
+            updateProfile(fieldName) {
+                this.$parent.$data.isLoading = true;
+                this.$set(this.formEditField, fieldName, false);
+                const data = {};
+                data[fieldName] = this.form[fieldName];
+                this.$log.debug(this.form);
+                userRepository.updateProfile(data)
+                    .then(() => {
+                        this.$store.dispatch('loadProfile')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                            });
+                    });
+            },
+            changeLocale(locale) {
+                this.$i18n.locale = locale;
+                // Vue.$moment.locale(locale);
+            },
+        },
+        mounted() {
+            console.log('recorder_id: ' + this.id);
+            this.$store.dispatch('loadRecorders');
+            this.$store.dispatch('loadRecorderModels');
+        },
+        beforeDestroy() {
+            EventBus.$off('failedLoadingProfile');
+        },
+        computed: {
+            recorder() {
+                return this.$store.state.recorders;
+            },
+            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>