From bdd0b9cfd0bf61a4272954ec4e8943013358995a Mon Sep 17 00:00:00 2001
From: Tobias Kurze <kurze.tobias@googlemail.com>
Date: Tue, 11 Aug 2020 16:41:40 +0200
Subject: [PATCH] imporvements of recorders and room views, also changed API
 URL -> but still buggy

---
 src/api/Repository.js        |  3 +-
 src/api/index.ts             |  2 +-
 src/components/Recorders.vue | 56 ++++++++++++++++++++++++++++++------
 src/components/Rooms.vue     | 53 +++++++++++++++++++++++++++++-----
 src/main.ts                  |  7 +++++
 5 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/src/api/Repository.js b/src/api/Repository.js
index c44b289..234a26f 100644
--- a/src/api/Repository.js
+++ b/src/api/Repository.js
@@ -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({
diff --git a/src/api/index.ts b/src/api/index.ts
index b6e563b..38eb7a7 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -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/`);
diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue
index f29faf2..467192b 100644
--- a/src/components/Recorders.vue
+++ b/src/components/Recorders.vue
@@ -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() {
diff --git a/src/components/Rooms.vue b/src/components/Rooms.vue
index ae771b7..962ee60 100644
--- a/src/components/Rooms.vue
+++ b/src/components/Rooms.vue
@@ -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() {
diff --git a/src/main.ts b/src/main.ts
index 7bd7831..b3a821c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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,