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

fixed room mgmt and recorder mgmt basically working

Browse Source
This commit is contained in:
Tobias Kurze
2019-04-26 15:34:58 +02:00
parent 03b9637e65
commit 7022ab738b
7 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/Repository.js
View File

@@ -15,7 +15,6 @@ api.interceptors.request.use(async function(config) {
if (store.getters.isAuthenticated) { if (store.getters.isAuthenticated) {
const token = store.state.access_token; const token = store.state.access_token;
config.headers.Authorization = `Bearer ${token}`; config.headers.Authorization = `Bearer ${token}`;
return config;
} else { } else {
Vue.$log.warn("the access_token is not valid anymore."); Vue.$log.warn("the access_token is not valid anymore.");
if(store.getters.isRefreshTokenValid){ if(store.getters.isRefreshTokenValid){
@@ -47,8 +46,8 @@ api.interceptors.request.use(async function(config) {
} }
}); });
} }
return config;
} }
return config;
}); });
api.interceptors.response.use(function (response) { api.interceptors.response.use(function (response) {

27
src/api/recorderRepository.ts
View File

@@ -7,6 +7,8 @@ const recorderResource = '/recorder';
const recorderModelResource = '/recorder/model'; const recorderModelResource = '/recorder/model';
const recorderCommandResource = '/recorder/command'; const recorderCommandResource = '/recorder/command';
import {dictEmptyValToNull} from '@/utils';
export default { export default {
getRecorders() { getRecorders() {
return Repository.get(`${recorderResource}`); return Repository.get(`${recorderResource}`);
@@ -16,12 +18,16 @@ export default {
return Repository.get(`${recorderResource}/${recorderId}`); return Repository.get(`${recorderResource}/${recorderId}`);
}, },
deleteRecorder(recorderId: number) {
return Repository.delete(`${recorderResource}/${recorderId}`);
},
createRecorder(recorderData: any) { createRecorder(recorderData: any) {
return Repository.post(`${recorderResource}`, recorderData); return Repository.post(`${recorderResource}`, dictEmptyValToNull(recorderData));
}, },
updateRecorder(recorderId: number, recorderData: any) { updateRecorder(recorderId: number, recorderData: any) {
return Repository.put(`${recorderResource}/${recorderId}`, recorderData); return Repository.put(`${recorderResource}/${recorderId}`, dictEmptyValToNull(recorderData));
}, },
@@ -33,12 +39,16 @@ export default {
return Repository.get(`${recorderModelResource}/${recorderModelId}`); return Repository.get(`${recorderModelResource}/${recorderModelId}`);
}, },
deleteRecorderModel(recorderModelId: number) {
return Repository.delete(`${recorderModelResource}/${recorderModelId}`);
},
createRecorderModel(recorderModelData: any) { createRecorderModel(recorderModelData: any) {
return Repository.post(`${recorderModelResource}`, recorderModelData); return Repository.post(`${recorderModelResource}`, dictEmptyValToNull(recorderModelData));
}, },
updateRecorderModel(recorderModelId: number, recorderModelData: any) { updateRecorderModel(recorderModelId: number, recorderModelData: any) {
return Repository.put(`${recorderModelResource}/${recorderModelId}`, recorderModelData); return Repository.put(`${recorderModelResource}/${recorderModelId}`, dictEmptyValToNull(recorderModelData));
}, },
@@ -50,11 +60,16 @@ export default {
return Repository.get(`${recorderCommandResource}/${recorderCommandId}`); return Repository.get(`${recorderCommandResource}/${recorderCommandId}`);
}, },
deleteRecorderCommand(recorderCommandId: number) {
return Repository.delete(`${recorderCommandResource}/${recorderCommandId}`);
},
createRecorderCommand(recorderCommandData: any) { createRecorderCommand(recorderCommandData: any) {
return Repository.post(`${recorderCommandResource}`, recorderCommandData); return Repository.post(`${recorderCommandResource}`, dictEmptyValToNull(recorderCommandData));
}, },
updateRecorderCommand(recorderCommandId: number, recorderCommandData: any) { updateRecorderCommand(recorderCommandId: number, recorderCommandData: any) {
return Repository.put(`${recorderCommandResource}/${recorderCommandId}`, recorderCommandData); return Repository.put(`${recorderCommandResource}/${recorderCommandId}`,
dictEmptyValToNull(recorderCommandData));
}, },
}; };

5
src/api/roomRepository.ts
View File

@@ -2,6 +2,7 @@
// @ts-ignore // @ts-ignore
import Repository from './Repository'; import Repository from './Repository';
import {dictEmptyValToNull} from '@/utils';
const resource = '/room'; const resource = '/room';
@@ -19,10 +20,10 @@ export default {
}, },
createRoom(roomData: any) { createRoom(roomData: any) {
return Repository.post(`${resource}`, roomData); return Repository.post(`${resource}`, dictEmptyValToNull(roomData));
}, },
updateRoom(roomId: number, roomData: any) { updateRoom(roomId: number, roomData: any) {
return Repository.put(`${resource}/${roomId}`, roomData); return Repository.put(`${resource}/${roomId}`, dictEmptyValToNull(roomData));
}, },
}; };

13
src/components/Recorders.vue
View File

@@ -21,6 +21,7 @@
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorder) in recorders" <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(recorder) in recorders"
:header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'" :header="recorder.name + ' (' + recorder.ip + ' / ' + recorder.network_name + ')'"
v-bind:key="recorder.id"> v-bind:key="recorder.id">
{{recorder}}
<b-card-text> <b-card-text>
<h5 class="card-title">{{ $t('name') }}:&nbsp; <h5 class="card-title">{{ $t('name') }}:&nbsp;
<span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}&nbsp; <span v-if="!formEditField[recorder.id+'_name']">{{recorder.name}}&nbsp;
@@ -112,7 +113,7 @@
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-8"> <div class="col-sm-8">
<select class="form-control" v-model="form.room"> <select class="form-control" v-model="form.room">
<option disabled value="">No recorder selected</option> <option value="">No recorder selected</option>
<option v-for="room in rooms" v-bind:value="room.id"> <option v-for="room in rooms" v-bind:value="room.id">
{{ room.name }} {{ room.name }}
</option> </option>
@@ -140,8 +141,8 @@
$t('no_model_defined')}}</p> $t('no_model_defined')}}</p>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-8"> <div class="col-sm-8">
<select class="form-control" v-model="form.room"> <select class="form-control" v-model="form.recorder_model">
<option disabled value="">No recorder selected</option> <option value="">No recorder selected</option>
<option v-for="recorderModel in recorderModels" <option v-for="recorderModel in recorderModels"
v-bind:value="recorderModel.id"> v-bind:value="recorderModel.id">
{{ recorderModel.name }} {{ recorderModel.name }}
@@ -225,7 +226,7 @@
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder_model"> <select class="form-control" v-model="form.recorder_model_id">
<option disabled value="">No recorder_model selected</option> <option disabled value="">No recorder_model selected</option>
<option v-for="recorderModel in recorderModels" <option v-for="recorderModel in recorderModels"
v-bind:value="recorder_model.id"> v-bind:value="recorder_model.id">
@@ -238,7 +239,7 @@
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('room') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('room') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.room"> <select class="form-control" v-model="form.room_id">
<option disabled value="">Not assigned to room</option> <option disabled value="">Not assigned to room</option>
<option v-for="room in rooms" v-bind:value="room.id"> <option v-for="room in rooms" v-bind:value="room.id">
{{ room.name }} {{ room.name }}
@@ -325,6 +326,8 @@
data() { data() {
return { return {
tabIndex: 0, tabIndex: 0,
updateValues: {},
formEditField: {},
show_assigned_recorders: false, show_assigned_recorders: false,
form: { form: {
name: '', name: '',

50
src/components/Rooms.vue
View File

@@ -112,26 +112,37 @@
</small> </small>
</p> </p>
<hr/> <hr/>
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp;
<div v-if="room.recorder"> <div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp; <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp;
<a class="float-right badge badge-pill badge-info"> ({{room.recorder.ip}}) / ({{room.recorder.network_name}})
<font-awesome-icon icon="pencil-alt"/>
</a></p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p> $t('no_recorder_defined')}}</p>
<div class="form-group row"> </div>
<div class="col-sm-8"> <a class="float-right badge badge-pill badge-info">
<select class="form-control" v-model="form.recorder"> <font-awesome-icon
<option disabled value="">No recorder selected</option> @click="initRoomUpdate(room, 'recorder_id')" icon="pencil-alt"/>
</a>
</span>
<b-form v-else>
<b-input-group>
<select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
<option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name}} {{ recorder.name }}
</option> </option>
</select> </select>
</div> <b-input-group-append>
<label class="label col-sm-4 col-form-label">{{ $t('recorder') }}</label> <b-button :disabled="errors.has('recorder_id')"
</div> @click="updateRoom(room.id, 'recorder_id')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" <input class="form-check-input" type="checkbox"
v-model="show_assigned_recorders" id="defaultCheck1"> v-model="show_assigned_recorders" id="defaultCheck1">
@@ -139,7 +150,8 @@
Show already assigned recorders Show already assigned recorders
</label> </label>
</div> </div>
</div> </b-form>
</b-card-text> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <small class="text-muted">
@@ -218,8 +230,8 @@
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<select class="form-control" v-model="form.recorder"> <select class="form-control" v-model="form.recorder_id">
<option disabled value="">No recorder selected</option> <option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }} {{ recorder.name }}
</option> </option>
@@ -289,11 +301,11 @@
formEditField: {}, formEditField: {},
show_assigned_recorders: false, show_assigned_recorders: false,
form: { form: {
name: '', name: null,
alternate_name: '', alternate_name: null,
number: '', number: null,
comment: '', comment: null,
recorder: null, recorder_id: null,
}, },
}; };
}, },

6
src/main.ts
View File

@@ -72,6 +72,12 @@ Vue.use(VueMoment);
Vue.config.productionTip = false; Vue.config.productionTip = false;
// @ts-ignore
String.prototype.isEmpty = function() {
return (this.length === 0 || !this.trim());
};
new Vue({ new Vue({
i18n, i18n,
router, router,

23
src/utils/index.ts
View File

@@ -2,6 +2,11 @@
import Vue from 'vue'; import Vue from 'vue';
// @ts-ignore
String.prototype.isEmpty = function() {
return (this.length === 0 || !this.trim());
};
export const EventBus = new Vue(); export const EventBus = new Vue();
export function isValidJwt(jwt: any) { export function isValidJwt(jwt: any) {
@@ -26,3 +31,21 @@ export function getRemainingJwtValiditySeconds(jwt: any) {
} }
return Math.round(diff / 1000 * 100) / 100; return Math.round(diff / 1000 * 100) / 100;
} }
export function isEmpty(str: string) {
return (0 === str.length || !str.trim());
}
export function dictEmptyValToNull(dict: object): object {
const newDict: { [key: string]: string | null | object; } = Object.assign({}, dict);
for (const [key, value] of Object.entries(dict)) {
if (typeof value === 'string') {
if (isEmpty(value)) {
newDict[key] = null;
}
} else if (value && value.constructor === Object) { // check if "dictionary"
newDict[key] = dictEmptyValToNull(value);
}
}
return newDict;
}