Ticket #61 : Add EventMesh Server and display its location in the map

Author: habarthierry-hue

src/FaasNet.Website/src/app/eventmeshservers/list/list.component.html

@@ -8,3 +8,19 @@
     <button (click)="add()">{{ 'eventmeshservers.add' | translate }}</button>
   </div>
 </div>
+<div id="popup">
+  <div id="popup-content" *ngIf="selectedEventMeshServer">
+    <div class="item">
+      <div class="title">Urn</div>
+      <span>{{ selectedEventMeshServer.urn }}</span>
+    </div>
+    <div class="item">
+      <div class="title">Port</div>
+      <span>{{ selectedEventMeshServer.port }}</span>
+    </div>
+    <div class="item">
+      <div class="title">Create Datetime</div>
+      <span>{{ selectedEventMeshServer.createDateTime | date:'short' }}</span>
+    </div>
+  </div>
+</div>

src/FaasNet.Website/src/app/eventmeshservers/list/list.component.scss

@@ -1,9 +1,9 @@
 #map {
-    position: absolute;
-    top: 40px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+  position: absolute;
+  top: 40px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
 
@@ -21,3 +21,21 @@
   border: 1px solid #305880;
   border-radius: 2px;
 }
+
+#popup {
+  background-color: white;
+  border-radius: 5px;
+}
+
+#popup .item {
+  border-bottom: 1px solid gray;
+  padding: 5px 10px 5px 10px;
+}
+
+#popup .item:last-child {
+  border-bottom: none !important;
+}
+
+#popup .title {
+  font-weight: bold;
+}

src/FaasNet.Website/src/app/eventmeshservers/list/list.component.ts

@@ -9,6 +9,7 @@ import { EventMeshServerResult } from '@stores/eventmeshservers/models/eventmesh
 import { filter } from 'rxjs/operators';
 import { AddEventMeshServerComponent } from './add-eventmeshserver.component';
 declare var ol: any;
+declare var $: any;
 
 @Component({
   selector: 'list-eventmeshservers',
@@ -17,7 +18,9 @@ declare var ol: any;
 })
 export class ListEventMeshServersComponent implements OnInit {
   private _map: any;
-  private _markersLayer : any;
+  private _markersLayer: any;
+  private _overlay: any;
+  selectedEventMeshServer: EventMeshServerResult | null = null;
 
   constructor(
     private store: Store<fromReducers.AppState>,
@@ -61,16 +64,53 @@ export class ListEventMeshServersComponent implements OnInit {
       })
     });
     self._markersLayer = new ol.layer.Vector({
-      source: new ol.source.Vector()
+      source: new ol.source.Vector(),
+      style: new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 0.5],
+          anchorXUnits: "fraction",
+          anchorYUnits: "fraction",
+          src: "/assets/images/marker.svg"
+        })
+      })
+    });
+    self._overlay = new ol.Overlay({
+      element: document.getElementById("popup"),
+      autoPan: true,
+      autoPanAnimation: {
+        duration: 250
+      }
     });
     self._map.addLayer(self._markersLayer);
+    self._map.addOverlay(self._overlay);
+    self._map.on('click', function (evt: any) {
+        var feature = self._map.forEachFeatureAtPixel(evt.pixel,
+          function (f : any) {
+            return f;
+          });
+      if (feature) {
+        const coordinate = evt.coordinate;
+        self.selectedEventMeshServer = feature.server;
+        self._overlay.setPosition(coordinate);
+      } else {
+        self._overlay.setPosition(undefined);
+        self.selectedEventMeshServer = null;
+      }
+    });
+    self._map.on('pointermove', function (e : any) {
+      const pixel = self._map.getEventPixel(e.originalEvent);
+      const hit = self._map.hasFeatureAtPixel(pixel);
+      document.body.style.cursor = hit ? 'pointer' : '';
+    });
     this.store.pipe(select(fromReducers.selectEventMeshServersResult)).subscribe((state: EventMeshServerResult[] | null) => {
       if (!state) {
         return;
       }
 
       state.forEach((s: EventMeshServerResult) => {
         var marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([s.longitude, s.latitude])));
+        marker.server = s;
+        marker.description = 'coucou';
         self._markersLayer.getSource().addFeature(marker);
       });
     });

src/FaasNet.Website/src/app/functions/view/invoke/invoke.component.html

@@ -1,14 +1,14 @@
 <form (ngSubmit)="onSave($event)" class="mt-10">
   <!-- Configuration parameters -->
-  <div>
+  <div class="mb-10">
     <h3>{{ 'functions.configurationParameters' | translate }}</h3>
     <div *ngFor="let parameter of option?.Parameters">
       <function-rendering-component [option]="parameter" [form]="form"></function-rendering-component>
     </div>
   </div>
   <mat-divider></mat-divider>
   <!-- Input parameters -->
-  <div>
+  <div class="mb-10">
     <h3>{{ 'functions.inputParameters' | translate }}</h3>
     <div class="form-control">
       <div class="title">{{ 'functions.input' | translate }}</div>