Added preorder map (visible for admins only)

Layout/default/Preorder/Index.php

@@ -128,6 +128,22 @@
             
           </div>
         </div>
+        
+        <?php if($me->is("Admin")): ?>
+        <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="preorder-map" style="height:70vh; width: 100%"></div>
+              <div class="mt-1">
+                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="centerMap()"><i class="far fa-dot-circle"></i> Zentrieren</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <?php endif; ?>
 
         
         <div class="card">
@@ -233,12 +249,9 @@
         attributes.forEach(function(attrib) {
           $("input[name=attributes_" + attrib + "]").change(function(ev) {
             // save new value
-            //console.log(ev);
             var cb = $("#" + ev.currentTarget.id);
-            //console.log($(cb).is(":checked"));
             var value = $(cb).is(":checked") ? 1 : 0;
             var preorder_id = $(cb).data("preorder-id");
-            //console.log(preorder_id);
             
             $.post("<?=self::getUrl("Preorder", "Api")?>", {
                 do: "saveAttribute",
@@ -282,5 +295,146 @@
         $("#attributes_" + attribute + "-" + id).prop("checked", !$("#attributes_" + attribute + "-" + id).is(":checked"));
       }
      
+     
+     
+      /*
+      * Globals for map display
+      */
+
+      var preorderMap;
+      var preorders = [];
+      var markers = [];
+      var markerState = true;
+      var mapCenterPos = [<?=TT_PLACEHOLDER_GPS_LAT?>, <?=TT_PLACEHOLDER_GPS_LONG?>];
+      
+      function refreshMap() {
+        // get Preorders and render map
+        $('#map-link').hide();
+        $('#map-row').show();
+        getMapdata();
+        $([document.documentElement, document.body]).animate({
+          scrollTop: $("#preorder-map").offset().top - 150
+        }, 500);
+      }
+
+      function renderMap() {
+        if(preorderMap) {
+          markers.forEach(function(m) {
+            preorderMap.removeLayer(m);
+          });
+        } else {
+          preorderMap = L.map('preorder-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: 4,
+          maxZoom: 22,
+          id: 'mapbox/streets-v11',
+          accessToken: '<?=TT_MAPBOX_TILE_API_TOKEN?>'
+        }).addTo(preorderMap);
+
+        L.MakiMarkers.accessToken = '<?=TT_MAPBOX_TILE_API_TOKEN?>';
+
+        addMarkers();
+      }
+
+
+
+      function addMarkers() {
+        if(!Array.isArray(preorders) | !preorders.length) {
+          return false;
+        }
+        // draw markers and calculate center position
+        var all_coords = [];
+        preorders.forEach(function(preorder) {
+          if(!preorder.gps_lat || !preorder.gps_long) {
+            return;
+          }
+          var gps = [preorder.gps_lat, preorder.gps_long];
+          all_coords.push(gps);
+
+          var icon_color = "#2AAD27";
+          var icon_name = "home";
+
+          if(preorder.type == "interest") {
+            icon_color = "#CB2B3E";
+          } else if(preorder.type == "provision") {
+            icon_color = "#CB8427";
+          }
+          
+          if(preorder.connection_type.match(/^multi/i) || preorder.count > 1) {
+            icon_name = "town";
+          } else if(preorder.connection_type.match(/^apartment-building/i)) {
+            icon_name = "city";
+          } else if(preorder.connection_type.match(/^business/i)) {
+            icon_name = "industry";
+          }
+          
+          var marker_popup_content = '<?php include(realpath(dirname(__FILE__))."/include/preorder_popup.php");?>';
+
+          [["street", preorder.adb_strasse], ["hausnummer", preorder.adb_hausnummer], ["zip", preorder.adb_plz], ["city", preorder.adb_ort], ["type", preorder.type_label], ["adrcd", preorder.adrcd], ["extref", preorder.extref], ["gps", preorder.gps_lat + ", " + preorder.gps_long],
+            ["contact", (preorder.company ? preorder.company + " " : preorder.firstname + " " + preorder.lastname)], ["phone", preorder.phone], ["email", preorder.email], ["connectiontype", preorder.connection_type_label], ["count", preorder.connection_count]
+          ].forEach(function(item) {
+            marker_popup_content = marker_popup_content.replaceAll("{{" + item[0].toUpperCase() + "}}", item[1]);
+          });
+
+          var icon = L.MakiMarkers.icon({icon: icon_name, color: icon_color, size: "l"});
+          var marker = L.marker(gps, {icon: icon}).addTo(preorderMap).bindPopup(marker_popup_content);
+          markers[preorder.id] = marker;
+        });
+
+        
+        // calculate center position
+        mapCenterPos = GetCenterFromDegrees(all_coords);
+        preorderMap.setView(mapCenterPos, 12);
+
+        return true;
+      }
+
+      function centerMap() {
+        preorderMap.setView(mapCenterPos, 12);
+      }
+
+      // gets preorders and calls renderMap()
+      function getMapdata() {
+        filter = getFilter();
+
+        $.post('<?=self::getUrl("Preorder", "Api")?>', {
+          'do': "getFilteredPreorders",
+          filter: filter
+        },function(success) {
+          if(success.status == "OK") {
+
+            if(Array.isArray(success.result.preorders)) {
+              preorders = success.result.preorders;
+              renderMap();
+            }
+          }
+        },
+        'json'
+        );
+
+      }
+
+      function getFilter() {
+        var fields = ['preordercampaign_id', 'status', 'type', 'address', 'kunde', 'address_source'];
+        var filter = {};
+        fields.forEach(function(field) {
+          if(!field) {
+            return;
+          }
+          let val = $('#filter_' + field).val();
+          if(val.length) {
+            filter[field] = val;
+          }
+        });
+
+        return filter;
+      }
+
+      <?php if(is_array($filter) && count($filter)): ?>
+        //refreshMap();
+      <?php endif; ?>
     </script>
 <?php include(realpath(dirname(__FILE__)."/../../$mfLayoutPackage")."/footer.php"); ?>