some linting and progress for Recorder.vue
This commit is contained in:
@@ -58,7 +58,7 @@
|
||||
tokenValidity: -1,
|
||||
refreshTokenValidity: -1,
|
||||
showAlert: true,
|
||||
alertMessage: "NO MESSAGE PROVIDED",
|
||||
alertMessage: 'NO MESSAGE PROVIDED',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -5,85 +5,179 @@
|
||||
|
||||
<h1 class="title">{{ $t('Manage recorders') }}</h1>
|
||||
<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('recorder models')
|
||||
}}
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
<b-tabs v-model="tabIndex" card justified>
|
||||
<b-tab title="Recorder list" active>
|
||||
<p>{{ $t('There are')}} {{rooms.length}} {{ $t('rooms defined')}}:</p>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="circle"/>
|
||||
<strong>Recorder</strong> list
|
||||
</template>
|
||||
<p>{{ $t('There are')}} {{recorders.length}} {{ $t('recorders defined')}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorder) in recorders"
|
||||
:header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'"
|
||||
v-bind:key="recorder.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}: {{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
<h5 class="card-title">{{ $t('name') }}:
|
||||
<span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="recorder.id+'_name'" name="name"
|
||||
v-model="updateValues[recorder.id+'_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Name ('+recorder.name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRecorder(recorder.id, 'name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong> {{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong> {{room.number}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong> {{room.comment}}
|
||||
<p class="card-text"><strong>{{ $t('network_name') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_network_name']">{{recorder.network_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></small>
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'network_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="network_name"
|
||||
v-model="updateValues[recorder.id+'_network_name']"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Network name ('+recorder.network_name +')'"
|
||||
@blur="updateRecorder(recorder.id, 'network_name')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('network_name')"
|
||||
@click="updateRecorder(recorder.id, 'network_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('ip') }}:</strong>
|
||||
<span v-if="!formEditField[recorder.id+'_ip']">{{recorder.ip}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRecorderUpdate(recorder, 'ip')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="ip"
|
||||
v-model="updateValues[recorder.id+'_ip']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+recorder.ip +')'"
|
||||
@blur="updateRecorder(recorder.id, 'ip')"
|
||||
@keyup.enter="updateRecorder(recorder.id, 'ip')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('ip')"
|
||||
@click="updateRecorder(recorder.id, 'ip')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
|
||||
<hr/>
|
||||
<div v-if="room.recorder">
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{room.recorder.name}}
|
||||
<div v-if="recorder.room">
|
||||
<p class="card-text"><strong>{{ $t('Room') }}:</strong> {{recorder.room.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('Recorder') }}:</strong> {{
|
||||
$t('no_recorder_defined')}}</p>
|
||||
<p class="card-text"><strong>{{ $t('Room') }}:</strong> {{
|
||||
$t('no_room_defined')}}</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.recorder">
|
||||
<select class="form-control" v-model="form.room">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="option in options.recorders" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
<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('recorder') }}</label>
|
||||
<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_recorders" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Show already assigned recorders
|
||||
v-model="show_assigned_rooms" id="assignedRoomsCheck">
|
||||
<label class="form-check-label" for="assignedRoomsCheck">
|
||||
Show already assigned rooms
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="recorder.recorder_model">
|
||||
<p class="card-text"><strong>{{ $t('Model') }}:</strong> {{recorder.recorder_model.name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Model') }}:</strong> {{
|
||||
$t('no_model_defined')}}</p>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.room">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorderModel.id">
|
||||
{{ recorderModel.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="label col-sm-4 col-form-label">{{ $t('model') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<button type="button" v-on:click="deleteRoom(room.id)" class="btn btn-sm btn-danger">{{
|
||||
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}
|
||||
<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>
|
||||
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
|
||||
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 room')}}:</p>
|
||||
<p>{{ $t('Create a new recorder')}}:</p>
|
||||
<!-- form starts here -->
|
||||
<form v-on:submit.prevent="saveRoom()">
|
||||
<form v-on:submit.prevent="saveRecorder()">
|
||||
<section class="form">
|
||||
|
||||
<div class="form-group row">
|
||||
@@ -93,51 +187,61 @@
|
||||
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="Room name" required>
|
||||
class="form-control" type="text" placeholder="Recorder name" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('name')">
|
||||
{{ errors.first('name') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="alternate_name"
|
||||
v-model="form.alternate_name"
|
||||
class="form-control" type="text" placeholder="Alternate name">
|
||||
<textarea class="textarea form-control"
|
||||
placeholder="Comments, remarks, notes, etc."
|
||||
v-model="form.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('network_name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="description"
|
||||
v-model="form.network_name"
|
||||
class="form-control" type="text" :placeholder="$t('network_name')">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.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="Room 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>
|
||||
v-model="form.ip"
|
||||
class="form-control" type="text" placeholder="Recorder IP">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="option in options.recorders" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
<select class="form-control" v-model="form.recorder_model">
|
||||
<option disabled value="">No recorder_model selected</option>
|
||||
<option v-for="recorderModel in recorderModels"
|
||||
v-bind:value="recorder_model.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">
|
||||
<option disabled value="">Not assigned to room</option>
|
||||
<option v-for="room in rooms" v-bind:value="room.id">
|
||||
{{ room.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -150,7 +254,7 @@
|
||||
v-bind:disabled="errors.any()"
|
||||
type="submit"
|
||||
class="btn btn-primary">
|
||||
Create room
|
||||
Create recorder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,89 +265,21 @@
|
||||
</b-tab>
|
||||
<b-tab title="Recorder model list">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="scroll"/> <font-awesome-icon icon="list"/> Recorder <strong>Model</strong> <i>list</i>
|
||||
<font-awesome-icon icon="list"/> Recorder <font-awesome-icon icon="scroll"/>
|
||||
<strong>Model</strong> <i>list</i>
|
||||
</template>
|
||||
</b-tab>
|
||||
<b-tab title="Create recorder model">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="scroll"/> <font-awesome-icon icon="plus"/> <i>create</i> Recorder <strong>Model</strong>
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>create</i> Recorder <font-awesome-icon icon="scroll"/>
|
||||
<strong>Model</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create a new room')}}:</p>
|
||||
<p>{{ $t('Create a new recorder')}}:</p>
|
||||
<!-- form starts here -->
|
||||
<form v-on:submit.prevent="saveRoom()">
|
||||
<section class="form">
|
||||
<form v-on:submit.prevent="saveRecorder">
|
||||
|
||||
<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="Room 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="Room 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">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="option in options.recorders" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
</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 room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
@@ -279,7 +315,7 @@
|
||||
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
|
||||
const RoomRepository = getRepository('room');
|
||||
const RecorderRepository = getRepository('recorder');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -292,33 +328,34 @@
|
||||
show_assigned_recorders: false,
|
||||
form: {
|
||||
name: '',
|
||||
alternate_name: '',
|
||||
number: '',
|
||||
comment: '',
|
||||
recorder: null,
|
||||
description: '',
|
||||
ip: '',
|
||||
network_name: '',
|
||||
recorder_model: null,
|
||||
room: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveRoom() {
|
||||
saveRecorder() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.createRoom(this.form)
|
||||
RecorderRepository.createRecorder(this.form)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.tabIndex = 0;
|
||||
});
|
||||
}).catch((msg) => {
|
||||
this.showErrorMessage("Could not safe room!");
|
||||
this.showErrorMessage('Could not safe recorder!');
|
||||
this.$log.warn(msg);
|
||||
});
|
||||
},
|
||||
deleteRoom(id) {
|
||||
deleteRecorder(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.deleteRoom(id)
|
||||
RecorderRepository.deleteRecorder(id)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
@@ -333,29 +370,27 @@
|
||||
mounted() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
this.$parent.$data.showAlert = false;
|
||||
this.$store.dispatch('loadRooms')
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
recorders: [
|
||||
{value: 8, text: 'SMP 351 AudiMax'},
|
||||
{value: 13, text: 'SMP 351 HMU'},
|
||||
],
|
||||
};
|
||||
},
|
||||
rooms() {
|
||||
return this.$store.state.rooms;
|
||||
},
|
||||
recorders() {
|
||||
return this.$store.state.recorders;
|
||||
},
|
||||
recorderModels() {
|
||||
return this.$store.state.recorderModels;
|
||||
},
|
||||
recorderCommands() {
|
||||
return this.$store.state.recorderCommands;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -11,30 +11,105 @@
|
||||
|
||||
<b-tabs v-model="tabIndex" card>
|
||||
<b-tab title="Room list" active>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="door-open"/>
|
||||
<strong>Room</strong> <i>list</i>
|
||||
</template>
|
||||
<p>{{ $t('There are')}} {{rooms.length}} {{ $t('rooms defined')}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
|
||||
<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">
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}: {{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
<h5 class="card-title">{{ $t('name') }}:
|
||||
<span v-if="!formEditField[room.id+'_name']">{{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_name'" name="name"
|
||||
v-model="updateValues[room.id+'_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Name ('+room.name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRoom(room.id, 'name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong> {{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong> {{room.number}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong> {{room.comment}}
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></small>
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'alternate_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="alternate_name"
|
||||
v-model="updateValues[room.id+'_alternate_name']"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Alternate name ('+room.alternate_name +')'"
|
||||
@blur="updateRoom(room.id, 'alternate_name')"
|
||||
@keyup.enter="updateRoom(room.id, 'alternate_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('alternate_name')"
|
||||
@click="updateRoom(room.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('room_number') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_number']">{{room.number}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'number')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="number"
|
||||
v-model="updateValues[room.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="'Room number ('+room.number +')'"
|
||||
@blur="updateRoom(room.id, 'number')"
|
||||
@keyup.enter="updateRoom(room.id, 'number')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('number')"
|
||||
@click="updateRoom(room.id, '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">
|
||||
<small><strong>{{ $t('comment') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_comment']">{{room.comment}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'comment')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<textarea class="textarea form-control" v-else name="comment"
|
||||
v-model="updateValues[room.id+'_comment']"
|
||||
:placeholder="'Comment ('+room.comment +')'"
|
||||
@blur="updateRoom(room.id, 'comment')"></textarea>
|
||||
</small>
|
||||
</p>
|
||||
<hr/>
|
||||
<div v-if="room.recorder">
|
||||
@@ -50,8 +125,8 @@
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" v-model="form.recorder">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="option in options.recorders" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -68,11 +143,15 @@
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<button type="button" v-on:click="deleteRoom(room.id)" class="btn btn-sm btn-danger">{{
|
||||
<p>{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}
|
||||
<span class="pull-right">
|
||||
<button type="button" v-on:click="deleteRoom(room.id)"
|
||||
class="btn btn-sm btn-danger">{{
|
||||
$t('delete') }} <font-awesome-icon
|
||||
icon="trash"/>
|
||||
</button>
|
||||
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
|
||||
icon="trash"/>
|
||||
</button>
|
||||
</span>
|
||||
</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
@@ -80,6 +159,11 @@
|
||||
</b-tab>
|
||||
|
||||
<b-tab title="Create room">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>{{$t('create')}}</i> <font-awesome-icon icon="door-open"/>
|
||||
<strong>{{$t('Room')}}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create a new room')}}:</p>
|
||||
<!-- form starts here -->
|
||||
@@ -136,8 +220,8 @@
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder">
|
||||
<option disabled value="">No recorder selected</option>
|
||||
<option v-for="option in options.recorders" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -201,6 +285,8 @@
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
updateValues: {},
|
||||
formEditField: {},
|
||||
show_assigned_recorders: false,
|
||||
form: {
|
||||
name: '',
|
||||
@@ -222,10 +308,27 @@
|
||||
this.tabIndex = 0;
|
||||
});
|
||||
}).catch((msg) => {
|
||||
this.showErrorMessage("Could not safe room!");
|
||||
this.$log.warn(msg);
|
||||
this.showErrorMessage('Could not safe room!');
|
||||
this.$log.warn(msg);
|
||||
});
|
||||
},
|
||||
initRoomUpdate(room, fieldName) {
|
||||
this.$set(this.formEditField, room.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, room.id + '_' + fieldName, room[fieldName]);
|
||||
},
|
||||
updateRoom(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
RoomRepository.updateRoom(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteRoom(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.deleteRoom(id)
|
||||
|
||||
42
src/main.ts
42
src/main.ts
@@ -17,9 +17,19 @@ import VueMoment from 'vue-moment';
|
||||
// following is to avoid missing type definitions
|
||||
// const FlagIcon = require('vue-flag-icon');
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import { faCoffee, faPlus, faScroll, faCircle, faList, faTrash, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
import {library} from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faCoffee,
|
||||
faDoorOpen,
|
||||
faCheck,
|
||||
faPlus,
|
||||
faScroll,
|
||||
faCircle,
|
||||
faList,
|
||||
faTrash,
|
||||
faPencilAlt,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
|
||||
|
||||
|
||||
// import 'bootstrap';
|
||||
@@ -30,19 +40,19 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCircle, faList, faPlus);
|
||||
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen);
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
||||
|
||||
const options = {
|
||||
isEnabled: true,
|
||||
// logLevel : isProduction ? 'error' : 'debug',
|
||||
logLevel : 'debug',
|
||||
stringifyArguments : false,
|
||||
showLogLevel : true,
|
||||
showMethodName : true,
|
||||
separator: '|',
|
||||
showConsoleColors: true,
|
||||
isEnabled: true,
|
||||
// logLevel : isProduction ? 'error' : 'debug',
|
||||
logLevel: 'debug',
|
||||
stringifyArguments: false,
|
||||
showLogLevel: true,
|
||||
showMethodName: true,
|
||||
separator: '|',
|
||||
showConsoleColors: true,
|
||||
};
|
||||
|
||||
Vue.use(VueLogger, options);
|
||||
@@ -63,8 +73,8 @@ Vue.use(VueMoment);
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
i18n,
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App),
|
||||
}).$mount('#app');
|
||||
|
||||
Reference in New Issue
Block a user