mirror of
https://github.com/TheGreyDiamond/elevatormapRewritten.git
synced 2025-07-18 02:23:50 +02:00
Inspector now shows info about the elevator!
This commit is contained in:
TheGreyDiamond
86
index.js
86
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){
|
||||
|
||||
@ -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;
|
||||
}
|
||||
BIN
static/img.jpg
Normal file
BIN
static/img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
16
static/templates/inspectorContent.html
Normal file
16
static/templates/inspectorContent.html
Normal file
@ -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>
|
||||
@ -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)''>❮</a><a class='next' onclick='plusSlides(1)'>❯</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>
|
||||
|
||||
Reference in New Issue
Block a user