tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added rooms and recorders to fe

Browse Source
This commit is contained in:
Tobias
2019-04-24 16:35:36 +02:00
parent 4a97efce6f
commit a9c07b628d
10 changed files with 576 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

518
src/components/Recorders.vue
View File

@@ -1,189 +1,256 @@
<template>
<div>
<div class="container">
<section class="section">
<h1 class="title">{{ $t('Manage recorders and recorder models') }}</h1>
<p class="subtitle">
{{ $t('List, create, update and delete') }} <strong>{{ $t('recorders') }}</strong> and <strong>recorder models</strong>!
<h1 class="title">{{ $t('Manage recorders') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recorder models') }}
</p>
<hr>
<br/>
<h2 class="">{{ $t('Create recorder') }}</h2>
<!-- form starts here -->
<form v-on:submit.prevent="$log.debug(form)">
<section class="form">
<div class="field">
<label class="label">{{ $t('name') }}</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name')}"
class="input" type="text" placeholder="Full name">
</div>
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<b-tabs v-model="tabIndex" card justified>
<b-tab title="Recorder list" active>
<p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
<b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp;
<a class="float-right badge badge-pill badge-primary">
<font-awesome-icon icon="pencil-alt"/>
</a>
</h5>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;{{room.alternate_name}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a>
</p>
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;{{room.number}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></p>
<div class="field">
<label class="label">{{ $t('description') }}</label>
<div class="control">
<textarea class="textarea" placeholder="description of recorder"
v-model="form.description"></textarea>
</div>
</div>
<div class="field">
<label class="label">{{ $t('room') }}</label>
<div class="control">
<div class="select">
<select v-model="form.room">
<option disabled value="">No room selected</option>
<option v-for="option in options.room" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<p class="card-text">
<small><strong>{{ $t('comment') }}:</strong>&nbsp;{{room.comment}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></small>
</p>
<hr/>
<div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></p>
</div>
<div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p>
<div class="form-group row">
<div class="col-sm-8">
<select class="form-control" v-model="form.recorder">
<option disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<label class="label col-sm-4 col-form-label">{{ $t('recorder') }}</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
v-model="show_assigned_recorders" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Show already assigned recorders
</label>
</div>
</div>
</b-card-text>
<div slot="footer">
<small class="text-muted">
<button type="button" v-on:click="deleteRoom(room.id)" class="btn btn-sm btn-danger">{{
$t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/>
</button>
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
</small>
</div>
</div>
</div>
</b-card>
</b-card-group>
</b-tab>
<div class="field">
<label class="label">{{ $t('model') }}</label>
<div class="control">
<div class="select">
<select v-model="form.model">
<option disabled value="">No model selected</option>
<option v-for="option in options.model" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
</div>
<b-tab title="Create recorder">
<b-card-text>
<p>{{ $t('Create a new room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<section class="form">
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="Room name" required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="col-sm-6">
<input name="alternate_name"
v-model="form.alternate_name"
class="form-control" type="text" placeholder="Alternate name">
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6">
<input name="number"
v-model="form.number"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="Room number" required>
</div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
v-model="form.comment"></textarea>
</div>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
<div class="col-sm-6">
<select class="form-control" v-model="form.recorder">
<option disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="field">
<label class="label">LogRocket Usecases</label>
<div class="control">
<div class="select is-multiple">
<select multiple v-model="form.logrocket_usecases">
<option>Debugging</option>
<option>Fixing Errors</option>
<option>User support</option>
</select>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
type="submit"
class="btn btn-primary">
Create room
</button>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="form.terms">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
</section>
</form>
</b-card-text>
</b-tab>
<b-tab title="Recorder model list">
<template slot="title">
<font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<strong>Model</strong>&nbsp;<i>list</i>
</template>
</b-tab>
<b-tab title="Create recorder model">
<template slot="title">
<font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="plus"/>&nbsp;<i>create</i>&nbsp;Recorder&nbsp;<strong>Model</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<section class="form">
<div class="field">
<label>
<strong>What dev concepts are you interested in?</strong>
</label>
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="form.concepts"
value="promises">
Promises
</label>
<label class="checkbox">
<input type="checkbox" v-model="form.concepts"
value="testing">
Testing
</label>
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="Room name" required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="field">
<label><strong>Is JavaScript awesome?</strong></label>
<div class="control">
<label class="radio">
<input v-model="form.js_awesome" type="radio" value="Yes">
Yes
</label>
<label class="radio">
<input v-model="form.js_awesome" type="radio" value="Yeap!">
Yeap!
</label>
</div>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="col-sm-6">
<input name="alternate_name"
v-model="form.alternate_name"
class="form-control" type="text" placeholder="Alternate name">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
class="button is-primary">
Submit
</button>
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6">
<input name="number"
v-model="form.number"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="Room number" required>
</div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
</section>
</form>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
v-model="form.comment"></textarea>
</div>
</div>
<hr>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
<div class="col-sm-6">
<select class="form-control" v-model="form.recorder">
<option disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<h2 class="">{{ $t('Create recorder model') }}</h2>
<!-- form starts here -->
<form v-on:submit.prevent="$log.debug(form)">
<section class="form">
<div class="field">
<label class="label">{{ $t('model name') }}</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name')}"
class="input" type="text" placeholder="Full name">
</div>
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="field">
<label class="label">{{ $t('notes') }}</label>
<div class="control">
<textarea class="textarea" placeholder="Notes"
v-model="form.notes"></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
type="submit"
class="btn btn-primary">
Create room
</button>
</div>
</div>
<div class="field">
<label class="label">Recorder commands</label>
<div class="control">
<div class="select is-multiple">
<select multiple v-model="form.commands">
<option v-for="option in recorderCommands.options">
{{ option }}
</option>
</select>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
class="button is-primary">
Create
</button>
</div>
</div>
</section>
</form>
</section>
</form>
</b-card-text>
</b-tab>
</b-tabs>
</section>
<hr>
<div class="column">
<section class="section" id="results">
@@ -197,75 +264,112 @@
</div>
</section>
</div>
<div class="column">
<section class="section">
{{recorders}}
</section>
</div>
</div>
</template>
<script>
import {EventBus} from '@/utils';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import getRepository from '@/api/RepositoryFactory';
const RoomRepository = getRepository('room');
export default {
components: {
PulseLoader,
},
props: [],
data() {
return {
step: 'name',
name: '',
questions: [],
tabIndex: 0,
show_assigned_recorders: false,
form: {
name: '',
message: '',
inquiry_type: '',
logrocket_usecases: [],
terms: false,
concepts: [],
js_awesome: '',
alternate_name: '',
number: '',
comment: '',
recorder: null,
},
};
},
methods: {
appendQuestion(newQuestion) {
this.questions.push(newQuestion);
saveRoom() {
this.$parent.$data.isLoading = true;
RoomRepository.createRoom(this.form)
.then(() => {
this.$store.dispatch('loadRooms')
.then(() => {
this.$parent.$data.isLoading = false;
this.tabIndex = 0;
});
}).catch((msg) => {
this.showErrorMessage("Could not safe room!");
this.$log.warn(msg);
});
},
removeQuestion(question) {
const idx = this.questions.findIndex((q) => q.question === question.question);
this.questions.splice(idx, 1);
},
submitSurvey() {
this.$store.dispatch('submitNewSurvey', {
name: this.name,
questions: this.questions,
})
.then(() => this.$router.push('/'))
.catch((error) => {
this.$log.error('Error creating survey', error);
this.$router.push('/');
deleteRoom(id) {
this.$parent.$data.isLoading = true;
RoomRepository.deleteRoom(id)
.then(() => {
this.$store.dispatch('loadRooms')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
showErrorMessage(msg) {
this.$parent.$data.isLoading = false;
this.$parent.$data.showAlert = true;
this.$parent.$data.alertMessage = msg;
},
},
mounted() {
this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false;
this.$store.dispatch('loadRooms')
.then(() => {
this.$store.dispatch('loadRecorders')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
computed: {
options() {
return {
room: [
{value: 'audimax', text: 'AudiMax'},
{value: 'hmu', text: 'Unterer Hörsaal'},
{value: 'hmo', text: 'Oberer Hörsaal'},
],
model: [
{value: 'extron', text: 'extron'},
{value: 'smp', text: 'SMP'},
{value: 'smp2', text: 'SMP2'},
recorders: [
{value: 8, text: 'SMP 351 AudiMax'},
{value: 13, text: 'SMP 351 HMU'},
],
};
},
recorderCommands() {
return {
options: [
'reboot',
'reset',
'setStreamingProfile',
],
};
rooms() {
return this.$store.state.rooms;
},
recorders() {
return this.$store.state.recorders;
},
},
};
</script>
<style>
.comment {
white-space: pre-wrap;
}
.card:hover {
background-color: whitesmoke;
}
.required:after {
content: " *";
}
</style>