c3lf-system-3/templates/found_item_edit.php
2019-02-24 12:27:58 +01:00

160 lines
No EOL
5.1 KiB
PHP

<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-edit"></i>
Edit Item
</div>
<div class="card-body">
<form method="POST" action="" id="found_form">
<p><input type="text" readonly="true" class="form-control" placeholder="ID" name="id" value="<?php echo $item["id"]; ?>"></p>
<p><input type="text" class="form-control" placeholder="UID" name="uid" value="<?php echo $item["uid"]; ?>"></p>
<p><input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo $item["date"]; ?>"></p>
<p><input type="text" class="form-control" placeholder="KISTE" name="container" value="<?php echo $item["container"]; ?>"></p>
<p><input type="text" class="form-control" placeholder="WAS" name="was" value="<?php echo $item["was"]; ?>"></p>
<div class="form-group">
<div class="input-group">
<div class="custom-file btn-file">
<input type="file" class="custom-file-input" id="inputGroupImage" name="image" accept="image/*" capture="environment">
<label class="custom-file-label" for="inputGroupImage">Choose Image</label>
<input type="text" class="form-control" readonly>
</div>
</div>
<img id='img-upload' src="/upload/<?php echo $item["hash"]; ?>"/>
</div>
<p><button type="submit" class="form-control" onclick="edit_found_item(); return false;">Save</button></p>
</form>
</div>
</div>
<script>
function edit_found_item(){
var fileInput = document.querySelector('#inputGroupImage');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/ajax.php?action=edit_found_item');
xhr.upload.onprogress = function(e)
{
/*
* values that indicate the progression
* e.loaded
* e.total
*/
$("#alertmessage").collapse('hide');
$("#successmessage").html((100*e.loaded/e.total)+"%").collapse('show');
console.log("progress");
console.log(e);
};
xhr.upload.onabort = function (e) {
console.log("abort");
console.log(e);
};
xhr.upload.onload = function (e) {
console.log("load");
console.log(e);
};
xhr.upload.ontimeout = function (e) {
console.log("timeout");
console.log(e);
};
xhr.upload.onerror = function (e) {
console.log("error");
console.log(e);
$("#successmessage").collapse('hide');
$("#alertmessage").html("error").collapse('show');
};
xhr.onload = function(e)
{
console.log("foo load");
console.log(e);
reply = JSON.parse(xhr.responseText);
console.log(reply);
if(reply.status == "ok"){
$( "#lost_form" ).trigger("reset");
$('#img-upload').attr('src', "");
$("#alertmessage").collapse('hide');
$("#successmessage").html(reply.message).collapse('show');
}else{
$("#successmessage").collapse('hide');
$("#alertmessage").html(reply.message).collapse('show');
}
};
// upload success
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status != 200) {
reply = JSON.parse(xhr.responseText);
console.log(reply);
$("#successmessage").collapse('hide');
$("#alertmessage").html(reply.message).collapse('show');
}
}else{
console.log(xhr.readyState);
}
}
var form = new FormData(document.querySelector("#found_form"));
form.append('title', fileInput.files[0].name);
form.append('image', fileInput.files[0]);
xhr.send(form);
}
$(document).ready( function() {
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$('.btn-file :file').on('fileselect', function(event, label) {
var input = $(this).parents('.input-group').find(':text'),
log = label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-upload').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputGroupImage").change(function(){
readURL(this);
});
});
</script>