diff --git a/src/components/nd/RoomList.vue b/src/components/nd/RoomList.vue index d97c51f93ab0ef714c479b6cf11ce283ef930862..6d8e71197329eb79001e7ab726a6c3e2c2c131e7 100644 --- a/src/components/nd/RoomList.vue +++ b/src/components/nd/RoomList.vue @@ -1,35 +1,30 @@ <template> <div> - <FilterInput v-model="filter"></FilterInput> - <b-pagination v-if="rooms && rooms.length > per_page && filter === ''" :total-rows="rooms.length" - :per-page="per_page" v-model="current_page" align="center"></b-pagination> <b-card no-body class="shadow"> - <b-table responsive :filter="filter" :per-page="filter === '' ? per_page : null" - :current-page="filter === '' ? current_page : null" :fields="site_list_fields" :busy="rooms === null" - :items="rooms" :sort-by="sort_by || default_sort_by"> + <PaginatorTable responsive :fields="site_list_fields" :busy="rooms === null" + :items="rooms" :sort-by="sort_by || default_sort_by" :hide-top-pagination="rooms.length < 25" + :hide-filter="rooms.length < 10"> <template v-slot:cell(name)="data"> <b-link class="nowrap" :to="'/netdoc/sites/'+bldgs_by_nbr[data.item.bldg].site_fq_name+'/'+data.item.bldg+'/'+data.item.gpk"><b>{{ data.value }}</b></b-link> </template> <template v-slot:cell(number)="data"> <b-link class="nowrap" :to="'/netdoc/sites/'+bldgs_by_nbr[data.item.bldg].site_fq_name+'/'+data.item.bldg+'/'+data.item.gpk"><b>{{ data.value }}</b></b-link> </template> - </b-table> + </PaginatorTable> <div v-if="rooms && rooms.length === 0" class="font-italic text-center mb-3"> {{ $t('components.bcd_list.no_rooms_available') }} </div> - <b-pagination v-if="rooms && rooms.length > per_page && filter === ''" :total-rows="rooms.length" - :per-page="per_page" v-model="current_page" align="center"></b-pagination> </b-card> </div> </template> <script> -import FilterInput from '@/components/FilterInput' import apiutil from '@/util/apiutil' +import PaginatorTable from '@/components/PaginatorTable.vue' export default { name: 'RoomList', - components: { FilterInput }, + components: { PaginatorTable }, watch: { filter: { immediate: true, @@ -56,7 +51,7 @@ export default { return apiutil.dict_by_value_of_array(this.bldgs, 'number') }, site_list_fields() { - const result = [ + return [ { label: this.$t('views.nd.room.floor'), key: 'floor', @@ -78,7 +73,6 @@ export default { sortable: true }, ] - return result } }, props: { diff --git a/src/views/nd/NetdocBldg.vue b/src/views/nd/NetdocBldg.vue index 2bbef5f49b0ba4b03effd447ff14ed59155d6d65..c01c7faf29063fb9b1ff0b995027d42ef22fbffd 100644 --- a/src/views/nd/NetdocBldg.vue +++ b/src/views/nd/NetdocBldg.vue @@ -2,6 +2,30 @@ <div id="Site"> <h1>{{ $tc('views.nd.netdoc.room', 2) }} <span v-if="bldg">in {{ bldg.number }}</span></h1> <LoadingPlaceholder :data="[bldg, rooms]"> + <b-row class="mt-4"> + <b-col cols="6"> + <div v-if="bldg"> + <div style="float: left;"> + <NETVSIcon icon="geo_address" class="pr-2"></NETVSIcon> + </div> + <div style="float: left;"> + {{ bldg.name }} + <br> + {{ bldg.street }} + <br> + {{ bldg.postal_code }} + </div> + </div> + </b-col> + <b-col cols="6"> + <KITMap v-if="can_show_map" :center="bldg.geo_location" :zoom="17" style="height: 20vh; width: 100%;"> + <template v-slot:map_content> + <l-marker :lat-lng="latLng(bldg.geo_location.lat, bldg.geo_location.lng)" + :icon="icon"></l-marker> + </template> + </KITMap> + </b-col> + </b-row> <RoomList :rooms="rooms" :bldgs="[bldg]" /> </LoadingPlaceholder> </div> @@ -11,23 +35,37 @@ import LoadingPlaceholder from '@/components/Loading.vue' import netdocService from '@/api-services/netdoc.service' import RoomList from '@/components/nd/RoomList.vue' +import NETVSIcon from '@/icons/NETVSIcon.vue' +import KITMap from '@/components/KITMap.vue' +import {icon, latLng} from 'leaflet' +import {LMarker} from 'vue2-leaflet' export default { name: 'NetdocBldg', - components: { RoomList, LoadingPlaceholder }, + methods: { latLng }, + components: { KITMap, NETVSIcon, RoomList, LoadingPlaceholder, LMarker }, data() { return { site: null, bldg: null, rooms: null, + + icon: icon({iconUrl: '/location.png', iconSize: [32, 42], iconAnchor: [16, 42]}) } }, async created() { const response = await netdocService.getRooms(this.$store.state, this.$route.params.site, this.$route.params.bldg) this.site = response.data.site_list[0] this.bldg = response.data.bldg_list[0] + console.log(this.bldg) this.rooms = response.data.room_list - } + }, + computed: { + can_show_map: function () { + return this.bldg && this.bldg.geo_location && this.bldg.geo_location.lat && this.bldg.geo_location.lng + } + }, + } </script>