Fixed formatting + added base image upload

This commit is contained in:
TheGreyDiamond
2021-06-11 21:43:04 +02:00
parent 3cb4a71c9f
commit 72aaa6a047
5 changed files with 343 additions and 53 deletions

View File

@@ -38,6 +38,8 @@
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
@@ -54,7 +56,8 @@
<div id="text">
We've detected that there is a draft in your current session. Do you want to restore it?<br>
<button class="button-primary" onclick="restoreFunc()">Yes, restore it</button>
<button onclick="noRestore()">No, don't restore it</button></div>
<button onclick="noRestore()">No, don't restore it</button>
</div>
</div>
<div style="margin: 0px">
<div class="map" id="map"></div>
@@ -94,6 +97,9 @@
<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>
<label for="flor">Amount of Floors:</label>
<input type="number" step="1" min="1" id="flor" name="flor" value=0>
<br>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
@@ -103,33 +109,48 @@
<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>
<label for="manuf">Manufacturer: </label>
<input type="text" id="manuf" name="manuf">
<label for="model">Modell: </label>
<input type="text" id="model" name="model">
<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>
<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="myFile" 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 class="missingAlert" id="missingAlert" style="display: none;">
<i class="fas fa-exclamation-triangle"></i> There are some empty fields. Please check the previous pages for empty fields!<br>
<i class="fas fa-exclamation-triangle"></i> There are some empty fields. Please check the previous pages for
empty fields!<br>
<button onclick="prevPage()">Go back one step <i class="fas fa-arrow-left"></i></button>
</step>
<step id="step5" style="display: none;">
<h5>5. Ready</h5>
<p>Are you sure you want to submit this elevator?</p>
<button style="background-color: greenyellow;" onclick="submit()"><i class="fas fa-check"></i></button>
<button onclick="currentPage = 3; updateDialog()">Go back one step <i class="fas fa-arrow-left"></i></button>
</step>
<step id="step6" style="display: none;">
<h5>6. Saving</h5>
<br><br><center><div class="lds-ripple"><div></div><div></div></div></center>
<br><br>
<center>
<div class="lds-ripple">
<div></div>
<div></div>
</div>
<div style="display: none; color: grey;" id="imageUploadInfo">
Uploading image -/-
</div>
</center>
</step>
</div>
</div>
@@ -139,49 +160,101 @@
</aside>
<script type="text/javascript">
function noRestore(){
function noRestore() {
off();
Cookies.remove("tempStore")
}
function restoreFunc(){
try{
function restoreFunc() {
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("type").value = dataBlock["type"]
document.getElementById("visit").value = dataBlock["visit"]
document.getElementById("pepl").value = dataBlock["pepl"]
document.getElementById("weig").value = dataBlock["weig"]
document.getElementById("manuf").value = dataBlock["manuf"]
document.getElementById("model").value = dataBlock["model"]
document.getElementById("flor").value = dataBlock["flor"]
document.getElementById("description").value = dataBlock["description"]
}catch(ex){
} catch (ex) {
dataBlock = {}
}
}
off()
}
dataBlock = Cookies.get("tempStore");
if(dataBlock == undefined){
if (dataBlock == undefined) {
dataBlock = {};
}else{
on()
} else {
on()
}
var currentPage = 0;
function saveValues(){
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["manuf"] = document.getElementById("manuf").value
dataBlock["model"] = document.getElementById("model").value
dataBlock["flor"] = document.getElementById("flor").value
dataBlock["description"] = document.getElementById("description").value
Cookies.set('tempStore', JSON.stringify(dataBlock))
}
function submit(){
function submit() {
currentPage = 6;
updateDialog()
saveValues()
const options = {
method: 'POST',
body: JSON.stringify({})
};
fetch('/api/saveNewElevatorMeta', options)
.then(response => response.json())
.then(response => {
console.log(response)
});
console.log($('#myFile'))
document.getElementById("imageUploadInfo").style.display = 'block';
var filesToSend = $('#myFile').prop('files').length;
var i = 0;
while (i < filesToSend) {
document.getElementById("imageUploadInfo").innerHTML = "Uploading image " + String(i) + "/" + String(filesToSend)
console.log("Files left to send: ", filesToSend - i)
var file_data = $('#myFile').prop('files')[i];
var form_data = new FormData();
form_data.append('file', file_data);
console.log(file_data)
if (String(file_data.type).includes("image/")) {
$.ajax({
url: '/api/uploadImage',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (data) {
alert(data);
}
});
} else {
console.log("Skipping nonimage file")
}
i++;
}
}
function updateDialog() {
if (currentPage == 0) {
@@ -218,14 +291,14 @@
containsEmpt = false;
for (const [key, value] of Object.entries(dataBlock)) {
if(value == "" || value == undefined){
if (value == "" || value == undefined) {
console.log("hi")
console.log(key, value)
containsEmpt = true;
document.getElementById("missingAlert").style.display = 'block';
}
}
if(containsEmpt == false){
if (containsEmpt == false) {
document.getElementById("missingAlert").style.display = 'none';
currentPage = 5;
}
@@ -260,7 +333,7 @@
currentPage--;
updateDialog();
}
</script>
<!-- End Document