added permission repo and changes to recorder state, etc

src/views/Home.vue

@@ -2,62 +2,76 @@
     <div class="home">
         <div class="container">
             <section class="section">
-
                 <HelloWorld v-if="!authenticated" msg="you are not authenticated!"/>
                 <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/>
+                    <p>{{$t('Add favorite recorder:')}}</p>
+                    <SelectRecorder @recorderSelected="addFavoriteRecorderToProfile"/>
 
                     <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"/>
+                        <hr/>
+                        <p>{{$t('Favorite recorders:')}}</p>
+                        <b-card-group deck>
+                            <RecorderState v-for="recorder in profile.favorite_recorders" :recorder="recorder"/>
+                        </b-card-group>
                     </div>
-
                 </div>
-
             </section>
         </div>
     </div>
 </template>
 
-<script lang="ts">
-  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';
+<script>
+    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';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const userRepository = getRepository('user');
+
+    @Component({
+        components: {
+            RecorderState,
+            SelectRecorder,
+            HelloWorld,
+        },
+    })
+    export default class Home extends Vue {
+        data() {
+            return {};
+        }
+
+        mounted() {
+            if (this.authenticated) {
+                if (this.profile == null || Object.keys(this.profile).length === 0) {
+                    this.$parent.$data.isLoading = true;
+                    this.$store.dispatch('loadProfile').then(() => {
+                        this.$parent.$data.isLoading = false;
+                    });
+                }
+            }
+        }
+
+        addFavoriteRecorderToProfile(recorder) {
+            console.log(recorder);
+            userRepository.addFavoriteRecorder(recorder["recorder_id"]).then(() => {
+                this.$store.dispatch('loadProfile');
+            });
+        }
+
+        get authenticated() {
+            return this.$store.getters.isAuthenticated;
+        }
+
+        get profile() {
+            return this.$store.state.profile;
+        }
 
-  @Component({
-    components: {
-      RecorderState,
-      SelectRecorder,
-      HelloWorld,
-    },
-  })
-  export default class Home extends Vue {
-    public data() {
-      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;
-    }
-
-  }
 </script>
 
 <style>