add QR-Code target page

This commit is contained in:
/jedi/ 2019-02-23 10:43:45 +01:00
parent fa57cb3fd4
commit e7fd1720f2
14 changed files with 694 additions and 782 deletions

View file

@ -18,14 +18,9 @@
<li class="breadcrumb-item active">Lost</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>
<?php
include "templates/popups.php"
?>
<!-- Area Chart Example-->
<div class="card mb-3">
@ -35,11 +30,21 @@
</div>
<div class="card-body">
<form method="POST" action="/action.php?action=lost" id="lost_form">
<p><input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo date("Y-m-d H:i:s");?>"></p>
<p><input type="text" class="form-control" placeholder="WO" name="wo"></p>
<p><input type="text" class="form-control" placeholder="WAS" name="was"></p>
<p><input type="text" class="form-control" placeholder="KONTAKT" name="contact" autocomplete="off"></p>
<p><button type="submit" class="form-control" onclick="testajax(); return false;">Submit</button></p>
<div class="form-group">
<input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo date("Y-m-d H:i:s");?>">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="WO" name="wo">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="WAS" name="was">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="KONTAKT" name="contact" autocomplete="off">
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-primary" onclick="testajax(); return false;">Submit</button>
</div>
</form>
</div>
<!--div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div-->
@ -51,61 +56,10 @@
<i class="fas fa-table"></i>
Found Items</div>
<div class="card-body">
<div class="table-responsive">
<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>foto</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>was</th>
<th>wann</th>
<th>wo</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><img style="height: 48px;" src="/thumb/<?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-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 class="table-responsive" id="found_table">
<?php
include "templates/found_item_table.php";
?>
</div>
</div>
<!--div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div-->
@ -136,6 +90,180 @@
</script>
<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>
<!-- Page level plugin JavaScript-->
<script src="/vendor/chart.js/Chart.min.js"></script>