837 lines
53 KiB
Vue
837 lines
53 KiB
Vue
<template>
|
|
<div>
|
|
<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> {{$t('and')}} {{ $t('recorder_models')
|
|
}}
|
|
</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>{{$t('Recorders')}}</strong> {{$t('list')}}
|
|
</template>
|
|
<div class="mt-3">
|
|
<b-button-group>
|
|
<b-button variant="success" @click="filterShowAllRecorders()">{{$t('All recorders')}}</b-button>
|
|
<b-button variant="info" @click="filterOnlyShowOfflineRecorders()">{{$t('Offline recorders')}}</b-button>
|
|
<b-button variant="warning" @click="filterOnlyShowNonOfflineRecorders()">{{$t('Non offline recorders')}}</b-button>
|
|
</b-button-group>
|
|
</div>
|
|
<p>{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:</p>
|
|
<b-card-group deck>
|
|
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
|
|
v-for="(recorder) in recorders"
|
|
v-bind:key="recorder.id">
|
|
<template v-slot:header>
|
|
<router-link :to="{name: 'recorder', params: {recorder_id: recorder.id}}">
|
|
<h4>{{recorder.name}}</h4></router-link>
|
|
<h6>{{' (' + recorder.ip + ' / ' + recorder.network_name + ')'}}</h6>
|
|
</template>
|
|
<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>
|
|
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" v-else slim>
|
|
<b-input-group>
|
|
<b-form-input :id="recorder.id+'_name'" name="name"
|
|
v-model="updateValues[recorder.id+'_name']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@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>
|
|
</ValidationProvider>
|
|
</h5>
|
|
<hr/>
|
|
<p class="card-text"><strong>{{ $t('Model') }}:</strong>
|
|
{{recorder.model_name}}
|
|
</p>
|
|
<p class="card-text"><strong>{{ $t('firmware_version') }}:</strong>
|
|
{{recorder.firmware_version}}
|
|
</p>
|
|
<p class="card-text"><strong>{{ $t('serial_number') }}:</strong>
|
|
{{recorder.serial_number}}
|
|
</p>
|
|
<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" @click="initRecorderUpdate(recorder, 'network_name')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a>
|
|
</span>
|
|
<ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" v-else slim>
|
|
<b-input-group size="sm">
|
|
<b-form-input name="network_name"
|
|
style="min-width: 80%;"
|
|
v-model="updateValues[recorder.id+'_network_name']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@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[0] }}</span>
|
|
</b-input-group>
|
|
</ValidationProvider>
|
|
</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" @click="initRecorderUpdate(recorder, 'ip')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a>
|
|
</span>
|
|
<ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" v-else slim>
|
|
<b-input-group size="sm">
|
|
<b-form-input name="ip"
|
|
v-model="updateValues[recorder.id+'_ip']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@click="updateRecorder(recorder.id, 'ip')"
|
|
variant="outline-success">
|
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
|
</b-button>
|
|
</b-input-group-append>
|
|
<span>{{ errors[0] }}</span>
|
|
</b-input-group>
|
|
</ValidationProvider>
|
|
|
|
</p>
|
|
|
|
<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" @click="initRecorderUpdate(recorder, 'ip6')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a>
|
|
</span>
|
|
<ValidationProvider :name="$t('ip6')" rules="ip6" v-slot="{ errors }" v-else slim>
|
|
<b-input-group size="sm">
|
|
<b-form-input name="ip6"
|
|
v-model="updateValues[recorder.id+'_ip6']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@click="updateRecorder(recorder.id, 'ip6')"
|
|
variant="outline-success">
|
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
|
</b-button>
|
|
</b-input-group-append>
|
|
<span>{{ errors[0] }}</span>
|
|
</b-input-group>
|
|
</ValidationProvider>
|
|
|
|
</p>
|
|
|
|
<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" @click="initRecorderUpdate(recorder, 'ssh_port')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a>
|
|
</span>
|
|
<ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
|
|
<b-input-group size="sm">
|
|
<b-form-input name="ssh_port"
|
|
v-model="updateValues[recorder.id+'_ssh_port']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@click="updateRecorder(recorder.id, 'ssh_port')"
|
|
variant="outline-success">
|
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
|
</b-button>
|
|
</b-input-group-append>
|
|
<span>{{ errors[0] }}</span>
|
|
</b-input-group>
|
|
|
|
</ValidationProvider>
|
|
</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>
|
|
<ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
|
|
<b-input-group size="sm">
|
|
<b-form-input name="telnet_port"
|
|
v-model="updateValues[recorder.id+'_telnet_port']"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
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.length > 0"
|
|
@click="updateRecorder(recorder.id, 'telnet_port')"
|
|
variant="outline-success">
|
|
<font-awesome-icon icon="check"></font-awesome-icon>
|
|
</b-button>
|
|
</b-input-group-append>
|
|
<span>{{ errors[0] }}</span>
|
|
</b-input-group>
|
|
</ValidationProvider>
|
|
</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" @click="initRecorderUpdate(recorder, 'room_id')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a></p>
|
|
</div>
|
|
<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' + recorder.id"
|
|
v-model="recorder.offline" name="check-button_offline" switch
|
|
@input="()=>{initRecorderUpdate(recorder, 'offline'); updateRecorder(recorder.id, 'offline')}">
|
|
<b>({{$t('Offline')}}: {{ recorder.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' + recorder.id"
|
|
v-model="recorder.locked" name="check-button_locked" switch
|
|
@input="()=>{initRecorderUpdate(recorder, 'locked'); updateRecorder(recorder.id, 'locked')}">
|
|
<b>({{$t('Locked')}}: {{ recorder.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 Adadpter') }}:</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 Adadpter') }}:</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 Adadpter 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" @click="initRecorderUpdate(recorder, 'description')">
|
|
<font-awesome-icon
|
|
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"
|
|
v-bind:key="command.id">
|
|
{{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 -->
|
|
<ValidationObserver v-slot="{ invalid }">
|
|
<form v-on:submit.prevent="saveRecorder()">
|
|
<section class="form">
|
|
|
|
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
|
|
<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-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('Recorder_name')"
|
|
required>
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
|
|
<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="$t('Comments') +', ' + $t('notes') + ', etc.'"
|
|
v-model="form.description"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" slim>
|
|
<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-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('network_name')"
|
|
required
|
|
>
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('mac')" rules="mac" v-slot="{ errors }" slim>
|
|
<div class="form-group row">
|
|
<label class="label col-sm-2 col-form-label">{{ $t('mac') }}</label>
|
|
<div class="col-sm-6">
|
|
<input name="mac"
|
|
v-model="form.mac"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('mac')">
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" slim>
|
|
<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-model="form.ip"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('ipv6')" rules="ip6" v-slot="{ errors }" slim>
|
|
<div class="form-group row">
|
|
<label class="label col-sm-2 col-form-label">{{ $t('ipv6') }}</label>
|
|
<div class="col-sm-6">
|
|
<input name="ip6"
|
|
v-model="form.ip6"
|
|
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
|
|
<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-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="number" value="22"
|
|
placeholder="Telnet Port (23)">
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
|
|
<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-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="number" value="23"
|
|
placeholder="SSH Port (22)">
|
|
</div>
|
|
<p class="col-sm-4" v-show="errors.length > 0">
|
|
{{ errors[0] }}
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<div class="form-group row">
|
|
<label class="label col-sm-2 col-form-label">{{ $t('Model') }}</label>
|
|
<div class="col-sm-6">
|
|
<select class="form-control" v-model="form.recorder_model_id">
|
|
<option disabled value="">{{$t('No_recorder_model_selected')}}</option>
|
|
<option v-for="recorderModel in recorderModels"
|
|
v-bind:value="recorderModel.id">
|
|
{{ recorderModel.name }}
|
|
</option>
|
|
</select>
|
|
</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>
|
|
</div>
|
|
|
|
<ValidationProvider :name="$t('username')" rules="" v-slot="{ errors }" slim>
|
|
<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.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('username')"
|
|
>
|
|
</div>
|
|
<p class="col-sm-4">
|
|
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider :name="$t('password')" rules="" v-slot="{ errors }" slim>
|
|
<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.length > 0, 'is-invalid': errors.length > 0}"
|
|
class="form-control" type="text" :placeholder="$t('password')"
|
|
>
|
|
</div>
|
|
<p class="col-sm-4">
|
|
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
|
|
</p>
|
|
</div>
|
|
</ValidationProvider>
|
|
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button
|
|
v-bind:disabled="invalid"
|
|
type="submit"
|
|
class="btn btn-primary">
|
|
Create recorder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</form>
|
|
</ValidationObserver>
|
|
</b-card-text>
|
|
</b-tab>
|
|
<b-tab title="Recorder model list">
|
|
<template slot="title">
|
|
<font-awesome-icon icon="list"/> {{$t('Recorder')}} <font-awesome-icon icon="scroll"/>
|
|
<strong>{{$t('Model')}}</strong> <i>{{$t('list')}}</i>
|
|
</template>
|
|
<p>{{ $tc('recorder_models_defined', recorderModels.length, {num: recorderModels.length} ) }}:</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="!formRecModelEditField[recorderModel.id+'_notes']">{{recorderModel.notes}}
|
|
<a class="float-right badge badge-pill badge-info" @click="initRecorderModelUpdate(recorderModel, 'notes')">
|
|
<font-awesome-icon
|
|
icon="pencil-alt"/>
|
|
</a>
|
|
</span>
|
|
<textarea class="textarea form-control" v-else name="notes"
|
|
v-model="updateRecModelValues[recorderModel.id+'_notes']"
|
|
:placeholder="'Notes ('+recorderModel.notes +')'"
|
|
@blur="updateRecorderModel(recorderModel.id, 'notes')"></textarea>
|
|
|
|
</p>
|
|
|
|
<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>
|
|
|
|
<hr/>
|
|
|
|
<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"
|
|
v-bind:key="command.id">
|
|
{{command.name}}
|
|
<b-badge v-for="(a_type, arg) in command.parameters"
|
|
v-bind:key="arg"
|
|
v-if="command.parameters !== null" style="margin-right: 10px;">
|
|
<small>{{arg}}: {{a_type}}</small>
|
|
</b-badge>
|
|
|
|
</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">
|
|
<section class="section" id="results">
|
|
<div class="box">
|
|
<ul>
|
|
|
|
<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 recorderRepository = getRepository('recorder');
|
|
|
|
export default {
|
|
components: {
|
|
PulseLoader,
|
|
},
|
|
props: [],
|
|
data() {
|
|
return {
|
|
onlyShowOfflineRecorders: false,
|
|
onlyShowNonOfflineRecorders: false,
|
|
tabIndex: 0,
|
|
updateValues: {},
|
|
formEditField: {},
|
|
updateRecModelValues: {},
|
|
formRecModelEditField: {},
|
|
show_assigned_recorders: false,
|
|
show_assigned_rooms: true,
|
|
form: {
|
|
name: '',
|
|
description: '',
|
|
network_name: '',
|
|
ip: '',
|
|
ip6: '',
|
|
telnet_port: 23,
|
|
ssh_port: 22,
|
|
locked: false,
|
|
offline: false,
|
|
username: '',
|
|
password: '',
|
|
recorder_model: null,
|
|
room: null,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
initRecorderUpdate(recorder, fieldName) {
|
|
this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
|
|
this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
|
|
},
|
|
initRecorderModelUpdate(recorderModel, fieldName) {
|
|
this.$set(this.formRecModelEditField, recorderModel.id + '_' + fieldName, true);
|
|
this.$set(this.updateRecModelValues, recorderModel.id + '_' + fieldName, recorderModel[fieldName]);
|
|
},
|
|
updateRecorder(id, fieldName) {
|
|
this.$parent.$data.isLoading = true;
|
|
const data = {};
|
|
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;
|
|
});
|
|
});
|
|
},
|
|
updateRecorderModel(id, fieldName) {
|
|
this.$parent.$data.isLoading = true;
|
|
const data = {};
|
|
data[fieldName] = this.updateRecModelValues[id + '_' + fieldName];
|
|
recorderRepository.updateRecorderModel(id, data)
|
|
.then(() => {
|
|
this.$store.dispatch('loadRecorderModels')
|
|
.then(() => {
|
|
this.$parent.$data.isLoading = false;
|
|
this.formRecModelEditField[id + '_' + fieldName] = false;
|
|
});
|
|
});
|
|
},
|
|
saveRecorder() {
|
|
this.$parent.$data.isLoading = true;
|
|
recorderRepository.createRecorder(this.form)
|
|
.then((result) => {
|
|
console.info(result);
|
|
this.$store.dispatch('loadRecorders')
|
|
.then(() => {
|
|
this.$parent.$data.isLoading = false;
|
|
this.tabIndex = 0;
|
|
});
|
|
}).catch((error) => {
|
|
EventBus.$emit('errorMessage', 'Could not safe recorder: '+error.data.message+'!');
|
|
});
|
|
},
|
|
deleteRecorder(id) {
|
|
this.$parent.$data.isLoading = true;
|
|
recorderRepository.deleteRecorder(id)
|
|
.then(() => {
|
|
this.$store.dispatch('loadRecorders')
|
|
.then(() => {
|
|
this.$parent.$data.isLoading = false;
|
|
});
|
|
});
|
|
},
|
|
//showErrorMessage(msg) {
|
|
// this.$parent.$data.isLoading = false;
|
|
// this.$parent.$data.showAlert = true;
|
|
// this.$parent.$data.alertMessage = msg;
|
|
//},
|
|
filterShowAllRecorders(){
|
|
this.onlyShowOfflineRecorders = false;
|
|
this.onlyShowNonOfflineRecorders = false;
|
|
},
|
|
filterOnlyShowOfflineRecorders(){
|
|
this.onlyShowOfflineRecorders = true;
|
|
this.onlyShowNonOfflineRecorders = false;
|
|
},
|
|
filterOnlyShowNonOfflineRecorders(){
|
|
this.onlyShowOfflineRecorders = false;
|
|
this.onlyShowNonOfflineRecorders = true;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$parent.$data.isLoading = true;
|
|
this.$parent.$data.showAlert = false;
|
|
this.$store.dispatch('loadRecorders')
|
|
.then(() => {
|
|
this.$store.dispatch('loadRooms')
|
|
.then(() => {
|
|
this.$parent.$data.isLoading = false;
|
|
});
|
|
});
|
|
this.$store.dispatch('loadRecorderModels');
|
|
},
|
|
computed: {
|
|
rooms() {
|
|
return this.$store.state.rooms;
|
|
},
|
|
recorders() {
|
|
if(this.onlyShowOfflineRecorders){
|
|
return this.$store.state.recorders.filter((item) => {
|
|
return item.offline;
|
|
});
|
|
}
|
|
else if(this.onlyShowNonOfflineRecorders){
|
|
return this.$store.state.recorders.filter((item) => {
|
|
return !item.offline;
|
|
});
|
|
}
|
|
return this.$store.state.recorders;
|
|
},
|
|
recorderModels() {
|
|
return this.$store.state.recorderModels;
|
|
},
|
|
recorderCommands() {
|
|
return this.$store.state.recorderCommands;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.comment {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.card:hover {
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
.required:after {
|
|
content: " *";
|
|
}
|
|
|
|
b-form-input {
|
|
min-width: 80%;
|
|
}
|
|
</style>
|