From 6e6e695bb6f792a5a539ed9edffb66be36830bf0 Mon Sep 17 00:00:00 2001
From: /jedi/ <hartmann@qabel.de>
Date: Fri, 22 Feb 2019 00:10:56 +0100
Subject: [PATCH] add better found_item_form

---
 ajax.php                 |  81 ++++++++++++-
 templates/found_item.php | 242 +++++++++++++++++++++++++++++++++++++++
 templates/sidebar.php    |  11 ++
 templates/table.php      |  44 +++++++
 4 files changed, 376 insertions(+), 2 deletions(-)
 create mode 100644 templates/found_item.php

diff --git a/ajax.php b/ajax.php
index c12817e..b80c2fc 100644
--- a/ajax.php
+++ b/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));
 
 ?>
\ No newline at end of file
diff --git a/templates/found_item.php b/templates/found_item.php
new file mode 100644
index 0000000..67d7919
--- /dev/null
+++ b/templates/found_item.php
@@ -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>
\ No newline at end of file
diff --git a/templates/sidebar.php b/templates/sidebar.php
index 2dc28b0..a9c48c0 100644
--- a/templates/sidebar.php
+++ b/templates/sidebar.php
@@ -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>
diff --git a/templates/table.php b/templates/table.php
index 7dd2308..79d1143 100644
--- a/templates/table.php
+++ b/templates/table.php
@@ -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 -->