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

added rooms and recorders to fe

Browse Source
This commit is contained in:
Tobias
2019-04-24 16:35:36 +02:00
parent 4a97efce6f
commit a9c07b628d
10 changed files with 576 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@@ -8832,6 +8832,11 @@
} }
} }
}, },
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -16477,6 +16482,14 @@
"vue-style-loader": "^4.1.0" "vue-style-loader": "^4.1.0"
} }
}, },
"vue-moment": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.0.0.tgz",
"integrity": "sha512-lNkEPuA3i3A4q4TDSwOXoRF4Y2vHHdaTOSvpPyGgxoFQP8n4sUh6jU5aJj3FIMlXo5UaHLPIz5hvvpvYx9Wj0w==",
"requires": {
"moment": "^2.11.1"
}
},
"vue-observe-visibility": { "vue-observe-visibility": {
"version": "0.4.3", "version": "0.4.3",
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.3.tgz", "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.3.tgz",

1
package.json
View File

@@ -28,6 +28,7 @@
"vue-cookies": "^1.5.13", "vue-cookies": "^1.5.13",
"vue-flag-icon": "^1.0.6", "vue-flag-icon": "^1.0.6",
"vue-i18n": "^8.9.0", "vue-i18n": "^8.9.0",
"vue-moment": "^4.0.0",
"vue-property-decorator": "^7.0.0", "vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-spinner": "^1.0.3", "vue-spinner": "^1.0.3",

20
src/App.vue
View File

@@ -1,6 +1,10 @@
<template> <template>
<div id="app"> <div id="app">
<sync-loader :loading="isLoading"></sync-loader> <sync-loader :loading="isLoading"></sync-loader>
<b-alert v-model="showAlert" variant="danger" dismissible>
{{alertMessage}}
</b-alert>
<div id="nav"> <div id="nav">
<router-link to="/">Home</router-link> <router-link to="/">Home</router-link>
| |
@@ -41,7 +45,7 @@
</template> </template>
<script> <script>
import {getRemainingJwtValiditySeconds} from '@/utils'; import {EventBus, getRemainingJwtValiditySeconds} from '@/utils';
import SyncLoader from 'vue-spinner/src/SyncLoader.vue'; import SyncLoader from 'vue-spinner/src/SyncLoader.vue';
export default { export default {
@@ -53,12 +57,24 @@
isLoading: false, isLoading: false,
tokenValidity: -1, tokenValidity: -1,
refreshTokenValidity: -1, refreshTokenValidity: -1,
showAlert: true,
alertMessage: "NO MESSAGE PROVIDED",
}; };
}, },
methods: { methods: {
// todo ... showErrorMessage(msg) {
this.isLoading = false;
this.showAlert = true;
this.alertMessage = msg;
},
}, },
mounted() { mounted() {
EventBus.$on('failedLoadingRecorders', (msg) => {
this.showErrorMessage(msg);
});
EventBus.$on('failedLoadingRooms', (msg) => {
this.showErrorMessage(msg);
});
this.$nextTick(() => { this.$nextTick(() => {
window.setInterval(() => { window.setInterval(() => {
// this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token)); // this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));

46
src/api/recorderRepository.ts
View File

@@ -3,22 +3,58 @@
// @ts-ignore // @ts-ignore
import Repository from './Repository'; import Repository from './Repository';
const resource = '/recorder'; const recorderResource = '/recorder';
const recorderModelResource = '/recorder/model';
const recorderCommandResource = '/recorder/command';
export default { export default {
getRecorders() { getRecorders() {
return Repository.get(`${resource}`); return Repository.get(`${recorderResource}`);
}, },
getRecorder(recorderId: number) { getRecorder(recorderId: number) {
return Repository.get(`${resource}/${recorderId}`); return Repository.get(`${recorderResource}/${recorderId}`);
}, },
createRecorder(recorderData: any) { createRecorder(recorderData: any) {
return Repository.post(`${resource}`, recorderData); return Repository.post(`${recorderResource}`, recorderData);
}, },
updateRecorder(recorderId: number, recorderData: any) { updateRecorder(recorderId: number, recorderData: any) {
return Repository.put(`${resource}/${recorderId}`, recorderData); return Repository.put(`${recorderResource}/${recorderId}`, recorderData);
},
getRecorderModels() {
return Repository.get(`${recorderModelResource}`);
},
getRecorderModel(recorderModelId: number) {
return Repository.get(`${recorderModelResource}/${recorderModelId}`);
},
createRecorderModel(recorderModelData: any) {
return Repository.post(`${recorderModelResource}`, recorderModelData);
},
updateRecorderModel(recorderModelId: number, recorderModelData: any) {
return Repository.put(`${recorderModelResource}/${recorderModelId}`, recorderModelData);
},
getRecorderCommands() {
return Repository.get(`${recorderCommandResource}`);
},
getRecorderCommand(recorderCommandId: number) {
return Repository.get(`${recorderCommandResource}/${recorderCommandId}`);
},
createRecorderCommand(recorderCommandData: any) {
return Repository.post(`${recorderCommandResource}`, recorderCommandData);
},
updateRecorderCommand(recorderCommandId: number, recorderCommandData: any) {
return Repository.put(`${recorderCommandResource}/${recorderCommandId}`, recorderCommandData);
}, },
}; };

4
src/api/roomRepository.ts
View File

@@ -14,6 +14,10 @@ export default {
return Repository.get(`${resource}/${roomId}`); return Repository.get(`${resource}/${roomId}`);
}, },
deleteRoom(roomId: number) {
return Repository.delete(`${resource}/${roomId}`);
},
createRoom(roomData: any) { createRoom(roomData: any) {
return Repository.post(`${resource}`, roomData); return Repository.post(`${resource}`, roomData);
}, },

518
src/components/Recorders.vue
View File

@@ -1,189 +1,256 @@
<template> <template>
<div> <div class="container">
<section class="section"> <section class="section">
<h1 class="title">{{ $t('Manage recorders and recorder models') }}</h1>
<p class="subtitle">
{{ $t('List, create, update and delete') }} <strong>{{ $t('recorders') }}</strong> and <strong>recorder models</strong>! <h1 class="title">{{ $t('Manage recorders') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recorder models') }}
</p> </p>
<hr> <br/>
<h2 class="">{{ $t('Create recorder') }}</h2> <b-tabs v-model="tabIndex" card justified>
<!-- form starts here --> <b-tab title="Recorder list" active>
<form v-on:submit.prevent="$log.debug(form)"> <p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
<section class="form"> <b-card-group deck>
<div class="field"> <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
<label class="label">{{ $t('name') }}</label> <b-card-text>
<div class="control"> <h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp;
<input name="name" <a class="float-right badge badge-pill badge-primary">
v-model="form.name" <font-awesome-icon icon="pencil-alt"/>
v-validate="'required|min:3'" </a>
v-bind:class="{'is-danger': errors.has('name')}" </h5>
class="input" type="text" placeholder="Full name"> <p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;{{room.alternate_name}}&nbsp;
</div> <a class="float-right badge badge-pill badge-info">
<p class="help is-danger" v-show="errors.has('name')"> <font-awesome-icon icon="pencil-alt"/>
{{ errors.first('name') }} </a>
</p> </p>
</div> <p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;{{room.number}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></p>
<div class="field"> <p class="card-text">
<label class="label">{{ $t('description') }}</label> <small><strong>{{ $t('comment') }}:</strong>&nbsp;{{room.comment}}&nbsp;
<div class="control"> <a class="float-right badge badge-pill badge-info">
<textarea class="textarea" placeholder="description of recorder" <font-awesome-icon icon="pencil-alt"/>
v-model="form.description"></textarea> </a></small>
</div> </p>
</div> <hr/>
<div v-if="room.recorder">
<div class="field"> <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp;
<label class="label">{{ $t('room') }}</label> <a class="float-right badge badge-pill badge-info">
<div class="control"> <font-awesome-icon icon="pencil-alt"/>
<div class="select"> </a></p>
<select v-model="form.room"> </div>
<option disabled value="">No room selected</option> <div v-else>
<option v-for="option in options.room" v-bind:value="option.value"> <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
{{ option.text }} $t('no_recorder_defined')}}</p>
</option> <div class="form-group row">
</select> <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>
</select>
</div>
<label class="label col-sm-4 col-form-label">{{ $t('recorder') }}</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
</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">{{
$t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/>
</button>
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
</small>
</div> </div>
</div> </b-card>
</div> </b-card-group>
</b-tab>
<div class="field"> <b-tab title="Create recorder">
<label class="label">{{ $t('model') }}</label> <b-card-text>
<div class="control"> <p>{{ $t('Create a new room')}}:</p>
<div class="select"> <!-- form starts here -->
<select v-model="form.model"> <form v-on:submit.prevent="saveRoom()">
<option disabled value="">No model selected</option> <section class="form">
<option v-for="option in options.model" v-bind:value="option.value">
{{ option.text }} <div class="form-group row">
</option> <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
</select> <div class="col-sm-6">
</div> <input name="name"
</div> v-model="form.name"
</div> 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"> <div class="field is-grouped">
<label class="label">LogRocket Usecases</label> <div class="control">
<div class="control"> <button
<div class="select is-multiple"> v-bind:disabled="errors.any()"
<select multiple v-model="form.logrocket_usecases"> type="submit"
<option>Debugging</option> class="btn btn-primary">
<option>Fixing Errors</option> Create room
<option>User support</option> </button>
</select> </div>
</div> </div>
</div>
</div>
<div class="field"> </section>
<div class="control"> </form>
<label class="checkbox"> </b-card-text>
<input type="checkbox" v-model="form.terms"> </b-tab>
I agree to the <a href="#">terms and conditions</a> <b-tab title="Recorder model list">
</label> <template slot="title">
</div> <font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<strong>Model</strong>&nbsp;<i>list</i>
</div> </template>
</b-tab>
<b-tab title="Create recorder model">
<template slot="title">
<font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="plus"/>&nbsp;<i>create</i>&nbsp;Recorder&nbsp;<strong>Model</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<section class="form">
<div class="field"> <div class="form-group row">
<label> <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<strong>What dev concepts are you interested in?</strong> <div class="col-sm-6">
</label> <input name="name"
<div class="control"> v-model="form.name"
<label class="checkbox"> v-validate="'required|min:3'"
<input type="checkbox" v-model="form.concepts" v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
value="promises"> class="form-control" type="text" placeholder="Room name" required>
Promises </div>
</label> <p class="col-sm-4" v-show="errors.has('name')">
<label class="checkbox"> {{ errors.first('name') }}
<input type="checkbox" v-model="form.concepts" </p>
value="testing"> </div>
Testing
</label>
</div>
</div>
<div class="field"> <div class="form-group row">
<label><strong>Is JavaScript awesome?</strong></label> <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="control"> <div class="col-sm-6">
<label class="radio"> <input name="alternate_name"
<input v-model="form.js_awesome" type="radio" value="Yes"> v-model="form.alternate_name"
Yes class="form-control" type="text" placeholder="Alternate name">
</label> </div>
<label class="radio"> </div>
<input v-model="form.js_awesome" type="radio" value="Yeap!">
Yeap!
</label>
</div>
</div>
<div class="field is-grouped"> <div class="form-group row">
<div class="control"> <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<button <div class="col-sm-6">
v-bind:disabled="errors.any()" <input name="number"
class="button is-primary"> v-model="form.number"
Submit v-validate="'required|min:3'"
</button> v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
</div> class="form-control" type="text" placeholder="Room number" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
</section> <div class="form-group row">
</form> <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>
<hr> <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>
<h2 class="">{{ $t('Create recorder model') }}</h2>
<!-- form starts here -->
<form v-on:submit.prevent="$log.debug(form)">
<section class="form">
<div class="field">
<label class="label">{{ $t('model name') }}</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name')}"
class="input" type="text" placeholder="Full name">
</div>
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
<div class="field"> <div class="field is-grouped">
<label class="label">{{ $t('notes') }}</label> <div class="control">
<div class="control"> <button
<textarea class="textarea" placeholder="Notes" v-bind:disabled="errors.any()"
v-model="form.notes"></textarea> type="submit"
</div> class="btn btn-primary">
</div> Create room
</button>
</div>
</div>
<div class="field"> </section>
<label class="label">Recorder commands</label> </form>
<div class="control"> </b-card-text>
<div class="select is-multiple"> </b-tab>
<select multiple v-model="form.commands"> </b-tabs>
<option v-for="option in recorderCommands.options">
{{ option }}
</option>
</select>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
class="button is-primary">
Create
</button>
</div>
</div>
</section>
</form>
</section> </section>
<hr>
<div class="column"> <div class="column">
<section class="section" id="results"> <section class="section" id="results">
@@ -197,75 +264,112 @@
</div> </div>
</section> </section>
</div> </div>
<div class="column">
<section class="section">
{{recorders}}
</section>
</div>
</div> </div>
</template> </template>
<script> <script>
import {EventBus} from '@/utils';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import getRepository from '@/api/RepositoryFactory';
const RoomRepository = getRepository('room');
export default { export default {
components: {
PulseLoader,
},
props: [],
data() { data() {
return { return {
step: 'name', tabIndex: 0,
name: '', show_assigned_recorders: false,
questions: [],
form: { form: {
name: '', name: '',
message: '', alternate_name: '',
inquiry_type: '', number: '',
logrocket_usecases: [], comment: '',
terms: false, recorder: null,
concepts: [],
js_awesome: '',
}, },
}; };
}, },
methods: { methods: {
appendQuestion(newQuestion) { saveRoom() {
this.questions.push(newQuestion); this.$parent.$data.isLoading = true;
RoomRepository.createRoom(this.form)
.then(() => {
this.$store.dispatch('loadRooms')
.then(() => {
this.$parent.$data.isLoading = false;
this.tabIndex = 0;
});
}).catch((msg) => {
this.showErrorMessage("Could not safe room!");
this.$log.warn(msg);
});
}, },
removeQuestion(question) { deleteRoom(id) {
const idx = this.questions.findIndex((q) => q.question === question.question); this.$parent.$data.isLoading = true;
this.questions.splice(idx, 1); RoomRepository.deleteRoom(id)
}, .then(() => {
submitSurvey() { this.$store.dispatch('loadRooms')
this.$store.dispatch('submitNewSurvey', { .then(() => {
name: this.name, this.$parent.$data.isLoading = false;
questions: this.questions, });
})
.then(() => this.$router.push('/'))
.catch((error) => {
this.$log.error('Error creating survey', error);
this.$router.push('/');
}); });
}, },
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('loadRooms')
.then(() => {
this.$store.dispatch('loadRecorders')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
}, },
computed: { computed: {
options() { options() {
return { return {
room: [ recorders: [
{value: 'audimax', text: 'AudiMax'}, {value: 8, text: 'SMP 351 AudiMax'},
{value: 'hmu', text: 'Unterer Hörsaal'}, {value: 13, text: 'SMP 351 HMU'},
{value: 'hmo', text: 'Oberer Hörsaal'},
],
model: [
{value: 'extron', text: 'extron'},
{value: 'smp', text: 'SMP'},
{value: 'smp2', text: 'SMP2'},
], ],
}; };
}, },
recorderCommands() { rooms() {
return { return this.$store.state.rooms;
options: [ },
'reboot', recorders() {
'reset', return this.$store.state.recorders;
'setStreamingProfile',
],
};
}, },
}, },
}; };
</script> </script>
<style> <style>
.comment {
white-space: pre-wrap;
}
.card:hover {
background-color: whitesmoke;
}
.required:after {
content: " *";
}
</style> </style>

308
src/components/Rooms.vue
View File

@@ -9,23 +9,11 @@
</p> </p>
<br/> <br/>
<ul class="nav nav-tabs" id="myTab" role="tablist"> <b-tabs v-model="tabIndex" card>
<li class="nav-item">
<a class="nav-link active" id="room-list-tab" data-toggle="tab" href="#room-list" role="tab"
aria-controls="room-list" aria-selected="true">Room list</a>
</li>
<li class="nav-item">
<a class="nav-link" id="room-create-tab" data-toggle="tab" href="#room-create" role="tab"
aria-controls="room-create" aria-selected="false">Create room</a>
</li>
</ul>
<b-tabs card>
<b-tab title="Room list" active> <b-tab title="Room list" active>
<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 v-for="(room) in rooms" :title="room.name"> <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
<b-card-text> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp; <h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
@@ -79,190 +67,102 @@
</div> </div>
</b-card-text> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-muted">
</div> <button type="button" v-on:click="deleteRoom(room.id)" class="btn btn-sm btn-danger">{{
</b-card> $t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/>
<b-card title="Title"> </button>
<b-card-text> <div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
This card has supporting text below as a natural lead-in to additional content. </small>
</b-card-text>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title">
<b-card-text>
This is a wider card with supporting text below as a natural lead-in to additional
content.
This card has even longer content than the first to show that equal height action.
</b-card-text>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div> </div>
</b-card> </b-card>
</b-card-group> </b-card-group>
</b-tab> </b-tab>
<b-tab title="Create room"> <b-tab title="Create room">
<b-card-text> <b-card-text>
<p>{{ $t('Create a new room')}}:</p> <p>{{ $t('Create a new room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<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>
</b-card-text> </b-card-text>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="room-list" role="tabpanel" aria-labelledby="home-tab">
<p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
<div class="card-deck">
<div class="card" v-for="(room) in rooms">
<h5 class="card-header">{{room.name}} - {{room.number}}</h5>
<div class="card-body">
<h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp;
<a class="float-right badge badge-pill badge-primary">
<font-awesome-icon icon="pencil-alt"/>
</a>
</h5>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;{{room.alternate_name}}&nbsp;
<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>&nbsp;{{room.number}}&nbsp;
<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>&nbsp;{{room.comment}}&nbsp;
<a class="float-right badge badge-pill badge-info">
<font-awesome-icon icon="pencil-alt"/>
</a></small>
</p>
<hr/>
<div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.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('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p>
<div class="form-group row">
<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>
</select>
</div>
<label class="label col-sm-4 col-form-label">{{ $t('recorder') }}</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
</label>
</div>
</div>
</div>
<div class="card-footer text-muted">
<button type="button" class="btn btn-danger">{{ $t('delete') }}&nbsp;<font-awesome-icon
icon="trash"/>
</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="room-create" role="tabpanel" aria-labelledby="profile-tab">
<p>{{ $t('Create a new room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<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>
</div>
</div>
<hr>
</section> </section>
<hr>
<div class="column"> <div class="column">
<section class="section" id="results"> <section class="section" id="results">
@@ -277,10 +177,17 @@
</section> </section>
</div> </div>
<div class="column">
<section class="section">
{{recorders}}
</section>
</div>
</div> </div>
</template> </template>
<script> <script>
import {EventBus} from '@/utils';
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';
@@ -293,6 +200,7 @@
props: [], props: [],
data() { data() {
return { return {
tabIndex: 0,
show_assigned_recorders: false, show_assigned_recorders: false,
form: { form: {
name: '', name: '',
@@ -307,6 +215,20 @@
saveRoom() { saveRoom() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
RoomRepository.createRoom(this.form) RoomRepository.createRoom(this.form)
.then(() => {
this.$store.dispatch('loadRooms')
.then(() => {
this.$parent.$data.isLoading = false;
this.tabIndex = 0;
});
}).catch((msg) => {
this.showErrorMessage("Could not safe room!");
this.$log.warn(msg);
});
},
deleteRoom(id) {
this.$parent.$data.isLoading = true;
RoomRepository.deleteRoom(id)
.then(() => { .then(() => {
this.$store.dispatch('loadRooms') this.$store.dispatch('loadRooms')
.then(() => { .then(() => {
@@ -314,12 +236,21 @@
}); });
}); });
}, },
showErrorMessage(msg) {
this.$parent.$data.isLoading = false;
this.$parent.$data.showAlert = true;
this.$parent.$data.alertMessage = msg;
},
}, },
mounted() { mounted() {
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
this.$parent.$data.showAlert = false;
this.$store.dispatch('loadRooms') this.$store.dispatch('loadRooms')
.then(() => { .then(() => {
this.$parent.$data.isLoading = false; this.$store.dispatch('loadRecorders')
.then(() => {
this.$parent.$data.isLoading = false;
});
}); });
}, },
computed: { computed: {
@@ -334,6 +265,9 @@
rooms() { rooms() {
return this.$store.state.rooms; return this.$store.state.rooms;
}, },
recorders() {
return this.$store.state.recorders;
},
}, },
}; };
</script> </script>

16
src/main.ts
View File

@@ -12,23 +12,25 @@ import i18n from '@/plugins/i18n';
import VeeValidate from 'vee-validate'; import VeeValidate from 'vee-validate';
// @ts-ignore // @ts-ignore
import FlagIcon from 'vue-flag-icon'; import FlagIcon from 'vue-flag-icon';
// @ts-ignore
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, faTrash, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import { faCoffee, faPlus, faScroll, faCircle, faList, faTrash, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
//import 'bootstrap'; // import 'bootstrap';
//import 'bootstrap/dist/css/bootstrap.min.css'; // import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css' 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); library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCircle, faList, faPlus);
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -50,6 +52,8 @@ Vue.use(FlagIcon);
Vue.use(VueCookies); Vue.use(VueCookies);
Vue.use(VueSweetalert2); Vue.use(VueSweetalert2);
Vue.use(VeeValidate); Vue.use(VeeValidate);
Vue.use(VueMoment);
// setup fake backend // setup fake backend
// import { configureFakeBackend } from './helpers'; // import { configureFakeBackend } from './helpers';

56
src/store.ts
View File

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; import createPersistedState from 'vuex-persistedstate';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
import RoomRepository from '@/api/roomRepository'; import RoomRepository from '@/api/roomRepository';
import RecordRepository from '@/api/recorderRepository';
// imports of AJAX functions will go here // imports of AJAX functions will go here
import { import {
@@ -23,6 +24,9 @@ const state = {
// single source of data // single source of data
surveys: [], surveys: [],
rooms: [], rooms: [],
recorders: [],
recorderModels: [],
recorderCommands: [],
loginProviders: [], loginProviders: [],
currentSurvey: {}, currentSurvey: {},
profile: {}, profile: {},
@@ -47,8 +51,47 @@ const actions = {
EventBus.$emit('roomsLoaded', response.data); EventBus.$emit('roomsLoaded', response.data);
}) })
.catch((error: any) => { .catch((error: any) => {
Vue.$log.warn('Error loading users!', error); Vue.$log.warn('Error loading rooms!', error);
EventBus.$emit('failedLoadingUsers', error); EventBus.$emit('failedLoadingRooms', error);
});
},
loadRecorders(context: any) {
return RecordRepository.getRecorders()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorders', {recorders: response.data});
EventBus.$emit('recordersLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorders!', error);
EventBus.$emit('failedLoadingRecorders', error);
});
},
loadRecorderModels(context: any) {
return RecordRepository.getRecorderModels()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderModels', {recorderModels: response.data});
EventBus.$emit('recorderModelsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder models!', error);
EventBus.$emit('failedLoadingRecorderModels', error);
});
},
loadRecorderCommands(context: any) {
return RecordRepository.getRecorderCommands()
.then((response: any) => {
Vue.$log.debug(response);
Vue.$log.debug(response.data);
context.commit('setRecorderCommands', {recorderCommands: response.data});
EventBus.$emit('recorderCommandsLoaded', response.data);
})
.catch((error: any) => {
Vue.$log.warn('Error loading recorder commands!', error);
EventBus.$emit('failedLoadingRecorderCommands', error);
}); });
}, },
loadUsers(context: any) { loadUsers(context: any) {
@@ -177,6 +220,15 @@ const mutations = {
setRooms(sState: any, payload: any) { setRooms(sState: any, payload: any) {
sState.rooms = payload.rooms; sState.rooms = payload.rooms;
}, },
setRecorders(sState: any, payload: any) {
sState.recorders = payload.recorders;
},
setRecorderModels(sState: any, payload: any) {
sState.recorderModels = payload.recorderModels;
},
setRecorderCommands(sState: any, payload: any) {
sState.recorderCommands = payload.recorderCommands;
},
setUsers(sState: any, payload: any) { setUsers(sState: any, payload: any) {
sState.users = payload.users; sState.users = payload.users;
}, },

5
src/views/Home.vue
View File

@@ -2,7 +2,7 @@
<div class="home"> <div class="home">
<b-alert show>Default Alert</b-alert> <b-alert show>Default Alert</b-alert>
<div> <div>
<button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)"> <button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
<flag :iso="entry.flag" v-bind:squared="false"/> <flag :iso="entry.flag" v-bind:squared="false"/>
{{entry.title}} {{entry.title}}
</button> </button>
@@ -35,12 +35,13 @@
public changeLocale(locale: string): void { public changeLocale(locale: string): void {
i18n.locale = locale; i18n.locale = locale;
// Vue.$moment.locale(locale);
} }
} }
</script> </script>
<style> <style>
button { .lang-btn {
padding: 15px; padding: 15px;
border: 2px solid green; border: 2px solid green;
font-size: 18px; font-size: 18px;