Started user control

2026-01-31 08:10:24 +01:00 · 2021-05-25 23:50:46 +02:00
parent 1fc78a3b44
commit 6e3104eef3
175 changed files with 121801 additions and 214 deletions
--- a/templates/map.html
+++ b/templates/map.html
@@ -12,14 +12,6 @@
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

-    <!-- FONT
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link
-      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
-      rel="stylesheet"
-      type="text/css"
-    />
-
    <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="css/normalize.css" />
@@ -50,6 +42,14 @@
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
+
+    <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
+    <link
+      rel="stylesheet"
+      href="./leafletCluster/dist/MarkerCluster.Default.css"
+    />
+
+    <script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
  </head>
  <body>
    <!-- Primary Page Layout
@@ -58,11 +58,11 @@
      <div class="map" id="map"></div>

      <div class="inspector" id="inspector">
-        <br><br><br><br>
+        <br /><br /><br /><br />
        <center>
-          Select an elevator on the map and information about it will be displayed here.
+          Select an elevator on the map and information about it will be
+          displayed here.
        </center>
-        
      </div>
    </div>

@@ -77,8 +77,8 @@
    <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <script type="text/javascript">
-
      var amountOfImages = 0;
+      var markers = L.markerClusterGroup();
      slideIndex = 1;

      var mymap = L.map("map").setView([51.505, -0.09], 50);
@@ -96,12 +96,11 @@
        }
      ).addTo(mymap);

-
      theMarker = L.Marker.extend({
-        options: { 
-           id: '-1'
-        }
-     });
+        options: {
+          id: "-1",
+        },
+      });

      function showPosition(position) {
        console.log(position.coords);
@@ -113,60 +112,85 @@
        // mymap.setView(new L.LatLng(10.737, -73.923), 8);
      }

-
      function onClick(e) {
        slideIndex = 1;
-        document.getElementById("inspector").innerHTML = "<br><br><center><div class=\"lds-ripple\"><div></div><div></div></div></center>"
-        res = JSON.parse(httpGet("/api/getElevatorById?id=" + this.options.id))
-        if(res.state == "Ok"){
-
-          visitStates = ["Test elevator", "Public", "On private property", "Public but locked"]
-          typeStates = ["Hydraulic", "Wiredriven, motor in shaft", "Wiredriven, motor in motorroom"]
+        document.getElementById("inspector").innerHTML =
+          '<br><br><center><div class="lds-ripple"><div></div><div></div></div></center>';
+        res = JSON.parse(httpGet("/api/getElevatorById?id=" + this.options.id));
+        if (res.state == "Ok") {
+          visitStates = [
+            "Test elevator",
+            "Public",
+            "On private property",
+            "Public but locked",
+          ];
+          typeStates = [
+            "Hydraulic",
+            "Wiredriven, motor in shaft",
+            "Wiredriven, motor in motorroom",
+          ];

          // Prepare the template
-          inspector = httpGet("/templates/inspectorContent.html")
-          inspector = inspector.replace("#MODELL", res.results[0].modell)
-          inspector = inspector.replace("#MANUF", res.results[0].manufacturer)
-          inspector = inspector.replace("#DESC", res.results[0].info)
-          inspector = inspector.replace("#TYPE", typeStates[res.results[0].technology])
-          inspector = inspector.replace("#MAXPASS", res.results[0].maxPassangers)
-          inspector = inspector.replace("#MASSWEIGH", res.results[0].maxWeight)
-          inspector = inspector.replace("#VISIT", visitStates[res.results[0].visitabilty])
-          document.getElementById("inspector").innerHTML = inspector
+          inspector = httpGet("/templates/inspectorContent.html");
+          inspector = inspector.replace("#MODELL", res.results[0].modell);
+          inspector = inspector.replace("#MANUF", res.results[0].manufacturer);
+          inspector = inspector.replace("#DESC", res.results[0].info);
+          inspector = inspector.replace(
+            "#TYPE",
+            typeStates[res.results[0].technology]
+          );
+          inspector = inspector.replace(
+            "#MAXPASS",
+            res.results[0].maxPassangers
+          );
+          inspector = inspector.replace("#MASSWEIGH", res.results[0].maxWeight);
+          inspector = inspector.replace(
+            "#VISIT",
+            visitStates[res.results[0].visitabilty]
+          );
+          document.getElementById("inspector").innerHTML = inspector;

          // Make gallery
-          document.getElementById("imageGallery").innerHTML = "<div class='slideshow-container'>";
-          imgs = JSON.parse(res.results[0].images)
+          document.getElementById("imageGallery").innerHTML =
+            "<div class='slideshow-container'>";
+          imgs = JSON.parse(res.results[0].images);
          amountOfImages = imgs.images.length;
-          console.log(imgs)
+          console.log(imgs);
          var iH = 0;
-          
-          while(amountOfImages > iH){
-            
-              newBox = "<center><div class='mySlides fade'><div class='numbertext'>";
-              newBox += iH+1;
-              newBox += "/";
-              newBox += amountOfImages;
-              newBox += "</div><img src='";
-              newBox += imgs.images[iH].path;
-              newBox += "' alt='" + imgs.images[iH].alt + "' class=\"elevatorPhoto\"><div class='text'> </div></div></center>";
-              document.getElementById("imageGallery").innerHTML += newBox
+
+          while (amountOfImages > iH) {
+            newBox =
+              "<center><div class='mySlides fade'><div class='numbertext'>";
+            newBox += iH + 1;
+            newBox += "/";
+            newBox += amountOfImages;
+            newBox += "</div><img src='";
+            newBox += imgs.images[iH].path;
+            newBox +=
+              "' alt='" +
+              imgs.images[iH].alt +
+              "' class=\"elevatorPhoto\"><div class='text'> </div></div></center>";
+            document.getElementById("imageGallery").innerHTML += newBox;
            iH++;
          }
-          document.getElementById("imageGallery").innerHTML += "<br><a class='prev' onclick='plusSlides(-1)''>&#10094;</a><a class='next' onclick='plusSlides(1)'>&#10095;</a></div><br><div style='text-align:center'></div><br><br><br>";
-          showSlides(1)
-        }else{
-          document.getElementById("inspector").innerHTML = '                                                  \
+          document.getElementById("imageGallery").innerHTML +=
+            "<br><a class='prev' onclick='plusSlides(-1)''>&#10094;</a><a class='next' onclick='plusSlides(1)'>&#10095;</a></div><br><div style='text-align:center'></div><br><br><br>";
+          showSlides(1);
+        } else {
+          document.getElementById("inspector").innerHTML =
+            '                                                  \
          <center>                                                                                            \
          <h1><i style="color: red;" class="fas fa-exclamation-triangle"></i></h1>                            \
          <h1>Oh no!</h1>                                                                                     \
          The website failed to fetch the information about this elevator. It responded with the error code:  \
          <br><code>                                                                                          \
-          ' + res.message + "</code><center>"
+          ' +
+            res.message +
+            "</code><center>";
        }
-        
-       console.log(res)
-    }
+
+        console.log(res);
+      }

      function httpGet(theUrl) {
        var xmlHttp = new XMLHttpRequest();
@@ -187,54 +211,68 @@

      home();

-      function addPin(item, index){
-        var marker = new theMarker([item.lat, item.lng], { 
-          id: item.id
-      });
-       // var marker = new L.Marker()
-        marker.addTo(mymap).on('click', onClick);;
+      function addPin(item, index) {
+        var marker = new theMarker([item.lat, item.lng], {
+          id: item.id,
+        }).on("click", onClick);
+        // var marker = new L.Marker()
+        //marker.addTo(mymap).on('click', onClick);
+        markers.on("clusterclick", function (a) {
+          //alert('cluster ' + a.layer.getAllChildMarkers().length);
+        });
+        markers.addLayer(marker);
      }

      // Start getting the elevators
-      response = httpGet("/api/getElevatorLocation?lan=" + mymap.getCenter.lng + "&lat=" + mymap.getCenter.lat + "&radius=" + mymap.getZoom())
-      response = JSON.parse(response)
+      response = httpGet(
+        "/api/getElevatorLocation?lan=" +
+          mymap.getCenter.lng +
+          "&lat=" +
+          mymap.getCenter.lat +
+          "&radius=" +
+          mymap.getZoom()
+      );
+      response = JSON.parse(response);

-      if(response.state == "Ok"){
-        response.results.forEach(addPin)
-      }else{
+      if (response.state == "Ok") {
+        response.results.forEach(addPin);
+        mymap.addLayer(markers);
+      } else {
        // DONT FORGET TO SHOW POPUP OR SOMETHING
-        console.log("Request failed with " + response.message)
-        console.log(response)
-        alert("Loading of the map pins failed")
+        console.log("Request failed with " + response.message);
+        console.log(response);
+        alert("Loading of the map pins failed");
      }

-
-
      // Next/previous controls
-function plusSlides(n) {
-  showSlides(slideIndex += n);
-}
+      function plusSlides(n) {
+        showSlides((slideIndex += n));
+      }

-// Thumbnail image controls
-function currentSlide(n) {
-  showSlides(slideIndex = n);
-}
+      // Thumbnail image controls
+      function currentSlide(n) {
+        showSlides((slideIndex = n));
+      }

-function showSlides(n) {
-  var i;
-  var slides = document.getElementsByClassName("mySlides");
-  var dots = document.getElementsByClassName("dot");
-  if (n > slides.length) {slideIndex = 1} 
-  if (n < 1) {slideIndex = slides.length}
-  for (i = 0; i < slides.length; i++) {
-      slides[i].style.display = "none"; 
-  }
-  for (i = 0; i < dots.length; i++) {
-      dots[i].className = dots[i].className.replace(" active", "");
-  }
-  slides[slideIndex-1].style.display = "block"; 
-  dots[slideIndex-1].className += " active";
-}
+      function showSlides(n) {
+        var i;
+        var slides = document.getElementsByClassName("mySlides");
+        var dots = document.getElementsByClassName("dot");
+        if (n > slides.length) {
+          slideIndex = 1;
+        }
+        if (n < 1) {
+          slideIndex = slides.length;
+        }
+        for (i = 0; i < slides.length; i++) {
+          slides[i].style.display = "none";
+        }
+        for (i = 0; i < dots.length; i++) {
+          dots[i].className = dots[i].className.replace(" active", "");
+        }
+        slides[slideIndex - 1].style.display = "block";
+        dots[slideIndex - 1].className += " active";
+      }
    </script>
  </body>
 </html>