command repository added and a lot of other changes
This commit is contained in:
Tobias Kurze
@@ -4,6 +4,7 @@ import GroupRepository from './groupRepository';
|
||||
import UserRepository from './userRepository';
|
||||
import RoomRepository from './roomRepository';
|
||||
import RecorderRepository from './recorderRepository';
|
||||
import CommandRepository from './commandRepository';
|
||||
|
||||
|
||||
export default function get(name: string) {
|
||||
@@ -20,6 +21,9 @@ export default function get(name: string) {
|
||||
case 'user': {
|
||||
return UserRepository;
|
||||
}
|
||||
case 'command': {
|
||||
return CommandRepository;
|
||||
}
|
||||
default: {
|
||||
// statements;
|
||||
break;
|
||||
|
||||
30
src/api/commandRepository.ts
Normal file
30
src/api/commandRepository.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
// groupRepository.ts
|
||||
|
||||
// @ts-ignore
|
||||
import Repository from './Repository';
|
||||
|
||||
const commandResource = '/command';
|
||||
|
||||
import {dictEmptyValToNull} from '@/utils';
|
||||
|
||||
export default {
|
||||
getCommands() {
|
||||
return Repository.get(`${commandResource}`);
|
||||
},
|
||||
|
||||
getCommand(commandId: number) {
|
||||
return Repository.get(`${commandResource}/${commandId}`);
|
||||
},
|
||||
|
||||
deleteCommand(commandId: number) {
|
||||
return Repository.delete(`${commandResource}/${commandId}`);
|
||||
},
|
||||
|
||||
createCommand(commandData: any) {
|
||||
return Repository.post(`${commandResource}`, dictEmptyValToNull(commandData));
|
||||
},
|
||||
|
||||
updateCommand(commandId: number, commandData: any) {
|
||||
return Repository.put(`${commandResource}/${commandId}`, dictEmptyValToNull(commandData));
|
||||
},
|
||||
};
|
||||
@@ -12,157 +12,77 @@
|
||||
<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"/>
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="cogs"/>
|
||||
<strong>command</strong> <i>list</i>
|
||||
</template>
|
||||
<p>{{ $t('There are')}} {{commands.length}} {{ $t('commands defined')}}:</p>
|
||||
<p>{{ $t('There are')}} {{commands.length}} {{ $t('recorder 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">
|
||||
:header="command.name + ' (' +command.recorder_model.name+ ')'" v-bind:key="command.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}:
|
||||
<span v-if="!formEditField[command.id+'_name']">{{command.name}}
|
||||
<span>{{command.name}} </span>
|
||||
</h5>
|
||||
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('alternative_name') }}:</strong>
|
||||
<span v-if="!formEditField[command.id+'_alternative_name']">{{command.alternative_name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initcommandUpdate(command, 'name')"
|
||||
@click="initRecCommandUpdate(command, 'alternative_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>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="command.id+'_alternative_name'" name="alternative_name"
|
||||
v-model="updateValues[command.id+'_alternative_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('alternative_name'), 'is-invalid': errors.has('alternative_name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Alternative name ('+command.alternative_name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('alternative_name')"
|
||||
@click="updateRecCommand(command.id, 'alternative_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</small>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong>
|
||||
<span v-if="!formEditField[command.id+'_comment']">{{command.comment}}
|
||||
<small><strong>{{ $t('description') }}:</strong>
|
||||
<span v-if="!formEditField[command.id+'_description']">{{command.description}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initcommandUpdate(command, 'comment')"
|
||||
@click="initRecCommandUpdate(command, 'description')"
|
||||
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>
|
||||
v-model="updateValues[command.id+'_description']"
|
||||
:placeholder="'Comment ('+command.description +')'"
|
||||
@blur="updateRecCommand(command.id, 'description')"></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}})</p>
|
||||
|
||||
<div v-if="command.recorder_model">
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }} {{ $t('model') }}:</strong> {{command.recorder_model.name}} </p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||
$t('no_recorder_defined')}}</p>
|
||||
$t('no_recorder_model_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>
|
||||
@@ -173,8 +93,8 @@
|
||||
<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>
|
||||
<i>{{$t('create')}}</i> <font-awesome-icon icon="cogs"/>
|
||||
<strong>{{$t('virtual')}} {{$t('command')}}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create a new command')}}:</p>
|
||||
@@ -287,6 +207,7 @@
|
||||
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
|
||||
const recorderRepository = getRepository('recorder');
|
||||
const commandRepository = getRepository('command');
|
||||
|
||||
export default {
|
||||
@@ -310,11 +231,11 @@
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
savecommand() {
|
||||
saveCommand() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
commandRepository.createcommand(this.form)
|
||||
commandRepository.createCommand(this.form)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadcommands')
|
||||
this.$store.dispatch('loadCommands')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.tabIndex = 0;
|
||||
@@ -324,33 +245,50 @@
|
||||
this.$log.warn(msg);
|
||||
});
|
||||
},
|
||||
initcommandUpdate(command, fieldName) {
|
||||
initCommandUpdate(command, fieldName) {
|
||||
this.$set(this.formEditField, command.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
|
||||
},
|
||||
updatecommand(id, fieldName) {
|
||||
updateCommand(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
commandRepository.updatecommand(id, data)
|
||||
commandRepository.updateCommand(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadcommands')
|
||||
this.$store.dispatch('loadCommands')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
deletecommand(id) {
|
||||
deleteCommand(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
commandRepository.deletecommand(id)
|
||||
commandRepository.deleteCommand(id)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadcommands')
|
||||
this.$store.dispatch('loadCommands')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
initRecCommandUpdate(command, fieldName) {
|
||||
this.$set(this.formEditField, command.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
|
||||
},
|
||||
updateRecCommand(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
recorderRepository.updateRecorderCommand(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorderCommands')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
showErrorMessage(msg) {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.$parent.$data.showAlert = true;
|
||||
|
||||
@@ -1,303 +1,537 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form-group class="container">
|
||||
<section class="section">
|
||||
<b-form-group class="container">
|
||||
<section class="section">
|
||||
|
||||
|
||||
<h1 class="title">{{ $t('Manage recorders') }}</h1>
|
||||
<p class="lead">
|
||||
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recorder models')
|
||||
}}
|
||||
</p>
|
||||
<br/>
|
||||
<h1 class="title">{{ $t('Manage recorders') }}</h1>
|
||||
<p class="lead">
|
||||
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recordermodels')
|
||||
}}
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
<b-tabs v-model="tabIndex" card justified>
|
||||
<b-tab title="Recorder list" active>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="circle"/>
|
||||
<strong>Recorder</strong> list
|
||||
</template>
|
||||
<p>{{ $t('There are')}} {{recorders.length}} {{ $t('recorders defined')}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorder) in recorders"
|
||||
:header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'"
|
||||
v-bind:key="recorder.id">
|
||||
{{recorder}}
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}:
|
||||
<span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}
|
||||
<b-tabs v-model="tabIndex" card justified>
|
||||
<b-tab title="Recorder list" active>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="circle"/>
|
||||
<strong>Recorder</strong> list
|
||||
</template>
|
||||
<p>{{ $t('There are')}} {{recorders.length}} {{ $t('recorders defined')}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
|
||||
v-for="(recorder) in recorders"
|
||||
:header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'"
|
||||
v-bind:key="recorder.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title"><strong>{{ $t('name') }}: </strong>
|
||||
<span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="recorder.id+'_name'" name="name"
|
||||
v-model="updateValues[recorder.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 ('+recorder.name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRecorder(recorder.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('network_name') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="recorder.id+'_name'" name="name"
|
||||
v-model="updateValues[recorder.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 ('+recorder.name +')'"
|
||||
@blur="updateRecorder(recorder.id, 'name')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'name')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRecorder(recorder.id, 'name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
<hr/>
|
||||
<p class="card-text"><strong>{{ $t('network_name') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'network_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="network_name"
|
||||
v-model="updateValues[recorder.id+'_network_name']"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Network name ('+recorder.network_name +')'"
|
||||
@blur="updateRecorder(recorder.id, 'network_name')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('network_name')"
|
||||
@click="updateRecorder(recorder.id, 'network_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('ip') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="network_name"
|
||||
style="min-width: 80%;"
|
||||
v-model="updateValues[recorder.id+'_network_name']"
|
||||
v-validate="'required|ip_or_fqdn'"
|
||||
v-bind:class="{'is-danger': errors.has('network_name'), 'is-invalid': errors.has('network_name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Network name ('+recorder.network_name +')'"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('network_name')"
|
||||
@click="updateRecorder(recorder.id, 'network_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
<span>{{ errors.first('network_name') }}</span>
|
||||
</b-input-group>
|
||||
</p>
|
||||
|
||||
<p class="card-text"><strong>{{ $t('ip') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'ip')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="ip"
|
||||
v-model="updateValues[recorder.id+'_ip']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+recorder.ip +')'"
|
||||
@blur="updateRecorder(recorder.id, 'ip')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'ip')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('ip')"
|
||||
@click="updateRecorder(recorder.id, 'ip')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="ip"
|
||||
v-model="updateValues[recorder.id+'_ip']"
|
||||
v-validate="'ip'"
|
||||
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="$t('ip address') +' ('+recorder.ip +')'"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'ip')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('ip')"
|
||||
@click="updateRecorder(recorder.id, 'ip')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<span>{{ errors.first('ip') }}</span>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
<div v-if="recorder.room">
|
||||
<p class="card-text"><strong>{{ $t('Room') }}:</strong> {{recorder.room.name}}
|
||||
<p class="card-text"><strong>{{ $t('ip v6') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_ip6']">{{recorder.ip6}}
|
||||
<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('Room') }}:</strong> {{
|
||||
$t('no_room_defined')}}</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.room">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="room in rooms" v-bind:value="room.id">
|
||||
{{ room.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="label col-sm-4 col-form-label">{{ $t('room') }}</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="show_assigned_rooms" id="assignedRoomsCheck">
|
||||
<label class="form-check-label" for="assignedRoomsCheck">
|
||||
Show already assigned rooms
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'ip6')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="ip6"
|
||||
v-model="updateValues[recorder.id+'_ip6']"
|
||||
v-validate="'ip:6'"
|
||||
v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="$t('ip v6 address') +' ('+recorder.ip6 +')'"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'ip6')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('ip6')"
|
||||
@click="updateRecorder(recorder.id, 'ip6')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<span>{{ errors.first('ip6') }}</span>
|
||||
</p>
|
||||
|
||||
<div v-if="recorder.recorder_model">
|
||||
<p class="card-text"><strong>{{ $t('Model') }}:</strong> {{recorder.recorder_model.name}}
|
||||
<p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_ssh_port']">{{recorder.ssh_port}}
|
||||
<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('Model') }}:</strong> {{
|
||||
$t('no_model_defined')}}</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.recorder_model">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorderModel.id">
|
||||
{{ recorderModel.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="label col-sm-4 col-form-label">{{ $t('model') }}</label>
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'ssh_port')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="ssh_port"
|
||||
v-model="updateValues[recorder.id+'_ssh_port']"
|
||||
v-validate="'required|between:0,65535'"
|
||||
v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+recorder.ssh_port +')'"
|
||||
@blur="updateRecorder(recorder.id, 'ssh_port')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'ssh_port')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('ssh_port')"
|
||||
@click="updateRecorder(recorder.id, 'ssh_port')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<span>{{ errors.first('ssh_port') }}</span>
|
||||
</p>
|
||||
|
||||
<p class="card-text"><strong>{{ $t('telnet_port') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_telnet_port']">{{recorder.telnet_port}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'telnet_port')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="telnet_port"
|
||||
v-model="updateValues[recorder.id+'_telnet_port']"
|
||||
v-validate="'required|between:0,65535'"
|
||||
v-bind:class="{'is-danger': errors.has('telnet_port'), 'is-invalid': errors.has('telnet_port')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+recorder.telnet_port +')'"
|
||||
@blur="updateRecorder(recorder.id, 'telnet_port')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'telnet_port')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('telnet_port')"
|
||||
@click="updateRecorder(recorder.id, 'telnet_port')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<span>{{ errors.first('telnet_port') }}</span>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
<div v-if="recorder.room && !formEditField[recorder.id+'_room_id']">
|
||||
<p class="card-text"><strong>{{ $t('Room') }}:</strong> {{recorder.room.name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'room_id')"
|
||||
icon="pencil-alt"/>
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Room') }}:</strong>
|
||||
<span v-if="recorder.room && recorder.room.name">{{recorder.room.name}}</span>
|
||||
<span v-else>{{$t('no_room_defined')}}</span>
|
||||
</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control"
|
||||
v-model="updateValues[recorder.id+'_room_id']"
|
||||
@change="updateRecorder(recorder.id, 'room_id')">
|
||||
<option value="">{{$t('No room selected')}}</option>
|
||||
<option v-for="room in rooms" v-bind:value="room.id">
|
||||
{{ room.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="label col-sm-4 col-form-label">{{ $t('room') }}</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="show_assigned_rooms" id="assignedRoomsCheck">
|
||||
<label class="form-check-label" for="assignedRoomsCheck">
|
||||
Show already assigned rooms
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<b-form-group label-cols-sm="4"
|
||||
label-cols-lg="3"
|
||||
description="Set to offline / maintenance mode."
|
||||
label-for="offline"
|
||||
:label="$t('offline')">
|
||||
<b-form-checkbox id="offline"
|
||||
v-model="form.offline" name="check-button" switch>
|
||||
<b>({{$t('Offline')}}: {{ form.offline }})</b>
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group label-cols-sm="4"
|
||||
label-cols-lg="3"
|
||||
description="Lock recorder: No changes can be made."
|
||||
label-for="locked"
|
||||
:label="$t('locked')">
|
||||
<b-form-checkbox id="locked"
|
||||
v-model="recorder.locked" name="check-button" switch
|
||||
@change="()=>{initRecorderUpdate(recorder, 'locked'); updateRecorder(recorder.id, 'locked')}">
|
||||
<b>({{$t('Locked')}}: {{ form.locked }})</b>
|
||||
</b-form-checkbox>
|
||||
</b-form-group>
|
||||
|
||||
<strong>{{ $t('lock_message') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_lock_message']">{{recorder.lock_message}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'lock_message')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<textarea class="textarea form-control" v-else name="lock_message"
|
||||
v-model="updateValues[recorder.id+'_lock_message']"
|
||||
:placeholder="$t('lock_message') +' ('+recorder.lock_message +')'"
|
||||
@blur="updateRecorder(recorder.id, 'lock_message')"></textarea>
|
||||
|
||||
<hr/>
|
||||
<div v-if="recorder.recorder_model">
|
||||
<p class="card-text"><strong>{{ $t('Model') }}:</strong> {{recorder.recorder_model.name}}
|
||||
<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('Model') }}:</strong> {{
|
||||
$t('no_model_defined')}}</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.recorder_model">
|
||||
<option value="">{{$t('No model selected')}}</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorderModel.id">
|
||||
{{ recorderModel.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="label col-sm-4 col-form-label">{{ $t('model') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<strong>{{ $t('description') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_description']">{{recorder.description}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'description')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<textarea class="textarea form-control" v-else name="description"
|
||||
v-model="updateValues[recorder.id+'_description']"
|
||||
:placeholder="$t('description') +' ('+recorder.description +')'"
|
||||
@blur="updateRecorder(recorder.id, 'description')"></textarea>
|
||||
|
||||
<hr/>
|
||||
|
||||
<strong>{{ $t('Virtual commands') }}:</strong>
|
||||
|
||||
<b-list-group v-if="recorder.virtual_commands.length"
|
||||
style="max-height: 400px; overflow-y:scroll;">
|
||||
<b-list-group-item v-for="command in recorder.virtual_commands">
|
||||
{{command.name}}
|
||||
</b-list-group-item>
|
||||
|
||||
</b-list-group>
|
||||
<span>
|
||||
{{$t('No virtual commands defined yet.')}}
|
||||
</span>
|
||||
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}<br/>
|
||||
{{ $t('last_time_modified')}}: {{recorder.last_time_modified | moment("dddd, MMMM Do YYYY")}}<br/>
|
||||
<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 title="Create recorder">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>{{ $t('create') }}</i> <font-awesome-icon icon="circle"/>
|
||||
<strong>{{ $t('Recorder') }}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create a new recorder')}}:</p>
|
||||
<!-- form starts here -->
|
||||
<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('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="Recorder name" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('name')">
|
||||
{{ errors.first('name') }}
|
||||
</p>
|
||||
</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
<b-tab title="Create recorder">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>{{ $t('create') }}</i> <font-awesome-icon icon="circle"/>
|
||||
<strong>{{ $t('Recorder') }}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create a new recorder')}}:</p>
|
||||
<!-- form starts here -->
|
||||
<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('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="Recorder 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('description') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<textarea class="textarea form-control"
|
||||
placeholder="Comments, remarks, notes, etc."
|
||||
v-model="form.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('network_name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="description"
|
||||
v-model="form.network_name"
|
||||
class="form-control" type="text" :placeholder="$t('network_name')">
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('network_name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="network_name"
|
||||
v-model="form.network_name"
|
||||
v-validate="'required|ip_or_fqdn'"
|
||||
v-bind:class="{'is-danger': errors.has('network_name'), 'is-invalid': errors.has('network_name')}"
|
||||
class="form-control" type="text" :placeholder="$t('network_name')"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('network_name')">
|
||||
{{ errors.first('network_name') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.ip"
|
||||
class="form-control" type="text" placeholder="Recorder IP">
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="ip"
|
||||
v-validate="'ip'"
|
||||
v-model="form.ip"
|
||||
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
|
||||
class="form-control" type="text" placeholder="Recorder IP">
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('ip')">
|
||||
{{ errors.first('ip') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.telnet_port"
|
||||
class="form-control" type="number" value="22"
|
||||
placeholder="Telnet Port (23)">
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ip v6') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="ip6"
|
||||
v-validate="'ip:6'"
|
||||
v-model="form.ip6"
|
||||
v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
|
||||
class="form-control" type="text" placeholder="Recorder IPv6">
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('ip6')">
|
||||
{{ errors.first('ip6') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ssh_port') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.ssh_port"
|
||||
class="form-control" type="number" value="23"
|
||||
placeholder="SSH Port (22)">
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="telnet_port"
|
||||
v-model="form.telnet_port"
|
||||
v-validate="'required|between:0,65535'"
|
||||
v-bind:class="{'is-danger': errors.has('telnet_port'), 'is-invalid': errors.has('telnet_port')}"
|
||||
class="form-control" type="number" value="22"
|
||||
placeholder="Telnet Port (23)">
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('telnet_port')">
|
||||
{{ errors.first('telnet_port') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder_model_id">
|
||||
<option disabled value="">No recorder_model selected</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorderModel.id">
|
||||
{{ recorderModel.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ssh_port') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="ssh_port"
|
||||
v-model="form.ssh_port"
|
||||
v-validate="'required|between:0,65535'"
|
||||
v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
|
||||
class="form-control" type="number" value="23"
|
||||
placeholder="SSH Port (22)">
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('ssh_port')">
|
||||
{{ errors.first('ssh_port') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('room') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.room_id">
|
||||
<option disabled value="">Not assigned to room</option>
|
||||
<option v-for="room in rooms" v-bind:value="room.id">
|
||||
{{ room.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder_model_id">
|
||||
<option disabled value="">No recorder_model selected</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorderModel.id">
|
||||
{{ recorderModel.name }}
|
||||
</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 recorder
|
||||
</button>
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('room') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.room_id">
|
||||
<option disabled value="">Not assigned to room</option>
|
||||
<option v-for="room in rooms" v-bind:value="room.id">
|
||||
{{ room.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab title="Recorder model list">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> Recorder <font-awesome-icon icon="scroll"/>
|
||||
<strong>Model</strong> <i>list</i>
|
||||
</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">
|
||||
<b-card-text>
|
||||
<p class="card-text">
|
||||
<strong>{{ $t('notes') }}:</strong>
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('username') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="username"
|
||||
v-model="form.username"
|
||||
v-bind:class="{'is-danger': errors.has('username'), 'is-invalid': errors.has('username')}"
|
||||
class="form-control" type="text" :placeholder="$t('username')"
|
||||
>
|
||||
</div>
|
||||
<p class="col-sm-4">
|
||||
{{ $t('username') }} {{$t('may be left blank (-> recorder model)')}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('password') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="password"
|
||||
v-model="form.password"
|
||||
v-bind:class="{'is-danger': errors.has('password'), 'is-invalid': errors.has('password')}"
|
||||
class="form-control" type="text" :placeholder="$t('password')"
|
||||
>
|
||||
</div>
|
||||
<p class="col-sm-4">
|
||||
{{ $t('password') }} {{$t('may be left blank (-> recorder model)')}}
|
||||
</p>
|
||||
</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>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab title="Recorder model list">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> Recorder <font-awesome-icon icon="scroll"/>
|
||||
<strong>Model</strong> <i>list</i>
|
||||
</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">
|
||||
<b-card-text>
|
||||
<p class="card-text">
|
||||
<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
|
||||
@@ -310,33 +544,43 @@
|
||||
:placeholder="'Notes ('+recorderModel.notes +')'"
|
||||
@blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
<p class="card-text">
|
||||
<strong>{{ $t('requires_username') }}:</strong> <span
|
||||
v-if="recorderModel.requires_username">{{$t('yes')}}</span><span v-else>{{$t('no')}}</span>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<strong>{{ $t('requires_password') }}:</strong> <span
|
||||
v-if="recorderModel.requires_password">{{$t('yes')}}</span><span v-else>{{$t('no')}}</span>
|
||||
</p>
|
||||
|
||||
<b-list-group style="max-height: 200px; overflow-y:scroll;">
|
||||
<strong>Recorder Model {{ $t('Commands') }}:</strong>
|
||||
<b-list-group-item v-for="command in recorderModel.commands">
|
||||
{{command.name}}
|
||||
<b-badge v-for="(a_type, arg) in command.parameters" v-if="command.parameters !== null" style="margin-right: 10px;">
|
||||
<small>{{arg}}: {{a_type}}</small>
|
||||
</b-badge>
|
||||
<hr/>
|
||||
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
<b-list-group style="max-height: 400px; overflow-y:scroll;">
|
||||
<strong>Recorder Model {{ $t('Commands') }}:</strong>
|
||||
<b-list-group-item v-for="command in recorderModel.commands">
|
||||
{{command.name}}
|
||||
<b-badge v-for="(a_type, arg) in command.parameters"
|
||||
v-if="command.parameters !== null" style="margin-right: 10px;">
|
||||
<small>{{arg}}: {{a_type}}</small>
|
||||
</b-badge>
|
||||
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</section>
|
||||
</b-form-group>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</section>
|
||||
</b-form-group>
|
||||
<hr>
|
||||
|
||||
<div class="column">
|
||||
@@ -366,7 +610,7 @@
|
||||
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
|
||||
const RecorderRepository = getRepository('recorder');
|
||||
const recorderRepository = getRepository('recorder');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -383,19 +627,45 @@
|
||||
form: {
|
||||
name: '',
|
||||
description: '',
|
||||
network_name: '',
|
||||
ip: '',
|
||||
ip6: '',
|
||||
telnet_port: 23,
|
||||
ssh_port: 22,
|
||||
network_name: '',
|
||||
locked: false,
|
||||
offline: false,
|
||||
username: '',
|
||||
password: '',
|
||||
recorder_model: null,
|
||||
room: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initRecorderUpdate(recorder, fieldName) {
|
||||
this.$log.debug(recorder);
|
||||
this.$log.debug(recorder[fieldName]); // THIS SHOULD BE TRUE, NOT FALSE!! grml
|
||||
this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
|
||||
this.$log.debug(this.updateValues);
|
||||
},
|
||||
updateRecorder(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
this.$log.debug(this.updateValues);
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
recorderRepository.updateRecorder(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
saveRecorder() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RecorderRepository.createRecorder(this.form)
|
||||
recorderRepository.createRecorder(this.form)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
@@ -409,7 +679,7 @@
|
||||
},
|
||||
deleteRecorder(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RecorderRepository.deleteRecorder(id)
|
||||
recorderRepository.deleteRecorder(id)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
@@ -464,4 +734,8 @@
|
||||
.required:after {
|
||||
content: " *";
|
||||
}
|
||||
|
||||
b-form-input {
|
||||
min-width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
<p>{{ $t('There are')}} {{rooms.length}} {{ $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+ ')'" v-bind:key="room.id">
|
||||
:header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}:
|
||||
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_name']">{{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@@ -45,6 +45,60 @@
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
|
||||
|
||||
<p class="card-text"><strong>{{ $t('building_number') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_number']">{{room.building_number}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'building_number')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_building_number'" name="building_number"
|
||||
v-model="updateValues[room.id+'_building_number']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Building number ('+room.building_number +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_number')"
|
||||
@click="updateRoom(room.id, 'building_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"><strong>{{ $t('building_name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_name']">{{room.building_name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'building_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_building_name'" name="building_name"
|
||||
v-model="updateValues[room.id+'_building_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_name'), 'is-invalid': errors.has('building_name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Building name ('+room.building_name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_name')"
|
||||
@click="updateRoom(room.id, 'building_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('alternate_name') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
faList,
|
||||
faTrash,
|
||||
faPencilAlt,
|
||||
faCogs,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
|
||||
|
||||
@@ -40,7 +41,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen);
|
||||
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs);
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
||||
|
||||
|
||||
@@ -12,6 +12,8 @@ const messages = {
|
||||
plugins: 'Installed CLI Plugins',
|
||||
links: 'Essential Links',
|
||||
ecosystem: 'Ecosystem',
|
||||
building_number: 'Building #',
|
||||
building_name: 'Building'
|
||||
},
|
||||
es: {
|
||||
welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',
|
||||
|
||||
Reference in New Issue
Block a user