Dashboard.vue

Kimmy Proof 


<style>

</style>

<template>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Dashboard</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-layers pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: Last 24 Hours</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</h2>
                <span class="label label-success"> +11% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-paypal pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: 7 Days</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</span>
                </h2>
                <span class="label label-danger"> -29% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-chart pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: Unique Plates</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</span>
                </h2>
                <span class="label label-pink"> 0% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-rocket pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: All Time</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</h2>
                <span class="label label-warning"> +89% </span> <span class="text-muted">Last year</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="card-box">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-md-12">
                        <h4 class="header-title m-t-0">Line Chart</h4>
                        <chartjs-line :labels="labels" :data="data" :bind="true"></chartjs-line>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card-box">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-md-12">
                        <h4 class="header-title m-t-0">Recent Detections</h4>
                        <br>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Plate</th>
                                    <th>Time Detected</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="plate in plateDetectionsPlates">
                                    <td>{{ plate.plate}}</td>
                                    <td>{{ plate.created_at | moment}}</td>
                                    <td>
                                        <router-link to="/plate/" class="btn btn-info waves-effect waves-light btn-sm"><i class="fa fa-wrench"></i></router-link>
                                        <router-link to="/plate/" class="btn btn-danger waves-effect waves-light btn-sm"><i class="fa fa-warning"></i></router-link>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>    
    import Chart from 'chart.js';
    export default {
        data() {
            return {
                tokens: [],
                plateDetectionsWeek: [],
                plateDetectionsPlates: [],
                labels: ["6 Days ago", "5 Days ago", "4 Days ago", "3 Days ago", "2 Days ago", "1 Day ago", "Today"],
                data: []
            };
        },
        mounted() {
            this.prepareComponent();
        },
        filters: {
            moment: function (date) {
                return moment(date).fromNow();
            }
        },
        methods: {
            prepareComponent() {
                this.getDetectionWeek(7);
                this.getDetectionPlates(7);
            },
            moment: function () {
                return moment();
            },
            getDetectionWeek($days) {
                axios.get('/api/plate/detections')
                    .then(response => {
                        this.plateDetectionsWeek = response.data;
                        this.parseDetectionsforChart();
                    });
            },
            getDetectionPlates($days) {
                axios.get('/api/plate/detections/plates')
                    .then(response => {
                        this.plateDetectionsPlates = response.data;
                    });
            },
            parseDetectionsforChart() {
                var one = 0;
                var two = 0;
                var three = 0;
                var four = 0;
                var five = 0;
                var six = 0;
                var seven = 0;
                var current = moment();

                this.plateDetectionsWeek.forEach(function(index) {
                    var date = moment(index['created_at']);
                    console.log(current);
                    console.log(date);
                    var difference = current.diff(date, 'days');
                    if(difference == 0) {
                        one++;
                    } else if(difference == 1) {
                        two++;
                    } else if(difference == 2) {
                        three++;
                    } else if(difference == 3) {
                        four++;
                    } else if(difference == 4) {
                        five++;
                    } else if(difference == 5) {
                        six++;
                    } else if(difference == 6) {
                        seven++;
                    }
                });
                this.data = [seven, six, five, four, three, two, one];
            }
        }
    }
</script>