c3lf-system-3/templates/lost_item.php

<?php
/**
 * Created by PhpStorm.
 * User: jedi
 * Date: 12/27/18
 * Time: 4:46 AM
 */
?>


    <div class="container-fluid">

        <!-- Breadcrumbs-->
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">Lost</li>
        </ol>

        <?php
        include "templates/popups.php"
        ?>

        <!-- Area Chart Example-->
        <div class="card mb-3">
            <div class="card-header">
                <i class="fas fa-plus"></i>
                Add Lost Item
            </div>
            <div class="card-body">
                <form method="POST" action="/action.php?action=lost" 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");?>">
                    </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-->
        </div>


        <div class="card mb-3">
            <div class="card-header">
                <i class="fas fa-table"></i>
                Found Items</div>
            <div class="card-body">
                <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-->
        </div>

    </div>
    <!-- /.container-fluid -->

<script>

    function testajax(){
        $.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>

<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>

<!-- 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>