added commands.vue
This commit is contained in:
Tobias Kurze
402
src/components/Commands.vue
Normal file
402
src/components/Commands.vue
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<section class="section">
|
||||||
|
|
||||||
|
|
||||||
|
<h1 class="title">{{ $t('Manage Commands') }}</h1>
|
||||||
|
<p class="lead">
|
||||||
|
{{ $t('List, create and delete') }} <strong>{{ $t('commands') }}</strong>
|
||||||
|
</p>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<b-tabs v-model="tabIndex" card>
|
||||||
|
<b-tab title="Command list" active>
|
||||||
|
<template slot="title">
|
||||||
|
<font-awesome-icon icon="list"/> <font-awesome-icon icon="door-open"/>
|
||||||
|
<strong>command</strong> <i>list</i>
|
||||||
|
</template>
|
||||||
|
<p>{{ $t('There are')}} {{commands.length}} {{ $t('commands defined')}}:</p>
|
||||||
|
<b-card-group deck>
|
||||||
|
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(command) in commands"
|
||||||
|
:header="command.name + ' (' +command.number+ ')'" v-bind:key="command.id">
|
||||||
|
<b-card-text>
|
||||||
|
<h5 class="card-title">{{ $t('name') }}:
|
||||||
|
<span v-if="!formEditField[command.id+'_name']">{{command.name}}
|
||||||
|
<a class="float-right badge badge-pill badge-primary">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initcommandUpdate(command, 'name')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-input-group v-else>
|
||||||
|
<b-form-input :id="command.id+'_name'" name="name"
|
||||||
|
v-model="updateValues[command.id+'_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="'Name ('+command.name +')'"
|
||||||
|
required></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button :disabled="errors.has('name')"
|
||||||
|
@click="updatecommand(command.id, 'name')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</h5>
|
||||||
|
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>
|
||||||
|
<span v-if="!formEditField[command.id+'_alternate_name']">{{command.alternate_name}}
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initcommandUpdate(command, 'alternate_name')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-input-group v-else size="sm">
|
||||||
|
<b-form-input name="alternate_name"
|
||||||
|
v-model="updateValues[command.id+'_alternate_name']"
|
||||||
|
class="form-control" type="text"
|
||||||
|
:placeholder="'Alternate name ('+command.alternate_name +')'"
|
||||||
|
@blur="updatecommand(command.id, 'alternate_name')"
|
||||||
|
@keyup.enter="updatecommand(command.id, 'alternate_name')"></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button :disabled="errors.has('alternate_name')"
|
||||||
|
@click="updatecommand(command.id, 'alternate_name')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</p>
|
||||||
|
<p class="card-text"><strong>{{ $t('command_number') }}:</strong>
|
||||||
|
<span v-if="!formEditField[command.id+'_number']">{{command.number}}
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initcommandUpdate(command, 'number')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-input-group v-else size="sm">
|
||||||
|
<b-form-input name="number"
|
||||||
|
v-model="updateValues[command.id+'_number']"
|
||||||
|
v-validate="'required|min:3'"
|
||||||
|
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||||
|
class="form-control" type="text"
|
||||||
|
:placeholder="'command number ('+command.number +')'"
|
||||||
|
@blur="updatecommand(command.id, 'number')"
|
||||||
|
@keyup.enter="updatecommand(command.id, 'number')"
|
||||||
|
required></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button :disabled="errors.has('number')"
|
||||||
|
@click="updatecommand(command.id, 'number')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</p>
|
||||||
|
<p class="card-text">
|
||||||
|
<small><strong>{{ $t('comment') }}:</strong>
|
||||||
|
<span v-if="!formEditField[command.id+'_comment']">{{command.comment}}
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initcommandUpdate(command, 'comment')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<textarea class="textarea form-control" v-else name="comment"
|
||||||
|
v-model="updateValues[command.id+'_comment']"
|
||||||
|
:placeholder="'Comment ('+command.comment +')'"
|
||||||
|
@blur="updatecommand(command.id, 'comment')"></textarea>
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
<hr/>
|
||||||
|
<span v-if="!formEditField[command.id+'_recorder_id']">{{command.recorder_id}}
|
||||||
|
<div v-if="command.recorder">
|
||||||
|
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{command.recorder.name}}
|
||||||
|
({{command.recorder.ip}}) / ({{command.recorder.network_name}})
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||||
|
$t('no_recorder_defined')}}</p>
|
||||||
|
</div>
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initcommandUpdate(command, 'recorder_id')" icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-form v-else>
|
||||||
|
<b-input-group>
|
||||||
|
<select class="form-control" v-model="updateValues[command.id+'_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 :disabled="errors.has('recorder_id')"
|
||||||
|
@click="updatecommand(command.id, 'recorder_id')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</b-form>
|
||||||
|
|
||||||
|
</b-card-text>
|
||||||
|
<div slot="footer">
|
||||||
|
<small class="text-muted">
|
||||||
|
<p>{{ $t('created')}}: {{command.created_at | moment("dddd, MMMM Do YYYY")}}
|
||||||
|
<span class="pull-right">
|
||||||
|
<button type="button" v-on:click="deletecommand(command.id)"
|
||||||
|
class="btn btn-sm btn-danger">{{
|
||||||
|
$t('delete') }} <font-awesome-icon
|
||||||
|
icon="trash"/>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</b-card>
|
||||||
|
</b-card-group>
|
||||||
|
</b-tab>
|
||||||
|
|
||||||
|
<b-tab title="Create command">
|
||||||
|
<template slot="title">
|
||||||
|
<font-awesome-icon icon="plus"/>
|
||||||
|
<i>{{$t('create')}}</i> <font-awesome-icon icon="door-open"/>
|
||||||
|
<strong>{{$t('command')}}</strong>
|
||||||
|
</template>
|
||||||
|
<b-card-text>
|
||||||
|
<p>{{ $t('Create a new command')}}:</p>
|
||||||
|
<!-- form starts here -->
|
||||||
|
<form v-on:submit.prevent="savecommand()">
|
||||||
|
<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="command 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="command 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_id">
|
||||||
|
<option value="">No recorder selected</option>
|
||||||
|
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||||
|
{{ recorder.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
v-bind:disabled="errors.any()"
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary">
|
||||||
|
Create command
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</form>
|
||||||
|
</b-card-text>
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<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 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 commandRepository = getRepository('command');
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
PulseLoader,
|
||||||
|
},
|
||||||
|
props: [],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabIndex: 0,
|
||||||
|
updateValues: {},
|
||||||
|
formEditField: {},
|
||||||
|
show_assigned_recorders: false,
|
||||||
|
form: {
|
||||||
|
name: null,
|
||||||
|
alternate_name: null,
|
||||||
|
number: null,
|
||||||
|
comment: null,
|
||||||
|
recorder_id: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
savecommand() {
|
||||||
|
this.$parent.$data.isLoading = true;
|
||||||
|
commandRepository.createcommand(this.form)
|
||||||
|
.then(() => {
|
||||||
|
this.$store.dispatch('loadcommands')
|
||||||
|
.then(() => {
|
||||||
|
this.$parent.$data.isLoading = false;
|
||||||
|
this.tabIndex = 0;
|
||||||
|
});
|
||||||
|
}).catch((msg) => {
|
||||||
|
this.showErrorMessage('Could not safe command!');
|
||||||
|
this.$log.warn(msg);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initcommandUpdate(command, fieldName) {
|
||||||
|
this.$set(this.formEditField, command.id + '_' + fieldName, true);
|
||||||
|
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
|
||||||
|
},
|
||||||
|
updatecommand(id, fieldName) {
|
||||||
|
this.$parent.$data.isLoading = true;
|
||||||
|
const data = {};
|
||||||
|
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||||
|
commandRepository.updatecommand(id, data)
|
||||||
|
.then(() => {
|
||||||
|
this.$store.dispatch('loadcommands')
|
||||||
|
.then(() => {
|
||||||
|
this.$parent.$data.isLoading = false;
|
||||||
|
this.formEditField[id + '_' + fieldName] = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deletecommand(id) {
|
||||||
|
this.$parent.$data.isLoading = true;
|
||||||
|
commandRepository.deletecommand(id)
|
||||||
|
.then(() => {
|
||||||
|
this.$store.dispatch('loadcommands')
|
||||||
|
.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('loadcommands')
|
||||||
|
.then(() => {
|
||||||
|
this.$store.dispatch('loadRecorders')
|
||||||
|
.then(() => {
|
||||||
|
this.$parent.$data.isLoading = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
options() {
|
||||||
|
return {
|
||||||
|
recorders: [
|
||||||
|
{value: 8, text: 'SMP 351 AudiMax'},
|
||||||
|
{value: 13, text: 'SMP 351 HMU'},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
commands() {
|
||||||
|
return this.$store.state.commands;
|
||||||
|
},
|
||||||
|
recorders() {
|
||||||
|
return this.$store.state.recorders;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.comment {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required:after {
|
||||||
|
content: " *";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -269,6 +269,120 @@
|
|||||||
<font-awesome-icon icon="list"/> Recorder <font-awesome-icon icon="scroll"/>
|
<font-awesome-icon icon="list"/> Recorder <font-awesome-icon icon="scroll"/>
|
||||||
<strong>Model</strong> <i>list</i>
|
<strong>Model</strong> <i>list</i>
|
||||||
</template>
|
</template>
|
||||||
|
<p>{{ $t('There are')}} {{recorderModels.length}} {{ $t('recorder models defined')}}:</p>
|
||||||
|
<b-card-group deck>
|
||||||
|
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorderModel) in recorderModels"
|
||||||
|
:header="recorderModel.name"
|
||||||
|
v-bind:key="recorderModel.id">
|
||||||
|
{{recorderModel}}
|
||||||
|
<b-card-text>
|
||||||
|
<h5 class="card-title">{{ $t('model_name') }}:
|
||||||
|
<span v-if="!formEditField['model_'+recorderModel.id+'_model_name']">{{recorderModel.model_name}}
|
||||||
|
<a class="float-right badge badge-pill badge-primary">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initRecorderModelUpdate(recorderModel, 'model_name')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-input-group v-else>
|
||||||
|
<b-form-input :id="recorderModel.id+'_model_name'" name="model_name"
|
||||||
|
v-model="updateValues[recorderModel.id+'_model_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="'Model Name ('+recorderModel.model_name +')'"
|
||||||
|
required></b-form-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button :disabled="errors.has('model_name')"
|
||||||
|
@click="updateRecorder(recorderModel.id, 'model_name')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
<small><strong>{{ $t('notes') }}:</strong>
|
||||||
|
<span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initrecorderModelUpdate(room, 'notes')"
|
||||||
|
icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<textarea class="textarea form-control" v-else name="notes"
|
||||||
|
v-model="updateValues['model_'+recorderModel.id+'_notes']"
|
||||||
|
:placeholder="'Notes ('+recorderModel.notes +')'"
|
||||||
|
@blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}
|
||||||
|
<div v-if="room.recorder">
|
||||||
|
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{room.recorder.name}}
|
||||||
|
({{room.recorder.ip}}) / ({{room.recorder.network_name}})
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||||
|
$t('no_recorder_defined')}}</p>
|
||||||
|
</div>
|
||||||
|
<a class="float-right badge badge-pill badge-info">
|
||||||
|
<font-awesome-icon
|
||||||
|
@click="initRoomUpdate(room, 'recorder_id')" icon="pencil-alt"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<b-form v-else>
|
||||||
|
<b-input-group>
|
||||||
|
<b-form-group>
|
||||||
|
<b-form-checkbox-group v-model="updateValues['model_'+room.id+'_recorder_command_ids']">
|
||||||
|
<b-form-checkbox v-for="recorderCommand in recorderCommands"
|
||||||
|
v-bind:value="recorderCommand.id">{{recorderCommand.name}}</b-form-checkbox>
|
||||||
|
<b-form-checkbox value="that">Check that out</b-form-checkbox>
|
||||||
|
</b-form-checkbox-group>
|
||||||
|
</b-form-group>
|
||||||
|
<select class="form-control" v-model="updateValues[room.id+'_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 :disabled="errors.has('recorder_id')"
|
||||||
|
@click="updateRoom(room.id, 'recorder_id')"
|
||||||
|
variant="outline-success">
|
||||||
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</b-form>
|
||||||
|
|
||||||
|
|
||||||
|
</b-card-text>
|
||||||
|
<div slot="footer">
|
||||||
|
<small class="text-muted">
|
||||||
|
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}
|
||||||
|
<span class="pull-right">
|
||||||
|
<button type="button" v-on:click="deleteRecorder(recorder.id)"
|
||||||
|
class="btn btn-sm btn-danger">{{
|
||||||
|
$t('delete') }} <font-awesome-icon
|
||||||
|
icon="trash"/>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</b-card>
|
||||||
|
</b-card-group>
|
||||||
</b-tab>
|
</b-tab>
|
||||||
<b-tab title="Create recorder model">
|
<b-tab title="Create recorder model">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
@@ -277,10 +391,62 @@
|
|||||||
<strong>Model</strong>
|
<strong>Model</strong>
|
||||||
</template>
|
</template>
|
||||||
<b-card-text>
|
<b-card-text>
|
||||||
<p>{{ $t('Create a new recorder')}}:</p>
|
<p>{{ $t('Create a new recorder model')}}:</p>
|
||||||
<!-- form starts here -->
|
<!-- form starts here -->
|
||||||
<form v-on:submit.prevent="saveRecorder">
|
<form v-on:submit.prevent="saveRecorder()">
|
||||||
|
<section class="form">
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="label required col-sm-2 col-form-label">{{ $t('model_name') }}</label>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<input name="model_name"
|
||||||
|
v-model="form.model_name"
|
||||||
|
v-validate="'required|min:3'"
|
||||||
|
v-bind:class="{'is-danger': errors.has('model_name'), 'is-invalid': errors.has('model_name')}"
|
||||||
|
class="form-control" type="text" placeholder="Recorder Model name" required>
|
||||||
|
</div>
|
||||||
|
<p class="col-sm-4" v-show="errors.has('model_name')">
|
||||||
|
{{ errors.first('model_name') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="label col-sm-2 col-form-label">{{ $t('notes') }}</label>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<textarea class="textarea form-control"
|
||||||
|
placeholder="Comments, remarks, notes, etc."
|
||||||
|
v-model="form.notes"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="label col-sm-2 col-form-label">{{ $t('recorder_commands') }}</label>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<b-form-group>
|
||||||
|
<b-form-checkbox-group v-model="recorder_command_ids">
|
||||||
|
<b-form-checkbox v-for="recorderCommand in recorderCommands"
|
||||||
|
v-bind:value="recorderCommand.id">{{recorderCommand.name}}</b-form-checkbox>
|
||||||
|
<b-form-checkbox value="that">Check that out</b-form-checkbox>
|
||||||
|
</b-form-checkbox-group>
|
||||||
|
</b-form-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
v-bind:disabled="errors.any()"
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary">
|
||||||
|
Create recorder
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</b-card-text>
|
</b-card-text>
|
||||||
</b-tab>
|
</b-tab>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import User from '@/components/User.vue';
|
|||||||
import Group from '@/components/Group.vue';
|
import Group from '@/components/Group.vue';
|
||||||
import Rooms from '@/components/Rooms.vue';
|
import Rooms from '@/components/Rooms.vue';
|
||||||
import Recorders from '@/components/Recorders.vue';
|
import Recorders from '@/components/Recorders.vue';
|
||||||
|
import Commands from '@/components/Commands.vue';
|
||||||
import store from '@/store';
|
import store from '@/store';
|
||||||
|
|
||||||
Vue.use(Router);
|
Vue.use(Router);
|
||||||
@@ -69,7 +70,7 @@ export const router = new Router({
|
|||||||
}, {
|
}, {
|
||||||
path: '/commands',
|
path: '/commands',
|
||||||
name: 'commands',
|
name: 'commands',
|
||||||
component: Rooms,
|
component: Commands,
|
||||||
}, {
|
}, {
|
||||||
path: '/surveys',
|
path: '/surveys',
|
||||||
name: 'NewSurvey',
|
name: 'NewSurvey',
|
||||||
|
|||||||
Reference in New Issue
Block a user