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

imporvements of recorders and room views, also changed API URL -> but still buggy

Browse Source
This commit is contained in:
Tobias Kurze
2020-08-11 16:41:40 +02:00
parent 4483898115
commit bdd0b9cfd0
5 changed files with 103 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Recorders.vue
View File

@@ -18,16 +18,29 @@
<strong>{{$t('Recorders')}}</strong>&nbsp;{{$t('list')}}
</template>
<div class="mt-3">
<b-button-group>
<b-button variant="success" @click="filterShowAllRecorders()">{{$t('All recorders')}}</b-button>
<b-button variant="info" @click="filterOnlyShowOfflineRecorders()">{{$t('Offline recorders')}}</b-button>
<b-button variant="warning" @click="filterOnlyShowNonOfflineRecorders()">{{$t('Non offline recorders')}}</b-button>
</b-button-group>
<b-input-group>
<b-input-group-prepend>
<b-button variant="success" @click="filterShowAllRecorders()">{{$t('All recorders')}}</b-button>
<b-button variant="info" @click="filterOnlyShowOfflineRecorders()">{{$t('Offline recorders')}}</b-button>
<b-button variant="warning" @click="filterOnlyShowNonOfflineRecorders()">{{$t('Non offline recorders')}}</b-button>
</b-input-group-prepend>
<b-form-input type="text" v-model="filter"></b-form-input>
<b-input-group-append>
<b-button variant="outline-primary" @click="filter=''">Clear Filter</b-button>
</b-input-group-append>
</b-input-group>
</div>
<p>{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:</p>
<div class="pagination">
<div class="number"
v-for="i in num_pages()"
v-bind:class="[i === currentPage ? 'active' : '']"
v-on:click="change_page(i)">{{i}}
</div>
</div>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
v-for="(recorder) in recorders"
v-for="(recorder) in get_rows()"
v-bind:key="recorder.id">
<template v-slot:header>
<router-link :to="{name: 'recorder', params: {recorder_id: recorder.id}}">
@@ -172,7 +185,7 @@
v-model="updateValues[recorder.id+'_ssh_port']"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Room number ('+recorder.ssh_port +')'"
:placeholder="'SSH Port ('+recorder.ssh_port +')'"
@blur="updateRecorder(recorder.id, 'ssh_port')"
@keyup.enter="updateRecorder(recorder.id, 'ssh_port')"
required></b-form-input>
@@ -203,7 +216,7 @@
v-model="updateValues[recorder.id+'_telnet_port']"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Room number ('+recorder.telnet_port +')'"
:placeholder="'Telnet Port ('+recorder.telnet_port +')'"
@blur="updateRecorder(recorder.id, 'telnet_port')"
@keyup.enter="updateRecorder(recorder.id, 'telnet_port')"
required></b-form-input>
@@ -239,7 +252,7 @@
@change="updateRecorder(recorder.id, 'room_id')">
<option value="">{{$t('No room selected')}}</option>
<option v-for="room in rooms" v-bind:value="room.id">
{{ room.name }}
{{ room.building_number + " " + room.name }}
</option>
</select>
</div>
@@ -678,12 +691,15 @@
onlyShowOfflineRecorders: false,
onlyShowNonOfflineRecorders: false,
tabIndex: 0,
filter: '',
updateValues: {},
formEditField: {},
updateRecModelValues: {},
formRecModelEditField: {},
show_assigned_recorders: false,
show_assigned_rooms: true,
currentPage: 1,
elementsPerPage: 6,
form: {
name: '',
description: '',
@@ -702,6 +718,17 @@
};
},
methods: {
get_rows() {
const start = (this.currentPage - 1) * this.elementsPerPage;
const end = start + this.elementsPerPage;
return this.recorders.slice(start, end);
},
num_pages() {
return Math.ceil(this.recorders.length / this.elementsPerPage);
},
change_page(page) {
this.currentPage = page;
},
initRecorderUpdate(recorder, fieldName) {
this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
@@ -797,14 +824,25 @@
recorders() {
if(this.onlyShowOfflineRecorders){
return this.$store.state.recorders.filter((item) => {
if(this.filter !== '') {
return item.name.includes(this.filter) && item.offline;
}
return item.offline;
});
}
else if(this.onlyShowNonOfflineRecorders){
return this.$store.state.recorders.filter((item) => {
if(this.filter !== '') {
return item.name.includes(this.filter) && !item.offline;
}
return !item.offline;
});
}
if(this.filter !== '') {
return this.$store.state.recorders.filter((item)=>{
return item.name.includes(this.filter);
});
}
return this.$store.state.recorders;
},
recorderModels() {