15 min, search multiple

resources/js/app.js

@@ -8,6 +8,7 @@ require('./bootstrap');
 
 window.Vue = require('vue');
 window.moment = require('moment');
+window.Cookies = require('js-cookie');
 
 /**
  * The following block of code may be used to automatically register your
@@ -31,6 +32,7 @@ Vue.component('processes-graph', require('./components/ProcessesGraph.vue').defa
 Vue.component('disk-graph', require('./components/DiskGraph.vue').default);
 Vue.component('search-input', require('./components/SearchInput.vue').default);
 Vue.component('search-multiple-input', require('./components/SearchMultipleInput.vue').default);
+Vue.component('search-table',require('./components/SearchTable').default);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you manwy begin adding components to this application

resources/js/bootstrap.js

@@ -32,9 +32,11 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 import Vue from 'vue';
 import VueDygraphs from 'vue-dygraphs';
 import VueSuggestion from 'vue-suggestion';
+import VueTableDynamic from 'vue-table-dynamic';
 
 Vue.use(VueSuggestion);
 Vue.use(VueDygraphs);
+Vue.use(VueTableDynamic);
 
 // import Echo from 'laravel-echo';
 

resources/js/components/SearchMultipleInput.vue

@@ -1,8 +1,9 @@
 <template>
+  <form>
     <div class="row form-group">
         <label for="ssel1" class="col-sm-2">Typ</label>
         <div class="col-sm-4">
-          <select v-model="type" class="form-control" id="ssel1">
+          <select v-model="type" name="type" class="form-control" id="ssel1">
           <option value="0">Užívateľ</option>
           <option value="1">Meno PC</option>
           <option value="2">Ip adresa</option>
@@ -18,11 +19,13 @@
                           @selected="itemSelected">
           </vue-suggestion>
           <span class="input-group-append">
-              <button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
+              <button v-on:click="submit()" type="button" class="btn btn-secondary">Zobraz</button>
           </span>       
         </div>
+        <input type="hidden" name="_token" :value="csrf">
       </div>
     </div>
+  </form>
 </template>
 
 <script>
@@ -32,10 +35,14 @@ export default {
     return {
       item: {},
       type: null,
+      errors: {},
+      success: false,
+      loaded: true,
       items: [
        
       ],
       itemTemplate,
+      csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
     }
   },
   methods: {
@@ -59,6 +66,30 @@ export default {
                 console.log(error);
             });
     },
+    submit() {
+            axios.get('search/multiple', {
+                  params: {
+                  type: this.type,
+                  search: this.item.name
+                  }
+              })
+              .then((response) => {
+                
+                let data = [];
+                data.push(['IP Adresa','Meno PC','Uzivatel','Od','Do']);
+                for (var index = 0; index < response.data.length; ++index) {
+                  let row = response.data[index];
+                  data.push([row.ip, row.comp, row.name, moment(row.f).format('DD.MM.YYYY HH:mm'), moment(row.t).format('D.MM.YYYY HH:mm')]);
+                }
+                console.log(data);
+                this.$parent.$refs.table.params.data = data;
+
+              })
+              .catch(function (error) {
+                  console.log(error);
+              });
+
+    }
   },
 };
 </script>

resources/js/components/SearchTable.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="table" style="width: 100%">
+    <vue-table-dynamic :params="params"
+                       @select="onSelect" ></vue-table-dynamic>
+  </div>
+</template>
+
+<script>
+import VueTableDynamic from 'vue-table-dynamic'
+
+function sleep (time) {
+         return new Promise((resolve) => setTimeout(resolve, time));
+    }
+
+export default {
+  name: 'ip-table',
+  props: ['table_data'],
+  data() {
+    return {
+      params: {
+        data: [],
+        header: 'row',
+        showCheck: true,
+      }
+    }
+  },
+  mounted: function () {
+    // `this` points to the vm instance
+    console.log('created TABLE');
+  },
+   methods: {
+    onSelect (isChecked, index, data) {
+      console.log('onSelect: ', isChecked, index, data);
+      console.log('Selected:',data[1]);
+      Cookies.set('computer',data[1]);
+      console.log('Checked Data:', this.$refs.table.getCheckedRowDatas(true))
+     },
+   },
+  components: { VueTableDynamic }
+}
+
+</script>

resources/sass/_suggest.scss

@@ -29,6 +29,7 @@
     border-top: none;
     max-height: 400px;
     overflow-y: auto;
+    z-index: 100;
     border-bottom: 1px solid #023d7b;
 }
 .vue-suggestion .vs__list .vs__list-item {

resources/views/lastactive.blade.php

@@ -0,0 +1,43 @@
+@extends('master')
+
+@section('title')
+        <div class="title m-b-md">
+            Last active in 15 min
+        </div>
+@stop
+
+@section('links')
+        <div class="links">
+            <a href="{{ url('/') }}">Monitoring</a>
+        </div>                    
+@stop
+
+@section('content')
+@isset($data)
+<table class="table">
+    <thead class="thead-dark">
+      <tr>
+        <th scope="col">IP</th>
+        <th scope="col">Meno PC</th>
+        <th scope="col">Užívateľ</th>
+        <th scope="col">Od</th>
+        <th scope="col">Do</th>
+      </tr>
+    </thead>
+    <tbody>
+
+        @foreach ($data as $r)
+        <tr>
+        <th scope="row">{{$r->ip}}</th>
+        <td>{{$r->comp}}</td>
+        <td>{{$r->name}}</td>
+        <td>{{$r->f}}</td>
+        <td>{{$r->t}}</td>
+        </tr>
+        @endforeach
+    
+    </tbody>
+  </table>
+@endisset
+
+@stop

resources/views/master.blade.php

@@ -12,6 +12,11 @@
 
         <!-- Styles -->
         <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+        
+        <!-- CSRF -->
+        @section('head')
+    
+        @show
 
         <style>
             html, body {
@@ -97,6 +102,7 @@
 
                 @section('links')
                 <div class="links">
+                    <a href="{{ url('/15min') }}">15min</a>
                     <a href="{{ url('/search') }}">Search</a>
                 </div>                    
                 @show

resources/views/search.blade.php

@@ -1,5 +1,9 @@
 @extends('master')
 
+@section('head')
+<meta name="csrf-token" content="{{ csrf_token() }}">
+@stop
+
 @section('title')
         <div class="title m-b-md">
             Search monitoring
@@ -14,8 +18,41 @@
 
 @section('content')
 <div id="app">
-            <search-multiple-input></search-multiple-input>
+            <search-multiple-input ref="search"></search-multiple-input>
+            <search-table :data="table_data" ref="table"></search-table>
 </div>
+
+@isset($data)
+<table class="table">
+    <thead class="thead-dark">
+      <tr>
+        <th scope="col">IP</th>
+        <th scope="col">Meno PC</th>
+        <th scope="col">Užívateľ</th>
+        <th scope="col">Od</th>
+        <th scope="col">Do</th>
+      </tr>
+    </thead>
+    <tbody>
+
+        @foreach ($data as $r)
+        <tr>
+        <th scope="row">{{$r->ip}}</th>
+        <td>{{$r->comp}}</td>
+        <td>{{$r->name}}</td>
+        <td>{{$r->f}}</td>
+        <td>{{$r->t}}</td>
+        </tr>
+        @endforeach
+    
+    </tbody>
+  </table>
+
+
+
+</div>
+@endisset
+
 <script>
     $(document).ready( function() {
     
@@ -26,11 +63,15 @@
         var app = new Vue({
             el: "#app",
             data: {
-                counter: 0
+                counter: 0,
+                table_data: []
             },
             methods: {
                 
             },
+            mounted: function() {
+              console.log("START TABLE");
+            } 
             
         });
 

resources/views/welcome.blade.php

@@ -28,7 +28,7 @@
                         </div>
 
                         <div class="form-group col-sm-4">
-                            <div class='input-group time' id='datetimepicker2'>
+                            <div class='input-group time' id='search_input'>
                                 <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>
@@ -51,6 +51,7 @@
 
                   <script>
                     $(document).ready( function() {
+                        Cookies.set('test','test2');
                     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"},
@@ -62,6 +63,7 @@
                          return new Promise((resolve) => setTimeout(resolve, time));
                     }
                     
+                        
                         var app = new Vue({
                             el: "#app",
                             data: {
@@ -71,6 +73,9 @@
                                 to_date:null,
                                 counter: 0
                             },
+                            mounted: function () {
+                                console.log('MOUNTED');
+                            },
                             methods: {
                                 changeDisplay: function (key) {
                                     for (s in settings) {
@@ -96,6 +101,7 @@
                                             }
                                         })
                                         .then(function (response) {
+        
                                             for (s in app.settings) {
                                                 app.settings[s].show = true;
                                             }