added permission repo and changes to recorder state, etc

package.json

@@ -20,7 +20,7 @@
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "node-sass": "^4.13.0",
-    "npm": "^6.9.0",
+    "npm": "^6.13.1",
     "npm-sass": "^2.3.0",
     "popper.js": "^1.15.0",
     "socket.io-client": "^2.3.0",

src/api/RepositoryFactory.ts

@@ -2,6 +2,8 @@
 
 import GroupRepository from './groupRepository';
 import UserRepository from './userRepository';
+import PermissionRepository from './permissionsRepository';
+
 import RoomRepository from './roomRepository';
 import RecorderRepository from './recorderRepository';
 import CommandRepository from './commandRepository';
@@ -21,6 +23,9 @@ export default function get(name: string) {
         case 'user': {
             return UserRepository;
         }
+        case 'permission': {
+            return PermissionRepository;
+        }
         case 'command': {
             return CommandRepository;
         }

src/api/permissionsRepository.ts

@@ -0,0 +1,20 @@
+// groupRepository.js
+
+// @ts-ignore
+import Repository from './Repository';
+
+const resource = '/permissions';
+
+export default {
+    getPermissions() {
+        return Repository.get(`${resource}`);
+    },
+
+    getGroup(permissionId: number) {
+        return Repository.get(`${resource}/${permissionId}`);
+    },
+
+    createGroup(permissionData: any) {
+        return Repository.post(`${resource}`, permissionData);
+    },
+};

src/api/userRepository.ts

@@ -9,19 +9,29 @@ import {dictEmptyValToNull} from '@/utils';
 const resource = '/user';
 
 export default {
-    getUsers() {
-        return Repository.get(`${resource}`);
-    },
+  getUsers() {
+    return Repository.get(`${resource}`);
+  },
 
-    getUser(userId: number) {
-        return Repository.get(`${resource}/${userId}`);
-    },
+  getUser(userId: number) {
+    return Repository.get(`${resource}/${userId}`);
+  },
 
-    createUser(userData: any) {
-        return Repository.post(`${resource}`, userData);
-    },
+  createUser(userData: any) {
+    return Repository.post(`${resource}`, userData);
+  },
 
-    updateProfile(userData: any) {
-        return Repository.put(`${resource}/profile`, dictEmptyValToNull(userData));
-    },
+  getProfile() {
+    return Repository.get(`${resource}/profile`);
+  },
+  updateProfile(userData: any) {
+    return Repository.put(`${resource}/profile`, dictEmptyValToNull(userData));
+  },
+  getFavoriteRecorders() {
+    return Repository.get(`${resource}/profile/favorite_recorders`);
+  },
+
+  addFavoriteRecorder(recorderId: any) {
+    return Repository.put(`${resource}/profile/favorite_recorders`, {id: recorderId});
+  },
 };

src/components/Admin.vue

@@ -9,6 +9,8 @@
                     <router-link :to="{ name: 'admin.group'}">{{ $t('group') }}</router-link>
                     <br>
                     <router-link :to="{ name: 'admin.user'}">{{ $t('user') }}</router-link>
+                    <br>
+                    <router-link :to="{ name: 'admin.permission'}">{{ $t('permission') }}</router-link>
                 </div>
             </div>
         </section>

src/components/Login.vue

@@ -69,6 +69,7 @@
                 redirectTarget: 'profile',
                 redirectTime: 5,
                 loginProviders: [],
+                redirect_interval: null,
             };
         },
         methods: {
@@ -118,11 +119,11 @@
                     if (this.$route.query.redirectionTarget) {
                         this.redirectTarget = this.$route.query.redirectionTarget;
                     }
-                    let interval = window.setInterval(() => {
+                    this.redirect_interval = window.setInterval(() => {
                         console.log(this.redirectTime);
                         this.redirectTime = this.redirectTime - 1;
                         if (this.redirectTime < 0) {
-                            clearInterval(interval);
+                            clearInterval(this.redirect_interval);
                             this.$router.push({name: this.redirectTarget});
                         }
                     }, 1000);
@@ -130,6 +131,7 @@
             });
         },
         beforeDestroy() {
+            clearInterval(this.redirect_interval);
             EventBus.$off('failedRegistering');
             EventBus.$off('failedAuthentication');
         },

src/components/Permission.vue

@@ -0,0 +1,250 @@
+<!-- components/Permission.vue -->
+<template>
+    <div>
+        <section class="hero is-primary">
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    <h2 class="title">Permissions</h2>
+
+
+                    <div id="permissionTable">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th v-for="col in permission_columns" v-on:click="sortTable(col)">{{col}}
+                                    <div class="arrow" v-if="col == sortColumn"
+                                         v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="row in get_permission_rows()">
+                                <td v-for="col in permission_columns">{{row[col]}}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <div class="pagination">
+                            <div class="number"
+                                 v-for="i in num_permission_pages()"
+                                 v-bind:class="[i == currentPage ? 'active' : '']"
+                                 v-on:click="change_page(i)">{{i}}
+                            </div>
+                        </div>
+                    </div>
+
+                    <p class="subtitle error-msg">{{ errorMsg }}</p>
+                    <h3 class="title">Add Permission</h3>
+                    <label>
+                        <input v-model="permission.name" placeholder="Permission name">
+                    </label>
+                    <p>Name is: {{ permission.name }}</p>
+                    <span>Multiline message is:</span>
+                    <p style="white-space: pre-line;">{{ permission.description }}</p>
+                    <br>
+                    <textarea v-model="permission.description" placeholder="Description for permission"></textarea>
+                    <button v-on:click="createPermission">{{$t('create_permission')}}</button>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const PermissionRepository = getRepository('permission');
+
+    export default {
+        data() {
+            return {
+                isLoading: false,
+                permissions: [],
+                errorMsg: '',
+                permission: {name: '', description: ''},
+                sortColumn: '',
+                currentPage: 1,
+                elementsPerPage: 5,
+            };
+        },
+        methods: {
+            fetch() {
+                this.isLoading = true;
+                // const { data } = await PermissionRepository.get();
+                PermissionRepository.getPermissions()
+                    .then((response) => {
+                        this.permissions = response.data;
+                        this.isLoading = false;
+                        this.$log.debug(response);
+                    });
+
+            },
+            get_permission_rows() {
+                const start = (this.currentPage - 1) * this.elementsPerPage;
+                const end = start + this.elementsPerPage;
+                return this.permissions.slice(start, end);
+            },
+            num_permission_pages() {
+                return Math.ceil(this.permissions.length / this.elementsPerPage);
+            },
+            change_page(page) {
+                this.currentPage = page;
+            },
+            sortTable(col) {
+                if (this.sortColumn === col) {
+                    this.ascending = !this.ascending;
+                } else {
+                    this.ascending = true;
+                    this.sortColumn = col;
+                }
+
+                const ascending = this.ascending;
+
+                this.permissions.sort((a, b) => {
+                    if (a[col] > b[col]) {
+                        return ascending ? 1 : -1;
+                    } else if (a[col] < b[col]) {
+                        return ascending ? -1 : 1;
+                    }
+                    return 0;
+                });
+            },
+            createPermission() {
+                this.$log.info('Creating new permission...');
+                PermissionRepository.createPermission(this.permission);
+                this.fetch();
+            },
+        },
+        mounted() {
+            this.fetch();
+        },
+        beforeDestroy() {
+            // todo....or not
+        },
+        computed: {
+            permission_columns() {
+                if (this.permissions.length === 0) {
+                    return [];
+                }
+                return Object.keys(this.permissions[0]);
+            },
+        },
+    };
+</script>
+
+<style lang="scss">
+    .error-msg {
+        color: red;
+        font-weight: bold;
+    }
+
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+
+    table th:hover {
+        background: #717699;
+    }
+
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+
+    table td:last-child {
+        border-right: none;
+    }
+
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    table {
+        font-family: 'Open Sans', sans-serif;
+        width: 750px;
+        border-collapse: collapse;
+        border: 3px solid #44475C;
+        margin: 10px 10px 0 10px;
+    }
+
+    table th {
+        text-transform: uppercase;
+        text-align: left;
+        background: #44475C;
+        color: #FFF;
+        cursor: pointer;
+        padding: 8px;
+        min-width: 30px;
+    }
+
+    table th:hover {
+        background: #717699;
+    }
+
+    table td {
+        text-align: left;
+        padding: 8px;
+        border-right: 2px solid #7D82A8;
+    }
+
+    table td:last-child {
+        border-right: none;
+    }
+
+    table tbody tr:nth-child(2n) td {
+        background: #D4D8F9;
+    }
+
+    .pagination {
+        font-family: 'Open Sans', sans-serif;
+        text-align: right;
+        width: 750px;
+        padding: 8px;
+    }
+
+    .arrow_down {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
+    }
+
+    .arrow_up {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
+    }
+
+    .arrow {
+        float: right;
+        width: 12px;
+        height: 15px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position-y: bottom;
+    }
+
+    .number {
+        display: inline-block;
+        padding: 4px 10px;
+        color: #FFF;
+        border-radius: 4px;
+        background: #44475C;
+        margin: 0px 5px;
+        cursor: pointer;
+    }
+
+    .number:hover, .number.active {
+        background: #717699;
+    }
+</style>

src/components/Profile.vue

@@ -65,6 +65,7 @@
                 </div>
             </div>
         </section>
+        {{profile}}
     </div>
 </template>
 

src/components/RecorderState.vue

@@ -5,11 +5,13 @@
         <b-card-text>
             <h5 class="card-title">
                 <strong>{{ $t('name') }}:&nbsp;{{recorder.name}}</strong>&nbsp
-                <router-link :to="{ name: 'recorders'}"> ({{$t('recorders')}}&nbsp
+
+                <!--<router-link :to="{ name: 'recorders'}"> ({{$t('recorders')}}&nbsp
                     <font-awesome-icon icon="external-link-alt"/>
                     )
-                </router-link>
+                </router-link>-->
             </h5>
+            <p v-if="recorder.offline">{{$t('recorder is in offline mode')}}!</p>
 
         </b-card-text>
         <div slot="footer">
@@ -33,8 +35,8 @@
 
         mounted() {
             this.$socket.client.on('connect', function(msg) {
-                console.log("We are connected!");
-                console.log(msg);
+                this.$log.debug("We are connected!");
+                this.$log.debug(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!
@@ -43,9 +45,10 @@
             });
             this.$log.info("mounted called");
             if (!this.$socket.connected) {
+                this.$log.info("connecting websocket...");
                 this.connectWebsocket();
                 this.connectedWebsocket = true;
-            };
+            }
 
         },
 
@@ -65,7 +68,7 @@
                 if (this.$socket.connected) {
                     this.$socket.client.disconnect();
                 }
-            }
+            },
         },
     }
 </script>

src/components/SelectRecorder.vue

@@ -1,15 +1,5 @@
 <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">
@@ -19,8 +9,9 @@
                     </option>
                 </select>
                 <b-input-group-append>
-                    <b-button  variant="outline-success">
-                        <font-awesome-icon icon="check"></font-awesome-icon>
+                    <b-button variant="outline-success"
+                              @click="recorderSelected()">
+                        <font-awesome-icon icon="check"/>
                     </b-button>
                 </b-input-group-append>
             </b-input-group>
@@ -38,22 +29,23 @@
   @Component
   export default class SelectRecorder extends Vue {
     @Prop() private msg!: string;
-    @Prop() private favorite_recorder_id!: string;
+    favorite_recorder_id = '';
 
     get authenticated() {
       return this.$store.getters.isAuthenticated;
     }
 
-    get profile() {
-      return this.$store.state.profile;
-    }
-
     get recorders() {
       return this.$store.state.recorders;
     }
 
-    private mounted() {
+    mounted() {
       this.$store.dispatch('loadProfile');
+      this.$store.dispatch('loadRecorders');
+    }
+
+    recorderSelected() {
+      this.$emit('recorderSelected', {'recorder_id': this.favorite_recorder_id});
     }
   }
 </script>

src/main.ts

@@ -21,20 +21,20 @@ import VueMoment from 'vue-moment';
 
 import {library} from '@fortawesome/fontawesome-svg-core';
 import {
-    faCoffee,
-    faDoorOpen,
-    faCheck,
-    faPlus,
-    faScroll,
-    faCircle,
-    faList,
-    faTrash,
-    faPencilAlt,
-    faCogs,
-    faAt,
-    faUser,
-    faEnvelope,
-    faUserTag, faExternalLinkAlt,
+  faCoffee,
+  faDoorOpen,
+  faCheck,
+  faPlus,
+  faScroll,
+  faCircle,
+  faList,
+  faTrash,
+  faPencilAlt,
+  faCogs,
+  faAt,
+  faUser,
+  faEnvelope,
+  faUserTag, faExternalLinkAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -48,19 +48,19 @@ 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, faExternalLinkAlt);
+  faUser, faEnvelope, faUserTag, faExternalLinkAlt);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 const options = {
-    isEnabled: true,
-    // logLevel : isProduction ? 'error' : 'debug',
-    logLevel: 'debug',
-    stringifyArguments: false,
-    showLogLevel: true,
-    showMethodName: true,
-    separator: '|',
-    showConsoleColors: true,
+  isEnabled: true,
+  // logLevel : isProduction ? 'error' : 'debug',
+  logLevel: 'debug',
+  stringifyArguments: false,
+  showLogLevel: true,
+  showMethodName: true,
+  separator: '|',
+  showConsoleColors: true,
 };
 
 Vue.use(VueLogger, options);
@@ -73,7 +73,11 @@ Vue.use(VeeValidate);
 Vue.use(VueMoment);
 
 // const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
-const socket = io('ws://localhost:5443',{autoConnect: false, reconnectionAttempts: 3});
+const socket = io('ws://localhost:5443', {
+  autoConnect: false,
+  reconnectionAttempts: 3,
+  query: {jwt: store.state.access_token}
+});
 Vue.use(VueSocketIOExt, socket);
 
 
@@ -87,12 +91,12 @@ Vue.config.productionTip = false;
 
 // @ts-ignore
 String.prototype.isEmpty = function() {
-    return (this.length === 0 || !this.trim());
+  return (this.length === 0 || !this.trim());
 };
 
 new Vue({
-    i18n,
-    router,
-    store,
-    render: (h) => h(App),
+  i18n,
+  router,
+  store,
+  render: (h) => h(App),
 }).$mount('#app');

src/router.ts

@@ -10,6 +10,7 @@ import Profile from '@/components/Profile.vue';
 import User from '@/components/User.vue';
 import Test from '@/components/Test.vue';
 import Group from '@/components/Group.vue';
+import Permission from '@/components/Permission.vue';
 import Rooms from '@/components/Rooms.vue';
 import Recorders from '@/components/Recorders.vue';
 import Commands from '@/components/Commands.vue';
@@ -48,6 +49,11 @@ export const router = new Router({
                     path: 'group',
                     component: Group,
                 },
+                {
+                    name: 'admin.permission',
+                    path: 'permission',
+                    component: Permission,
+                },
             ],
         },
         {

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>