c3lf-system-3/templates/table.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">&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>
                                    <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">&times;</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 -->