grey/elevatormapRewritten
1
0
Fork 0
mirror of https://github.com/TheGreyDiamond/elevatormapRewritten.git synced 2026-01-31 08:10:24 +01:00
Code Issues Projects Releases Wiki Activity

More progress on the elevator creation tool

Browse Source
This commit is contained in:
TheGreyDiamond
2021-06-03 00:23:28 +02:00
parent da4b13627f
commit 9dcf927ae9
2 changed files with 178 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
static/css/barebones.css
View File

@@ -497,3 +497,8 @@ header {
border: 1px red solid; border: 1px red solid;
} }
*/ */
TODO {
border: dotted 1px red;
background-color: rgba(127, 255, 212, 0.493);
}

305
templates/createElevator.html
View File

@@ -1,164 +1,201 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<!-- Basic Page Needs <head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<title><%= it.siteTitel %></title> <title>
<meta name="description" content="<%= it.desc %>" /> <%= it.siteTitel %>
<meta name="author" content="<%= it.author %>" /> </title>
<meta name="description" content="<%= it.desc %>" />
<meta name="author" content="<%= it.author %>" />
<!-- Mobile Specific Metas <!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- CSS <!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/barebones.css" /> <link rel="stylesheet" href="css/barebones.css" />
<link rel="stylesheet" href="css/skeleton-legacy.css" /> <link rel="stylesheet" href="css/skeleton-legacy.css" />
<link rel="stylesheet" href="css/mainMap.css" /> <link rel="stylesheet" href="css/mainMap.css" />
<!-- Favicon <!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon-16.png" /> <link rel="icon" type="image/png" href="images/favicon-16.png" />
<script async defer src="/js/site.js"></script> <script async defer src="/js/site.js"></script>
<script <script src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js" crossorigin="anonymous"></script>
src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js"
crossorigin="anonymous"
></script>
<link <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
rel="stylesheet" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin="" />
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS --> <!-- Make sure you put this AFTER Leaflet's CSS -->
<script <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
crossorigin=""
></script>
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" /> <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
<link <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
rel="stylesheet"
href="./leafletCluster/dist/MarkerCluster.Default.css"
/>
<script src="./leafletCluster/dist/leaflet.markercluster.js"></script> <script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
</head> </head>
<body>
<!-- Primary Page Layout <body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div style="margin: 0px"> <div style="margin: 0px">
<div class="map" id="map"></div> <div class="map" id="map"></div>
<div class="inspector" id="inspector"> <div class="inspector" id="inspector">
<br /><br /><br /><br /> <br /><br /><br /><br />
<center> <center>
<h3>Create a new elevator</h3> <h3>Create a new elevator</h3>
</center> </center>
<h5>1. Add a location</h5> <step id="step1">
<h5>1. Add a location</h5>
<p>Click anywhere on the map to create a pin. You can also use direct input to add cordinates.</p> <p>Click anywhere on the map to create a pin. You can also use direct input to add cordinates.</p>
<!-- TODO: LatLng fields--> <!-- TODO: LatLng fields-->
</div> <label for="lat">Latlitude: </label><input type="number" name="lat" id="lat">
<label for="lng">Longlitude: </label><input type="number" name="lng" id="lng">
<TODO>TODO: Display data of fields on map</TODO>
<button onclick="nextDialogePage()">Next step <i class="fas fa-arrow-right"></i></button>
</step>
<step id="step2" style="display: none;">
<h5>2. Add general information about the elevator</h5>
<p>You may add images in the last step. Now please enter general information about the elevator.</p>
<TODO>TODO: Add fields for input of user data</TODO>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
<button onclick="nextDialogePage()">Next step <i class="fas fa-arrow-right"></i></button>
</step>
</div> </div>
</div>
<aside> <aside>
<i <i style="color: black; cursor: pointer" class="fas fa-map-marker-alt" onclick="home()"></i>
style="color: black; cursor: pointer" </aside>
class="fas fa-map-marker-alt" <script>
onclick="home()" var currentPage = 0;
></i> function updateDialog() {
</aside> if (currentPage == 0) {
document.getElementById("step1").style.display= 'block';
document.getElementById("step2").style.display= 'none';
}
if (currentPage == 1) {
document.getElementById("step1").style.display= 'none';
document.getElementById("step2").style.display= 'block';
}
}
function nextDialogePage() {
currentPage++;
updateDialog();
}
function prevPage() {
currentPage--;
updateDialog();
}
</script>
<!-- End Document <!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript"> <script type="text/javascript">
var amountOfImages = 0; var amountOfImages = 0;
var markers = L.markerClusterGroup(); var markers = L.markerClusterGroup();
slideIndex = 1; slideIndex = 1;
var mymap = L.map("map").setView([51.505, -0.09], 50); var mymap = L.map("map").setView([51.505, -0.09], 50);
L.tileLayer( L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>", "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>",
{ {
attribution: attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18, maxZoom: 18,
id: "mapbox/streets-v11", id: "mapbox/streets-v11",
tileSize: 512, tileSize: 512,
zoomOffset: -1, zoomOffset: -1,
accessToken: "<%= it.mapboxAccessToken %>", accessToken: "<%= it.mapboxAccessToken %>",
} }
).addTo(mymap); ).addTo(mymap);
theMarker = L.Marker.extend({ theMarker = L.Marker.extend({
options: { options: {
id: "-1", 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 home() {
if (navigator.geolocation) {
setTimeout(function () {
navigator.geolocation.getCurrentPosition(showPosition);
}, 200);
} else {
console.warn("Geolocation of user could not be fetched");
}
}
home()
mymap.on('click', function (e) {
markers.clearLayers();
var coord = e.latlng;
var lat = coord.lat;
var lng = coord.lng;
var marker = new theMarker([lat, lng])
//marker.addTo(mymap)
markers.addLayer(marker);
markers.addTo(mymap);
document.getElementById("lat").value = lat
document.getElementById("lng").value = lng
console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
});
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);
}
function showPosition(position) { </script>
console.log(position.coords); </body>
mymap.setView(
new L.LatLng(position.coords.latitude, position.coords.longitude),
10
);
// mymap.setView(new L.LatLng(10.737, -73.923), 8);
}
mymap.on('click', function(e){
markers.clearLayers();
var coord = e.latlng;
var lat = coord.lat;
var lng = coord.lng;
var marker = new theMarker([lat, lng])
//marker.addTo(mymap)
markers.addLayer(marker);
markers.addTo(mymap);
console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);
});
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);
}
</script>
</body>
</html> </html>