[CORD-1558] metro-net GUI development
Change-Id: Id85e7cec9d52717777c388f7bfde712bb72850e9
diff --git a/xos/gui/src/app/components/mngMap.component.html b/xos/gui/src/app/components/mngMap.component.html
new file mode 100644
index 0000000..e41422f
--- /dev/null
+++ b/xos/gui/src/app/components/mngMap.component.html
@@ -0,0 +1,61 @@
+<div class = "row">
+ <div class = "col-xs-12">
+ <h1>Metronet Map</h1>
+ <div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4">
+ <ng-map
+ default-style="false"
+ class="metronet"
+ id="foobar"
+ center="0,0"
+ disable-default-u-i="true"
+ map-type-id="ROADMAP"
+ zoom-control="true"
+ min-zoom="2"
+ styles="{{vm.mapStyles}}"
+ >
+ <!--Markers-->
+ <marker
+ ng-repeat="uni in vm.unis"
+ id="marker-{{uni.id}}"
+ position="{{uni.latlng.toString()}}"
+ icon="{{vm.MapConfig.marker}}"
+ on-click="vm.showUni(uni)"
+ >
+ </marker>
+
+ <!--Marker Info Window-->
+
+ <info-window id = "uni-info">
+ <div class = "marker-info">
+ <h4>{{vm.current_uni.name}}</h4>
+ <p>
+ <b>LatLng: </b>{{vm.current_uni.latlng.toString()}}<br/>
+ <b>Cpe id: </b>{{vm.current_uni.cpe_id}}<br/>
+ <b>Tenant: </b>{{vm.current_uni.tenant}}<br/>
+ </p>
+ <button ng-show="vm.canCreateEline" ng-click="vm.createConnection(vm.current_uni)()">Create connection</button>
+ <button ng-show="!vm.canCreateEline && !uni.eline_start" ng-click="vm.finishConnection(vm.current_uni)">Finish connection</button>
+ </div>
+ </info-window>
+
+ <!--Connections-->
+
+ <shape
+ ng-repeat="eline in vm.elines"
+ name="polyline"
+ id="eline-{{eline.id}}"
+ path="{{eline.path}}"
+ stroke-color="{{vm.colorLine(eline.backend_status)}}"
+ stroke-opacity="1.0"
+ stroke-weight="5"
+ on-click="vm.elinePanel({{eline}}, true)"
+ >
+ </shape>
+
+ </ng-map>
+
+ </div>
+
+ </div>
+</div>
+<!--"https://maps.googleapis.com/maps/api/js?key=AIzaSyA3rQOp26I5a21VQhwLal8Z1x3XGHjXfm4"-->
\ No newline at end of file