mirror of
https://github.com/TheGreyDiamond/elevatormapRewritten.git
synced 2025-07-19 11:03:49 +02:00
279 lines
9.9 KiB
HTML
279 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Basic Page Needs
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8" />
|
||
<title><%= it.siteTitel %></title>
|
||
<meta name="description" content="<%= it.desc %>" />
|
||
<meta name="author" content="<%= it.author %>" />
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/normalize.css" />
|
||
<link rel="stylesheet" href="css/barebones.css" />
|
||
<link rel="stylesheet" href="css/skeleton-legacy.css" />
|
||
<link rel="stylesheet" href="css/mainMap.css" />
|
||
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/favicon-16.png" />
|
||
|
||
<script async defer src="/js/site.js"></script>
|
||
<script
|
||
src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js"
|
||
crossorigin="anonymous"
|
||
></script>
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||
crossorigin=""
|
||
/>
|
||
|
||
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
||
<script
|
||
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||
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
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<div style="margin: 0px">
|
||
<div class="map" id="map"></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>
|
||
<i
|
||
style="color: black; cursor: pointer"
|
||
class="fas fa-map-marker-alt"
|
||
onclick="home()"
|
||
></i>
|
||
</aside>
|
||
|
||
<!-- 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);
|
||
|
||
L.tileLayer(
|
||
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>",
|
||
{
|
||
attribution:
|
||
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||
maxZoom: 18,
|
||
id: "mapbox/streets-v11",
|
||
tileSize: 512,
|
||
zoomOffset: -1,
|
||
accessToken: "<%= it.mapboxAccessToken %>",
|
||
}
|
||
).addTo(mymap);
|
||
|
||
theMarker = L.Marker.extend({
|
||
options: {
|
||
id: "-1",
|
||
},
|
||
});
|
||
|
||
function showPosition(position) {
|
||
console.log(position.coords);
|
||
|
||
mymap.setView(
|
||
new L.LatLng(position.coords.latitude, position.coords.longitude),
|
||
10
|
||
);
|
||
// 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
|
||
xmlHttp.send(null);
|
||
return xmlHttp.responseText;
|
||
}
|
||
|
||
function home() {
|
||
if (navigator.geolocation) {
|
||
setTimeout(function () {
|
||
navigator.geolocation.getCurrentPosition(showPosition);
|
||
}, 200);
|
||
} else {
|
||
console.warn("Geolocation of user could not be fetched");
|
||
}
|
||
}
|
||
|
||
home();
|
||
|
||
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);
|
||
|
||
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");
|
||
}
|
||
|
||
// 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>
|