15 min, search multiple

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>