Added map to Building/Index

Layout/default/Building/Index.php

@@ -90,12 +90,25 @@
                   <button type="submit" class="btn btn-primary">Filter anwenden</button>
                   <a class="btn btn-secondary" href="<?=self::getUrl("Building")?>">Filter zurücksetzen</a>
                 </div>
+                <!--<div class="col">
+                  <button class="btn btn-info" type="button" onclick="refreshMap()"><i class="far fa-map"></i> Auf Karte anzeigen</button>
+                </div>-->
               </div>
             </form>
-            
+
           </div>
         </div>
         
+        <div class="card">
+          <div class="card-body">
+            <div class="row col" id="map-link">
+              <a href="#" class="btn btn-success" onclick="refreshMap()"><i class="far fa-map"></i> Übersichtskarte einblenden</a>
+            </div>
+            <div class="row hidden" id="map-row">
+              <div id="building-map" style="height:50vh; width: 100%"></div>
+            </div>
+          </div>
+        </div>
         
         <div class="card">
           <div class="card-body mb-3">
@@ -331,8 +344,8 @@
     </div>
 
 
-
 <script type="text/javascript">
+  
   function toggleBuilding(id) {
     $('#building-detail-' + id).toggle();
     if($('#building-detail-' + id).is(":hidden")) {
@@ -374,12 +387,106 @@
       toggleTerminationControl(id, type);
     },
     'json');
-    
-    
-    
   }
 
+  /*
+   * Globals for map display
+   */
+  
+  var buildingMap;
+  var buildings = [];
+  var markers = [];
+  var markerState = true;
+  var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];
+  
+  function refreshMap() {
+    // get buildings and render map
+    $('#map-link').hide();
+    $('#map-row').show();
+    getMapdata();
+  }
+  
+  function renderMap() {
+    if(buildingMap) {
+      markers.forEach(function(m) {
+        buildingMap.removeLayer(m);
+      });
+    } else {
+      buildingMap = L.map('building-map').setView([<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>], 12);
+    }
 
+    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+      minZoom: 12,
+      maxZoom: 22,
+      id: 'mapbox/streets-v11',
+      accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
+    }).addTo(buildingMap);
+    
+    addMarkers();
+  }
+  
+  function addMarkers() {
+    if(!Array.isArray(buildings) | !buildings.length) {
+      return false;
+    }
+    // draw markers and calculate center position
+    var all_coords = [];
+    buildings.forEach(function(building) {
+      var gps = [building.gps_lat, building.gps_long];
+      all_coords.push(gps);
+      var marker = L.marker(gps).addTo(buildingMap);
+      markers[building.id] = marker;
+    });
+    
+    console.log(all_coords);
+    // calculate center position
+    var center_pos = GetCenterFromDegrees(all_coords);
+    console.log(center_pos);
+    buildingMap.setView(center_pos, 12);
+    
+    return true;
+  }
+  
+  // gets buildings and calls renderMap()
+  function getMapdata() {
+    filter = getFilter();
+    
+    $.post('<?=self::getUrl("Building", "Api")?>', {
+      'do': "findBuildings",
+      filter: filter
+    },function(success) {
+      if(success.status == "OK") {
+        console.log(success);
+        
+        if(Array.isArray(success.result.buildings)) {
+          buildings = success.result.buildings;
+          renderMap();
+        }
+      }
+    },
+    'json'
+    );
+    
+  }
+  
+  function getFilter() {
+    var fields = ['network_id', 'networksection_id', 'status_id', 'code', 'street'];
+    var filter = {};
+    fields.forEach(function(field) {
+      if(!field) {
+        return;
+      }
+      let val = $('#filter_' + field).val();
+      if(val.length) {
+        filter[field] = val;
+      }
+    });
+    
+    return filter;
+  }
+
+  // navigation
   var building;
   var hash = window.location.hash.substr(1);
   var match = hash.match(/building=(\d+)/);
@@ -390,8 +497,11 @@
     //$('body').scrollTop($('#building-' + building).offset() - 50);
   }
   
-
+  <?php if(is_array($filter) && count($filter)): ?>
+    refreshMap();
+  <?php endif; ?>
 </script>
-  
+
+
 
 <?php include(realpath(dirname(__FILE__)."/../")."/footer.php"); ?>

Layout/default/header.php

@@ -18,12 +18,13 @@
         <link href="<?=self::getResourcePath()?>assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
         <link href="<?=self::getResourcePath()?>assets/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
         <link href="<?=self::getResourcePath()?>css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
-        <link rel="stylesheet" href="<?=self::getResourcePath()?>plugins/summernote/summernote-bs4.css" />
+        <link href="<?=self::getResourcePath()?>plugins/summernote/summernote-bs4.css" rel="stylesheet" type="text/css" />
         
         <script type="text/javascript" src="<?=self::getResourcePath()?>js/jquery.min.js"></script>
         <script type="text/javascript" src="<?=self::getResourcePath()?>assets/libs/select2/select2.min.js"></script>
-        <script src="<?=self::getResourcePath()?>js/bootstrap-datepicker.min.js"></script>
-        <script src="<?=self::getResourcePath()?>js/bootstrap-datepicker.de.min.js"></script>
+        <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-datepicker.min.js"></script>
+        <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-datepicker.de.min.js"></script>
+        <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/geo/geo.js"></script>
         <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/leaflet.js"></script>
         <script type="text/javascript" src="<?=self::getResourcePath()?>js/popper.min.js"></script>
         <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap.min.js"></script>

application/Building/BuildingController.php

@@ -341,4 +341,44 @@ class BuildingController extends mfBaseController {
   }
   
   
+  protected function apiAction() {
+    if(!$this->me->is(["Admin","netowner","pipeplanner"])) {
+      $this->redirect("Dashboard");
+    }
+    $do = $this->request->do;
+    $data = [];
+    
+    switch($do) {
+      case "findBuildings":
+        $return = $this->findBuildingsApi();
+        break;
+      default:
+        $return = false;
+    }
+    
+    if(!is_array($return) || !count($return)) {
+      $data = ["status" => "error"];
+      $this->returnJson($data);
+    }
+    $data['status'] = "OK";
+    $data['result'] = $return;
+    $this->returnJson($data);
+  }
+  
+  private function findBuildingsApi() {
+    $buildings = [];
+    $filter = $this->request->filter;
+    
+    
+    $results = BuildingModel::search($filter);
+    
+    foreach($results as $building) {
+      $data = $building->data;
+      $data->id = $building->id;
+      $buildings[] = $data;
+    }
+    
+    return ["buildings" => $buildings];
+  }
+  
 }

public/assets/js/geo/geo.js

@@ -0,0 +1,90 @@
+function rad2degr(rad) { return rad * 180 / Math.PI; }
+function degr2rad(degr) { return degr * Math.PI / 180; }
+
+/**
+ * @param latLngInDeg array of arrays with latitude and longtitude
+ *   pairs in degrees. e.g. [[latitude1, longtitude1], [latitude2
+ *   [longtitude2] ...]
+ *
+ * @return array with the center latitude longtitude pairs in 
+ *   degrees.
+ */
+function getLatLngCenter(latLngInDegr) {
+    var LATIDX = 0;
+    var LNGIDX = 1;
+    var sumX = 0;
+    var sumY = 0;
+    var sumZ = 0;
+
+    for (var i=0; i<latLngInDegr.length; i++) {
+        var lat = degr2rad(latLngInDegr[i][LATIDX]);
+        var lng = degr2rad(latLngInDegr[i][LNGIDX]);
+        // sum of cartesian coordinates
+        sumX += Math.cos(lat) * Math.cos(lng);
+        sumY += Math.cos(lat) * Math.sin(lng);
+        sumZ += Math.sin(lat);
+    }
+
+    var avgX = sumX / latLngInDegr.length;
+    var avgY = sumY / latLngInDegr.length;
+    var avgZ = sumZ / latLngInDegr.length;
+
+    // convert average x, y, z coordinate to latitude and longtitude
+    var lng = Math.atan2(avgY, avgX);
+    var hyp = Math.sqrt(avgX * avgX + avgY * avgY);
+    var lat = Math.atan2(avgZ, hyp);
+
+    return ([rad2degr(lat), rad2degr(lng)]);
+}
+
+/**
+ * Get a center latitude,longitude from an array of like geopoints
+ *
+ * @param array data 2 dimensional array of latitudes and longitudes
+ * For Example:
+ * $data = array
+ * (
+ *   0 = > array(45.849382, 76.322333),
+ *   1 = > array(45.843543, 75.324143),
+ *   2 = > array(45.765744, 76.543223),
+ *   3 = > array(45.784234, 74.542335)
+ * );
+*/
+function GetCenterFromDegrees(data)
+{       
+    if (!(data.length > 0)){
+        return false;
+    } 
+
+    var num_coords = data.length;
+
+    var X = 0.0;
+    var Y = 0.0;
+    var Z = 0.0;
+
+    for(i = 0; i < data.length; i++){
+        var lat = data[i][0] * Math.PI / 180;
+        var lon = data[i][1] * Math.PI / 180;
+
+        var a = Math.cos(lat) * Math.cos(lon);
+        var b = Math.cos(lat) * Math.sin(lon);
+        var c = Math.sin(lat);
+
+        X += a;
+        Y += b;
+        Z += c;
+    }
+
+    X /= num_coords;
+    Y /= num_coords;
+    Z /= num_coords;
+
+    var lon = Math.atan2(Y, X);
+    var hyp = Math.sqrt(X * X + Y * Y);
+    var lat = Math.atan2(Z, hyp);
+
+    var newX = (lat * 180 / Math.PI);
+    var newY = (lon * 180 / Math.PI);
+
+    return new Array(newX, newY);
+}