diff --git a/src/App.vue b/src/App.vue index 029b622..30bca30 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,7 +58,7 @@ tokenValidity: -1, refreshTokenValidity: -1, showAlert: true, - alertMessage: "NO MESSAGE PROVIDED", + alertMessage: 'NO MESSAGE PROVIDED', }; }, methods: { diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue index 6c86996..b61d9fd 100644 --- a/src/components/Recorders.vue +++ b/src/components/Recorders.vue @@ -5,85 +5,179 @@

{{ $t('Manage recorders') }}

- {{ $t('List, create and delete') }} {{ $t('recorders') }} and {{ $t('recorder models') }} + {{ $t('List, create and delete') }} {{ $t('recorders') }} and {{ $t('recorder models') + }}


-

{{ $t('There are')}} {{rooms.length}} {{ $t('rooms defined')}}:

+ +

{{ $t('There are')}} {{recorders.length}} {{ $t('recorders defined')}}:

- + -
{{ $t('name') }}: {{room.name}}  - - - +
{{ $t('name') }}:  + {{recorder.name}}  + + + + + + + + + + + +
-

{{ $t('alternate_name') }}: {{room.alternate_name}}  - - - -

-

{{ $t('room_number') }}: {{room.number}}  - - -

- -

- {{ $t('comment') }}: {{room.comment}}  +

{{ $t('network_name') }}:  + {{recorder.network_name}}  - - + + + + + + + + + + +

+

{{ $t('ip') }}:  + {{recorder.ip}}  + + + + + + + + + + + + +

+
-
-

{{ $t('Recorder') }}: {{room.recorder.name}}  +

+

{{ $t('Room') }}: {{recorder.room.name}} 

-

{{ $t('Recorder') }}: {{ - $t('no_recorder_defined')}}

+

{{ $t('Room') }}: {{ + $t('no_room_defined')}}

- -
- +
-
+ +
+

{{ $t('Model') }}: {{recorder.recorder_model.name}}  + + +

+
+
+

{{ $t('Model') }}: {{ + $t('no_model_defined')}}

+
+
+ +
+ +
+
- -
{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}
+ icon="trash"/> + + +

- + -

{{ $t('Create a new room')}}:

+

{{ $t('Create a new recorder')}}:

-
+
@@ -93,51 +187,61 @@ v-model="form.name" v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}" - class="form-control" type="text" placeholder="Room name" required> + class="form-control" type="text" placeholder="Recorder name" required>

{{ errors.first('name') }}

+
- +
- +
- + +
+ +
+
+ +
+
-
-

- {{ errors.first('number') }} -

-
- -
- -
- + v-model="form.ip" + class="form-control" type="text" placeholder="Recorder IP">
- +
- + + + +
+
+ +
+ +
+
@@ -150,7 +254,7 @@ v-bind:disabled="errors.any()" type="submit" class="btn btn-primary"> - Create room + Create recorder
@@ -161,89 +265,21 @@ -

{{ $t('Create a new room')}}:

+

{{ $t('Create a new recorder')}}:

- -
+ -
- -
- -
-

- {{ errors.first('name') }} -

-
- -
- -
- -
-
- -
- -
- -
-

- {{ errors.first('number') }} -

-
- -
- -
- -
-
- -
- -
- -
-
- - -
-
- -
-
- -
@@ -279,7 +315,7 @@ import PulseLoader from 'vue-spinner/src/PulseLoader.vue'; import getRepository from '@/api/RepositoryFactory'; - const RoomRepository = getRepository('room'); + const RecorderRepository = getRepository('recorder'); export default { components: { @@ -292,33 +328,34 @@ show_assigned_recorders: false, form: { name: '', - alternate_name: '', - number: '', - comment: '', - recorder: null, + description: '', + ip: '', + network_name: '', + recorder_model: null, + room: null, }, }; }, methods: { - saveRoom() { + saveRecorder() { this.$parent.$data.isLoading = true; - RoomRepository.createRoom(this.form) + RecorderRepository.createRecorder(this.form) .then(() => { - this.$store.dispatch('loadRooms') + this.$store.dispatch('loadRecorders') .then(() => { this.$parent.$data.isLoading = false; this.tabIndex = 0; }); }).catch((msg) => { - this.showErrorMessage("Could not safe room!"); + this.showErrorMessage('Could not safe recorder!'); this.$log.warn(msg); }); }, - deleteRoom(id) { + deleteRecorder(id) { this.$parent.$data.isLoading = true; - RoomRepository.deleteRoom(id) + RecorderRepository.deleteRecorder(id) .then(() => { - this.$store.dispatch('loadRooms') + this.$store.dispatch('loadRecorders') .then(() => { this.$parent.$data.isLoading = false; }); @@ -333,29 +370,27 @@ mounted() { this.$parent.$data.isLoading = true; this.$parent.$data.showAlert = false; - this.$store.dispatch('loadRooms') + this.$store.dispatch('loadRecorders') .then(() => { - this.$store.dispatch('loadRecorders') + this.$store.dispatch('loadRooms') .then(() => { this.$parent.$data.isLoading = false; }); }); }, computed: { - options() { - return { - recorders: [ - {value: 8, text: 'SMP 351 AudiMax'}, - {value: 13, text: 'SMP 351 HMU'}, - ], - }; - }, rooms() { return this.$store.state.rooms; }, recorders() { return this.$store.state.recorders; }, + recorderModels() { + return this.$store.state.recorderModels; + }, + recorderCommands() { + return this.$store.state.recorderCommands; + }, }, }; diff --git a/src/components/Rooms.vue b/src/components/Rooms.vue index 95693fc..9c5bf30 100644 --- a/src/components/Rooms.vue +++ b/src/components/Rooms.vue @@ -11,30 +11,105 @@ +

{{ $t('There are')}} {{rooms.length}} {{ $t('rooms defined')}}:

- + -
{{ $t('name') }}: {{room.name}}  - - - +
{{ $t('name') }}:  + {{room.name}}  + + + + + + + + + + + +
-

{{ $t('alternate_name') }}: {{room.alternate_name}}  - - - -

-

{{ $t('room_number') }}: {{room.number}}  - - -

- -

- {{ $t('comment') }}: {{room.comment}}  +

{{ $t('alternate_name') }}:  + {{room.alternate_name}}  - - + + + + + + + + + + + +

+

{{ $t('room_number') }}:  + {{room.number}}  + + + + + + + + + + + + +

+

+ {{ $t('comment') }}:  + {{room.comment}}  + + + + + +

@@ -50,8 +125,8 @@
@@ -68,11 +143,15 @@
- -
{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}
+ icon="trash"/> + + +

@@ -80,6 +159,11 @@ +

{{ $t('Create a new room')}}:

@@ -136,8 +220,8 @@
@@ -201,6 +285,8 @@ data() { return { tabIndex: 0, + updateValues: {}, + formEditField: {}, show_assigned_recorders: false, form: { name: '', @@ -222,10 +308,27 @@ this.tabIndex = 0; }); }).catch((msg) => { - this.showErrorMessage("Could not safe room!"); - this.$log.warn(msg); + this.showErrorMessage('Could not safe room!'); + this.$log.warn(msg); }); }, + initRoomUpdate(room, fieldName) { + this.$set(this.formEditField, room.id + '_' + fieldName, true); + this.$set(this.updateValues, room.id + '_' + fieldName, room[fieldName]); + }, + updateRoom(id, fieldName) { + this.$parent.$data.isLoading = true; + const data = {}; + data[fieldName] = this.updateValues[id + '_' + fieldName]; + RoomRepository.updateRoom(id, data) + .then(() => { + this.$store.dispatch('loadRooms') + .then(() => { + this.$parent.$data.isLoading = false; + this.formEditField[id + '_' + fieldName] = false; + }); + }); + }, deleteRoom(id) { this.$parent.$data.isLoading = true; RoomRepository.deleteRoom(id) diff --git a/src/main.ts b/src/main.ts index 355f507..6e371f6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,9 +17,19 @@ import VueMoment from 'vue-moment'; // following is to avoid missing type definitions // const FlagIcon = require('vue-flag-icon'); -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faCoffee, faPlus, faScroll, faCircle, faList, faTrash, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; +import {library} from '@fortawesome/fontawesome-svg-core'; +import { + faCoffee, + faDoorOpen, + faCheck, + faPlus, + faScroll, + faCircle, + faList, + faTrash, + faPencilAlt, +} from '@fortawesome/free-solid-svg-icons'; +import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; // import 'bootstrap'; @@ -30,19 +40,19 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'; const isProduction = process.env.NODE_ENV === 'production'; -library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCircle, faList, faPlus); +library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen); Vue.component('font-awesome-icon', FontAwesomeIcon); const options = { - isEnabled: true, - // logLevel : isProduction ? 'error' : 'debug', - logLevel : 'debug', - stringifyArguments : false, - showLogLevel : true, - showMethodName : true, - separator: '|', - showConsoleColors: true, + isEnabled: true, + // logLevel : isProduction ? 'error' : 'debug', + logLevel: 'debug', + stringifyArguments: false, + showLogLevel: true, + showMethodName: true, + separator: '|', + showConsoleColors: true, }; Vue.use(VueLogger, options); @@ -63,8 +73,8 @@ Vue.use(VueMoment); Vue.config.productionTip = false; new Vue({ - i18n, - router, - store, - render: (h) => h(App), + i18n, + router, + store, + render: (h) => h(App), }).$mount('#app');