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

command repository added and a lot of other changes

Browse Source
This commit is contained in:
Tobias Kurze
2019-08-13 15:30:57 +02:00
parent 6f0a2af15d
commit 55e2e9f6b9
9 changed files with 4423 additions and 4002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
.gitignore vendored
View File

@@ -1,21 +1,120 @@
.DS_Store app.db
node_modules # Byte-compiled / optimized / DLL files
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea .idea
.vscode __pycache__/
*.suo node_modules/
*.ntvs* frontend/node_modules/
*.njsproj backend/uploads/*
*.sln *.py[cod]
*.sw* *$py.class
# C extensions
*.so
# Distribution / packaging
.Python
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/
# Translations
*.mo
*.pot
# Django stuff:
*.log
local_settings.py
db.sqlite3
# Flask stuff:
instance/
.webassets-cache
# Scrapy stuff:
.scrapy
# Sphinx documentation
docs/_build/
# PyBuilder
target/
# Jupyter Notebook
.ipynb_checkpoints
# IPython
profile_default/
ipython_config.py
# pyenv
.python-version
# celery beat schedule file
celerybeat-schedule
# SageMath parsed files
*.sage.py
# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# Spyder project settings
.spyderproject
.spyproject
# Rope project settings
.ropeproject
# mkdocs documentation
/site
# mypy
.mypy_cache/
.dmypy.json
dmypy.json
# Pyre type checker
.pyre/
package-lock.json

7173
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
src/api/RepositoryFactory.ts
View File

@@ -4,6 +4,7 @@ import GroupRepository from './groupRepository';
import UserRepository from './userRepository'; import UserRepository from './userRepository';
import RoomRepository from './roomRepository'; import RoomRepository from './roomRepository';
import RecorderRepository from './recorderRepository'; import RecorderRepository from './recorderRepository';
import CommandRepository from './commandRepository';
export default function get(name: string) { export default function get(name: string) {
@@ -20,6 +21,9 @@ export default function get(name: string) {
case 'user': { case 'user': {
return UserRepository; return UserRepository;
} }
case 'command': {
return CommandRepository;
}
default: { default: {
// statements; // statements;
break; break;

30
src/api/commandRepository.ts Normal file
View 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));
},
};

200
src/components/Commands.vue
View File

@@ -12,157 +12,77 @@
<b-tabs v-model="tabIndex" card> <b-tabs v-model="tabIndex" card>
<b-tab title="Command list" active> <b-tab title="Command list" active>
<template slot="title"> <template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="door-open"/> <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>command</strong>&nbsp;<i>list</i> <strong>command</strong>&nbsp;<i>list</i>
</template> </template>
<p>{{ $t('There are')}}&nbsp;{{commands.length}}&nbsp;{{ $t('commands defined')}}:</p> <p>{{ $t('There are')}}&nbsp;{{commands.length}}&nbsp;{{ $t('recorder commands defined')}}:</p>
<b-card-group deck> <b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(command) in commands" <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> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp; <h5 class="card-title">{{ $t('name') }}:&nbsp;
<span v-if="!formEditField[command.id+'_name']">{{command.name}}&nbsp; <span>{{command.name}}&nbsp;</span>
</h5>
<p class="card-text">
<small><strong>{{ $t('alternative_name') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_alternative_name']">{{command.alternative_name}}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@click="initcommandUpdate(command, 'name')" @click="initRecCommandUpdate(command, 'alternative_name')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<b-form-input :id="command.id+'_name'" name="name" <b-form-input :id="command.id+'_alternative_name'" name="alternative_name"
v-model="updateValues[command.id+'_name']" v-model="updateValues[command.id+'_alternative_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}" v-bind:class="{'is-danger': errors.has('alternative_name'), 'is-invalid': errors.has('alternative_name')}"
class="form-control" type="text" class="form-control" type="text"
:placeholder="'Name ('+command.name +')'" :placeholder="'Alternative name ('+command.alternative_name +')'"
required></b-form-input> required></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button :disabled="errors.has('name')" <b-button :disabled="errors.has('alternative_name')"
@click="updatecommand(command.id, 'name')" @click="updateRecCommand(command.id, 'alternative_name')"
variant="outline-success"> variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</h5> </small>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_alternate_name']">{{command.alternate_name}}&nbsp;
<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>&nbsp;
<span v-if="!formEditField[command.id+'_number']">{{command.number}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon
@click="initcommandUpdate(command, 'number')"
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<b-form-input name="number"
v-model="updateValues[command.id+'_number']"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text"
:placeholder="'command number ('+command.number +')'"
@blur="updatecommand(command.id, 'number')"
@keyup.enter="updatecommand(command.id, 'number')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('number')"
@click="updatecommand(command.id, 'number')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</p> </p>
<p class="card-text"> <p class="card-text">
<small><strong>{{ $t('comment') }}:</strong>&nbsp; <small><strong>{{ $t('description') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_comment']">{{command.comment}}&nbsp; <span v-if="!formEditField[command.id+'_description']">{{command.description}}&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="initcommandUpdate(command, 'comment')" @click="initRecCommandUpdate(command, 'description')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
<textarea class="textarea form-control" v-else name="comment" <textarea class="textarea form-control" v-else name="comment"
v-model="updateValues[command.id+'_comment']" v-model="updateValues[command.id+'_description']"
:placeholder="'Comment ('+command.comment +')'" :placeholder="'Comment ('+command.description +')'"
@blur="updatecommand(command.id, 'comment')"></textarea> @blur="updateRecCommand(command.id, 'description')"></textarea>
</small> </small>
</p> </p>
<hr/> <hr/>
<span v-if="!formEditField[command.id+'_recorder_id']">{{command.recorder_id}}&nbsp;
<div v-if="command.recorder"> <div v-if="command.recorder_model">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{command.recorder.name}}&nbsp; <p class="card-text"><strong>{{ $t('Recorder') }} {{ $t('model') }}:</strong>&nbsp;{{command.recorder_model.name}}&nbsp;</p>
({{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;{{
$t('no_recorder_defined')}}</p> $t('no_recorder_model_defined')}}</p>
</div> </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> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <small class="text-muted">
<p>{{ $t('created')}}: {{command.created_at | moment("dddd, MMMM Do YYYY")}} <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') }}&nbsp;<font-awesome-icon
icon="trash"/>
</button>
</span>
</p> </p>
</small> </small>
</div> </div>
@@ -173,8 +93,8 @@
<b-tab title="Create command"> <b-tab title="Create command">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="plus"/> <font-awesome-icon icon="plus"/>
<i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="door-open"/> <i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>{{$t('command')}}</strong> <strong>{{$t('virtual')}} {{$t('command')}}</strong>
</template> </template>
<b-card-text> <b-card-text>
<p>{{ $t('Create a new command')}}:</p> <p>{{ $t('Create a new command')}}:</p>
@@ -287,6 +207,7 @@
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'; import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
const recorderRepository = getRepository('recorder');
const commandRepository = getRepository('command'); const commandRepository = getRepository('command');
export default { export default {
@@ -310,11 +231,11 @@
}; };
}, },
methods: { methods: {
savecommand() { saveCommand() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
commandRepository.createcommand(this.form) commandRepository.createCommand(this.form)
.then(() => { .then(() => {
this.$store.dispatch('loadcommands') this.$store.dispatch('loadCommands')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
this.tabIndex = 0; this.tabIndex = 0;
@@ -324,33 +245,50 @@
this.$log.warn(msg); this.$log.warn(msg);
}); });
}, },
initcommandUpdate(command, fieldName) { initCommandUpdate(command, fieldName) {
this.$set(this.formEditField, command.id + '_' + fieldName, true); this.$set(this.formEditField, command.id + '_' + fieldName, true);
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]); this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
}, },
updatecommand(id, fieldName) { updateCommand(id, fieldName) {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
const data = {}; const data = {};
data[fieldName] = this.updateValues[id + '_' + fieldName]; data[fieldName] = this.updateValues[id + '_' + fieldName];
commandRepository.updatecommand(id, data) commandRepository.updateCommand(id, data)
.then(() => { .then(() => {
this.$store.dispatch('loadcommands') this.$store.dispatch('loadCommands')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
this.formEditField[id + '_' + fieldName] = false; this.formEditField[id + '_' + fieldName] = false;
}); });
}); });
}, },
deletecommand(id) { deleteCommand(id) {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
commandRepository.deletecommand(id) commandRepository.deleteCommand(id)
.then(() => { .then(() => {
this.$store.dispatch('loadcommands') this.$store.dispatch('loadCommands')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; 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) { showErrorMessage(msg) {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
this.$parent.$data.showAlert = true; this.$parent.$data.showAlert = true;

816
src/components/Recorders.vue
View File

@@ -1,303 +1,537 @@
<template> <template>
<div> <div>
<b-form-group class="container"> <b-form-group class="container">
<section class="section"> <section class="section">
<h1 class="title">{{ $t('Manage recorders') }}</h1> <h1 class="title">{{ $t('Manage recorders') }}</h1>
<p class="lead"> <p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recorder models') {{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recordermodels')
}} }}
</p> </p>
<br/> <br/>
<b-tabs v-model="tabIndex" card justified> <b-tabs v-model="tabIndex" card justified>
<b-tab title="Recorder list" active> <b-tab title="Recorder list" active>
<template slot="title"> <template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/> <font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/>
<strong>Recorder</strong>&nbsp;list <strong>Recorder</strong>&nbsp;list
</template> </template>
<p>{{ $t('There are')}}&nbsp;{{recorders.length}}&nbsp;{{ $t('recorders defined')}}:</p> <p>{{ $t('There are')}}&nbsp;{{recorders.length}}&nbsp;{{ $t('recorders defined')}}:</p>
<b-card-group deck> <b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorder) in recorders" <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
:header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'" v-for="(recorder) in recorders"
v-bind:key="recorder.id"> :header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'"
{{recorder}} v-bind:key="recorder.id">
<b-card-text> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp; <h5 class="card-title"><strong>{{ $t('name') }}:&nbsp;</strong>
<span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}&nbsp; <span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@click="initRecorderUpdate(recorder, 'name')" @click="initRecorderUpdate(recorder, 'name')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<b-form-input :id="recorder.id+'_name'" name="name" <b-form-input :id="recorder.id+'_name'" name="name"
v-model="updateValues[recorder.id+'_name']" v-model="updateValues[recorder.id+'_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}" v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" class="form-control" type="text"
:placeholder="'Name ('+recorder.name +')'" :placeholder="'Name ('+recorder.name +')'"
required></b-form-input> @blur="updateRecorder(recorder.id, 'name')"
<b-input-group-append> @keyup.enter="updateRecorder(recorder.id, 'name')"
<b-button :disabled="errors.has('name')" required></b-form-input>
@click="updateRecorder(recorder.id, 'name')" <b-input-group-append>
variant="outline-success"> <b-button :disabled="errors.has('name')"
<font-awesome-icon icon="check"></font-awesome-icon> @click="updateRecorder(recorder.id, 'name')"
</b-button> variant="outline-success">
</b-input-group-append> <font-awesome-icon icon="check"></font-awesome-icon>
</b-input-group> </b-button>
</h5> </b-input-group-append>
<p class="card-text"><strong>{{ $t('network_name') }}:</strong>&nbsp; </b-input-group>
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}&nbsp; </h5>
<hr/>
<p class="card-text"><strong>{{ $t('network_name') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}&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="initRecorderUpdate(recorder, 'network_name')" @click="initRecorderUpdate(recorder, 'network_name')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<b-form-input name="network_name" <b-form-input name="network_name"
v-model="updateValues[recorder.id+'_network_name']" style="min-width: 80%;"
class="form-control" type="text" v-model="updateValues[recorder.id+'_network_name']"
:placeholder="'Network name ('+recorder.network_name +')'" v-validate="'required|ip_or_fqdn'"
@blur="updateRecorder(recorder.id, 'network_name')" v-bind:class="{'is-danger': errors.has('network_name'), 'is-invalid': errors.has('network_name')}"
@keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input> class="form-control" type="text"
<b-input-group-append> :placeholder="'Network name ('+recorder.network_name +')'"
<b-button :disabled="errors.has('network_name')" @keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
@click="updateRecorder(recorder.id, 'network_name')" <b-input-group-append>
variant="outline-success"> <b-button :disabled="errors.has('network_name')"
<font-awesome-icon icon="check"></font-awesome-icon> @click="updateRecorder(recorder.id, 'network_name')"
</b-button> variant="outline-success">
</b-input-group-append> <font-awesome-icon icon="check"></font-awesome-icon>
</b-input-group> </b-button>
</p> </b-input-group-append>
<p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp; <span>{{ errors.first('network_name') }}</span>
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}&nbsp; </b-input-group>
</p>
<p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp;
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}&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="initRecorderUpdate(recorder, 'ip')" @click="initRecorderUpdate(recorder, 'ip')"
icon="pencil-alt"/> icon="pencil-alt"/>
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<b-form-input name="ip" <b-form-input name="ip"
v-model="updateValues[recorder.id+'_ip']" v-model="updateValues[recorder.id+'_ip']"
v-validate="'required|min:3'" v-validate="'ip'"
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}" v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
class="form-control" type="text" class="form-control" type="text"
:placeholder="'Room number ('+recorder.ip +')'" :placeholder="$t('ip address') +' ('+recorder.ip +')'"
@blur="updateRecorder(recorder.id, 'ip')" @keyup.enter="updateRecorder(recorder.id, 'ip')"
@keyup.enter="updateRecorder(recorder.id, 'ip')" required></b-form-input>
required></b-form-input> <b-input-group-append>
<b-input-group-append> <b-button :disabled="errors.has('ip')"
<b-button :disabled="errors.has('ip')" @click="updateRecorder(recorder.id, 'ip')"
@click="updateRecorder(recorder.id, 'ip')" variant="outline-success">
variant="outline-success"> <font-awesome-icon icon="check"></font-awesome-icon>
<font-awesome-icon icon="check"></font-awesome-icon> </b-button>
</b-button> </b-input-group-append>
</b-input-group-append> </b-input-group>
</b-input-group> <span>{{ errors.first('ip') }}</span>
</p> </p>
<hr/> <p class="card-text"><strong>{{ $t('ip v6') }}:</strong>&nbsp;
<div v-if="recorder.room"> <span v-if="!formEditField[recorder.id+'_ip6']">{{recorder.ip6}}&nbsp;
<p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{recorder.room.name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon
</a></p> @click="initRecorderUpdate(recorder, 'ip6')"
</div> icon="pencil-alt"/>
<div v-else> </a>
<p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{ </span>
$t('no_room_defined')}}</p> <b-input-group v-else size="sm">
<div class="form-group row"> <b-form-input name="ip6"
<div class="col-sm-8"> v-model="updateValues[recorder.id+'_ip6']"
<select class="form-control" v-model="form.room"> v-validate="'ip:6'"
<option value="">No recorder selected</option> v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
<option v-for="room in rooms" v-bind:value="room.id"> class="form-control" type="text"
{{ room.name }} :placeholder="$t('ip v6 address') +' ('+recorder.ip6 +')'"
</option> @keyup.enter="updateRecorder(recorder.id, 'ip6')"
</select> required></b-form-input>
</div> <b-input-group-append>
<label class="label col-sm-4 col-form-label">{{ $t('room') }}</label> <b-button :disabled="errors.has('ip6')"
</div> @click="updateRecorder(recorder.id, 'ip6')"
<div class="form-check"> variant="outline-success">
<input class="form-check-input" type="checkbox" <font-awesome-icon icon="check"></font-awesome-icon>
v-model="show_assigned_rooms" id="assignedRoomsCheck"> </b-button>
<label class="form-check-label" for="assignedRoomsCheck"> </b-input-group-append>
Show already assigned rooms </b-input-group>
</label> <span>{{ errors.first('ip6') }}</span>
</div> </p>
</div>
<div v-if="recorder.recorder_model"> <p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>&nbsp;
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;{{recorder.recorder_model.name}}&nbsp; <span v-if="!formEditField[recorder.id+'_ssh_port']">{{recorder.ssh_port}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon
</a></p> @click="initRecorderUpdate(recorder, 'ssh_port')"
</div> icon="pencil-alt"/>
<div v-else> </a>
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;{{ </span>
$t('no_model_defined')}}</p> <b-input-group v-else size="sm">
<div class="form-group row"> <b-form-input name="ssh_port"
<div class="col-sm-8"> v-model="updateValues[recorder.id+'_ssh_port']"
<select class="form-control" v-model="form.recorder_model"> v-validate="'required|between:0,65535'"
<option value="">No recorder selected</option> v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
<option v-for="recorderModel in recorderModels" class="form-control" type="text"
v-bind:value="recorderModel.id"> :placeholder="'Room number ('+recorder.ssh_port +')'"
{{ recorderModel.name }} @blur="updateRecorder(recorder.id, 'ssh_port')"
</option> @keyup.enter="updateRecorder(recorder.id, 'ssh_port')"
</select> required></b-form-input>
</div> <b-input-group-append>
<label class="label col-sm-4 col-form-label">{{ $t('model') }}</label> <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>&nbsp;
<span v-if="!formEditField[recorder.id+'_telnet_port']">{{recorder.telnet_port}}&nbsp;
<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>&nbsp;{{recorder.room.name}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon
@click="initRecorderUpdate(recorder, 'room_id')"
icon="pencil-alt"/>
</a></p>
</div> </div>
</div> <div v-else>
</b-card-text> <p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;
<div slot="footer"> <span v-if="recorder.room && recorder.room.name">{{recorder.room.name}}</span>
<small class="text-muted"> <span v-else>{{$t('no_room_defined')}}</span>
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}} </p>
<span class="pull-right"> <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>&nbsp;
<span v-if="!formEditField[recorder.id+'_lock_message']">{{recorder.lock_message}}&nbsp;
<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>&nbsp;{{recorder.recorder_model.name}}&nbsp;
<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>&nbsp;{{
$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>&nbsp;
<span v-if="!formEditField[recorder.id+'_description']">{{recorder.description}}&nbsp;
<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>&nbsp;
<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)" <button type="button" v-on:click="deleteRecorder(recorder.id)"
class="btn btn-sm btn-danger">{{ class="btn btn-sm btn-danger">{{
$t('delete') }}&nbsp;<font-awesome-icon $t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/> icon="trash"/>
</button> </button>
</span> </span>
</p> </p>
</small> </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>&nbsp;<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>
</b-card>
</b-card-group>
</b-tab>
<b-tab title="Create recorder">
<template slot="title">
<font-awesome-icon icon="plus"/>
<i>{{ $t('create') }}</i>&nbsp;<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"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('description') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<textarea class="textarea form-control" <textarea class="textarea form-control"
placeholder="Comments, remarks, notes, etc." placeholder="Comments, remarks, notes, etc."
v-model="form.description"></textarea> v-model="form.description"></textarea>
</div>
</div> </div>
</div>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('network_name') }}</label> <label class="label required col-sm-2 col-form-label">{{ $t('network_name') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="description" <input name="network_name"
v-model="form.network_name" v-model="form.network_name"
class="form-control" type="text" :placeholder="$t('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>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="number" <input name="ip"
v-model="form.ip" v-validate="'ip'"
class="form-control" type="text" placeholder="Recorder 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>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('ip v6') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="number" <input name="ip6"
v-model="form.telnet_port" v-validate="'ip:6'"
class="form-control" type="number" value="22" v-model="form.ip6"
placeholder="Telnet Port (23)"> 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>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ssh_port') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="number" <input name="telnet_port"
v-model="form.ssh_port" v-model="form.telnet_port"
class="form-control" type="number" value="23" v-validate="'required|between:0,65535'"
placeholder="SSH Port (22)"> 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>
<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('ssh_port') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder_model_id"> <input name="ssh_port"
<option disabled value="">No recorder_model selected</option> v-model="form.ssh_port"
<option v-for="recorderModel in recorderModels" v-validate="'required|between:0,65535'"
v-bind:value="recorderModel.id"> v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
{{ recorderModel.name }} class="form-control" type="number" value="23"
</option> placeholder="SSH Port (22)">
</select> </div>
<p class="col-sm-4" v-show="errors.has('ssh_port')">
{{ errors.first('ssh_port') }}
</p>
</div> </div>
</div>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('room') }}</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.room_id"> <select class="form-control" v-model="form.recorder_model_id">
<option disabled value="">Not assigned to room</option> <option disabled value="">No recorder_model selected</option>
<option v-for="room in rooms" v-bind:value="room.id"> <option v-for="recorderModel in recorderModels"
{{ room.name }} v-bind:value="recorderModel.id">
</option> {{ recorderModel.name }}
</select> </option>
</select>
</div>
</div> </div>
</div>
<div class="form-group row">
<div class="field is-grouped"> <label class="label col-sm-2 col-form-label">{{ $t('room') }}</label>
<div class="control"> <div class="col-sm-6">
<button <select class="form-control" v-model="form.room_id">
v-bind:disabled="errors.any()" <option disabled value="">Not assigned to room</option>
type="submit" <option v-for="room in rooms" v-bind:value="room.id">
class="btn btn-primary"> {{ room.name }}
Create recorder </option>
</button> </select>
</div>
</div> </div>
</div>
</section> <div class="form-group row">
</form> <label class="label col-sm-2 col-form-label">{{ $t('username') }}</label>
</b-card-text> <div class="col-sm-6">
</b-tab> <input name="username"
<b-tab title="Recorder model list"> v-model="form.username"
<template slot="title"> v-bind:class="{'is-danger': errors.has('username'), 'is-invalid': errors.has('username')}"
<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/> class="form-control" type="text" :placeholder="$t('username')"
<strong>Model</strong>&nbsp;<i>list</i> >
</template> </div>
<p>{{ $t('There are')}}&nbsp;{{recorderModels.length}}&nbsp;{{ $t('recorder models defined')}}:</p> <p class="col-sm-4">
<b-card-group deck> {{ $t('username') }} {{$t('may be left blank (-> recorder model)')}}
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorderModel) in recorderModels" </p>
:header="recorderModel.name" </div>
v-bind:key="recorderModel.id">
<b-card-text> <div class="form-group row">
<p class="card-text"> <label class="label col-sm-2 col-form-label">{{ $t('password') }}</label>
<strong>{{ $t('notes') }}:</strong>&nbsp; <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"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
<strong>Model</strong>&nbsp;<i>list</i>
</template>
<p>{{ $t('There are')}}&nbsp;{{recorderModels.length}}&nbsp;{{ $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>&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
@@ -310,33 +544,43 @@
:placeholder="'Notes ('+recorderModel.notes +')'" :placeholder="'Notes ('+recorderModel.notes +')'"
@blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea> @blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
</p> </p>
<hr/> <p class="card-text">
<strong>{{ $t('requires_username') }}:</strong>&nbsp;<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>&nbsp;<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;"> <hr/>
<strong>Recorder Model {{ $t('Commands') }}:</strong>&nbsp;
<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}}:&nbsp;{{a_type}}</small>
</b-badge>
</b-list-group-item> <b-list-group style="max-height: 400px; overflow-y:scroll;">
</b-list-group> <strong>Recorder Model {{ $t('Commands') }}:</strong>&nbsp;
<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}}:&nbsp;{{a_type}}</small>
</b-badge>
</b-card-text> </b-list-group-item>
<div slot="footer"> </b-list-group>
<small class="text-muted">
<p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p> </b-card-text>
</small> <div slot="footer">
</div> <small class="text-muted">
</b-card> <p>{{ $t('created')}}: {{recorderModel.created_at | moment("dddd, MMMM Do YYYY")}}</p>
</b-card-group> </small>
</b-tab> </div>
</b-tabs> </b-card>
</section> </b-card-group>
</b-form-group> </b-tab>
</b-tabs>
</section>
</b-form-group>
<hr> <hr>
<div class="column"> <div class="column">
@@ -366,7 +610,7 @@
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'; import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
const RecorderRepository = getRepository('recorder'); const recorderRepository = getRepository('recorder');
export default { export default {
components: { components: {
@@ -383,19 +627,45 @@
form: { form: {
name: '', name: '',
description: '', description: '',
network_name: '',
ip: '', ip: '',
ip6: '',
telnet_port: 23, telnet_port: 23,
ssh_port: 22, ssh_port: 22,
network_name: '', locked: false,
offline: false,
username: '',
password: '',
recorder_model: null, recorder_model: null,
room: null, room: null,
}, },
}; };
}, },
methods: { 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() { saveRecorder() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RecorderRepository.createRecorder(this.form) recorderRepository.createRecorder(this.form)
.then(() => { .then(() => {
this.$store.dispatch('loadRecorders') this.$store.dispatch('loadRecorders')
.then(() => { .then(() => {
@@ -409,7 +679,7 @@
}, },
deleteRecorder(id) { deleteRecorder(id) {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RecorderRepository.deleteRecorder(id) recorderRepository.deleteRecorder(id)
.then(() => { .then(() => {
this.$store.dispatch('loadRecorders') this.$store.dispatch('loadRecorders')
.then(() => { .then(() => {
@@ -464,4 +734,8 @@
.required:after { .required:after {
content: " *"; content: " *";
} }
b-form-input {
min-width: 80%;
}
</style> </style>

58
src/components/Rooms.vue
View File

@@ -18,9 +18,9 @@
<p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p> <p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
<b-card-group deck> <b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" <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> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp; <h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp;
<span v-if="!formEditField[room.id+'_name']">{{room.name}}&nbsp; <span v-if="!formEditField[room.id+'_name']">{{room.name}}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@@ -45,6 +45,60 @@
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</h5> </h5>
<p class="card-text"><strong>{{ $t('building_number') }}</strong>:&nbsp;
<span v-if="!formEditField[room.id+'_building_number']">{{room.building_number}}&nbsp;
<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>:&nbsp;
<span v-if="!formEditField[room.id+'_building_name']">{{room.building_name}}&nbsp;
<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>&nbsp; <p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}&nbsp; <span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">

3
src/main.ts
View File

@@ -28,6 +28,7 @@ import {
faList, faList,
faTrash, faTrash,
faPencilAlt, faPencilAlt,
faCogs,
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
@@ -40,7 +41,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
const isProduction = process.env.NODE_ENV === 'production'; 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); Vue.component('font-awesome-icon', FontAwesomeIcon);

2
src/plugins/i18n.ts
View File

@@ -12,6 +12,8 @@ const messages = {
plugins: 'Installed CLI Plugins', plugins: 'Installed CLI Plugins',
links: 'Essential Links', links: 'Essential Links',
ecosystem: 'Ecosystem', ecosystem: 'Ecosystem',
building_number: 'Building #',
building_name: 'Building'
}, },
es: { es: {
welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript', welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',