Inspector now shows info about the elevator!

index.js

@@ -84,7 +84,7 @@ function checkIfMySQLStructureIsReady(){
         if(mysqlData.allowCreation){
           // Lets create it then
           logger.warn("Creating a new table")
-          const sql = 'CREATE TABLE `' + mysqlData.database + '`.`elevators` ( `id` INT NOT NULL AUTO_INCREMENT , `lat` FLOAT NOT NULL , `lng` FLOAT NOT NULL , `manufacturer` VARCHAR(512) NOT NULL , `info` VARCHAR(512) NOT NULL , `visitabilty` INT NOT NULL , `technology` INT NOT NULL , `images` JSON NOT NULL , `amountOfFloors` INT NOT NULL , `maxPassangers` INT NOT NULL , `maxWeight` INT NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;';
+          const sql = 'CREATE TABLE `' + mysqlData.database + '`.`elevators` ( `id` INT NOT NULL AUTO_INCREMENT , `lat` FLOAT NOT NULL , `lng` FLOAT NOT NULL , `manufacturer` VARCHAR(512) NOT NULL , `modell` VARCHAR(512) NOT NULL , `info` VARCHAR(512) NOT NULL , `visitabilty` INT NOT NULL , `technology` INT NOT NULL , `images` JSON NOT NULL , `amountOfFloors` INT NOT NULL , `maxPassangers` INT NOT NULL , `maxWeight` INT NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;';
           con.query(sql, function (err, result) {
             if (err) throw err;
             logger.info("Table created");
@@ -187,7 +187,7 @@ app.get("/api/getElevators", function (req, res) {
           res.status(500);
           res.send(JSON.stringify({ state: "Failed", "message": "A server side error occured.", "results": []}));
           logger.error("The server failed to execute a request")
-          throw err;
+          mysqlIsUpAndOkay = false;
         }else{
           console.log(result[0]);
           res.status(200);
@@ -204,6 +204,88 @@ app.get("/api/getElevators", function (req, res) {
   }
 });
 
+
+
+app.get("/api/getElevatorLocation", function (req, res) {
+  console.log(req.query)
+  if(req.query.lan != undefined && req.query.lat != undefined && req.query.radius != undefined){
+    // All parameters are there
+    res.setHeader('Content-Type', 'application/json');
+    try {
+      var lan = parseFloat(req.query.lan)
+      var lat = parseFloat(req.query.lat)
+      var radius = parseFloat(req.query.radius)
+    } catch (error) {
+      res.send(JSON.stringify({ state: "Failed", "message": "Invalid arguments" }));
+      res.status(400);
+      return
+    }
+      var lan = parseFloat(req.query.lan)
+      var lat = parseFloat(req.query.lat)
+      var radius = parseFloat(req.query.radius)
+
+      // TODO: Return just the elevators in the viewers area
+
+      con.query("SELECT id, lat, lng FROM elevators", function (err, result, fields) {
+        if (err){
+          res.status(500);
+          res.send(JSON.stringify({ state: "Failed", "message": "A server side error occured.", "results": []}));
+          logger.error("The server failed to execute a request")
+          mysqlIsUpAndOkay = false;
+        }else{
+          console.log(result[0]);
+          res.status(200);
+          res.send(JSON.stringify({ state: "Ok", "message": "", "results": result}));
+        }
+        
+      });
+      
+  }else{
+    // Welp something is missing
+    res.status(400);
+    res.setHeader('Content-Type', 'application/json');
+    res.send(JSON.stringify({ state: "Failed", "message": "Missing arguments" }));
+  }
+});
+
+
+app.get("/api/getElevatorById", function (req, res) {
+  console.log(req.query)
+  if(req.query.id != undefined){
+    // All parameters are there
+    res.setHeader('Content-Type', 'application/json');
+    try {
+      var id = parseFloat(req.query.id)
+    } catch (error) {
+      res.send(JSON.stringify({ state: "Failed", "message": "Invalid arguments" }));
+      res.status(400);
+      return
+    }
+      var id = parseFloat(req.query.id)
+
+      con.query("SELECT * FROM elevators WHERE id=" + id, function (err, result, fields) {
+        if (err){
+          res.status(500);
+          res.send(JSON.stringify({ state: "Failed", "message": "A server side error occured.", "results": []}));
+          logger.error("The server failed to execute a request")
+          console.log(err)
+          mysqlIsUpAndOkay = false;
+        }else{
+          console.log(result[0]);
+          res.status(200);
+          res.send(JSON.stringify({ state: "Ok", "message": "Successful.", "results": result}));
+        }
+        
+      });
+      
+  }else{
+    // Welp something is missing
+    res.status(400);
+    res.setHeader('Content-Type', 'application/json');
+    res.send(JSON.stringify({ state: "Failed", "message": "Missing arguments" }));
+  }
+});
+
 // Some loops for handeling stuff
 setInterval(() => {
   if(mysqlIsUpAndOkay == false){

static/css/mainMap.css

@@ -1,19 +1,21 @@
 .inspector {
   margin: 0px;
-  background-color: greenyellow;
   height: 100vh;
-  width: 20%;
+  width: 29%;
   float: right;
   position: fixed;
   right: 0px;
   top: 0px;
+  border: 1px solid rgba(97, 97, 97, 0.486);
+  border-radius: 2px;
+  margin: 5px;
 }
 
 .map {
   margin: 0px;
   background-color: red;
   height: 100vh;
-  width: 80%;
+  width: 70%;
   z-index: 1;
   /*float: left;*/
 }
@@ -32,3 +34,144 @@ aside h2 {
   font-size: 1.5rem;
   line-height: 1.05em;
 }
+
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #fed;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}
+
+
+
+
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+  margin-left: 4%;
+  margin-right: 4%;
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+  /*margin-left: 10%;*/
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  /*position: absolute;*/
+  margin: 20px;
+  margin-top: 100px;
+  width: auto;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  background-color:#000;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+  
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color:#000;
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #000000;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+  background-color: #717171;
+}
+
+/* Fading animation */
+.fade {
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 1.5s;
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@-webkit-keyframes fade {
+  from {opacity: .4} 
+  to {opacity: 1}
+}
+
+@keyframes fade {
+  from {opacity: .4} 
+  to {opacity: 1}
+}
+
+.elevatorPhoto{
+  width: auto;
+  max-height: 50vh;
+}

static/templates/inspectorContent.html

@@ -0,0 +1,16 @@
+<center>
+    <h3>#MODELL - #MANUF</h3>
+    <!--- 
+        Images here
+    -->
+    <div class="ImageContainer" id="imageGallery">
+
+    </div>
+
+    <b>Description:</b> #DESC
+    <h5>Quick facts:</h5><br>
+
+    <b>Type:</b> #TYPE <br>
+    <b>Max. Passerngers:</b> #MAXPASS / #MASSWEIGH (kg) <br>
+    <b>Visitable:</b> #VISIT   
+</center>

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])
+        var marker = new theMarker([item.lat, item.lng], { 
-        marker.addTo(mymap);
+          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>