Show address and location on kitmap on NetdocPPort

src/api-services/netdoc.service.js

@@ -414,6 +414,20 @@ export default {
           dd_module_list: 'default'
         }
       },
+      {
+        name: 'nd.room.list',
+        idx: 'room_list',
+        inner_join_ref: {
+          cnt_module_list: 'default'
+        }
+      },
+      {
+        name: 'nd.bldg.list',
+        idx: 'building_list',
+        inner_join_ref: {
+          room_list: 'default'
+        }
+      }
     ]
 
     return TransactionService.execute(config, ta)

src/views/nd/NetdocPPort.vue

@@ -48,9 +48,31 @@
         </b-col>
       </b-row>
       <b-row class="mt-n4">
-        <b-col>
+        <b-col cols="3">
           <ComponentLocation :bldg_name="p_port.mdl_bldg" :room_name="p_port.mdl_room"/>
         </b-col>
+        <b-col cols="3">
+          <div v-if="this.p_port_location && this.p_port_location.building">
+            <div style="float: left;">
+              <NETVSIcon icon="geo_address" class="pr-2"></NETVSIcon>
+            </div>
+            <div style="float: left;">
+              {{ p_port_location.building.name }}
+              <br>
+              {{ p_port_location.building.street }}
+              <br>
+              {{ p_port_location.building.postal_code }}
+            </div>
+          </div>
+        </b-col>
+        <b-col cols="6">
+          <KITMap v-if="can_show_map" :center="p_port_location.building.geo_location" :zoom="17" style="height: 30vh; width: 100%;">
+            <template v-slot:map_content>
+              <l-marker :lat-lng="latLng(p_port_location.building.geo_location.lat, p_port_location.building.geo_location.lng)"
+                        :icon="icon"></l-marker>
+            </template>
+          </KITMap>
+        </b-col>
       </b-row>
       <b-row>
         <b-col cols="12" cols-lg="12">
@@ -120,10 +142,14 @@ import PaginatorTable from '@/components/PaginatorTable.vue'
 import {EventBus} from '@/eventbus'
 import ComponentLocation from '@/components/nd/ComponentLocation.vue'
 import PPortPath from '@/components/nd/PPortPath.vue'
+import KITMap from '@/components/KITMap.vue'
+import {latLng, icon} from 'leaflet'
+import {LMarker} from 'vue2-leaflet'
 
 export default {
   name: 'NetdocPPort',
   components: {
+    KITMap,
     PPortPath,
     ComponentLocation,
     PaginatorTable,
@@ -134,13 +160,15 @@ export default {
     PatchActionForm,
     PatchRequestForm,
     NETVSIcon,
-    Loading
+    Loading,
+    LMarker
   },
   data() {
     return {
       module_gpk: undefined,
       p_port_gpk: undefined,
       p_port: undefined,
+      p_port_location: {},
       test_table: [],
 
       assigned_bcd_vlan_list: [],
@@ -157,9 +185,12 @@ export default {
 
       ev_p_port_gpk: undefined,
       map_p_port: undefined,
+
+      icon: icon({iconUrl: '/location.png', iconSize: [32, 42], iconAnchor: [16, 42]})
     }
   },
   methods: {
+    latLng,
     showEVLog() {
       this.ev_p_port_gpk = this.p_port_gpk
       this.$root.$nextTick(() => {
@@ -217,6 +248,11 @@ export default {
           }
           this.assigned_bcd_vlan_list.push(tmp)
         }
+
+        this.p_port_location = {
+          room: r.data.room_list[0],
+          building: r.data.building_list[0]
+        }
       })
       netdocService.find_remote_p_port_for_p_port(this.$store.state, this.module_gpk, this.p_port_gpk).then(r => {
         this.remote_p_port = r.data.p_port_list[0]
@@ -245,7 +281,15 @@ export default {
         }
       ]
       return result
-    }
+    },
+    can_show_map: function () {
+      if (this.p_port_location.building && this.p_port_location.building.geo_location) {
+        if (this.p_port_location.building.geo_location.lat && this.p_port_location.building.geo_location.lng) {
+          return true
+        }
+      }
+      return false
+    },
   },
   watch: {
     $route() {