73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div v-if="authenticated">
|
|
<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"
|
|
@click="recorderSelected()">
|
|
<font-awesome-icon icon="check"/>
|
|
</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;
|
|
favorite_recorder_id = '';
|
|
|
|
get authenticated() {
|
|
return this.$store.getters.isAuthenticated;
|
|
}
|
|
|
|
get recorders() {
|
|
return this.$store.state.recorders;
|
|
}
|
|
|
|
mounted() {
|
|
this.$store.dispatch('loadProfile');
|
|
this.$store.dispatch('loadRecorders');
|
|
}
|
|
|
|
recorderSelected() {
|
|
this.$emit('recorderSelected', {'recorder_id': this.favorite_recorder_id});
|
|
}
|
|
}
|
|
</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>
|