From a9c07b628d41de1ad658128d2b00182f36a8a023 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 24 Apr 2019 16:35:36 +0200 Subject: [PATCH] added rooms and recorders to fe --- package-lock.json | 13 + package.json | 1 + src/App.vue | 20 +- src/api/recorderRepository.ts | 46 ++- src/api/roomRepository.ts | 4 + src/components/Recorders.vue | 518 ++++++++++++++++++++-------------- src/components/Rooms.vue | 308 ++++++++------------ src/main.ts | 16 +- src/store.ts | 56 +++- src/views/Home.vue | 5 +- 10 files changed, 576 insertions(+), 411 deletions(-) diff --git a/package-lock.json b/package-lock.json index b530b0c..82fd3a4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 886f761..768b53d 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 23f2e99..029b622 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,10 @@ diff --git a/src/components/Rooms.vue b/src/components/Rooms.vue index fbe2498..95693fc 100644 --- a/src/components/Rooms.vue +++ b/src/components/Rooms.vue @@ -9,23 +9,11 @@


- - - - +

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

- +
{{ $t('name') }}: {{room.name}}  @@ -79,190 +67,102 @@
- Last updated 3 mins ago -
- - - - - This card has supporting text below as a natural lead-in to additional content. - -
- Last updated 3 mins ago -
- - - - - 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. - -
- Last updated 3 mins ago + + +
{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}
+
+

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

+ +
+
+ +
+ +
+ +
+

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

+
+ +
+ +
+ +
+
+ +
+ +
+ +
+

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

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

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

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

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

-

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

- -

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

-
-
-

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

-
-
-

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

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

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

- -
-
- -
- -
- -
-

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

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

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

-
- -
- -
- -
-
- -
- -
- -
-
- - -
-
- -
-
- -
-
-
-
- -
- +
@@ -277,10 +177,17 @@
+
+
+ {{recorders}} +
+
+ diff --git a/src/main.ts b/src/main.ts index 86eb3cf..355f507 100644 --- a/src/main.ts +++ b/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'; diff --git a/src/store.ts b/src/store.ts index dfcd63e..ca4e9f1 100644 --- a/src/store.ts +++ b/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; }, diff --git a/src/views/Home.vue b/src/views/Home.vue index ac6a434..52befe0 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -2,7 +2,7 @@
Default Alert
- @@ -35,12 +35,13 @@ public changeLocale(locale: string): void { i18n.locale = locale; + // Vue.$moment.locale(locale); } }