[showdetails] pop up fixed !

diff --git a/src/components/map/map.html b/src/components/map/map.html
index 127bc7daef2b78d99c20bcc47e4a2c6b40f8ba88..cbb51330a6519824e4a09b9a04e9d72c4b1b2c89 100644 (file)
--- a/src/components/map/map.html
+++ b/src/components/map/map.html
@@ -4,29 +4,31 @@
     <div class="modal-dialog modal-sm">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" (click)="closeModal()">&times;</button>
-                <h4 class="modal-title">Add new</h4>
+                <button type="button" class="close" (click)="html()">&times;</button>
+                <h4 class="modal-title">What do you want ? </h4>
             </div>
-            <div class="modal-body">
-                <p>Do you want to add new a facility?</p>
+            <div id="topLevel">
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
+                    <button type="button" class="btn btn-default" (click)="drillDown()">Drill down</button>
+                </div>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" (click)="addUnit()">Yes</button>
+            <div id="middleLevel">
+                <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
+                <button type="button" class="btn btn-default" (click)="drillDown()">Drill down</button>
+                <button type="button" class="btn btn-default" (click)="drillUp()">drill up</button>
             </div>
-        </div>
-    </div>
-</div>
-<div id="expandModal" role="dialog">
-    <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type class="close" (click)="closeExpandModal()" )>&times;</button>
-            </div>
-            <div class="modal-body">
-                <button (click)="seeDetails()">See details</button>
-                <button (click)="drillDown()">Drill down</button>
-                <button (click)="drillUp()">Drill up</button>
+            <div id="bottomLevel">
+                <div class="modal-body">
+                    <p>Do you want to add new a facility or see details?</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" (click)="addUnit()">Yes</button>
+                    <button type="button" class="btn btn-default" (click)="seeDetails()">See details</button>
+                    <button type="button" class="btn btn-default" (click)="drillUp()">Drill up</button>
+                </div>
             </div>
+
         </div>
     </div>
 </div>

diff --git a/src/components/map/map.ts b/src/components/map/map.ts
index e38c770b3452a721f1547c8e2f1173df919654ef..3d77fd508cdd872bdad1a10f08bfcba1e3def4cb 100644 (file)
--- a/src/components/map/map.ts
+++ b/src/components/map/map.ts
@@ -12,8 +12,7 @@ import {Headers, Http} from 'angular2/http';
 
 export class Map {
 
-    hideModal: any;
-    expandModal:any;
+    hideModal:any;
     map:Object;
     http:Http;
     LEVEL:number;
@@ -21,9 +20,14 @@ export class Map {
     parent:Object;
     currentPos:Object;
     uprunned:boolean;
+    activeId:string;
+    currentMarker:Object;
+
     // COLORS:Object;
 
     constructor(http:Http) {
+
+        this.activeId = null;
         this.newactive = new EventEmitter();
         this.newOrg = new EventEmitter();
         this.map = new google.maps.Map(document.getElementById("map"), {center: {lat: 0, lng: 0}, zoom: 12});
@@ -35,29 +39,37 @@ export class Map {
         this.parent = null;
         this.currentPos = null;
         this.uprunned = false;
+        this.currentMarker = null;
         // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
+        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
+        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
+        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
         this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
-        this.expandModal = document.getElementById("expandModal").style.visibility = "hidden";
 
     }
 
-    showModal(){
+    showModal() {
         return this.hideModal = document.getElementById("divModal").style.visibility = "visible";
     }
 
-    closeModal(){
-        console.log("hei");
-        return this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
+    closeModal() {
+        this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
+        this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
+        this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
+        this.hideModal = document.getElementById("divModal").style.visibility = "hidden";
 
-    }
+        this.setRunned(false);
 
-    showExpandModal(){
-        return this.hideModal = document.getElementById("expandModal").style.visibility = "visible";
     }
 
-    closeExpandModal(){
-        return this.hideModal = document.getElementById("expandModal").style.visibility = "hidden";
+    html() {
+        this.currentMarker.setMap(null);
 
+        this.closeModal();
+    }
+
+    setActiveId(id) {
+        this.activeId = id;
     }
 
     getMap() {
@@ -159,7 +171,6 @@ export class Map {
     }
 
     drawPolygon(item, instance) {
-        let bounds = new google.maps.LatLngBounds();
         let feature;
         let incoming:string;
         incoming = item.featureType.toLowerCase();
@@ -200,114 +211,151 @@ export class Map {
             }
 
             this.map.data.addGeoJson(unit);
-            this.map.data.setStyle(function(feature) {
+            this.map.data.setStyle(function (feature) {
                 let color = 'gray';
                 let icon;
-                if (feature.getProperty('icon')!== null) {
-                   icon = feature.getProperty('icon');
+                if (feature.getProperty('icon') !== null) {
+                    icon = feature.getProperty('icon');
                 }
                 color = feature.getProperty('color');
                 return /** @type {google.maps.Data.StyleOptions} */({
                     fillColor: color,
                     strokeColor: color,
-                    strokeWeight: 2,
+                    strokeWeight: 3,
                     icon: icon
                 });
             });
 
 
             this.map.data.addListener('click', function (event) {
+                instance.setActiveId(event.feature.O.id);
+                instance.setcurrentPos(event.latLng);
 
-                //TODO: spør om man vil ned/opp eller se info
-                //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
 
-                if (instance.runned == false && instance.LEVEL < 4) {
-                    instance.setRunned(true);
-
-                    instance.showExpandModal();
-
-                    let id = event.feature.O.id;
-                    instance.setParent(id);
-
-                    instance.map.data.forEach(function (feature) {
-                        if (!(feature.O.id == id && instance.LEVEL == 3)) {
-                            instance.map.data.remove(feature);
+                //TODO: finne liste over alle levels slike at man ikke har hardkodet inn < 4 !!
+                if (instance.uprunned == false && instance.LEVEL == 2) {
+                    this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
+                    this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
+                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
+                    instance.showModal();
 
-                        }
-                    });
+                }
+                else if (instance.runned == false && instance.LEVEL < 4) {
+                    this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
+                    this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
+                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
+                    instance.showModal();
+                } else if (instance.runned == false && instance.LEVEL <= 4) {
 
-                    instance.addLevel();
-                    instance.getData('/' + id + '/children', instance);
-                } else if (instance.runned == false && instance.LEVEL >= 4) {
-                    instance.setRunned(true);
+                    this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
+                    this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
+                    this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
 
                     instance.setcurrentPos(event.latLng);
+                    instance.showModal();
 
-                    var marker = new google.maps.Marker({
-                        position: event.latLng,
-                        map: instance.map,
-                        title: 'newOrg',
-                        icon: {
-                            path: google.maps.SymbolPath.CIRCLE,
-                            scale: 5
-                        }
+                }
 
-                    });
+            });
+        }
+        else {
+            // ToDO:
+            console.log("fiks meg! gi warning på topp av kart");
+        }
+    }
 
-                    marker.setMap(instance.map);
-                    instance.showModal();
+    drillDown() {
+        this.closeModal();
+        let map = this.getMap();
+        let id = this.activeId;
+        let level = this.LEVEL;
+        console.log(id);
+        this.setRunned(true);
+        this.setParent(id);
 
-                    instance.addUnit();
+        map.data.forEach(function (feature) {
+            if (!(feature.O.id == id && level == 3)) {
+                map.data.remove(feature);
 
-                }
-            });
+            }
+        });
 
+        this.addLevel();
+        this.getData('/' + id + '/children', this);
 
-            this.map.data.addListener('rightclick', function (event) {
-                if (instance.uprunned == false) {
-                    instance.setupRunned(true);
-                    instance.upLevel();
 
-                    if (instance.LEVEL > 1) {
-                        instance.map.data.forEach(function (feature) {
-                            instance.map.data.remove(feature);
-                        });
+    }
 
-                        let parent = instance.getParent();
-                        instance.getData('/' + parent, instance, true);
-                    }
-                    else {
-                        instance.addLevel();
-                        instance.setupRunned(true);
-                        //TODO skriv en warning om at man ikke kan gå opp
+    drillUp() {
+
+        if (this.LEVEL > 2) {
+            this.setupRunned(true);
+            this.upLevel();
+            let instance = this;
+            this.closeModal();
+            this.map.data.forEach(function (feature) {
+                instance.map.data.remove(feature);
 
-                    }
-                }
             });
+            let parent = instance.getParent();
+            instance.getData('/' + parent, instance, true);
         }
-        else {
-            // ToDO:
-            console.log("fiks meg! gi warning på topp av kart");
-        }
+        this.closeModal();
+    }
+
+    seeDetails() {
+        let map = this.getMap();
+        let id = this.activeId;
+        this.closeModal();
+        map.data.forEach(function (feature) {
+            if (feature.getProperty('id') == id) {
+                feature.setProperty('color', 'red');
+            }
+        });
+        this.newactive.next(this.activeId);
     }
 
     addUnit() {
-        let parent = this.getParent();
+        this.closeModal();
         let pos = this.getcurrentPos();
         let lat = pos.lat();
-        let lng = pos.lng()
+        let lng = pos.lng();
+        let map = this.map;
+
+
+
+          var
+         marker = new google.maps.Marker({
+         position: pos,
+         map: map,
+         title: 'newOrg',
+         icon: {
+         path: google.maps.SymbolPath.CIRCLE,
+         scale: 3
+         }
+         });
+         this
+         .
+         currentMarker = marker;
+         marker
+         .
+         setMap(map);
+
+        let parent = this.getParent();
+
+
         let location = {lat: lat, lng: lng};
         let event = {location, parent};
         this.newOrg.next(event);
     }
 
     update(event) {
-        this.newactive.next(event);
-        let test = this.getMap();
+
+        let map = this.getMap();
         let http = this.getHttp();
 
-        test.data.forEach(function (feature) {
-            test.data.remove(feature);
+        map.data.forEach(function (feature) {
+            map.data.remove(feature);
         });
         http.get(dhisAPI + '/api/organisationUnits/' + event)
             .map(res => res.json())

diff --git a/src/css/map.css b/src/css/map.css
index 2b023e45457f6286a9d4f8db8d7c2b9f3b7920b2..95fcc43cfea6bb10ed4035e5540829cc59bfa191 100644 (file)
--- a/src/css/map.css
+++ b/src/css/map.css
@@ -194,4 +194,5 @@ html, body {
 #divModal{
     position: relative;
     margin-bottom: 500px;
-}
\ No newline at end of file
+}
+