added recorder status component and other stuff

src/App.vue

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

src/components/HelloWorld.vue

@@ -1,6 +1,16 @@
 <template>
-  <div class="hello">
+    <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') }}
@@ -8,9 +18,12 @@
             </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-babel" target="_blank"
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+                       rel="noopener">babel</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>
+                <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>
@@ -24,36 +37,45 @@
             <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://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
+  @Component
-export default class HelloWorld extends Vue {
+  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 {
+    h3 {
         margin: 40px 0 0;
-}
+    }
-ul {
+
+    ul {
         list-style-type: none;
         padding: 0;
-}
+    }
-li {
+
+    li {
         display: inline-block;
         margin: 0 10px;
-}
+    }
-a {
+
+    a {
         color: #42b983;
-}
+    }
 </style>

src/components/Profile.vue

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

src/components/RecorderState.vue

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

src/components/SelectRecorder.vue

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

src/main.ts

@@ -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',);
+// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
-console.log(socket.nsp);
+const socket = io('ws://localhost:5443',{autoConnect: false, reconnectionAttempts: 3});
-
-
 Vue.use(VueSocketIOExt, socket);
 
 

src/plugins/i18n.ts

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

src/store.ts

@@ -313,10 +313,20 @@ const getters = {
   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
+        permission.name === requested_permission;
       });
     };
   },

src/views/Home.vue

@@ -1,9 +1,26 @@
 <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 v-if="!authenticated" msg="you are not authenticated!"/>
-        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+                <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>
 
@@ -11,17 +28,33 @@
   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 {
+      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;
     }
 
   }