dev foo

templates/dashboard.php

@@ -88,15 +88,26 @@ $stats = get_stats();
         </div>
 
         <!-- Area Chart Example-->
-        <!--div class="card mb-3">
+        <div class="card mb-3">
             <div class="card-header">
                 <i class="fas fa-chart-area"></i>
                 Area Chart Example</div>
             <div class="card-body">
-                <canvas id="myAreaChart" width="100%" height="30"></canvas>
+                <canvas id="frequencygraph" width="100%" height="30"></canvas>
             </div>
             <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
-        </div-->
+        </div>
+
+        <!-- Area Chart Example-->
+        <div class="card mb-3">
+            <div class="card-header">
+                <i class="fas fa-chart-area"></i>
+                Area Chart Example</div>
+            <div class="card-body">
+                <canvas id="successchart" width="100%" height="30"></canvas>
+            </div>
+            <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+        </div>
 
     </div>
     <!-- /.container-fluid -->
@@ -117,6 +128,87 @@ $stats = get_stats();
 <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-area-demo.js"></script>
 <script src="js/demo/chart-bar-demo.js"></script>
-<script src="js/demo/chart-pie-demo.js"></script>
+<script src="js/demo/chart-pie-demo.js"></script-->
+
+<?php
+foreach ($stats["graph"] as $p){
+    $labels[] = "Tag ".($p["d"]-26)." ".$p["h"].":00";
+    $data[] = $p["c"];
+}
+?>
+<script>
+    // Set new default font family and font color to mimic Bootstrap's default styling
+    Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+    Chart.defaults.global.defaultFontColor = '#292b2c';
+
+    // Area Chart Example
+    var ctx = document.getElementById("frequencygraph");
+    var myLineChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: <?php echo json_encode($labels); ?>,
+            datasets: [{
+                label: "New Items",
+                lineTension: 0.3,
+                backgroundColor: "rgba(2,117,216,0.2)",
+                borderColor: "rgba(2,117,216,1)",
+                pointRadius: 5,
+                pointBackgroundColor: "rgba(2,117,216,1)",
+                pointBorderColor: "rgba(255,255,255,0.8)",
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: "rgba(2,117,216,1)",
+                pointHitRadius: 50,
+                pointBorderWidth: 2,
+                data: <?php echo json_encode($data); ?>,
+            }],
+        },
+        options: {
+            scales: {
+                xAxes: [{
+                    time: {
+                        unit: 'date'
+                    },
+                    gridLines: {
+                        display: false
+                    }
+                }],
+                yAxes: [{
+                    ticks: {
+                        min: 0,
+                        max: 30,
+                        maxTicksLimit: 5
+                    },
+                    gridLines: {
+                        color: "rgba(0, 0, 0, .125)",
+                    }
+                }],
+            },
+            legend: {
+                display: false
+            }
+        }
+    });
+
+</script>
+
+<script>
+    // Set new default font family and font color to mimic Bootstrap's default styling
+    Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+    Chart.defaults.global.defaultFontColor = '#292b2c';
+
+    // Pie Chart Example
+    var ctx = document.getElementById("successchart");
+    var myPieChart = new Chart(ctx, {
+        type: 'pie',
+        data: {
+            labels: ["Lost", "Found", "Matched"],
+            datasets: [{
+                data: <?php echo json_encode(array($stats["lost"],$stats["found"],$stats["match"])); ?>,
+                backgroundColor: ['#ffc107', '#007bff', '#28a745', '#dc3545'],
+            }],
+        },
+    });
+
+</script>

templates/item.php

@@ -0,0 +1,149 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: jedi
+ * Date: 12/27/18
+ * Time: 4:46 AM
+ */
+?>
+
+<style>
+    .btn-file {
+        position: relative;
+        overflow: hidden;
+    }
+    .btn-file input[type=file] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        min-width: 100%;
+        min-height: 100%;
+        font-size: 100px;
+        text-align: right;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        outline: none;
+        background: white;
+        cursor: inherit;
+        display: block;
+    }
+
+    #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">Lost</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="/action.php?action=lost" id="lost_form">
+                    <p><input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo date("Y-m-d H:i:s");?>"></p>
+                    <p><input type="file" accept="image/*;capture=camera"></p>
+                    <p><input type="file" name="image" accept="image/*" capture="environment"></p>
+                    <p><input type="text" class="form-control" placeholder="KONTAKT" name="contact" autocomplete="off"></p>
+                    <p><button type="submit" class="form-control" onclick="testajax(); return false;">Submit</button></p>
+
+
+                    <div class="form-group">
+                        <img id='img-upload'/>
+                        <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 file</label>
+                                <input type="text" class="form-control" readonly>
+                            </div>
+                        </div>
+                    </div>
+
+                </form>
+            </div>
+            <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
+        </div>
+
+    </div>
+    <!-- /.container-fluid -->
+
+
+
+
+<!-- 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>

templates/lost.php

@@ -52,7 +52,7 @@
 <script>
 
     function testajax(){
-        $.post( "/ajax.php?action=add_lost", $( "#lost_form" ).serialize() ).done(function( data ) {;
+        $.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");

templates/sidebar.php

@@ -99,4 +99,10 @@
             <span>Feature Requests</span>
         </a>
     </li>
+    <li class="nav-item">
+        <a class="nav-link" href="/item/">
+            <i class="fas fa-fw fa-plus"></i>
+            <span>Item</span>
+        </a>
+    </li>
 </ul>