Implement Popup Window for Edit Found Items

ajax.php

@@ -7,6 +7,7 @@
  */
 
 include "backend.php";
+include "functions.php";
 
 function hasval($var){
     return isset($var) && !empty($var);
@@ -102,10 +103,10 @@ switch($_GET["action"]) {
         }
         break;
     case "edit_found_item":
-        if(hasval($_POST["id"]) && hasval($_POST["was"])  && hasval($_POST["wann"])) {
+        if(hasval($_POST["id"]) && hasval($_POST["was"])) {
             /* Prepared statement, stage 1: prepare */
             $was=$_POST["was"];
-            if (!($stmt = $mysqli->prepare("UPDATE found_items SET was=?, wo=?, `date`=? WHERE id = ?"))) {
+            if (!($stmt = $mysqli->prepare("UPDATE found_items SET was=?, wo=?, wann=? WHERE id = ?"))) {
                 $errormsg = "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;
             }
             if (!$stmt->bind_param("sssi", $_POST["was"] , $_POST["wo"], $_POST["wann"], $_POST["id"])) {
@@ -115,7 +116,9 @@ switch($_GET["action"]) {
                 $errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
             }
 
-            if(isset($_FILES["image"])){
+            $successmsg = "one item edited";
+
+            if(isset($_FILES["image"])&& hasval($_FILES["image"]["tmp_name"])){
                 if(!file_exists ( "upload/")){
                     mkdir("upload/");
                 }
@@ -132,11 +135,11 @@ switch($_GET["action"]) {
                         $errormsg = "Execute failed: (" . $stmt->errno . ") " . $stmt->error;
                     }
                     $successmsg = "one item edited";
+
                 }else{
                     $errormsg = "upload failed";
                 }
             }else{
-                $errormsg = "upload failed";
             }
 
 
@@ -179,12 +182,73 @@ switch($_GET["action"]) {
                     $errormsg = "upload failed";
                 }
             }else{
-                $errormsg = "upload failed";
             }
         }else{
             $errormsg = "all values have to be set";
         }
         break;
+    case "get_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>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="/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"]; ?>')">
+                                <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>
+    <?php
+        exit;
+        break;
     default:
         $errormsg = "action unknown";
         break;

functions.php

@@ -0,0 +1,93 @@
+<?php
+function auth(){
+    if(!isset($_SERVER['PHP_AUTH_USER']))
+        return false;
+    if(!isset($_SERVER['PHP_AUTH_PW']))
+        return false;
+    if($_SERVER['PHP_AUTH_USER']!="c3cloc")
+        return false;
+    if($_SERVER['PHP_AUTH_PW']!="findetalles")
+        return false;
+    return true;
+}
+
+function get_founditems($onlyUnmatched = false){
+    global $mysqli;
+    if ($onlyUnmatched) {
+        $res = $mysqli->query("SELECT distinct found_items.*, files.hash  FROM (SELECT files.* from files ORDER BY files.id DESC LIMIT 100000) as files, found_items LEFT JOIN matches ON found_items.id = matches.f_id WHERE  found_items.del = 0 AND files.item_id = found_items.id AND matches.f_id  IS NULL GROUP BY files.item_id ORDER BY found_items.id DESC");
+    } else {
+        $res = $mysqli->query("SELECT found_items.*, files.hash FROM (SELECT files.* from files ORDER BY files.id DESC LIMIT 100000) as files, found_items WHERE files.item_id = found_items.id AND found_items.del = 0 GROUP BY files.item_id ORDER BY found_items.id ASC");
+    }
+    $ret = array();
+    while ($row = $res->fetch_assoc()) {
+        $ret[] = $row;
+    }
+    return $ret;
+}
+
+function get_lostitems($onlyUnmatched = false){
+    global $mysqli;
+    if ($onlyUnmatched) {
+        $res = $mysqli->query("SELECT lost_items.* FROM lost_items LEFT JOIN matches ON lost_items.id = matches.l_id WHERE lost_items.del = 0 AND matches.l_id IS NULL ORDER BY lost_items.id DESC");
+    } else {
+        $res = $mysqli->query("SELECT * FROM lost_items WHERE lost_items.del = 0 ORDER BY id ASC");
+    }
+    $ret = array();
+    while ($row = $res->fetch_assoc()) {
+        $ret[] = $row;
+    }
+    return $ret;
+}
+
+function get_founditem($id){
+    global $mysqli;
+
+    $res = $mysqli->query("SELECT * FROM found_items, files WHERE found_items.id = $id AND found_items.id = files.item_id ORDER BY files.id DESC");
+
+    $ret = array();
+    while ($row = $res->fetch_assoc()) {
+        $ret[] = $row;
+    }
+    return $ret;
+}
+
+function get_matches(){
+    global $mysqli;
+    $res = $mysqli->query("SELECT matches.id AS id, matches.f_id as f_id, matches.l_id as l_id, lost.was as l_desc, items.was as f_desc "
+        ."FROM lost, items, matches WHERE lost.id = matches.l_id and items.id = matches.f_id ORDER BY matches.id ASC;");
+    $ret = array();
+    while ($row = $res->fetch_assoc()) {
+        $ret[] = $row;
+    }
+    return $ret;
+}
+
+function get_stats(){
+    global $mysqli;
+    $ret = array();
+    $ret["lost"]=0;
+    $ret["found"]=0;
+
+
+
+    $res = $mysqli->query("select hour(date) as h, day(date) as d, count(date) as c from items group by h, d order by d, h");
+    $ret["graph"] = array();
+    while ($row = $res->fetch_assoc()) {
+        $ret["graph"][] = $row;
+    }
+    $res = $mysqli->query("SELECT COUNT(*) AS c FROM lost_items WHERE lost_items.del = 0 ORDER BY id ASC");
+    if ($row = $res->fetch_assoc()) {
+        $ret["lost"] = $row["c"];
+    }
+    $res = $mysqli->query("SELECT COUNT(*) AS c FROM found_items WHERE found_items.del = 0 ORDER BY id ASC");
+    if ($row = $res->fetch_assoc()) {
+        $ret["found"] = $row["c"];
+    }
+    $res = $mysqli->query("SELECT COUNT(*) AS c FROM matches ORDER BY id ASC");
+    if ($row = $res->fetch_assoc()) {
+        $ret["match"] = $row["c"];
+    }
+    $ret["unmatched"] = $ret["found"] + $ret["lost"] - 2 * $ret["match"];
+    return $ret;
+}
+?>

index.php

@@ -7,98 +7,8 @@
  */
 
 include "backend.php";
+include "functions.php";
 
-function auth(){
-    if(!isset($_SERVER['PHP_AUTH_USER']))
-        return false;
-    if(!isset($_SERVER['PHP_AUTH_PW']))
-        return false;
-    if($_SERVER['PHP_AUTH_USER']!="c3cloc")
-        return false;
-    if($_SERVER['PHP_AUTH_PW']!="findetalles")
-        return false;
-    return true;
-}
-
-function get_founditems($onlyUnmatched = false){
-    global $mysqli;
-    if ($onlyUnmatched) {
-        $res = $mysqli->query("SELECT distinct found_items.*, files.hash  FROM (SELECT files.* from files ORDER BY files.id DESC LIMIT 100000) as files, found_items LEFT JOIN matches ON found_items.id = matches.f_id WHERE  found_items.del = 0 AND files.item_id = found_items.id AND matches.f_id  IS NULL GROUP BY files.item_id ORDER BY found_items.id DESC");
-    } else {
-        $res = $mysqli->query("SELECT found_items.*, files.hash FROM (SELECT files.* from files ORDER BY files.id DESC LIMIT 100000) as files, found_items WHERE files.item_id = found_items.id AND found_items.del = 0 GROUP BY files.item_id ORDER BY found_items.id ASC");
-    }
-    $ret = array();
-    while ($row = $res->fetch_assoc()) {
-        $ret[] = $row;
-    }
-    return $ret;
-}
-
-function get_lostitems($onlyUnmatched = false){
-    global $mysqli;
-    if ($onlyUnmatched) {
-        $res = $mysqli->query("SELECT lost_items.* FROM lost_items LEFT JOIN matches ON lost_items.id = matches.l_id WHERE lost_items.del = 0 AND matches.l_id IS NULL ORDER BY lost_items.id DESC");
-    } else {
-        $res = $mysqli->query("SELECT * FROM lost_items WHERE lost_items.del = 0 ORDER BY id ASC");
-    }
-    $ret = array();
-    while ($row = $res->fetch_assoc()) {
-        $ret[] = $row;
-    }
-    return $ret;
-}
-
-function get_founditem($id){
-    global $mysqli;
-
-    $res = $mysqli->query("SELECT * FROM found_items, files WHERE found_items.id = $id AND found_items.id = files.item_id ORDER BY files.id DESC");
-
-    $ret = array();
-    while ($row = $res->fetch_assoc()) {
-        $ret[] = $row;
-    }
-    return $ret;
-}
-
-function get_matches(){
-    global $mysqli;
-    $res = $mysqli->query("SELECT matches.id AS id, matches.f_id as f_id, matches.l_id as l_id, lost.was as l_desc, items.was as f_desc "
-                                  ."FROM lost, items, matches WHERE lost.id = matches.l_id and items.id = matches.f_id ORDER BY matches.id ASC;");
-    $ret = array();
-    while ($row = $res->fetch_assoc()) {
-        $ret[] = $row;
-    }
-    return $ret;
-}
-
-function get_stats(){
-    global $mysqli;
-    $ret = array();
-    $ret["lost"]=0;
-    $ret["found"]=0;
-
-
-
-    $res = $mysqli->query("select hour(date) as h, day(date) as d, count(date) as c from found_items group by h, d order by d, h");
-    $ret["graph"] = array();
-    while ($res && $row = $res->fetch_assoc()) {
-        $ret["graph"][] = $row;
-    }
-    $res = $mysqli->query("SELECT COUNT(*) AS c FROM lost_items WHERE lost_items.del = 0 ORDER BY id ASC");
-    if ($res && $row = $res->fetch_assoc()) {
-        $ret["lost"] = $row["c"];
-    }
-    $res = $mysqli->query("SELECT COUNT(*) AS c FROM found_items WHERE found_items.del = 0 ORDER BY id ASC");
-    if ($res && $row = $res->fetch_assoc()) {
-        $ret["found"] = $row["c"];
-    }
-    $res = $mysqli->query("SELECT COUNT(*) AS c FROM matches ORDER BY id ASC");
-    if ($res && $row = $res->fetch_assoc()) {
-        $ret["match"] = $row["c"];
-    }
-    $ret["unmatched"] = $ret["found"] + $ret["lost"] - 2 * $ret["match"];
-    return $ret;
-}
 
 if(file_exists("currentgithash"))
     $hash = file_get_contents("currentgithash");

templates/table.php

@@ -6,7 +6,11 @@
  * Time: 4:48 AM
  */
 ?>
-
+    <style>
+         #img-upload{
+         width: 100%;
+         }
+    </style>
 
     <div class="container-fluid">
 
@@ -27,13 +31,86 @@
             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">&times;</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>
+
+                                    <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" 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">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <img id='img-upload'  src="/upload/"/>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Save changes</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">
+                <div class="table-responsive" id="found_table">
                     <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                         <thead>
                         <tr>
@@ -60,15 +137,19 @@
                         foreach( get_founditems(true) as $item){
                             ?>
                             <tr>
-                                <td><?php echo $item["id"]; ?></td>
+                                <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="/upload/<?php echo $item["hash"]; ?>"></td>
+                                <td><button style="background: url(/upload/<?php echo $item["hash"]; ?>)" ... /></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>
+                                        <!--<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"]; ?>')">
+                                            <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>
@@ -100,11 +181,30 @@
 
         <script>
 
+            function fill_edit_form(id, was, wann, wo, hash) {
+
+                document.getElementById('id').value = id;
+                document.getElementById('was').value = was;
+                document.getElementById('wann').value = wann;
+                document.getElementById('wo').value = wo;
+                document.getElementById('img-upload').src = "/upload/"+hash;
+
+                /*document.charset = "UTF-8";
+                document.open("text/html");
+                document.write("<html>");
+                document.write("<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><\/head>");
+                document.write("<body>");
+                document.write(PaketL + PaketB + PaketH + Raum);
+                document.write("<\/body><\/html>");
+                document.close();*/
+
+            }
+
             function delete_item(id){
-                $.post( "/ajax.php?action=delete_found_item", {id: id} ).done(function( data ) {;
+                $.post( "/ajax.php?action=delete_found_item", {id: id} ).done(function( data ) {
                     reply = JSON.parse(data);
                     if(reply.status == "ok"){
-                        //TODO tabelle aktualisieren
+                        update_found_table();
                         $("#alertmessage").collapse('hide');
                         $("#successmessage").html(reply.message).collapse('show');
                     }else{
@@ -118,6 +218,142 @@
 
             }
 
+            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>