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

some linting and progress for Recorder.vue

Browse Source
This commit is contained in:
Tobias
2019-04-26 09:40:57 +02:00
parent a9c07b628d
commit 03b9637e65
4 changed files with 357 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -58,7 +58,7 @@
tokenValidity: -1, tokenValidity: -1,
refreshTokenValidity: -1, refreshTokenValidity: -1,
showAlert: true, showAlert: true,
alertMessage: "NO MESSAGE PROVIDED", alertMessage: 'NO MESSAGE PROVIDED',
}; };
}, },
methods: { methods: {

347
src/components/Recorders.vue
View File

@@ -5,85 +5,179 @@
<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('recorder models')
}}
</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>
<p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p> <template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/>
<strong>Recorder</strong>&nbsp;list
</template>
<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="(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> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp; <h5 class="card-title">{{ $t('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 icon="pencil-alt"/> <font-awesome-icon
@click="initRecorderUpdate(recorder, 'name')"
icon="pencil-alt"/>
</a> </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> </h5>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;{{room.alternate_name}}&nbsp; <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 icon="pencil-alt"/> <font-awesome-icon
@click="initRecorderUpdate(recorder, 'network_name')"
icon="pencil-alt"/>
</a> </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>
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;{{room.number}}&nbsp; <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 icon="pencil-alt"/> <font-awesome-icon
</a></p> @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>
<p class="card-text">
<small><strong>{{ $t('comment') }}:</strong>&nbsp;{{room.comment}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></small>
</p>
<hr/> <hr/>
<div v-if="room.recorder"> <div v-if="recorder.room">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&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 icon="pencil-alt"/>
</a></p> </a></p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Room') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p> $t('no_room_defined')}}</p>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-8"> <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 disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value"> <option v-for="room in rooms" v-bind:value="room.id">
{{ option.text }} {{ room.name }}
</option> </option>
</select> </select>
</div> </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>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" <input class="form-check-input" type="checkbox"
v-model="show_assigned_recorders" id="defaultCheck1"> v-model="show_assigned_rooms" id="assignedRoomsCheck">
<label class="form-check-label" for="defaultCheck1"> <label class="form-check-label" for="assignedRoomsCheck">
Show already assigned recorders Show already assigned rooms
</label> </label>
</div> </div>
</div> </div>
<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.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> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <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') }}&nbsp;<font-awesome-icon $t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/> icon="trash"/>
</button> </button>
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div> </span>
</p>
</small> </small>
</div> </div>
</b-card> </b-card>
</b-card-group> </b-card-group>
</b-tab> </b-tab>
<b-tab title="Create recorder"> <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> <b-card-text>
<p>{{ $t('Create a new room')}}:</p> <p>{{ $t('Create a new recorder')}}:</p>
<!-- form starts here --> <!-- form starts here -->
<form v-on:submit.prevent="saveRoom()"> <form v-on:submit.prevent="saveRecorder()">
<section class="form"> <section class="form">
<div class="form-group row"> <div class="form-group row">
@@ -93,51 +187,61 @@
v-model="form.name" v-model="form.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" placeholder="Room name" required> class="form-control" type="text" placeholder="Recorder name" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('name')"> <p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }} {{ errors.first('name') }}
</p> </p>
</div> </div>
<div class="form-group row"> <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"> <div class="col-sm-6">
<input name="alternate_name" <textarea class="textarea form-control"
v-model="form.alternate_name" placeholder="Comments, remarks, notes, etc."
class="form-control" type="text" placeholder="Alternate name"> v-model="form.description"></textarea>
</div> </div>
</div> </div>
<div class="form-group row"> <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"> <div class="col-sm-6">
<input name="number" <input name="number"
v-model="form.number" v-model="form.ip"
v-validate="'required|min:3'" class="form-control" type="text" placeholder="Recorder IP">
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> </div>
<div class="form-group row"> <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"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder"> <select class="form-control" v-model="form.recorder_model">
<option disabled value="">No recorder selected</option> <option disabled value="">No recorder_model selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value"> <option v-for="recorderModel in recorderModels"
{{ option.text }} 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> </option>
</select> </select>
</div> </div>
@@ -150,7 +254,7 @@
v-bind:disabled="errors.any()" v-bind:disabled="errors.any()"
type="submit" type="submit"
class="btn btn-primary"> class="btn btn-primary">
Create room Create recorder
</button> </button>
</div> </div>
</div> </div>
@@ -161,89 +265,21 @@
</b-tab> </b-tab>
<b-tab title="Recorder model list"> <b-tab title="Recorder model list">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<strong>Model</strong>&nbsp;<i>list</i> <font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
<strong>Model</strong>&nbsp;<i>list</i>
</template> </template>
</b-tab> </b-tab>
<b-tab title="Create recorder model"> <b-tab title="Create recorder model">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="plus"/>&nbsp;<i>create</i>&nbsp;Recorder&nbsp;<strong>Model</strong> <font-awesome-icon icon="plus"/>
<i>create</i>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
<strong>Model</strong>
</template> </template>
<b-card-text> <b-card-text>
<p>{{ $t('Create a new room')}}:</p> <p>{{ $t('Create a new recorder')}}:</p>
<!-- form starts here --> <!-- form starts here -->
<form v-on:submit.prevent="saveRoom()"> <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="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> </form>
</b-card-text> </b-card-text>
</b-tab> </b-tab>
@@ -279,7 +315,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 RoomRepository = getRepository('room'); const RecorderRepository = getRepository('recorder');
export default { export default {
components: { components: {
@@ -292,33 +328,34 @@
show_assigned_recorders: false, show_assigned_recorders: false,
form: { form: {
name: '', name: '',
alternate_name: '', description: '',
number: '', ip: '',
comment: '', network_name: '',
recorder: null, recorder_model: null,
room: null,
}, },
}; };
}, },
methods: { methods: {
saveRoom() { saveRecorder() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RoomRepository.createRoom(this.form) RecorderRepository.createRecorder(this.form)
.then(() => { .then(() => {
this.$store.dispatch('loadRooms') this.$store.dispatch('loadRecorders')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
this.tabIndex = 0; this.tabIndex = 0;
}); });
}).catch((msg) => { }).catch((msg) => {
this.showErrorMessage("Could not safe room!"); this.showErrorMessage('Could not safe recorder!');
this.$log.warn(msg); this.$log.warn(msg);
}); });
}, },
deleteRoom(id) { deleteRecorder(id) {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RoomRepository.deleteRoom(id) RecorderRepository.deleteRecorder(id)
.then(() => { .then(() => {
this.$store.dispatch('loadRooms') this.$store.dispatch('loadRecorders')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
}); });
@@ -333,29 +370,27 @@
mounted() { mounted() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false; this.$parent.$data.showAlert = false;
this.$store.dispatch('loadRooms')
.then(() => {
this.$store.dispatch('loadRecorders') this.$store.dispatch('loadRecorders')
.then(() => {
this.$store.dispatch('loadRooms')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$parent.$data.isLoading = false;
}); });
}); });
}, },
computed: { computed: {
options() {
return {
recorders: [
{value: 8, text: 'SMP 351 AudiMax'},
{value: 13, text: 'SMP 351 HMU'},
],
};
},
rooms() { rooms() {
return this.$store.state.rooms; return this.$store.state.rooms;
}, },
recorders() { recorders() {
return this.$store.state.recorders; return this.$store.state.recorders;
}, },
recorderModels() {
return this.$store.state.recorderModels;
},
recorderCommands() {
return this.$store.state.recorderCommands;
},
}, },
}; };
</script> </script>

141
src/components/Rooms.vue
View File

@@ -11,30 +11,105 @@
<b-tabs v-model="tabIndex" card> <b-tabs v-model="tabIndex" card>
<b-tab title="Room list" active> <b-tab title="Room list" active>
<template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="door-open"/>
<strong>Room</strong>&nbsp;<i>list</i>
</template>
<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" :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> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp; <h5 class="card-title">{{ $t('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 icon="pencil-alt"/> <font-awesome-icon
@click="initRoomUpdate(room, 'name')"
icon="pencil-alt"/>
</a> </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> </h5>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;{{room.alternate_name}}&nbsp; <p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&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">
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon
@click="initRoomUpdate(room, 'alternate_name')"
icon="pencil-alt"/>
</a> </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>
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;{{room.number}}&nbsp; <p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_number']">{{room.number}}&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="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"> <p class="card-text">
<small><strong>{{ $t('comment') }}:</strong>&nbsp;{{room.comment}}&nbsp; <small><strong>{{ $t('comment') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_comment']">{{room.comment}}&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></small> @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> </p>
<hr/> <hr/>
<div v-if="room.recorder"> <div v-if="room.recorder">
@@ -50,8 +125,8 @@
<div class="col-sm-8"> <div class="col-sm-8">
<select class="form-control" v-model="form.recorder"> <select class="form-control" v-model="form.recorder">
<option disabled value="">No recorder selected</option> <option disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ option.text }} {{ recorder.name}}
</option> </option>
</select> </select>
</div> </div>
@@ -68,11 +143,15 @@
</b-card-text> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <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') }}&nbsp;<font-awesome-icon $t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/> icon="trash"/>
</button> </button>
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div> </span>
</p>
</small> </small>
</div> </div>
</b-card> </b-card>
@@ -80,6 +159,11 @@
</b-tab> </b-tab>
<b-tab title="Create room"> <b-tab title="Create room">
<template slot="title">
<font-awesome-icon icon="plus"/>
<i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="door-open"/>
<strong>{{$t('Room')}}</strong>
</template>
<b-card-text> <b-card-text>
<p>{{ $t('Create a new room')}}:</p> <p>{{ $t('Create a new room')}}:</p>
<!-- form starts here --> <!-- form starts here -->
@@ -136,8 +220,8 @@
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder"> <select class="form-control" v-model="form.recorder">
<option disabled value="">No recorder selected</option> <option disabled value="">No recorder selected</option>
<option v-for="option in options.recorders" v-bind:value="option.value"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ option.text }} {{ recorder.name }}
</option> </option>
</select> </select>
</div> </div>
@@ -201,6 +285,8 @@
data() { data() {
return { return {
tabIndex: 0, tabIndex: 0,
updateValues: {},
formEditField: {},
show_assigned_recorders: false, show_assigned_recorders: false,
form: { form: {
name: '', name: '',
@@ -222,10 +308,27 @@
this.tabIndex = 0; this.tabIndex = 0;
}); });
}).catch((msg) => { }).catch((msg) => {
this.showErrorMessage("Could not safe room!"); this.showErrorMessage('Could not safe room!');
this.$log.warn(msg); 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) { deleteRoom(id) {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RoomRepository.deleteRoom(id) RoomRepository.deleteRoom(id)

26
src/main.ts
View File

@@ -17,9 +17,19 @@ import VueMoment from 'vue-moment';
// following is to avoid missing type definitions // following is to avoid missing type definitions
// const FlagIcon = require('vue-flag-icon'); // const FlagIcon = require('vue-flag-icon');
import { library } from '@fortawesome/fontawesome-svg-core'; import {library} from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faPlus, faScroll, faCircle, faList, faTrash, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import {
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; faCoffee,
faDoorOpen,
faCheck,
faPlus,
faScroll,
faCircle,
faList,
faTrash,
faPencilAlt,
} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
// import 'bootstrap'; // import 'bootstrap';
@@ -30,17 +40,17 @@ 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, faCircle, faList, faPlus); library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen);
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
const options = { const options = {
isEnabled: true, isEnabled: true,
// logLevel : isProduction ? 'error' : 'debug', // logLevel : isProduction ? 'error' : 'debug',
logLevel : 'debug', logLevel: 'debug',
stringifyArguments : false, stringifyArguments: false,
showLogLevel : true, showLogLevel: true,
showMethodName : true, showMethodName: true,
separator: '|', separator: '|',
showConsoleColors: true, showConsoleColors: true,
}; };