diff --git a/src/components/nd/PPortList.vue b/src/components/nd/PPortList.vue index 75ca178e43e9ba0aa52e94548847a85c8287251f..084e7f4f0f1e85bf35638fc02bfffa3bcbb6925d 100644 --- a/src/components/nd/PPortList.vue +++ b/src/components/nd/PPortList.vue @@ -1,11 +1,7 @@ <template> <div> - <FilterInput v-model="filter"></FilterInput> - <b-pagination v-if="p_ports && p_ports.length > per_page && filter === ''" :total-rows="p_ports.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="p_ports === null" + <PaginatorTable :fields="site_list_fields" :busy="p_ports === null" :items="p_ports" :sort-by="sort_by || default_sort_by"> <template v-slot:cell(name)="data"> <b-link class="nowrap" :to="'/netdoc/modules/'+data.item.module_gfk+'/p_port/'+data.item.gpk"> @@ -18,23 +14,21 @@ <template v-slot:cell(is_connected)="data"> <CheckMark :state="data.item.is_connected"/> </template> - </b-table> + </PaginatorTable> <div v-if="p_ports && p_ports.length === 0" class="font-italic text-center mb-3"> {{ $t('components.bcd_list.no_p_ports_available') }} </div> - <b-pagination v-if="p_ports && p_ports.length > per_page && filter === ''" :total-rows="p_ports.length" - :per-page="per_page" v-model="current_page" align="center"></b-pagination> </b-card> </div> </template> <script> -import FilterInput from '@/components/FilterInput' import CheckMark from '@/components/CheckMark.vue' +import PaginatorTable from '@/components/PaginatorTable.vue' export default { name: 'PPortList', - components: { CheckMark, FilterInput }, + components: { PaginatorTable, CheckMark }, watch: { filter: { immediate: true, @@ -58,7 +52,7 @@ export default { }, computed: { site_list_fields() { - const result = [ + return [ { label: this.$t('system.name'), key: 'name', @@ -90,7 +84,6 @@ export default { sortable: true }, ] - return result } }, props: { diff --git a/src/views/nd/NetdocRoom.vue b/src/views/nd/NetdocRoom.vue index 3a5bc4dfb52f1990ea75698f61fb1f4e743fcea8..5327b27c95c9d2748c86fb6343eddd5a1e31a0a0 100644 --- a/src/views/nd/NetdocRoom.vue +++ b/src/views/nd/NetdocRoom.vue @@ -2,6 +2,35 @@ <div id="Site"> <h1 v-if="room">{{ $tc('views.nd.netdoc.room', 1) }} {{ room.number+': '+room.name }}</h1> <LoadingPlaceholder :data="[bldg, room, modules]"> + <div style="margin-top: 15px"> + <b-row class="mt-n4" v-if="bldg && room" > + <b-col cols="3"> + <ComponentLocation :bldg_name="bldg.name" :room_name="room.name"/> + </b-col> + <b-col cols="3"> + <div v-if="this.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> + </div> <PPortList :p_ports="p_ports" /> </LoadingPlaceholder> </div> @@ -12,10 +41,16 @@ import LoadingPlaceholder from '@/components/Loading.vue' import netdocService from '@/api-services/netdoc.service' import PPortList from '@/components/nd/PPortList.vue' import {EventBus} from '@/eventbus' +import ComponentLocation from '@/components/nd/ComponentLocation.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: { PPortList, LoadingPlaceholder }, + methods: { latLng }, + components: { KITMap, NETVSIcon, ComponentLocation, PPortList, LoadingPlaceholder, LMarker }, data() { return { site: null, @@ -23,6 +58,7 @@ export default { room: null, modules: null, p_ports: null, + icon: icon({iconUrl: '/location.png', iconSize: [32, 42], iconAnchor: [16, 42]}) } }, async created() { @@ -35,6 +71,11 @@ export default { const n = this.room.number // Don't lazy eval, this can cause a poo-storm in the next line on navigation to the same view iwth a different p_port EventBus.$emit('overwrite_breadcrumbs', {room_gpk: () => n}) + }, + computed: { + can_show_map: function () { + return this.bldg && this.bldg.geo_location && this.bldg.geo_location.lng && this.bldg.geo_location.lat + }, } } </script>