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 store from "@/store";
const baseDomain = "http://localhost:5443";
//const baseDomain = "http://localhost:5443";
const baseDomain = "";
const API_URL = `${baseDomain}/api/v1`;
const api = axios.create({

2
src/api/index.ts
View File

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

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() {

53
src/components/Rooms.vue
View File

@@ -16,16 +16,30 @@
<strong>Room</strong>&nbsp;<i>list</i>
</template>
<div class="mt-3">
<b-button-group>
<b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button>
<b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }}
</b-button>
</b-button-group>
<b-input-group>
<b-input-group-prepend>
<b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button>
<b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without 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('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 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">
<b-card-text>
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp;
@@ -384,9 +398,12 @@ export default {
onlyShowRoomsWithRecorder: false,
onlyShowRoomsWithoutRecorder: false,
tabIndex: 0,
filter: '',
updateValues: {},
formEditField: {},
show_assigned_recorders: false,
currentPage: 1,
elementsPerPage: 30,
form: {
name: null,
alternate_name: null,
@@ -397,6 +414,17 @@ export default {
};
},
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() {
this.onlyShowRoomsWithRecorder = false;
this.onlyShowRoomsWithoutRecorder = false;
@@ -478,13 +506,24 @@ export default {
rooms() {
if (this.onlyShowRoomsWithRecorder) {
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;
});
} else if (this.onlyShowRoomsWithoutRecorder) {
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;
});
}
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;
},
recorders() {

7
src/main.ts
View File

@@ -120,6 +120,13 @@ localize('de', de);
Vue.component('ValidationObserver', ValidationObserver);
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:5443', {
autoConnect: false,