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 creation dialoge

Browse Source
This commit is contained in:
TheGreyDiamond
2021-06-03 22:17:57 +02:00
parent 9dcf927ae9
commit dd346d5017
4 changed files with 176 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/barebones.css
View File

@@ -502,3 +502,27 @@ TODO {
border: dotted 1px red; border: dotted 1px red;
background-color: rgba(127, 255, 212, 0.493); background-color: rgba(127, 255, 212, 0.493);
} }
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

1
static/css/mainMap.css
View File

@@ -9,6 +9,7 @@
border: 1px solid rgba(97, 97, 97, 0.486); border: 1px solid rgba(97, 97, 97, 0.486);
border-radius: 2px; border-radius: 2px;
margin: 5px; margin: 5px;
padding: 4px;
} }
.map { .map {

46
static/js/site.js
View File

@@ -1,24 +1,24 @@
function toggleTheme() { function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest();
var prettifyDark = document.getElementById('prettify-dark') xmlHttp.open("GET", theUrl, false); // false for synchronous request
var sheets = document.styleSheets xmlHttp.send(null);
return xmlHttp.responseText;
// temporariily set transition class on html element }
//document.documentElement.classList.add('transition-theme')
function home() {
// change data-theme if (navigator.geolocation) {
//if (target.classList.contains('darkTheme')) { setTimeout(function () {
document.documentElement.setAttribute("data-theme", "dark") navigator.geolocation.getCurrentPosition(showPosition);
//prettifyDark.removeAttribute('disabled') }, 200);
//prettifyDark.disabled = false } else {
/*} else { console.warn("Geolocation of user could not be fetched");
document.documentElement.removeAttribute("data-theme", "dark") }
prettifyDark.disabled = true }
}*/
function on() {
// remove transition class document.getElementById("overlay").style.display = "block";
window.setTimeout(function() { }
document.documentElement.classList.remove('transition-theme')
}, 1000) function off() {
document.getElementById("overlay").style.display = "none";
} }

156
templates/createElevator.html
View File

@@ -42,11 +42,17 @@
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" /> <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
<script src="./leafletCluster/dist/leaflet.markercluster.js"></script> <script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script src="./js/site.js"></script>
</head> </head>
<body> <body>
<!-- Primary Page Layout <!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="overlay" onclick="off()">
<div id="text"><TODO>Add this dialoge</TODO></div>
</div>
<div style="margin: 0px"> <div style="margin: 0px">
<div class="map" id="map"></div> <div class="map" id="map"></div>
@@ -59,18 +65,52 @@
<step id="step1"> <step id="step1">
<h5>1. Add a location</h5> <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-->
<label for="lat">Latlitude: </label><input type="number" name="lat" id="lat"> <label for="lat">Latlitude: </label><input type="number" name="lat" id="lat">
<label for="lng">Longlitude: </label><input type="number" name="lng" id="lng"> <label for="lng">Longlitude: </label><input type="number" name="lng" id="lng">
<TODO>TODO: Display data of fields on map</TODO> <br>
<button onclick="nextDialogePage()">Next step <i class="fas fa-arrow-right"></i></button> <button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
</step> </step>
<step id="step2" style="display: none;"> <step id="step2" style="display: none;">
<h5>2. Add general information about the elevator</h5> <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> <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> <label for="type">Elevator type:</label>
<select name="type" id="type">
<option value="0">Hydraulic</option>
<option value="1">Wiredriven, motor in shaft</option>
<option value="2">Wiredriven, motor in motorroom</option>
<option value="3">Unknown</option>
</select>
<label for="visit">Visitabilty:</label>
<select name="visit" id="visit">
<option value="1">Public</option>
<option value="2">On private property</option>
<option value="3">Public but locked</option>
</select>
<label for="pepl">Max. passangers:</label>
<input type="number" step="1" min="1" id="pepl" name="pepl" value=4>
<label for="weig">Max. Weight (kg):</label>
<input type="number" step="1" min="1" id="weig" name="weig" value=0>
<br>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button> <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> <button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
</step>
<step id="step3" style="display: none;">
<h5>3. Add a description</h5>
<p>Add a description to the elevator. You may not use this field for advertisment.</p>
<textarea id="description"></textarea>
<br>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
<button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
</step>
<step id="step4" style="display: none;">
<h5>4. Add images</h5>
<p>This is the last step. You can now add images. <b>Make sure no personal information is visibel in the image.</b></p>
<input type="file" id="myFile" name="files" multiple>
<br>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
<button onclick="nextDialogePage()" class="button-primary">Next step <i class="fas fa-arrow-right"></i></button>
</step> </step>
</div> </div>
</div> </div>
@@ -78,17 +118,65 @@
<aside> <aside>
<i style="color: black; cursor: pointer" class="fas fa-map-marker-alt" onclick="home()"></i> <i style="color: black; cursor: pointer" class="fas fa-map-marker-alt" onclick="home()"></i>
</aside> </aside>
<script> <script type="text/javascript">
dataBlock = Cookies.get("tempStore");
if(dataBlock == undefined){
dataBlock = {};
}else{
try{
dataBlock = JSON.parse(dataBlock)
document.getElementById("lat").value = dataBlock["lat"]
document.getElementById("lng").value = dataBlock["lng"]
document.getElementById("type").value = dataBlock["type"]
document.getElementById("visit").value = dataBlock["visit"]
document.getElementById("pepl").value = dataBlock["pepl"]
document.getElementById("weig").value = dataBlock["weig"]
document.getElementById("description").value = dataBlock["description"]
on()
}catch(ex){
dataBlock = {}
}
}
var currentPage = 0; var currentPage = 0;
function saveValues(){
dataBlock["lat"] = document.getElementById("lat").value
dataBlock["lng"] = document.getElementById("lng").value
dataBlock["type"] = document.getElementById("type").value
dataBlock["visit"] = document.getElementById("visit").value
dataBlock["pepl"] = document.getElementById("pepl").value
dataBlock["weig"] = document.getElementById("weig").value
dataBlock["description"] = document.getElementById("description").value
Cookies.set('tempStore', JSON.stringify(dataBlock))
}
function updateDialog() { function updateDialog() {
if (currentPage == 0) { if (currentPage == 0) {
document.getElementById("step1").style.display = 'block'; document.getElementById("step1").style.display = 'block';
document.getElementById("step2").style.display = 'none'; document.getElementById("step2").style.display = 'none';
document.getElementById("step3").style.display = 'none';
document.getElementById("step4").style.display = 'none';
} }
if (currentPage == 1) { if (currentPage == 1) {
document.getElementById("step1").style.display = 'none'; document.getElementById("step1").style.display = 'none';
document.getElementById("step2").style.display = 'block'; document.getElementById("step2").style.display = 'block';
document.getElementById("step3").style.display = 'none';
document.getElementById("step4").style.display = 'none';
} }
if (currentPage == 2) {
document.getElementById("step1").style.display = 'none';
document.getElementById("step2").style.display = 'none';
document.getElementById("step3").style.display = 'block';
document.getElementById("step4").style.display = 'none';
}
if (currentPage == 3) {
document.getElementById("step1").style.display = 'none';
document.getElementById("step2").style.display = 'none';
document.getElementById("step3").style.display = 'none';
document.getElementById("step4").style.display = 'block';
}
saveValues();
console.log(dataBlock)
} }
function nextDialogePage() { function nextDialogePage() {
currentPage++; currentPage++;
@@ -98,11 +186,38 @@
currentPage--; currentPage--;
updateDialog(); updateDialog();
} }
</script> </script>
<!-- End Document <!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– --> –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript"> <script type="text/javascript">
var latElm = document.getElementById("lat");
var lngElm = document.getElementById("lng");
latElm.addEventListener('input', function (evt) {
markers.clearLayers();
console.log(evt.target.value)
const lat = evt.target.value;
const lng = lngElm.value;
var marker = new theMarker([lat, lng])
//marker.addTo(mymap)
markers.addLayer(marker);
markers.addTo(mymap);
});
lngElm.addEventListener('input', function (evt) {
markers.clearLayers();
console.log(evt.target.value)
const lat = latElm.value;
const lng = evt.target.value;
var marker = new theMarker([lat, lng])
//marker.addTo(mymap)
markers.addLayer(marker);
markers.addTo(mymap);
});
var amountOfImages = 0; var amountOfImages = 0;
var markers = L.markerClusterGroup(); var markers = L.markerClusterGroup();
slideIndex = 1; slideIndex = 1;
@@ -138,15 +253,6 @@
// mymap.setView(new L.LatLng(10.737, -73.923), 8); // 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() home()
mymap.on('click', function (e) { mymap.on('click', function (e) {
@@ -163,26 +269,6 @@
console.log("You clicked the map at latitude: " + lat + " and longitude: " + 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) { function addPin(item, index) {
var marker = new theMarker([item.lat, item.lng], { var marker = new theMarker([item.lat, item.lng], {
id: item.id, id: item.id,