Inspector now shows info about the elevator!

templates/map.html

@@ -57,7 +57,13 @@
     <div style="margin: 0px">
       <div class="map" id="map"></div>
 
-      <div class="inspector"></div>
+      <div class="inspector" id="inspector">
+        <br><br><br><br>
+        <center>
+          Select an elevator on the map and information about it will be displayed here.
+        </center>
+        
+      </div>
     </div>
 
     <aside>
@@ -71,6 +77,10 @@
     <!-- End Document
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <script type="text/javascript">
+
+      var amountOfImages = 0;
+      slideIndex = 1;
+
       var mymap = L.map("map").setView([51.505, -0.09], 50);
 
       L.tileLayer(
@@ -86,6 +96,13 @@
         }
       ).addTo(mymap);
 
+
+      theMarker = L.Marker.extend({
+        options: { 
+           id: '-1'
+        }
+     });
+
       function showPosition(position) {
         console.log(position.coords);
 
@@ -96,6 +113,61 @@
         // 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"]
+
+          // 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
+
+          // Make gallery
+          document.getElementById("imageGallery").innerHTML = "<div class='slideshow-container'>";
+          imgs = JSON.parse(res.results[0].images)
+          amountOfImages = imgs.images.length;
+          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
+            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 = '                                                  \
+          <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>"
+        }
+        
+       console.log(res)
+    }
+
       function httpGet(theUrl) {
         var xmlHttp = new XMLHttpRequest();
         xmlHttp.open("GET", theUrl, false); // false for synchronous request
@@ -116,12 +188,15 @@
       home();
 
       function addPin(item, index){
-        var marker = new L.Marker([item.lat, item.lng])
-        marker.addTo(mymap);
+        var marker = new theMarker([item.lat, item.lng], { 
+          id: item.id
+      });
+       // var marker = new L.Marker()
+        marker.addTo(mymap).on('click', onClick);;
       }
 
       // Start getting the elevators
-      response = httpGet("http://localhost:3000/api/getElevators?lan=" + mymap.getCenter.lng + "&lat=" + mymap.getCenter.lat + "&radius=" + mymap.getZoom())
+      response = httpGet("/api/getElevatorLocation?lan=" + mymap.getCenter.lng + "&lat=" + mymap.getCenter.lat + "&radius=" + mymap.getZoom())
       response = JSON.parse(response)
 
       if(response.state == "Ok"){
@@ -132,6 +207,34 @@
         console.log(response)
         alert("Loading of the map pins failed")
       }
+
+
+
+      // Next/previous controls
+function plusSlides(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";
+}
     </script>
   </body>
 </html>