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

now supporting commands

Browse Source
This commit is contained in:
tobias
2019-08-08 16:37:41 +02:00
parent 2f7f865378
commit 6f0a2af15d
5 changed files with 3618 additions and 3764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7173
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
src/components/Commands.vue
View File

@@ -115,7 +115,7 @@
<span v-if="!formEditField[command.id+'_recorder_id']">{{command.recorder_id}}&nbsp; <span v-if="!formEditField[command.id+'_recorder_id']">{{command.recorder_id}}&nbsp;
<div v-if="command.recorder"> <div v-if="command.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{command.recorder.name}}&nbsp; <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{command.recorder.name}}&nbsp;
({{command.recorder.ip}}) / ({{command.recorder.network_name}}) ({{command.recorder.ip}}) / ({{command.recorder.network_name}})</p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
@@ -360,7 +360,7 @@
mounted() { mounted() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false; this.$parent.$data.showAlert = false;
this.$store.dispatch('loadcommands') this.$store.dispatch('loadCommands')
.then(() => { .then(() => {
this.$store.dispatch('loadRecorders') this.$store.dispatch('loadRecorders')
.then(() => { .then(() => {
@@ -378,7 +378,7 @@
}; };
}, },
commands() { commands() {
return this.$store.state.commands; return this.$store.state.recorderCommands;
}, },
recorders() { recorders() {
return this.$store.state.recorders; return this.$store.state.recorders;

182
src/components/Recorders.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<div>
<b-form-group class="container"> <b-form-group class="container">
<section class="section"> <section class="section">
@@ -243,24 +244,13 @@
</div> </div>
</div> </div>
<b-form-group label-cols-sm="4"
label-cols-lg="3"
description="Use telnet instead of ssh."
label-for="use_telnet_instead_ssh_input"
:label="$t('use_telnet_instead_ssh')">
<b-form-checkbox id="use_telnet_instead_ssh_input"
v-model="form.use_telnet_instead_ssh" name="check-button" switch>
<b>(Telnet: {{ form.use_telnet_instead_ssh }})</b>
</b-form-checkbox>
</b-form-group>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder_model_id"> <select class="form-control" v-model="form.recorder_model_id">
<option disabled value="">No recorder_model selected</option> <option disabled value="">No recorder_model selected</option>
<option v-for="recorderModel in recorderModels" <option v-for="recorderModel in recorderModels"
v-bind:value="recorder_model.id"> v-bind:value="recorderModel.id">
{{ recorderModel.name }} {{ recorderModel.name }}
</option> </option>
</select> </select>
@@ -305,39 +295,13 @@
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorderModel) in recorderModels" <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorderModel) in recorderModels"
:header="recorderModel.name" :header="recorderModel.name"
v-bind:key="recorderModel.id"> v-bind:key="recorderModel.id">
{{recorderModel}}
<b-card-text> <b-card-text>
<h5 class="card-title">{{ $t('model_name') }}:&nbsp;
<span v-if="!formEditField['model_'+recorderModel.id+'_model_name']">{{recorderModel.model_name}}&nbsp;
<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"> <p class="card-text">
<small><strong>{{ $t('notes') }}:</strong>&nbsp; <strong>{{ $t('notes') }}:</strong>&nbsp;
<span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp; <span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@click="initrecorderModelUpdate(room, 'notes')" @click="initrecorderModelUpdate(recorderModel, 'notes')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
@@ -345,145 +309,34 @@
v-model="updateValues['model_'+recorderModel.id+'_notes']" v-model="updateValues['model_'+recorderModel.id+'_notes']"
:placeholder="'Notes ('+recorderModel.notes +')'" :placeholder="'Notes ('+recorderModel.notes +')'"
@blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea> @blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
</small>
</p> </p>
<hr/> <hr/>
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp; <b-list-group style="max-height: 200px; overflow-y:scroll;">
<div v-if="room.recorder"> <strong>Recorder Model {{ $t('Commands') }}:</strong>&nbsp;
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp; <b-list-group-item v-for="command in recorderModel.commands">
({{room.recorder.ip}}) / ({{room.recorder.network_name}}) {{command.name}}
</div> <b-badge v-for="(a_type, arg) in command.parameters" v-if="command.parameters !== null" style="margin-right: 10px;">
<div v-else> <small>{{arg}}:&nbsp;{{a_type}}</small>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ </b-badge>
$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-list-group-item>
</b-list-group>
</b-card-text> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <small class="text-muted">
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}} <p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p>
<span class="pull-right">
<button type="button" v-on:click="deleteRecorder(recorder.id)"
class="btn btn-sm btn-danger">{{
$t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/>
</button>
</span>
</p>
</small> </small>
</div> </div>
</b-card> </b-card>
</b-card-group> </b-card-group>
</b-tab> </b-tab>
<b-tab title="Create recorder model">
<template slot="title">
<font-awesome-icon icon="plus"/>
<i>create</i>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
<strong>Model</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new recorder model')}}:</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('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>
</b-card-text>
</b-tab>
</b-tabs> </b-tabs>
</section> </section>
</b-form-group>
<hr> <hr>
<div class="column"> <div class="column">
@@ -526,13 +379,13 @@
updateValues: {}, updateValues: {},
formEditField: {}, formEditField: {},
show_assigned_recorders: false, show_assigned_recorders: false,
show_assigned_rooms: true,
form: { form: {
name: '', name: '',
description: '', description: '',
ip: '', ip: '',
telnet_port: 23, telnet_port: 23,
ssh_port: 22, ssh_port: 22,
use_telnet_instead_ssh: false,
network_name: '', network_name: '',
recorder_model: null, recorder_model: null,
room: null, room: null,
@@ -580,6 +433,7 @@
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
}); });
}); });
this.$store.dispatch('loadRecorderModels');
}, },
computed: { computed: {
rooms() { rooms() {

2
src/components/Rooms.vue
View File

@@ -115,7 +115,7 @@
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp; <span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp;
<div v-if="room.recorder"> <div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp; <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp;
({{room.recorder.ip}}) / ({{room.recorder.network_name}}) ({{room.recorder.ip}}) / ({{room.recorder.network_name}})</p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{

19
src/store.ts
View File

@@ -73,6 +73,7 @@ const actions = {
.then((response: any) => { .then((response: any) => {
Vue.$log.debug(response); Vue.$log.debug(response);
Vue.$log.debug(response.data); Vue.$log.debug(response.data);
Vue.$log.debug('Loaded recorder models');
context.commit('setRecorderModels', {recorderModels: response.data}); context.commit('setRecorderModels', {recorderModels: response.data});
EventBus.$emit('recorderModelsLoaded', response.data); EventBus.$emit('recorderModelsLoaded', response.data);
}) })
@@ -94,6 +95,24 @@ const actions = {
EventBus.$emit('failedLoadingRecorderCommands', error); EventBus.$emit('failedLoadingRecorderCommands', error);
}); });
}, },
loadVirtualCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
});
},
loadCommands(context: any) {
return context.dispatch('loadRecorderCommands').then(() => {
return context.dispatch('loadVirtualCommands');
});
},
loadUsers(context: any) { loadUsers(context: any) {
return fetchUsers(context.state.access_token) return fetchUsers(context.state.access_token)
.then((response) => { .then((response) => {