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

added oldLogin.vue to modify Login.vue

Browse Source
This commit is contained in:
Tobias Kurze
2020-07-24 16:46:31 +02:00
parent d3df9d5a30
commit f701797639
15 changed files with 21477 additions and 20110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

682
src/components/Commands.vue
View File

@@ -1,341 +1,341 @@
<template>
<div class="container">
<section class="section">
<h1 class="title">{{ $t('Manage Commands') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('commands') }}</strong>
</p>
<br/>
<b-tabs v-model="tabIndex" card>
<b-tab title="Command list" active>
<template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>command</strong>&nbsp;<i>list</i>
</template>
<p>{{ $t('There are')}}&nbsp;{{commands.length}}&nbsp;{{ $t('recorder commands defined')}}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(command) in commands"
:header="command.name + ' (' +command.recorder_model.name+ ')'" v-bind:key="command.id">
<b-card-text>
<h5 class="card-title">{{ $t('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">
<font-awesome-icon
@click="initRecCommandUpdate(command, 'alternative_name')"
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else>
<b-form-input :id="command.id+'_alternative_name'" name="alternative_name"
v-model="updateValues[command.id+'_alternative_name']"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('alternative_name'), 'is-invalid': errors.has('alternative_name')}"
class="form-control" type="text"
:placeholder="'Alternative name ('+command.alternative_name +')'"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('alternative_name')"
@click="updateRecCommand(command.id, 'alternative_name')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</small>
</p>
<p class="card-text">
<small><strong>{{ $t('description') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_description']">{{command.description}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon
@click="initRecCommandUpdate(command, 'description')"
icon="pencil-alt"/>
</a>
</span>
<textarea class="textarea form-control" v-else name="comment"
v-model="updateValues[command.id+'_description']"
:placeholder="'Comment ('+command.description +')'"
@blur="updateRecCommand(command.id, 'description')"></textarea>
</small>
</p>
<hr/>
<div v-if="command.recorder_model">
<p class="card-text"><strong>{{ $t('Recorder') }} {{ $t('model') }}:</strong>&nbsp;{{command.recorder_model.name}}&nbsp;</p>
</div>
<div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_model_defined')}}</p>
</div>
</b-card-text>
<div slot="footer">
<small class="text-muted">
<p>{{ $t('created')}}: {{command.created_at | moment("dddd, MMMM Do YYYY")}}
</p>
</small>
</div>
</b-card>
</b-card-group>
</b-tab>
<b-tab title="Create command">
<template slot="title">
<font-awesome-icon icon="plus"/>
<i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>{{$t('virtual')}} {{$t('command')}}</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new command')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="savecommand()">
<section class="form">
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="command name" required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="col-sm-6">
<input name="alternate_name"
v-model="form.alternate_name"
class="form-control" type="text" placeholder="Alternate name">
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6">
<input name="number"
v-model="form.number"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="command number" required>
</div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
v-model="form.comment"></textarea>
</div>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
<div class="col-sm-6">
<select class="form-control" v-model="form.recorder_id">
<option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }}
</option>
</select>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
type="submit"
class="btn btn-primary">
Create command
</button>
</div>
</div>
</section>
</form>
</b-card-text>
</b-tab>
</b-tabs>
</section>
<hr>
<!--
<div class="column">
<section class="section" id="results">
<div class="box">
<ul>
<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');
const commandRepository = getRepository('command');
export default {
components: {
PulseLoader,
},
props: [],
data() {
return {
tabIndex: 0,
updateValues: {},
formEditField: {},
show_assigned_recorders: false,
form: {
name: null,
alternate_name: null,
number: null,
comment: null,
recorder_id: null,
},
};
},
methods: {
saveCommand() {
this.$parent.$data.isLoading = true;
commandRepository.createCommand(this.form)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.tabIndex = 0;
});
}).catch((msg) => {
this.showErrorMessage('Could not safe command!');
this.$log.warn(msg);
});
},
initCommandUpdate(command, fieldName) {
this.$set(this.formEditField, command.id + '_' + fieldName, true);
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
},
updateCommand(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
data[fieldName] = this.updateValues[id + '_' + fieldName];
commandRepository.updateCommand(id, data)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.formEditField[id + '_' + fieldName] = false;
});
});
},
deleteCommand(id) {
this.$parent.$data.isLoading = true;
commandRepository.deleteCommand(id)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
initRecCommandUpdate(command, fieldName) {
this.$set(this.formEditField, command.id + '_' + fieldName, true);
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
},
updateRecCommand(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
data[fieldName] = this.updateValues[id + '_' + fieldName];
recorderRepository.updateRecorderCommand(id, data)
.then(() => {
this.$store.dispatch('loadRecorderCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.formEditField[id + '_' + fieldName] = false;
});
});
},
showErrorMessage(msg) {
this.$parent.$data.isLoading = false;
this.$parent.$data.showAlert = true;
this.$parent.$data.alertMessage = msg;
},
},
mounted() {
this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false;
this.$store.dispatch('loadCommands')
.then(() => {
this.$store.dispatch('loadRecorders')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
computed: {
options() {
return {
recorders: [
{value: 8, text: 'SMP 351 AudiMax'},
{value: 13, text: 'SMP 351 HMU'},
],
};
},
commands() {
return this.$store.state.recorderCommands;
},
recorders() {
return this.$store.state.recorders;
},
},
};
</script>
<style>
.comment {
white-space: pre-wrap;
}
.card:hover {
background-color: whitesmoke;
}
.required:after {
content: " *";
}
</style>
<template>
<div class="container">
<section class="section">
<h1 class="title">{{ $t('Manage Commands') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('commands') }}</strong>
</p>
<br/>
<b-tabs v-model="tabIndex" card>
<b-tab title="Command list" active>
<template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>command</strong>&nbsp;<i>list</i>
</template>
<p>{{ $t('There are')}}&nbsp;{{commands.length}}&nbsp;{{ $t('recorder commands defined')}}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(command) in commands"
:header="command.name + ' (' +command.recorder_model.name+ ')'" v-bind:key="command.id">
<b-card-text>
<h5 class="card-title">{{ $t('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">
<font-awesome-icon
@click="initRecCommandUpdate(command, 'alternative_name')"
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else>
<b-form-input :id="command.id+'_alternative_name'" name="alternative_name"
v-model="updateValues[command.id+'_alternative_name']"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('alternative_name'), 'is-invalid': errors.has('alternative_name')}"
class="form-control" type="text"
:placeholder="'Alternative name ('+command.alternative_name +')'"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('alternative_name')"
@click="updateRecCommand(command.id, 'alternative_name')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</small>
</p>
<p class="card-text">
<small><strong>{{ $t('description') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_description']">{{command.description}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon
@click="initRecCommandUpdate(command, 'description')"
icon="pencil-alt"/>
</a>
</span>
<textarea class="textarea form-control" v-else name="comment"
v-model="updateValues[command.id+'_description']"
:placeholder="'Comment ('+command.description +')'"
@blur="updateRecCommand(command.id, 'description')"></textarea>
</small>
</p>
<hr/>
<div v-if="command.recorder_model">
<p class="card-text"><strong>{{ $t('Recorder') }} {{ $t('model') }}:</strong>&nbsp;{{command.recorder_model.name}}&nbsp;</p>
</div>
<div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_model_defined')}}</p>
</div>
</b-card-text>
<div slot="footer">
<small class="text-muted">
<p>{{ $t('created')}}: {{command.created_at | moment("dddd, MMMM Do YYYY")}}
</p>
</small>
</div>
</b-card>
</b-card-group>
</b-tab>
<b-tab title="Create command">
<template slot="title">
<font-awesome-icon icon="plus"/>
<i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="cogs"/>
<strong>{{$t('virtual')}} {{$t('command')}}</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new command')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="savecommand()">
<section class="form">
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="command name" required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="col-sm-6">
<input name="alternate_name"
v-model="form.alternate_name"
class="form-control" type="text" placeholder="Alternate name">
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6">
<input name="number"
v-model="form.number"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="command number" required>
</div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
v-model="form.comment"></textarea>
</div>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
<div class="col-sm-6">
<select class="form-control" v-model="form.recorder_id">
<option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }}
</option>
</select>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
type="submit"
class="btn btn-primary">
Create command
</button>
</div>
</div>
</section>
</form>
</b-card-text>
</b-tab>
</b-tabs>
</section>
<hr>
<!--
<div class="column">
<section class="section" id="results">
<div class="box">
<ul>
<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');
const commandRepository = getRepository('command');
export default {
components: {
PulseLoader,
},
props: [],
data() {
return {
tabIndex: 0,
updateValues: {},
formEditField: {},
show_assigned_recorders: false,
form: {
name: null,
alternate_name: null,
number: null,
comment: null,
recorder_id: null,
},
};
},
methods: {
saveCommand() {
this.$parent.$data.isLoading = true;
commandRepository.createCommand(this.form)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.tabIndex = 0;
});
}).catch((msg) => {
this.showErrorMessage('Could not safe command!');
this.$log.warn(msg);
});
},
initCommandUpdate(command, fieldName) {
this.$set(this.formEditField, command.id + '_' + fieldName, true);
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
},
updateCommand(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
data[fieldName] = this.updateValues[id + '_' + fieldName];
commandRepository.updateCommand(id, data)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.formEditField[id + '_' + fieldName] = false;
});
});
},
deleteCommand(id) {
this.$parent.$data.isLoading = true;
commandRepository.deleteCommand(id)
.then(() => {
this.$store.dispatch('loadCommands')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
initRecCommandUpdate(command, fieldName) {
this.$set(this.formEditField, command.id + '_' + fieldName, true);
this.$set(this.updateValues, command.id + '_' + fieldName, command[fieldName]);
},
updateRecCommand(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
data[fieldName] = this.updateValues[id + '_' + fieldName];
recorderRepository.updateRecorderCommand(id, data)
.then(() => {
this.$store.dispatch('loadRecorderCommands')
.then(() => {
this.$parent.$data.isLoading = false;
this.formEditField[id + '_' + fieldName] = false;
});
});
},
showErrorMessage(msg) {
this.$parent.$data.isLoading = false;
this.$parent.$data.showAlert = true;
this.$parent.$data.alertMessage = msg;
},
},
mounted() {
this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false;
this.$store.dispatch('loadCommands')
.then(() => {
this.$store.dispatch('loadRecorders')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
computed: {
options() {
return {
recorders: [
{value: 8, text: 'SMP 351 AudiMax'},
{value: 13, text: 'SMP 351 HMU'},
],
};
},
commands() {
return this.$store.state.recorderCommands;
},
recorders() {
return this.$store.state.recorders;
},
},
};
</script>
<style>
.comment {
white-space: pre-wrap;
}
.card:hover {
background-color: whitesmoke;
}
.required:after {
content: " *";
}
</style>