363 lines
16 KiB
PHP
363 lines
16 KiB
PHP
<?php
|
|
/**
|
|
* Created by PhpStorm.
|
|
* User: jedi
|
|
* Date: 12/27/18
|
|
* Time: 4:48 AM
|
|
*/
|
|
?>
|
|
<style>
|
|
#img-upload{
|
|
width: 100%;
|
|
}
|
|
#img-zoom{
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- Breadcrumbs-->
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="#">Dashboard</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Found</li>
|
|
</ol>
|
|
|
|
<div id="alertmessage" class="collapse alert alert-danger" role="alert">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
|
|
|
|
<div id="successmessage" class="collapse alert alert-success" role="alert">
|
|
A simple success alert—check it out!
|
|
</div>
|
|
|
|
<!-- Modal Edit Found Item -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<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="/action.php?action=edit_found" id="found_form">
|
|
<p><input type="text" readonly="true" class="form-control" placeholder="ID" name="id" id="id" value=""></p>
|
|
<p><input type="text" class="form-control" placeholder="WAS" name="was" id="was" value=""></p>
|
|
<p><input type="text" class="form-control" placeholder="WANN" name="wann" id="wann" value=""></p>
|
|
<p><input type="text" class="form-control" placeholder="WO" name="wo" id="wo" value=""></p>
|
|
<p><input type="text" class="form-control" placeholder="KISTE" name="container" id="container" value=""></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>
|
|
</div>
|
|
</div>
|
|
<img id='img-upload' src="/upload/"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" data-dismiss="modal" class="btn btn-primary form-control" onclick="edit_found_item(); return false;">Save</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="button" class="btn btn-secondary form-control" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Modal Picture Zoom -->
|
|
<div class="modal fade bd-example-modal-lg" id="exampleModal_picture" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content" >
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img id='img-zoom' src="/upload/"/>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DataTables Example -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<i class="fas fa-table"></i>
|
|
Data Table Example</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive" id="found_table">
|
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>was</th>
|
|
<th>wann</th>
|
|
<th>wo</th>
|
|
<th>kiste</th>
|
|
<th>foto</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>was</th>
|
|
<th>wann</th>
|
|
<th>wo</th>
|
|
<th>kiste</th>
|
|
<th>foto</th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<?php
|
|
foreach( get_founditems(true) as $item){
|
|
?>
|
|
<tr>
|
|
<td><?php echo $item["id"]; ?> </td>
|
|
<td><?php echo $item["was"]; ?></td>
|
|
<td><?php echo $item["wann"]; ?></td>
|
|
<td><?php echo $item["wo"]; ?></td>
|
|
<td><?php echo $item["container"];?></td>
|
|
<td><button class="btn btn-link" data-toggle="modal" data-target="#exampleModal_picture" onclick="show_picture('<?php echo $item["hash"]; ?>')"><img style="height: 48px;" src="/upload/<?php echo $item["hash"]; ?>"></button></td>
|
|
<!--<td><img style="height: 48px;" src="/upload/<?php echo $item["hash"]; ?>"></td>-->
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-secondary"><i class="fas fa-fw fa-check-circle"></i></button>
|
|
<!--<a href="/found_item_edit/<?php echo $item["id"]; ?>/" type="button" class="btn btn-outline-secondary"><i class="fas fa-fw fa-edit"></i></a>-->
|
|
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModal" onclick="fill_edit_form(<?php echo $item["id"]; ?>,'<?php echo $item["was"]; ?>','<?php echo $item["wann"]; ?>','<?php echo $item["wo"]; ?>','<?php echo $item["hash"]; ?>','<?php echo $item["container"];?>')">
|
|
<i class="fas fa-fw fa-edit"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" onclick="delete_item(<?php echo $item["id"]; ?>)"><i class="fas fa-fw fa-trash-alt"></i></button>
|
|
</div>
|
|
</td>
|
|
<!--td>
|
|
<?php
|
|
foreach(explode(",",$item["tags"]) as $tag){
|
|
?>
|
|
<span class="label label-default"><?php echo $tag; ?></span>
|
|
<?php
|
|
}
|
|
?>
|
|
</td>
|
|
<td><?php echo $item["id"]; ?></td-->
|
|
</tr>
|
|
<?php
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
|
</div>
|
|
|
|
<p class="small text-center text-muted my-5">
|
|
<em>More table examples coming soon...</em>
|
|
</p>
|
|
|
|
|
|
<script>
|
|
|
|
function fill_edit_form(id, was, wann, wo, hash, container) {
|
|
|
|
document.getElementById('id').value = id;
|
|
document.getElementById('was').value = was;
|
|
document.getElementById('wann').value = wann;
|
|
document.getElementById('wo').value = wo;
|
|
document.getElementById('container').value = container;
|
|
document.getElementById('img-upload').src = "/upload/"+hash;
|
|
|
|
}
|
|
|
|
function show_picture(hash){
|
|
document.getElementById('img-zoom').src = "/upload/"+hash;
|
|
}
|
|
|
|
function delete_item(id){
|
|
$.post( "/ajax.php?action=delete_found_item", {id: id} ).done(function( data ) {
|
|
reply = JSON.parse(data);
|
|
if(reply.status == "ok"){
|
|
update_found_table();
|
|
$("#alertmessage").collapse('hide');
|
|
$("#successmessage").html(reply.message).collapse('show');
|
|
}else{
|
|
$("#successmessage").collapse('hide');
|
|
$("#alertmessage").html(reply.message).collapse('show');
|
|
}
|
|
}).fail(function() {
|
|
$("#successmessage").collapse('hide');
|
|
$("#alertmessage").html("error").collapse('show');
|
|
});
|
|
|
|
}
|
|
|
|
function update_found_table() {
|
|
$.get( "/ajax.php?action=get_found_table" ).done(function( data ) {
|
|
$("#found_table").html(data);
|
|
|
|
}).fail(function() {
|
|
$("#successmessage").collapse('hide');
|
|
$("#alertmessage").html("error").collapse('show');
|
|
});
|
|
}
|
|
|
|
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');
|
|
update_found_table();
|
|
} 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"));
|
|
if(fileInput.files.length >0) {
|
|
form.append('title', fileInput.files[0].name);
|
|
form.append('image', fileInput.files[0]);
|
|
}
|
|
xhr.send(form);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
$(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>
|
|
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
|