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

3
src/api/Repository.js
View File

@@ -4,7 +4,8 @@ import Vue from "vue";
import axios from "axios"; import axios from "axios";
import store from "@/store"; import store from "@/store";
const baseDomain = "http://localhost:5443"; //const baseDomain = "http://localhost:5443";
const baseDomain = "";
const API_URL = `${baseDomain}/api/v1`; const API_URL = `${baseDomain}/api/v1`;
const api = axios.create({ const api = axios.create({

2
src/api/index.ts
View File

@@ -1,7 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import axios from 'axios'; import axios from 'axios';
const API_URL = 'http://localhost:5443/api'; import { API_URL } from '@/main.ts'
export function fetchSurveys() { export function fetchSurveys() {
return axios.get(`${API_URL}/surveys/`); return axios.get(`${API_URL}/surveys/`);

56
src/components/Recorders.vue
View File

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

53
src/components/Rooms.vue
View File

@@ -16,16 +16,30 @@
<strong>Room</strong>&nbsp;<i>list</i> <strong>Room</strong>&nbsp;<i>list</i>
</template> </template>
<div class="mt-3"> <div class="mt-3">
<b-button-group> <b-input-group>
<b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button> <b-input-group-prepend>
<b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button> <b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button>
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }} <b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
</b-button> <b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }}
</b-button-group> </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> </div>
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length}) }}:</p> <p>{{ $tc('rooms_defined', rooms.length, {num: rooms.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-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in get_rows()"
:header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id"> :header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
<b-card-text> <b-card-text>
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp; <h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp;
@@ -384,9 +398,12 @@ export default {
onlyShowRoomsWithRecorder: false, onlyShowRoomsWithRecorder: false,
onlyShowRoomsWithoutRecorder: false, onlyShowRoomsWithoutRecorder: false,
tabIndex: 0, tabIndex: 0,
filter: '',
updateValues: {}, updateValues: {},
formEditField: {}, formEditField: {},
show_assigned_recorders: false, show_assigned_recorders: false,
currentPage: 1,
elementsPerPage: 30,
form: { form: {
name: null, name: null,
alternate_name: null, alternate_name: null,
@@ -397,6 +414,17 @@ export default {
}; };
}, },
methods: { methods: {
get_rows() {
const start = (this.currentPage - 1) * this.elementsPerPage;
const end = start + this.elementsPerPage;
return this.rooms.slice(start, end);
},
num_pages() {
return Math.ceil(this.rooms.length / this.elementsPerPage);
},
change_page(page) {
this.currentPage = page;
},
showAllRooms() { showAllRooms() {
this.onlyShowRoomsWithRecorder = false; this.onlyShowRoomsWithRecorder = false;
this.onlyShowRoomsWithoutRecorder = false; this.onlyShowRoomsWithoutRecorder = false;
@@ -478,13 +506,24 @@ export default {
rooms() { rooms() {
if (this.onlyShowRoomsWithRecorder) { if (this.onlyShowRoomsWithRecorder) {
return this.$store.state.rooms.filter((item) => { return this.$store.state.rooms.filter((item) => {
if(this.filter !== '') {
return (item.name.includes(this.filter) || item.building_name != null && item.building_name.includes(this.filter)) && item.recorder;
}
return item.recorder; return item.recorder;
}); });
} else if (this.onlyShowRoomsWithoutRecorder) { } else if (this.onlyShowRoomsWithoutRecorder) {
return this.$store.state.rooms.filter((item) => { return this.$store.state.rooms.filter((item) => {
if(this.filter !== '') {
return (item.name.includes(this.filter) || item.building_name != null && item.building_name.includes(this.filter)) && !item.recorder;
}
return !item.recorder; return !item.recorder;
}); });
} }
if(this.filter !== ''){
return this.$store.state.rooms.filter((item)=>{
return (item.name.includes(this.filter) || item.building_name != null && item.building_name.includes(this.filter));
})
}
return this.$store.state.rooms; return this.$store.state.rooms;
}, },
recorders() { recorders() {

7
src/main.ts
View File

@@ -120,6 +120,13 @@ localize('de', de);
Vue.component('ValidationObserver', ValidationObserver); Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider); Vue.component('ValidationProvider', ValidationProvider);
//const API_URL = 'http://localhost:5443/api';
//const baseDomain = "http://localhost:5443";
const baseDomain = "";
export const API_URL = `${baseDomain}/api`;
export const API_V1_URL = `${baseDomain}/api/v1`;
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3}); // const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
const socket = io('ws://localhost:5443', { const socket = io('ws://localhost:5443', {
autoConnect: false, autoConnect: false,