added rooms and recorders to fe
This commit is contained in:
13
package-lock.json
generated
13
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
20
src/App.vue
20
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));
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
@@ -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>!
|
||||
|
||||
|
||||
<h1 class="title">{{ $t('Manage recorders') }}</h1>
|
||||
<p class="lead">
|
||||
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recorder models') }}
|
||||
</p>
|
||||
<hr>
|
||||
<br/>
|
||||
|
||||
<h2 class="">{{ $t('Create recorder') }}</h2>
|
||||
<!-- form starts here -->
|
||||
<form v-on:submit.prevent="$log.debug(form)">
|
||||
<section class="form">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('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>
|
||||
<b-tabs v-model="tabIndex" card justified>
|
||||
<b-tab title="Recorder list" active>
|
||||
<p>{{ $t('There are')}} {{rooms.length}} {{ $t('rooms defined')}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" :header="room.name + ' (' +room.number+ ')'">
|
||||
<b-card-text>
|
||||
<h5 class="card-title">{{ $t('name') }}: {{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</h5>
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong> {{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong> {{room.number}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('description') }}</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="description of recorder"
|
||||
v-model="form.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('room') }}</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select v-model="form.room">
|
||||
<option disabled value="">No room selected</option>
|
||||
<option v-for="option in options.room" v-bind:value="option.value">
|
||||
{{ option.text }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong> {{room.comment}}
|
||||
<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> {{room.recorder.name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||
$t('no_recorder_defined')}}</p>
|
||||
<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') }} <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>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
|
||||
<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>
|
||||
<b-tab title="Create recorder">
|
||||
<b-card-text>
|
||||
<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">
|
||||
<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 is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
v-bind:disabled="errors.any()"
|
||||
type="submit"
|
||||
class="btn btn-primary">
|
||||
Create room
|
||||
</button>
|
||||
</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>
|
||||
</section>
|
||||
</form>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
<b-tab title="Recorder model list">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="scroll"/> <font-awesome-icon icon="list"/> Recorder <strong>Model</strong> <i>list</i>
|
||||
</template>
|
||||
</b-tab>
|
||||
<b-tab title="Create recorder model">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="scroll"/> <font-awesome-icon icon="plus"/> <i>create</i> Recorder <strong>Model</strong>
|
||||
</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">
|
||||
<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="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="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="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="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
v-bind:disabled="errors.any()"
|
||||
class="button is-primary">
|
||||
Submit
|
||||
</button>
|
||||
</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>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<label class="label">{{ $t('notes') }}</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Notes"
|
||||
v-model="form.notes"></textarea>
|
||||
</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>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Recorder commands</label>
|
||||
<div class="control">
|
||||
<div class="select is-multiple">
|
||||
<select multiple v-model="form.commands">
|
||||
<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>
|
||||
</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',
|
||||
name: '',
|
||||
questions: [],
|
||||
tabIndex: 0,
|
||||
show_assigned_recorders: false,
|
||||
form: {
|
||||
name: '',
|
||||
message: '',
|
||||
inquiry_type: '',
|
||||
logrocket_usecases: [],
|
||||
terms: false,
|
||||
concepts: [],
|
||||
js_awesome: '',
|
||||
alternate_name: '',
|
||||
number: '',
|
||||
comment: '',
|
||||
recorder: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
appendQuestion(newQuestion) {
|
||||
this.questions.push(newQuestion);
|
||||
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);
|
||||
});
|
||||
},
|
||||
removeQuestion(question) {
|
||||
const idx = this.questions.findIndex((q) => q.question === question.question);
|
||||
this.questions.splice(idx, 1);
|
||||
},
|
||||
submitSurvey() {
|
||||
this.$store.dispatch('submitNewSurvey', {
|
||||
name: this.name,
|
||||
questions: this.questions,
|
||||
})
|
||||
.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: [
|
||||
{value: 'audimax', text: 'AudiMax'},
|
||||
{value: 'hmu', text: 'Unterer Hörsaal'},
|
||||
{value: 'hmo', text: 'Oberer Hörsaal'},
|
||||
],
|
||||
model: [
|
||||
{value: 'extron', text: 'extron'},
|
||||
{value: 'smp', text: 'SMP'},
|
||||
{value: 'smp2', text: 'SMP2'},
|
||||
recorders: [
|
||||
{value: 8, text: 'SMP 351 AudiMax'},
|
||||
{value: 13, text: 'SMP 351 HMU'},
|
||||
],
|
||||
};
|
||||
},
|
||||
recorderCommands() {
|
||||
return {
|
||||
options: [
|
||||
'reboot',
|
||||
'reset',
|
||||
'setStreamingProfile',
|
||||
],
|
||||
};
|
||||
rooms() {
|
||||
return this.$store.state.rooms;
|
||||
},
|
||||
recorders() {
|
||||
return this.$store.state.recorders;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.comment {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.required:after {
|
||||
content: " *";
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,23 +9,11 @@
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<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-tabs v-model="tabIndex" card>
|
||||
<b-tab title="Room list" active>
|
||||
<p>{{ $t('There are')}} {{rooms.length}} {{ $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') }}: {{room.name}}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
@@ -79,190 +67,102 @@
|
||||
</div>
|
||||
</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 card has supporting text below as a natural lead-in to additional content.
|
||||
</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>
|
||||
<small class="text-muted">
|
||||
<button type="button" v-on:click="deleteRoom(room.id)" class="btn btn-sm btn-danger">{{
|
||||
$t('delete') }} <font-awesome-icon
|
||||
icon="trash"/>
|
||||
</button>
|
||||
<div class="text-right">{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}</div>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
|
||||
<b-tab title="Create room">
|
||||
<b-card-text>
|
||||
<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-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')}} {{rooms.length}} {{ $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') }}: {{room.name}}
|
||||
<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> {{room.alternate_name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong> {{room.number}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong> {{room.comment}}
|
||||
<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> {{room.recorder.name}}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a></p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||
$t('no_recorder_defined')}}</p>
|
||||
<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') }} <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>
|
||||
|
||||
<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,12 +236,21 @@
|
||||
});
|
||||
});
|
||||
},
|
||||
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.$parent.$data.isLoading = false;
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
@@ -334,6 +265,9 @@
|
||||
rooms() {
|
||||
return this.$store.state.rooms;
|
||||
},
|
||||
recorders() {
|
||||
return this.$store.state.recorders;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
16
src/main.ts
16
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';
|
||||
// import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import 'bootstrap/dist/css/bootstrap.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';
|
||||
|
||||
56
src/store.ts
56
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);
|
||||
EventBus.$emit('failedLoadingUsers', error);
|
||||
Vue.$log.warn('Error loading rooms!', 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;
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user