moved to bootstrap-vue, there is a bug in vee-validate and bootstrap-vue >rc15
This commit is contained in:
271
src/components/Recorders.vue
Normal file
271
src/components/Recorders.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div>
|
||||
<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>!
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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="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="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
v-bind:disabled="errors.any()"
|
||||
class="button is-primary">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
|
||||
<div class="column">
|
||||
<section class="section" id="results">
|
||||
<div class="box">
|
||||
<ul>
|
||||
<!-- loop through all the `form` properties and show their values -->
|
||||
<li v-for="(item, k) in form">
|
||||
<strong>{{ k }}:</strong> {{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
step: 'name',
|
||||
name: '',
|
||||
questions: [],
|
||||
form: {
|
||||
name: '',
|
||||
message: '',
|
||||
inquiry_type: '',
|
||||
logrocket_usecases: [],
|
||||
terms: false,
|
||||
concepts: [],
|
||||
js_awesome: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
appendQuestion(newQuestion) {
|
||||
this.questions.push(newQuestion);
|
||||
},
|
||||
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('/');
|
||||
});
|
||||
},
|
||||
},
|
||||
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'},
|
||||
],
|
||||
};
|
||||
},
|
||||
recorderCommands() {
|
||||
return {
|
||||
options: [
|
||||
'reboot',
|
||||
'reset',
|
||||
'setStreamingProfile',
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user