added recorder status component and other stuff

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>