@extends('master')

@section('content')
                <div id="app">
                    <template>
                    <div class="links">
                        <a v-bind:class="{ linkactive: s.show }" v-for="(s,key) in settings" v-on:click="changeDisplay(key)" >@{{ s.name }}</a>
                    </div>


                    <div class="row">
                        <div class="form-group col-sm-4">
                            <div class='input-group time' id='datetimepicker1'>
                                <datetime type="datetime" input-class="form-control" placeholder="Od" v-model="from_date"></datetime>    
                                <span class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </span>       
                            </div>
                        </div>

                        <div class="form-group col-sm-4">
                            <div class='input-group time' id='datetimepicker2'>
                                <datetime type="datetime" input-class="form-control" placeholder="Do" v-model="to_date"></datetime>
                                <span class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </span>       
                            </div>
                        </div>

                        <div class="form-group col-sm-4">
                            <div class='input-group time' id='datetimepicker2'>
                                <search-input ref="search" placeholder="Uživateľ"></search-input>
                                <span class="input-group-append">
                                    <button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
                                </span>       
                            </div>
                        </div>
                    </div>

                    <div v-if="counter > 0" :key="counter">
                        <network-graph v-show="settings['network'].show" :raw_data="chartData"></network-graph>
                        <temp-graph ref="temp" v-show="settings['temp'].show" :raw_data="chartData" style="display: block; "></temp-graph>
                        <memory-graph v-show="settings['memory'].show" :raw_data="chartData" style="display: block; "></memory-graph>
                        <load-graph v-show="settings['load'].show" :raw_data="chartData"></load-graph>
                        <processes-graph v-show="settings['processes'].show" :raw_data="chartData"></processes-graph>
                        <disk-graph v-show="settings['disk'].show" :raw_data="chartData"></disk-graph>
                    </div>

                    </template>   
                </div>

                  <script>
                    $(document).ready( function() {
                    var settings = { "network": { name:"Network",show: false, prefix: "netstat",suffix: { "recv": "Received", "sent": "Send Bytes" }, units:"B"},
                                      "temp": {name:"Temerature",show: false,prefix: null,units:"C"},
                                      "memory": {name:"Memory",show: false,prefix:"memory", suffix: {"free":"Free Memory", "total": "Total Memory","used":"Used Memory"},units: "KB"},
                                      "load": {name:"Load",show: false, prefix:null, units:"%"},
                                      "disk": {name:"Disk",show: false,prefix:"disk",suffix: {"free":"Free Memory", "total": "Total Memory","used":"Used Memory"}, units:"MB"},
                                      "processes": {name:"Processes",show:false,prefix: null,units:""}};

                    function sleep (time) {
                         return new Promise((resolve) => setTimeout(resolve, time));
                    }
                    
                        var app = new Vue({
                            el: "#app",
                            data: {
                                chartData: {},
                                settings: settings,
                                from_date: null,
                                to_date:null,
                                counter: 0
                            },
                            methods: {
                                changeDisplay: function (key) {
                                    for (s in settings) {
                                        settings[s].show = false; 
                                    };
                                    settings[key].show = true;
                                    console.log(key);
                                },
                                displayResults: function () {
                                    
                                    if ("id" in this.$refs.search.item && this.from_date) {
                                        var computer_id = this.$refs.search.item.id;
                                    } else {
                                        return;
                                    }

                                    
                                    axios.get('{{ url('/data') }}', {
                                            params: {
                                            computer_id: computer_id,
                                            from: this.from_date,
                                            to: this.to_date
                                            }
                                        })
                                        .then(function (response) {
                                            for (s in app.settings) {
                                                app.settings[s].show = true;
                                            }
                                            
                                            app.chartData = response.data;
                                            app.counter += 1;
                                            
                                            sleep(1000).then(() => {
                                                for (s in app.settings) {
                                                  app.settings[s].show = false;
                                                }
                                                app.settings["network"].show = true;
                                            });
   
                                        })
                                        .catch(function (error) {
                                            console.log(error);
                                        });

                                }
                            },
                            
                        });

                    


            });
                  </script>
@stop
