added rooms and recorders to fe

package-lock.json

@@ -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": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -16477,6 +16482,14 @@
         "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": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.3.tgz",

package.json

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

src/App.vue

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

src/api/recorderRepository.ts

@@ -3,22 +3,58 @@
 // @ts-ignore
 import Repository from './Repository';
 
-const resource = '/recorder';
+const recorderResource = '/recorder';
+const recorderModelResource = '/recorder/model';
+const recorderCommandResource = '/recorder/command';
 
 export default {
     getRecorders() {
-        return Repository.get(`${resource}`);
+        return Repository.get(`${recorderResource}`);
     },
 
     getRecorder(recorderId: number) {
-        return Repository.get(`${resource}/${recorderId}`);
+        return Repository.get(`${recorderResource}/${recorderId}`);
     },
 
     createRecorder(recorderData: any) {
-        return Repository.post(`${resource}`, recorderData);
+        return Repository.post(`${recorderResource}`, recorderData);
     },
 
     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);
     },
 };

src/api/roomRepository.ts

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

src/components/Recorders.vue

@@ -1,189 +1,256 @@
 <template>
-    <div>
+    <div class="container">
         <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>!
-            </p>
-            <hr>
 
-            <h2 class="">{{ $t('Create recorder') }}</h2>
+
+            <h1 class="title">{{ $t('Manage recorders') }}</h1>
+            <p class="lead">
+                {{ $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')}}&nbsp;{{rooms.length}}&nbsp;{{ $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-text>
+                                <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>
+                            </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>
+                        </b-card>
+                    </b-card-group>
+                </b-tab>
+
+                <b-tab title="Create recorder">
+                    <b-card-text>
+                        <p>{{ $t('Create a new room')}}:</p>
                         <!-- form starts here -->
-            <form v-on:submit.prevent="$log.debug(form)">
+                        <form v-on:submit.prevent="saveRoom()">
                             <section class="form">
-                    <div class="field">
+
-                        <label class="label">{{ $t('name') }}</label>
+                                <div class="form-group row">
-                        <div class="control">
+                                    <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')}"
+                                               v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
-                                   class="input" type="text" placeholder="Full name">
+                                               class="form-control" type="text" placeholder="Room name" required>
                                     </div>
-                        <p class="help is-danger" v-show="errors.has('name')">
+                                    <p class="col-sm-4" v-show="errors.has('name')">
                                         {{ errors.first('name') }}
                                     </p>
                                 </div>
 
-                    <div class="field">
+                                <div class="form-group row">
-                        <label class="label">{{ $t('description') }}</label>
+                                    <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
-                        <div class="control">
+                                    <div class="col-sm-6">
-                            <textarea class="textarea" placeholder="description of recorder"
+                                        <input name="alternate_name"
-                                      v-model="form.description"></textarea>
+                                               v-model="form.alternate_name"
+                                               class="form-control" type="text" placeholder="Alternate name">
                                     </div>
                                 </div>
 
-                    <div class="field">
+                                <div class="form-group row">
-                        <label class="label">{{ $t('room') }}</label>
+                                    <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
-                        <div class="control">
+                                    <div class="col-sm-6">
-                            <div class="select">
+                                        <input name="number"
-                                <select v-model="form.room">
+                                               v-model="form.number"
-                                    <option disabled value="">No room selected</option>
+                                               v-validate="'required|min:3'"
-                                    <option v-for="option in options.room" v-bind:value="option.value">
+                                               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>
 
-                    <div class="field">
-                        <label class="label">{{ $t('model') }}</label>
-                        <div class="control">
-                            <div class="select">
-                                <select v-model="form.model">
-                                    <option disabled value="">No model selected</option>
-                                    <option v-for="option in options.model" v-bind:value="option.value">
-                                        {{ option.text }}
-                                    </option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <div class="field">
-                        <label class="label">LogRocket Usecases</label>
-                        <div class="control">
-                            <div class="select is-multiple">
-                                <select multiple v-model="form.logrocket_usecases">
-                                    <option>Debugging</option>
-                                    <option>Fixing Errors</option>
-                                    <option>User support</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <div class="control">
-                            <label class="checkbox">
-                                <input type="checkbox" v-model="form.terms">
-                                I agree to the <a href="#">terms and conditions</a>
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label>
-                            <strong>What dev concepts are you interested in?</strong>
-                        </label>
-                        <div class="control">
-                            <label class="checkbox">
-                                <input type="checkbox" v-model="form.concepts"
-                                       value="promises">
-                                Promises
-                            </label>
-                            <label class="checkbox">
-                                <input type="checkbox" v-model="form.concepts"
-                                       value="testing">
-                                Testing
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label><strong>Is JavaScript awesome?</strong></label>
-                        <div class="control">
-                            <label class="radio">
-                                <input v-model="form.js_awesome" type="radio" value="Yes">
-                                Yes
-                            </label>
-                            <label class="radio">
-                                <input v-model="form.js_awesome" type="radio" value="Yeap!">
-                                Yeap!
-                            </label>
-                        </div>
-                    </div>
 
                                 <div class="field is-grouped">
                                     <div class="control">
                                         <button
                                                 v-bind:disabled="errors.any()"
-                                    class="button is-primary">
+                                                type="submit"
-                                Submit
+                                                class="btn btn-primary">
+                                            Create room
                                         </button>
                                     </div>
                                 </div>
 
                             </section>
                         </form>
-
+                    </b-card-text>
-            <hr>
+                </b-tab>
-
+                <b-tab title="Recorder model list">
-            <h2 class="">{{ $t('Create recorder model') }}</h2>
+                    <template slot="title">
+                        <font-awesome-icon icon="scroll"/>&nbsp;<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<strong>Model</strong>&nbsp;<i>list</i>
+                    </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="$log.debug(form)">
+                        <form v-on:submit.prevent="saveRoom()">
                             <section class="form">
-                    <div class="field">
+
-                        <label class="label">{{ $t('model name') }}</label>
+                                <div class="form-group row">
-                        <div class="control">
+                                    <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')}"
+                                               v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
-                                   class="input" type="text" placeholder="Full name">
+                                               class="form-control" type="text" placeholder="Room name" required>
                                     </div>
-                        <p class="help is-danger" v-show="errors.has('name')">
+                                    <p class="col-sm-4" v-show="errors.has('name')">
                                         {{ errors.first('name') }}
                                     </p>
                                 </div>
 
-                    <div class="field">
+                                <div class="form-group row">
-                        <label class="label">{{ $t('notes') }}</label>
+                                    <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
-                        <div class="control">
+                                    <div class="col-sm-6">
-                            <textarea class="textarea" placeholder="Notes"
+                                        <input name="alternate_name"
-                                      v-model="form.notes"></textarea>
+                                               v-model="form.alternate_name"
+                                               class="form-control" type="text" placeholder="Alternate name">
                                     </div>
                                 </div>
 
-                    <div class="field">
+                                <div class="form-group row">
-                        <label class="label">Recorder commands</label>
+                                    <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
-                        <div class="control">
+                                    <div class="col-sm-6">
-                            <div class="select is-multiple">
+                                        <input name="number"
-                                <select multiple v-model="form.commands">
+                                               v-model="form.number"
-                                    <option v-for="option in recorderCommands.options">
+                                               v-validate="'required|min:3'"
-                                        {{ option }}
+                                               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>
+
 
                                 <div class="field is-grouped">
                                     <div class="control">
                                         <button
                                                 v-bind:disabled="errors.any()"
-                                    class="button is-primary">
+                                                type="submit"
-                                Create
+                                                class="btn btn-primary">
+                                            Create room
                                         </button>
                                     </div>
                                 </div>
 
                             </section>
                         </form>
+                    </b-card-text>
+                </b-tab>
+            </b-tabs>
         </section>
 
+        <hr>
 
         <div class="column">
             <section class="section" id="results">
@@ -197,75 +264,112 @@
                 </div>
             </section>
         </div>
+
+        <div class="column">
+            <section class="section">
+                {{recorders}}
+            </section>
+        </div>
+
     </div>
 </template>
 
 <script>
+    import {EventBus} from '@/utils';
+    import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const RoomRepository = getRepository('room');
+
     export default {
+        components: {
+            PulseLoader,
+        },
+        props: [],
         data() {
             return {
-                step: 'name',
+                tabIndex: 0,
-                name: '',
+                show_assigned_recorders: false,
-                questions: [],
                 form: {
                     name: '',
-                    message: '',
+                    alternate_name: '',
-                    inquiry_type: '',
+                    number: '',
-                    logrocket_usecases: [],
+                    comment: '',
-                    terms: false,
+                    recorder: null,
-                    concepts: [],
-                    js_awesome: '',
                 },
             };
         },
         methods: {
-            appendQuestion(newQuestion) {
+            saveRoom() {
-                this.questions.push(newQuestion);
+                this.$parent.$data.isLoading = true;
-            },
+                RoomRepository.createRoom(this.form)
-            removeQuestion(question) {
+                    .then(() => {
-                const idx = this.questions.findIndex((q) => q.question === question.question);
+                        this.$store.dispatch('loadRooms')
-                this.questions.splice(idx, 1);
+                            .then(() => {
-            },
+                                this.$parent.$data.isLoading = false;
-            submitSurvey() {
+                                this.tabIndex = 0;
-                this.$store.dispatch('submitNewSurvey', {
+                            });
-                    name: this.name,
+                    }).catch((msg) => {
-                    questions: this.questions,
+                    this.showErrorMessage("Could not safe room!");
-                })
+                    this.$log.warn(msg);
-                    .then(() => this.$router.push('/'))
-                    .catch((error) => {
-                        this.$log.error('Error creating survey', error);
-                        this.$router.push('/');
                 });
             },
+            deleteRoom(id) {
+                this.$parent.$data.isLoading = true;
+                RoomRepository.deleteRoom(id)
+                    .then(() => {
+                        this.$store.dispatch('loadRooms')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                            });
+                    });
+            },
+            showErrorMessage(msg) {
+                this.$parent.$data.isLoading = false;
+                this.$parent.$data.showAlert = true;
+                this.$parent.$data.alertMessage = msg;
+            },
+        },
+        mounted() {
+            this.$parent.$data.isLoading = true;
+            this.$parent.$data.showAlert = false;
+            this.$store.dispatch('loadRooms')
+                .then(() => {
+                    this.$store.dispatch('loadRecorders')
+                        .then(() => {
+                            this.$parent.$data.isLoading = false;
+                        });
+                });
         },
         computed: {
             options() {
                 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>
 
 <style>
+    .comment {
+        white-space: pre-wrap;
+    }
 
+    .card:hover {
+        background-color: whitesmoke;
+    }
+
+    .required:after {
+        content: " *";
+    }
 </style>

src/components/Rooms.vue

@@ -9,23 +9,11 @@
             </p>
             <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>
                     <p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
                     <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>
                                 <h5 class="card-title">{{ $t('name') }}:&nbsp;{{room.name}}&nbsp;
                                     <a class="float-right badge badge-pill badge-primary">
@@ -79,108 +67,21 @@
                                 </div>
                             </b-card-text>
                             <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>
                         </b-card>
                     </b-card-group>
                 </b-tab>
+
                 <b-tab title="Create room">
                     <b-card-text>
                         <p>{{ $t('Create a new room')}}:</p>
-                    </b-card-text>
-                </b-tab>
-            </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">
@@ -256,13 +157,12 @@
 
                             </section>
                         </form>
-                </div>
+                    </b-card-text>
-            </div>
+                </b-tab>
-
+            </b-tabs>
-            <hr>
-
         </section>
 
+        <hr>
 
         <div class="column">
             <section class="section" id="results">
@@ -277,10 +177,17 @@
             </section>
         </div>
 
+        <div class="column">
+            <section class="section">
+                {{recorders}}
+            </section>
+        </div>
+
     </div>
 </template>
 
 <script>
+    import {EventBus} from '@/utils';
     import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
     import getRepository from '@/api/RepositoryFactory';
 
@@ -293,6 +200,7 @@
         props: [],
         data() {
             return {
+                tabIndex: 0,
                 show_assigned_recorders: false,
                 form: {
                     name: '',
@@ -307,6 +215,20 @@
             saveRoom() {
                 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);
+                });
+            },
+            deleteRoom(id) {
+                this.$parent.$data.isLoading = true;
+                RoomRepository.deleteRoom(id)
                     .then(() => {
                         this.$store.dispatch('loadRooms')
                             .then(() => {
@@ -314,13 +236,22 @@
                             });
                     });
             },
+            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: {
             options() {
@@ -334,6 +265,9 @@
             rooms() {
                 return this.$store.state.rooms;
             },
+            recorders() {
+                return this.$store.state.recorders;
+            },
         },
     };
 </script>

src/main.ts

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

src/store.ts

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import getRepository from '@/api/RepositoryFactory';
 import RoomRepository from '@/api/roomRepository';
+import RecordRepository from '@/api/recorderRepository';
 
 // imports of AJAX functions will go here
 import {
@@ -23,6 +24,9 @@ const state = {
     // single source of data
     surveys: [],
     rooms: [],
+    recorders: [],
+    recorderModels: [],
+    recorderCommands: [],
     loginProviders: [],
     currentSurvey: {},
     profile: {},
@@ -47,8 +51,47 @@ const actions = {
                 EventBus.$emit('roomsLoaded', response.data);
             })
             .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) {
@@ -177,6 +220,15 @@ const mutations = {
     setRooms(sState: any, payload: any) {
         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) {
         sState.users = payload.users;
     },

src/views/Home.vue

@@ -2,7 +2,7 @@
     <div class="home">
         <b-alert show>Default Alert</b-alert>
         <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"/>
                 {{entry.title}}
             </button>
@@ -35,12 +35,13 @@
 
         public changeLocale(locale: string): void {
             i18n.locale = locale;
+            // Vue.$moment.locale(locale);
         }
     }
 </script>
 
 <style>
-    button {
+    .lang-btn {
         padding: 15px;
         border: 2px solid green;
         font-size: 18px;