add better found_item_form
This commit is contained in:
/jedi/
parent
77cc24bd29
commit
6e6e695bb6
4 changed files with 376 additions and 2 deletions
81
ajax.php
81
ajax.php
|
|
@ -12,6 +12,8 @@ function hasval($var){
|
|||
return isset($var) && !empty($var);
|
||||
}
|
||||
|
||||
$successmsg = "added one item";
|
||||
|
||||
switch($_GET["action"]) {
|
||||
case "add_featurerequest":
|
||||
if (hasval($_POST["title"]) && hasval($_POST["desc"])) {
|
||||
|
|
@ -65,14 +67,89 @@ switch($_GET["action"]) {
|
|||
case "get_stats";
|
||||
echo json_encode(array("status"=>"ok","stats"=>get_stats()));
|
||||
break;
|
||||
case "delete_found_item":
|
||||
if(hasval($_POST["id"])) {
|
||||
/* Prepared statement, stage 1: prepare */
|
||||
if (!($stmt = $mysqli->prepare("UPDATE found_items SET del = 1 WHERE id = ?"))) {
|
||||
$errormsg = "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;
|
||||
}
|
||||
if (!$stmt->bind_param("i", $_POST["id"])) {
|
||||
$errormsg = "Binding parameters failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
if (!$stmt->execute()) {
|
||||
$errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
$successmsg = "one item deleted";
|
||||
}else{
|
||||
$errormsg = "id not set";
|
||||
}
|
||||
break;
|
||||
case "delete_lost_item":
|
||||
if(hasval($_POST["id"])) {
|
||||
/* Prepared statement, stage 1: prepare */
|
||||
if (!($stmt = $mysqli->prepare("UPDATE lost_items SET del = 1 WHERE id = ?"))) {
|
||||
$errormsg = "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;
|
||||
}
|
||||
if (!$stmt->bind_param("i", $_POST["id"])) {
|
||||
$errormsg = "Binding parameters failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
if (!$stmt->execute()) {
|
||||
$errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
$successmsg = "one item deleted";
|
||||
}else{
|
||||
$errormsg = "id not set";
|
||||
}
|
||||
break;
|
||||
case "add_found_item":
|
||||
if (hasval($_POST["was"])) {
|
||||
/* Prepared statement, stage 1: prepare */
|
||||
if (!($stmt = $mysqli->prepare("INSERT INTO found_items(was) VALUES (?)"))) {
|
||||
$errormsg = "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;
|
||||
}
|
||||
if (!$stmt->bind_param("s", $_POST["was"])) {
|
||||
$errormsg = "Binding parameters failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
if (!$stmt->execute()) {
|
||||
$errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
$item_id = $mysqli->insert_id;
|
||||
|
||||
if(isset($_FILES["image"])){
|
||||
if(!file_exists ( "upload/")){
|
||||
mkdir("upload/");
|
||||
}
|
||||
|
||||
$hash = md5($_FILES['image']['name'].time());
|
||||
if(move_uploaded_file($_FILES['image']['tmp_name'], "upload/".$hash)){
|
||||
if (!($stmt = $mysqli->prepare("INSERT INTO files(hash, item_id) VALUES (?, ?)"))) {
|
||||
$errormsg = "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;
|
||||
}
|
||||
if (!$stmt->bind_param("si", $hash, $item_id)) {
|
||||
$errormsg = "Binding parameters failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
if (!$stmt->execute()) {
|
||||
$errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
|
||||
}
|
||||
$successmsg = "upload ok";
|
||||
}else{
|
||||
$errormsg = "upload failed";
|
||||
}
|
||||
}else{
|
||||
$errormsg = "upload failed";
|
||||
}
|
||||
}else{
|
||||
$errormsg = "all values have to be set";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
$errormsg = "action unknown";
|
||||
break;
|
||||
}
|
||||
|
||||
if(empty($errormsg))
|
||||
echo json_encode(array("get"=>$_GET,"post"=>$_POST,"status"=>"ok","message"=>"added one item"));
|
||||
echo json_encode(array("get"=>$_GET,"post"=>$_POST,"files"=>$_FILES,"status"=>"ok","message"=>$successmsg));
|
||||
else
|
||||
echo json_encode(array("get"=>$_GET,"post"=>$_POST,"status"=>"error","message"=>$errormsg));
|
||||
echo json_encode(array("get"=>$_GET,"post"=>$_POST,"files"=>$_FILES,"status"=>"error","message"=>$errormsg));
|
||||
|
||||
?>
|
||||
242
templates/found_item.php
Normal file
242
templates/found_item.php
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
<?php
|
||||
/**
|
||||
* Created by PhpStorm.
|
||||
* User: jedi
|
||||
* Date: 12/27/18
|
||||
* Time: 4:46 AM
|
||||
*/
|
||||
?>
|
||||
|
||||
|
||||
<style>
|
||||
#img-upload{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Breadcrumbs-->
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">Found</li>
|
||||
<li class="breadcrumb-item active">Add</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>
|
||||
|
||||
<!-- Area Chart Example-->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-plus"></i>
|
||||
Insert Item into DB
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="#" id="lost_form">
|
||||
|
||||
<!--div-- class="form-group">
|
||||
<input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo date("Y-m-d H:i:s");?>"></p>
|
||||
</div-->
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="WAS" name="was" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<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'/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="form-control" onclick="add_found_item(); return false;">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
function add_found_item(){
|
||||
|
||||
var fileInput = document.querySelector('#inputGroupImage');
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/ajax.php?action=add_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("#lost_form"));
|
||||
form.append('title', fileInput.files[0].name);
|
||||
form.append('image', fileInput.files[0]);
|
||||
|
||||
xhr.send(form);
|
||||
|
||||
|
||||
/*
|
||||
$.post( "/ajax.php?action=add_found_item", $( "#lost_form" ).serialize() ).done(function( data ) {;
|
||||
reply = JSON.parse(data);
|
||||
if(reply.status == "ok"){
|
||||
$( "#lost_form" ).trigger("reset");
|
||||
$("#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');
|
||||
});*/
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="/vendor/jquery/jquery.min.js"></script>
|
||||
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Page level plugin JavaScript-->
|
||||
<script src="/vendor/chart.js/Chart.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="/js/sb-admin.min.js"></script>
|
||||
|
||||
<!-- Demo scripts for this page-->
|
||||
<script src="/js/demo/chart-area-demo.js"></script>
|
||||
<script src="/js/demo/chart-bar-demo.js"></script>
|
||||
<script src="/js/demo/chart-pie-demo.js"></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>
|
||||
|
|
@ -14,6 +14,17 @@
|
|||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/found_item/">
|
||||
<i class="fas fa-fw fa-archive"></i>
|
||||
<span>Found Items (NEW VERSION)</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/table/">
|
||||
<i class="fas fa-fw fa-archive"></i>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,15 @@
|
|||
<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>
|
||||
|
||||
<!-- DataTables Example -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
|
|
@ -32,6 +41,8 @@
|
|||
<th>was</th>
|
||||
<th>wann</th>
|
||||
<th>wo</th>
|
||||
<th>foto</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
|
|
@ -40,6 +51,8 @@
|
|||
<th>was</th>
|
||||
<th>wann</th>
|
||||
<th>wo</th>
|
||||
<th>foto</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
|
@ -51,6 +64,14 @@
|
|||
<td><?php echo $item["was"]; ?></td>
|
||||
<td><?php echo $item["wann"]; ?></td>
|
||||
<td><?php echo $item["wo"]; ?></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-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){
|
||||
|
|
@ -76,6 +97,29 @@
|
|||
<em>More table examples coming soon...</em>
|
||||
</p>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function delete_item(id){
|
||||
$.post( "/ajax.php?action=delete_found_item", {id: id} ).done(function( data ) {;
|
||||
reply = JSON.parse(data);
|
||||
if(reply.status == "ok"){
|
||||
//TODO tabelle aktualisieren
|
||||
$("#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');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue